diff --git a/css/style.css b/css/style.css index 75e9841e..0ce5e099 100644 --- a/css/style.css +++ b/css/style.css @@ -1,8 +1,185 @@ -/** - * Add your custom styles below - * - * Remember: - * - Be organised, use comments and separate your styles into meaningful chunks - * for example: General styles, Navigation styles, Hero styles, Footer etc. - * - */ +:root{ + --bg: #faf7f5; + --bg_dark: #ddcbc0; + --text: #73736f; +} + +* { + margin: 0; + padding: 0; +} + +a{ + text-decoration: none; + font-size: inherit; + color: inherit; +} + +li{ + list-style-type: none; +} + +img{ + display: block; + max-width: 100%; + height: auto; +} + +body{ + font-family: 'Roboto', sans-serif; + font-size: 16px; + color: var(--text); + background: white; + line-height: 1.2; + display: flex; + flex-direction: column; +} + +main{ + flex-grow: 1; +} + +.container-centered { + margin: 0 auto; + padding: 0 24px; + max-width: 1024px; +} + +section{ + margin-bottom: 40px; +} + +.section_title{ + font-weight: 600; + font-size: 36px; + text-align: center; + margin-top: 30px; + margin-bottom: 30px; +} + +/* HEADER */ +.header{ + text-align: center; + padding-top: 30px; +} + +.header_title{ + margin-bottom: 20px; + font-size: 48px; +} + +.header_subtitle{ + margin-bottom: 40px; + font-weight: 300; +} + +.header nav { + background: var(--bg); + text-align: center; +} + +.header nav ul{ + display: inline-flex; + flex-wrap: wrap; + column-gap: 10px; +} + +.header nav li { + padding: 10px; +} + +.header nav li:hover { + text-decoration: underline; +} + +/* WELCOME */ + +.welcome { + padding: 30px 0; + display: flex; + align-items: flex-start; + column-gap: 30px; + margin: 0 auto; +} + +.welcome_title { + font-weight: 500; + margin-bottom: 24px; +} + +.welcome_about p { + margin-bottom: 24px; +} + +.welcome img { + width: 150px; +} + +/*ARTICLE*/ +.article { + margin-bottom: 40px; + padding-bottom: 30px; +} + +.article:first-child{ + padding-top: 30px; + border-top: 1px solid var(--bg_dark); +} + +.article_header { + margin-bottom: 16px; +} + +.article_title{ + margin-bottom: 8px; +} + +.article_meta{ + font-weight: 300; + font-style: italic; +} + +.article img{ + width: 100%; + margin-bottom: 24px; +} + +.article_content { + display: flex; + flex-direction: column; + column-gap: 24px; + row-gap: 24px; +} + +.article_link { + display: inline-block; + padding: 10px 20px; + text-transform: uppercase; + color: white; + background: var(--bg_dark); + border: 1px solid var(--bg_dark); + margin-top: 30px; +} + +.article_link:hover { + background: white; + color: var(--bg_dark); +} + +/* FOOTER */ +.footer { + background: var(--bg); + text-align: center; + padding-top: 30px; + padding-bottom: 30px; +} + +@media screen and (min-width: 700px){ + .article_content { + flex-direction: row; + } + + .article img{ + max-width: 60%; + } +} \ No newline at end of file diff --git a/images/airplane.jpg b/images/airplane.jpg new file mode 100644 index 00000000..5fc2a42e Binary files /dev/null and b/images/airplane.jpg differ diff --git a/images/barselona.jpg b/images/barselona.jpg new file mode 100644 index 00000000..65ba2349 Binary files /dev/null and b/images/barselona.jpg differ diff --git a/images/me.jpg b/images/me.jpg new file mode 100644 index 00000000..101716f0 Binary files /dev/null and b/images/me.jpg differ diff --git a/images/phuket.jpg b/images/phuket.jpg new file mode 100644 index 00000000..798423b8 Binary files /dev/null and b/images/phuket.jpg differ diff --git a/index.html b/index.html index 67dfc7f5..a7c1fa6a 100644 --- a/index.html +++ b/index.html @@ -1,22 +1,118 @@ - - + + - My Blog + My Travel Blog - - - - - - - + + + + +
+

Hello & Welcome

+

A Life of Travel

+ +
+
+
+
+ my photo +
+

Meet Iryna

+

Hi! I’m Iryna, the founder of Hello & Welcome. I’m here to help you explore this planet safely, + adventurously, and affordably.

+

Like many people, I was taught to go to college, get a job, get married, have kids and live happily + ever after. Not once did I consider that chasing the societal idea of “success” would lead me to an + unfulfilling and unhappy life. Back in 2011, I took a hiatus from my career and spent 3 months + traveling through Australia, Thailand, Cambodia, Vietnam, Bali and New Zealand and experienced the + empowerment of solo travel for the first time.

+
+
+
+

Latest Articles

+
+
+
+

28 Wonderful Things to Do in Barcelona, Spain

+

by Lauren Juliff on February 25, 2023

+
+
+ barcelona +
+

Barcelona is a vibrant, exciting city in Catalonia on Spain’s northeastern Mediterranean + coast. Aside from its spectacular seaside setting, it entices visitors with a heady mix + of culture, history, music, art, and food alongside some of the most stunning urban + architecture in the world from the likes of Antoni Gaudi.

+ Continue reading > +
+
+
+
+
+

American Airlines Fares Are Now Different Depending On Where You + Buy

+

by Gary Leff on April 4, 2023

+
+
+ airplane inside +
+

American Airlines will only sell basic economy fares directly, not through traditional or + online travel agencies. There are some cheaper fares that they reserve to their own + channels as well. But generally speaking there are two sets of fares depending where + outside of American Airlines that you book.

+ Continue reading > +
+
+
+
+
+

28 Incredible Things to Do in Phuket, Thailand

+

by Gary Leff on April 4, 2023

+
+
+ sea in phuket +
+

Surrounded by the wondrous Andaman Sea, Phuket is Thailand’s largest island and much more + than a waypoint on your travels to Koh Phi Phi. Phuket Island presents a mix of vibrant + small cities packed with culture and delicious eats, along with exotic national parks + complete with waterfalls and off-shore adventures.

+ Continue reading > +
+
+
+
+
+
+
+ +