Develop #5738
Develop #5738
Conversation
There was a problem hiding this comment.
Great job on meeting most of the task requirements! 🎉 While there are a few minor improvements suggested, such as wrapping the logo in a link, using a CSS variable for the blue color, and enhancing the alt text for accessibility, these do not critically impact the functionality. Keep up the good work and consider these suggestions for future enhancements! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
src/index.html
Outdated
| <header class="header"> | ||
| <img | ||
| class="logo" | ||
| src="images/logo.png" |
There was a problem hiding this comment.
Consider adding a more descriptive alt text for the logo image to improve accessibility. Instead of just 'logo', you could use something like 'Company Logo'.
| <a | ||
| href="#3" | ||
| class="nav__link" | ||
| data-qa="hover" |
There was a problem hiding this comment.
The 'data-qa' attribute is used here, which seems to be for testing purposes. Ensure this is intentional and necessary for your project.
src/style.css
Outdated
| @@ -1,3 +1,67 @@ | |||
| body { | |||
| margin: 0; | |||
| font-size: 12px; | |||
| font-family: Roboto, serif; | |||
There was a problem hiding this comment.
Consider using a fallback font like 'sans-serif' instead of 'serif' for better consistency with the 'Roboto' font, which is a sans-serif font.
| .nav__link { | ||
| color: #000; | ||
| display: block; | ||
| font-weight: 500; |
There was a problem hiding this comment.
The font-weight of 500 is used here. Ensure that this weight is available in the 'Roboto' font you are importing. If not, it might default to the nearest available weight.
DEMO LINK
TEST REPORT LINK
Header height is set in 1 place (for the links)
Content is vertically centered (for any header height)
CSS is used to show all letters in Uppercase (don't type them in HTML)
Logo is an image wrapped with a link
CSS Variable is used for a blue color
Pseudo-element is used for a blue line below the active link
Code follows all the Code Style Rules ❗️