This repository was archived by the owner on Jan 14, 2024. It is now read-only.
-
-
Notifications
You must be signed in to change notification settings - Fork 482
London Class 10 - Iryna Lynyk - HTML/CSS I - Coursework - Week 1 #341
Open
IrynaLypnyk
wants to merge
3
commits into
CodeYourFuture:master
Choose a base branch
from
IrynaLypnyk:master
base: master
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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%; | ||
| } | ||
| } | ||
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,22 +1,118 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <head> | ||
| <meta charset="UTF-8"/> | ||
| <meta | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1, shrink-to-fit=no" | ||
| name="viewport" | ||
| content="width=device-width, initial-scale=1, shrink-to-fit=no" | ||
| /> | ||
| <title>My Blog</title> | ||
| <title>My Travel Blog</title> | ||
| <link | ||
| href="//fonts.googleapis.com/css?family=Roboto:400,500,300" | ||
| rel="stylesheet" | ||
| type="text/css" | ||
| href="//fonts.googleapis.com/css?family=Roboto:400,500,300" | ||
| rel="stylesheet" | ||
| type="text/css" | ||
| /> | ||
| <link rel="stylesheet" href="css/style.css" /> | ||
| <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> | ||
| </head> | ||
| <body> | ||
| <!-- Add your HTML markup here --> | ||
| <!-- Remember: Use semantic HTML tags like <header>, <main>, <nav>, <footer>, <section> etc --> | ||
| </body> | ||
| <link rel="stylesheet" href="css/style.css"/> | ||
| <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> | ||
| </head> | ||
| <body> | ||
| <header class="header"> | ||
| <h1 class="header_title">Hello & Welcome</h1> | ||
| <h2 class="header_subtitle">A Life of Travel</h2> | ||
| <nav> | ||
| <div class="container-centered"> | ||
| <ul> | ||
| <li><a href="">Asia</a></li> | ||
| <li><a href="">Europe</a></li> | ||
| <li><a href="">The Middle East</a></li> | ||
| <li><a href="">Central America</a></li> | ||
| <li><a href="">South America</a></li> | ||
| <li><a href="">Oceania</a></li> | ||
| </ul> | ||
| </div> | ||
| </nav> | ||
| </header> | ||
| <main> | ||
| <div class="container-centered"> | ||
| <section class="welcome"> | ||
| <img src="images/me.jpg" alt="my photo"> | ||
| <div class="welcome_about"> | ||
| <h3 class="welcome_title">Meet Iryna</h3> | ||
| <p>Hi! I’m Iryna, the founder of Hello & Welcome. I’m here to help you explore this planet safely, | ||
| adventurously, and affordably.</p> | ||
| <p>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.</p> | ||
| </div> | ||
| </section> | ||
| <section> | ||
| <h3 class="section_title">Latest Articles</h3> | ||
| <div> | ||
| <article class="article"> | ||
| <header class="article_header"> | ||
| <h3 class="article_title"> 28 Wonderful Things to Do in Barcelona, Spain</h3> | ||
| <p class="article_meta">by Lauren Juliff on February 25, 2023</p> | ||
| </header> | ||
| <div class="article_content"> | ||
| <img src="images/barselona.jpg" alt="barcelona" class="article_img"/> | ||
| <div class="article_preview"> | ||
| <p>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.</p> | ||
| <a class="article_link" | ||
| href="https://www.neverendingfootsteps.com/things-to-do-barcelona-spain/" | ||
| target="_blank">Continue reading ></a> | ||
| </div> | ||
| </div> | ||
| </article> | ||
| <article class="article"> | ||
| <header class="article_header"> | ||
| <h3 class="article_title">American Airlines Fares Are Now Different Depending On Where You | ||
| Buy</h3> | ||
| <p class="article_meta">by Gary Leff on April 4, 2023</p> | ||
| </header> | ||
| <div class="article_content"> | ||
| <img src="images/airplane.jpg" alt="airplane inside" class="article_img"/> | ||
| <div class="article_preview"> | ||
| <p>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.</p> | ||
| <a class="article_link" | ||
| href="https://viewfromthewing.com/american-airlines-fares-are-now-different-depending-on-where-you-buy/" | ||
| target="_blank">Continue reading ></a> | ||
| </div> | ||
| </div> | ||
| </article> | ||
| <article class="article"> | ||
| <header class="article_header"> | ||
| <h3 class="article_title">28 Incredible Things to Do in Phuket, Thailand</h3> | ||
| <p class="article_meta">by Gary Leff on April 4, 2023</p> | ||
| </header> | ||
| <div class="article_content"> | ||
| <img src="images/phuket.jpg" alt="sea in phuket" class="article_img"/> | ||
| <div class="article_preview"> | ||
| <p>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.</p> | ||
| <a class="article_link" | ||
| href="https://www.neverendingfootsteps.com/things-to-do-phuket-thailand/" | ||
| target="_blank">Continue reading ></a> | ||
| </div> | ||
| </div> | ||
| </article> | ||
| </div> | ||
| </section> | ||
| </div> | ||
| </main> | ||
| <footer class="footer"> | ||
| <div class="container-centered"> | ||
| <span>Copyright Iryna Lypnyk © 2010-2023 All rights reserved</span> | ||
| </div> | ||
| </footer> | ||
| </body> | ||
| </html> |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice one in terms of responsiveness!