Angie - Sophia - Sel (Sapphire) #34
Conversation
| </header> | ||
|
|
||
| <section class="grid-container"> | ||
| <div class="flex-container1"> |
There was a problem hiding this comment.
You've done a great job using semantic HTML tags throughout this document! This div might be a good candidate for becoming an article tag.
| <header> | ||
| <nav class="nav-bar"> | ||
| <ul> | ||
| <li><a href="index.html">Home</a></li> | ||
| <li><a href="facts.html">Fun Facts</a></li> | ||
| </ul> | ||
| </nav> | ||
| </header> |
There was a problem hiding this comment.
HTML doesn't expect anything to come between head and body. If you look at how Chrome interprets this, it will actually move this header inside the body. That's a good place for it to go! You could combine this with your <h1>GALLERY</h1>, too:
<body>
<header>
<nav class="nav-bar">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="facts.html">Fun Facts</a></li>
</ul>
</nav>
<h1> GALLERY </h1>
</header>You'd just need to update the styling of the header and h1 to make this work for you.
| <br> | ||
| <p>Planting and harvesting native ingredients such as corn and chile peppers in chinampas… | ||
| Manually grinding grain for tortillas on stone and mortar… | ||
| <br> | ||
| <br> | ||
| <br> | ||
| Traditional Mexican cuisine embraces an entire heritage of culture dedicated to maintaining Mexico’s indigenous customs and cultural traditions.</p> |
There was a problem hiding this comment.
You might try wrapping each paragraph in a p tag and setting the margin or gap between them to achieve the visual layout you want. This is a bit more expected in modern HTML than using br tags to get space between blocks of text.
| <br> | ||
| <br> | ||
| <p id="text">This content was created by:</p> |
There was a problem hiding this comment.
It's a good idea to indent things that are siblings at the same level. The way this is currently indented, I thought the br and p tags were nested inside of the top p tag at first.
| <p>Mexican cuisine it's now internationally recognized as an Intangible Cultural Heritage of Traditional Cuisine!</p> | |
| <br> | |
| <br> | |
| <p id="text">This content was created by:</p> | |
| <p>Mexican cuisine it's now internationally recognized as an Intangible Cultural Heritage of Traditional Cuisine!</p> | |
| <br> | |
| <br> | |
| <p id="text">This content was created by:</p> |
| <h3>copyright 2023</h3> | ||
| </footer> | ||
| </body> |
There was a problem hiding this comment.
[nit] indentation. 😄
<footer>
<h3>copyright 2023</h3>
</footer>
</body>Also, since the copyright isn't really heading a section of the site, it doesn't need to be in an h3.
| <br> | ||
| <p id="text">This content was created by:</p> | ||
| <nav> |
There was a problem hiding this comment.
Are your names being used for navigation? If not, you could remove nav.
| </nav> | ||
| </header> | ||
| <h1 class="shimmer">Mexican Cuisine: A Heritage of Tradition</h1> |
There was a problem hiding this comment.
Everything after the header looks like it's basically an article. You could use that!
| nav ul li a:hover { | ||
| color: #000; | ||
| background-color: #fff; | ||
| } | ||
|
|
||
| nav { |
There was a problem hiding this comment.
[nit] Try to get spacing consistent so that the rules line up visually. When you indent, your readers may think the indented line is intended to be nested! (You may encounter SASS in industry, where nesting rules in a CSS-like file is actually allowed.)
No description provided.