C22 Group-fansite: Ajar, Lorraine, Olga and Priyanka #5
Conversation
…mage on style.css
This reverts commit a706445.
This reverts commit 0798e9b.
This reverts commit f547f6d.
…o centering of nav tabs done.Pronouns of Mikelle change done in index.html
…-fansite Implement flex box in fun_facts. Add nav tabs to go to other pages. No centering of nav tabs done.Pronouns of Mikelle change done in index.html
…ucation, Hobbies pages with 3 links
| </head> | ||
| <body> | ||
| <header> | ||
| <div id="header"> |
There was a problem hiding this comment.
We should aim to have more unique names, especially when it comes to id tags. If you just need to select the div element that is a descendent of a header tag what kind of selector could you build?
| <header> | ||
| <div id="header"> | ||
| <h1>The ADA Hall of Fame</h1> | ||
| </div> | ||
| <div> | ||
| <ul class="main_page_links"> | ||
| <li><a href="./pages/education.html">Education</a></li> | ||
| <li><a href="./pages/hobbies.html">Hobbies</a></li> | ||
| <li><a href="./pages/fun_facts.html">Fun Facts</a></li> | ||
| </ul> | ||
| </div> |
There was a problem hiding this comment.
Since this is a navigation bar, we could put this in a nav tag.
| </header> | ||
| <main> | ||
| <section class="instructors"> | ||
| <nav class="nav_adrian"> |
There was a problem hiding this comment.
nav tags aren't usually used in this sense, this feels more like a section to me? nav tags are for links that help the user navigate to different pages on the sites.
| <h4>Instructor</h4> | ||
| </nav> | ||
| <nav class="nav_ansel"> | ||
| <img src="images/Ansel-300x300.png" alt="Hey, Ansel!" width="300" height="200"> |
There was a problem hiding this comment.
Being that you want all these img tags to have the same width and height, what could we do to make the code more DRY?
| <h4>Instructor</h4> | ||
| </nav> | ||
| <nav class="nav_ada"> | ||
| <img src="images/ada-icon.png" alt="Ada Icon" width="300" height="200"> |
There was a problem hiding this comment.
We want to make sure that we have more descriptive alt tags, especially for users who are using screen readers.
| @@ -0,0 +1,51 @@ | |||
| .education-container{ | |||
There was a problem hiding this comment.
| .education-container{ | |
| .education-container { |
| grid-template-columns: 1fr 1fr 1fr; | ||
| } | ||
|
|
||
| .ada_image{ |
There was a problem hiding this comment.
| .ada_image{ | |
| .ada_image { |
| color: blue; | ||
| } | ||
|
|
||
| nav{ |
| margin-bottom: 30px; | ||
| } | ||
|
|
||
| a:hover{ |
There was a problem hiding this comment.
| a:hover{ | |
| a:hover { |
| color: pink; | ||
| } | ||
|
|
||
| a:visited{ |
There was a problem hiding this comment.
| a:visited{ | |
| a:visited { |
No description provided.