Added my VS Code files #3
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 |
|---|---|---|
| @@ -0,0 +1,99 @@ | ||
| <!DOCTYPE html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8"> | ||
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
| <title>Atleti</title> | ||
| <link rel="stylesheet" href="style.css"> | ||
| <link rel="stylesheet" type="text/css" href="//https://fonts.googleapis.com/css2?family=Outfit" /> | ||
| </head> | ||
| <header class="main-header"> | ||
|
|
||
| <div class="logo"> | ||
| <img src="atletilogo.png" width="200" height="200" alt="AtletiLOGO"> | ||
|
|
||
| <div class="sitename"> | ||
|
There was a problem hiding this comment. This is very minor, but I think best practice is separating words with a hyphen when naming classes, to make it easier to read. |
||
| <p class="h1">Atleti.</p> | ||
| <p class="h2"><em>The number one source for the latest tennis news</em></p> | ||
|
There was a problem hiding this comment. Suggestion here, I don't think you need to wrap the |
||
| </div> | ||
|
|
||
| <div class="navbar"> | ||
| <ul > | ||
| <li> | ||
| <a href="#">HOT TOPICS</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">RESULTS</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">QUIZZES</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">GRAND SLAMS</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">ATP TOUR 2022</a> | ||
| </li> | ||
| <li> | ||
| <a href="#">ARCHIEVE</a> | ||
| </li> | ||
| </ul> | ||
| </div> | ||
|
|
||
| </header> | ||
| <article class="main-article"> | ||
| <img class="article-pic" src="novak.jpeg" alt="Novak Djokivic" style="width:100%"> | ||
|
There was a problem hiding this comment. Really nice job with naming classes here (also big fan of Djokovic! :) |
||
| <div class="djokovic"> | ||
| <p class="heading">AUSTRALIAN OPEN - Missing Novak Djokovic after historical vaccination mess. What's next for world tennis super star?</p> | ||
|
There was a problem hiding this comment. Could be a good practice to replace the |
||
| <p class="article-text">Novak Djokovic has never hidden how much he craves ending his career with the most Grand Slam men's titles of all time. But he has been denied the chance to win a record 21st major at next week's Australian Open after his visa was revoked by the country's government. </p> | ||
| <a href=""><strong>READ MORE</strong></a> | ||
|
|
||
| <p><strong>By Jenny Fiskaare, 2022-01-18</strong></p> | ||
| </div> | ||
| </article> | ||
|
|
||
| <section class="cardbox"> | ||
| <div class="card"> | ||
| <div class="image"> | ||
| <img src="williams.jpeg" alt="Williams"> | ||
| </div> | ||
| <p>The Williams sister saga</p> | ||
| </div> | ||
|
|
||
| <div class="card"> | ||
| <div class="image"> | ||
| <img src="australian.open.jpeg" alt="AO"> | ||
| <p>Latest from AUSTRALIAN OPEN</p> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="card"> | ||
| <div class="image"> | ||
| <img src="kyrgios.jpeg" alt="Kyrgios"> | ||
|
|
||
| </div> | ||
| <p>Magic man impresses with historical serve</p> | ||
| </div> | ||
| <div class="card"> | ||
| <div class="image"> | ||
| <img src="arena.jpeg" alt="Arena"> | ||
| </div> | ||
| <p>Straight from center court</p> | ||
| </div> | ||
| </section> | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| <section class="footer"> | ||
| <div class="text-footer"> | ||
| <h1>ESTABLISHED IN 2017</h1> | ||
| </div> | ||
|
|
||
| </section> | ||
|
|
||
| </body> | ||
| </html> | ||
|
|
||
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 |
|---|---|---|
| @@ -0,0 +1,194 @@ | ||
|
|
||
| * { | ||
| box-sizing: border-box; | ||
| } | ||
|
|
||
| html, body, div, img { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| font-size: 100%; | ||
| font: inherit; | ||
| vertical-align: baseline | ||
| } | ||
| body { | ||
| line-height: 0,5; | ||
| background-color: #242424; | ||
| font-family: outfit; | ||
| align-content: center; | ||
| } | ||
|
|
||
| p{ | ||
| margin:9px; | ||
| } | ||
|
|
||
|
|
||
| } | ||
| .main-header{ | ||
| display: flex | ||
| flexbox: flex-end; | ||
| flex-wrap: wrap; | ||
| justify-content: space-around; | ||
| flex-direction: column-reverse; | ||
| background-color:#242424; | ||
| align-items: center; | ||
| } | ||
|
|
||
| @media (min-width:1024px){ | ||
| .main-header{ | ||
| flex-direction: column-reverse; | ||
| } | ||
| } | ||
|
|
||
|
|
||
| img { | ||
| align-items: center; | ||
|
|
||
| } | ||
|
|
||
| .sitename{ | ||
| text-align:center; | ||
|
There was a problem hiding this comment. Very small thing but correct indentations would make it easier to read. |
||
| color:rgb(248, 248, 248); | ||
| } | ||
| .h1{ | ||
| font-size: 55pt; | ||
| margin: -5px; | ||
| } | ||
|
|
||
| .navbar{ | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-evenly | ||
| } | ||
| ul{ | ||
| list-style: none; | ||
| overflow: hidden; | ||
| font-size: 14pt; | ||
| justify-content: flex-end; | ||
| margin-bottom: 10pt; | ||
| } | ||
|
|
||
| li { | ||
| float:left; | ||
| display: inline; | ||
| padding:2px; | ||
| font-style: italic; | ||
| font-weight: bolder; | ||
| } | ||
| li a { | ||
| display: block; | ||
| color: white; | ||
| text-align:right; | ||
| padding:10pt; | ||
| text-decoration: none; | ||
| font-weight: 300; | ||
| background-color: #F4E139; | ||
| border-radius: 2%; | ||
| } | ||
|
|
||
| li a:hover { | ||
|
There was a problem hiding this comment. I really liked the effect on the navigation bar. |
||
| background-color: #06767B; | ||
| } | ||
|
|
||
| .sitename{ | ||
| align-items: flex-end; | ||
| } | ||
|
|
||
| .main-article{ | ||
| display:flex; | ||
| flex-direction: column; | ||
| background-color: #06767B; | ||
| width: 100%; | ||
|
|
||
| } | ||
|
|
||
| .article-pic { | ||
| max-width: 100%; | ||
| height: 500px; | ||
| width: 800px; | ||
| align-items: center; | ||
| } | ||
|
|
||
| .djokovic{ | ||
| display: flex; | ||
| flex-direction: column; | ||
| margin-left: 10px; | ||
| margin-right: 10px; | ||
|
|
||
| } | ||
|
|
||
| .heading{ | ||
| font-size: 20pt; | ||
|
|
||
| } | ||
| .article-text{ | ||
| font-size: 14pt; | ||
| padding: 5pt; | ||
| } | ||
|
|
||
| img { | ||
| width: 320px; | ||
| height: 320px; | ||
| object-fit:cover; | ||
| } | ||
|
|
||
|
|
||
| .cardbox{ | ||
| display: flex; | ||
| align-items:center; | ||
| margin: 20px; | ||
| flex-wrap: wrap; | ||
| justify-content: space-around; | ||
| flex-direction: column; | ||
| background-color:#242424; | ||
| } | ||
|
|
||
| .card{ | ||
| height:400px; | ||
| width: 320px; | ||
| padding:10px; | ||
|
|
||
| background-color: #06767B; | ||
| margin-top: 5px; | ||
| margin-bottom: 5px; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .card:hover{ | ||
| background-color: #F4E139; | ||
| } | ||
|
|
||
| @media (min-width: 667px) and (max-width: 1024px){ | ||
|
There was a problem hiding this comment. I think here you are missing the transition from having a logo and the name of the page (desktop) to having just the logo (tablet) - see sketch of the assignment. There was a problem hiding this comment. I am reading the project specs again now and perhaps I am wrong here and this wasn't a fixed requirement? |
||
| .cardbox{ | ||
| flex-direction: row; | ||
|
|
||
| } | ||
| } | ||
|
|
||
| @media (min-width: 1025px){ | ||
| .cardbox{ | ||
| flex-direction: row; | ||
| flex-wrap: nowrap | ||
|
|
||
| } | ||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
| .footer{ | ||
| display:flex; | ||
| background-color:#06767B; | ||
| } | ||
|
|
||
| .text-footer{ | ||
| margin: 10pt; | ||
| } | ||
|
|
||
|
|
||
| .¨¨¨ | ||
|
|
||
|
|
||
|
|
||
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.
Really good to see that you added
alttext. I would say that the format could be improved by separating the words by a space to make it more descriptive.