Scotland class 5 — CSS zoo project - #74
Conversation
| <h3>Top 5 Tiger Facts</h3> | ||
| <ol> | ||
| <h2>Tiger Facts</h2> | ||
| <!-- <h3>Top 5 Tiger Facts</h3> --> |
There was a problem hiding this comment.
| <!-- <h3>Top 5 Tiger Facts</h3> --> |
Software teams normally delete commented code, so we shouldn't commit commented code
| #logo{ | ||
| border:none; | ||
| } |
There was a problem hiding this comment.
| #logo{ | |
| border:none; | |
| } |
Instead of adding border:none;, we could instead delete the border CSS below
-img {
- border: 5px solid #8075ff;
-}| justify-content: center; | ||
| align-content: center; | ||
| flex-direction: column; | ||
| transition: ease 2s; |
There was a problem hiding this comment.
| transition: ease 2s; | |
| transition: background-color 2s ease; |
The documentation says we should provide the properties in this order
| background-color: #0b3c49; | ||
| color: #f0e100; | ||
| } | ||
| .tigers h2, h3{ |
There was a problem hiding this comment.
| .tigers h2, h3{ | |
| .tigers h2, .tigers h3{ |
The h3 selector will change the colour for all h3s on the page, but the task is to only change it for the tigers section so we should update the selector to .tigers h3
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; |
There was a problem hiding this comment.
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| text-align: center; |
Alternatively, we could use text-align: center; here
| font-size: larger; | ||
|
|
||
| } | ||
| .education-container button:hover{ |
There was a problem hiding this comment.
| .education-container button:hover{ | |
| .education-container button:focus, | |
| .education-container button:hover{ |
We should add a focus style too for keyboard users who use the Tab key to move to the button
2 participants
No description provided.