add solution #6102
add solution #6102
Conversation
Ivanna-Fedor
commented
Feb 7, 2025
Ivanna-Fedor
commented
- DEMO LINK
- TEST REPORT LINK
- [x]Header height is set in 1 place (for the links)
- [x]Content is vertically centered (for any header height)
- [x]CSS is used to show all letters in Uppercase (don't type them in HTML)
- [x]Logo is an image wrapped with a link
- [x]CSS Variable is used for a blue color
- [x]Pseudo-element is used for a blue line below the active link
- [x]Code follows all the Code Style Rules ❗️
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 enhancing the alt attribute for better accessibility and refining the CSS for performance, these do not impact the core 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="images/logo.png" | ||
| alt="logo" |
There was a problem hiding this comment.
Consider using a more descriptive alt attribute for the logo image to improve accessibility. For example, alt="Moyo Logo".
| <ul class="nav__list"> | ||
| <li class="nav__link"> | ||
| <a | ||
| href="#" |
There was a problem hiding this comment.
The href attribute is set to #, which is a placeholder. Ensure to update it to point to the actual page or section when the links are functional.
| APPLE | ||
| </a> | ||
| </li> | ||
| <li class="nav__link"><a href="#">SAMSUNG</a></li> |
There was a problem hiding this comment.
The href attribute is set to #, which is a placeholder. Ensure to update it to point to the actual page or section when the links are functional.
| </a> | ||
| </li> | ||
| <li class="nav__link"><a href="#">SAMSUNG</a></li> | ||
| <li class="nav__link"><a href="#">SMARTPHONES</a></li> |
There was a problem hiding this comment.
The href attribute is set to #, which is a placeholder. Ensure to update it to point to the actual page or section when the links are functional.
| <li class="nav__link"><a href="#">SMARTPHONES</a></li> | ||
| <li class="nav__link"> | ||
| <a | ||
| href="#" |
There was a problem hiding this comment.
The href attribute is set to #, which is a placeholder. Ensure to update it to point to the actual page or section when the links are functional.
| </li> | ||
| <li class="nav__link"><a href="#">GADGETS</a></li> | ||
| <li class="nav__link"><a href="#">TABLETS</a></li> | ||
| <li class="nav__link"><a href="#">PHOTO</a></li> |
There was a problem hiding this comment.
The href attribute is set to #, which is a placeholder. Ensure to update it to point to the actual page or section when the links are functional.
| <li class="nav__link"><a href="#">GADGETS</a></li> | ||
| <li class="nav__link"><a href="#">TABLETS</a></li> | ||
| <li class="nav__link"><a href="#">PHOTO</a></li> | ||
| <li class="nav__link"><a href="#">VIDEO</a></li> |
There was a problem hiding this comment.
The href attribute is set to #, which is a placeholder. Ensure to update it to point to the actual page or section when the links are functional.
| @@ -1,3 +1,64 @@ | |||
| body { | |||
| margin: 0; | |||
| padding: 0; | |||
| font-family: Roboto, serif; | |||
There was a problem hiding this comment.
Consider using a fallback font in case 'Roboto' is not available. For example, font-family: 'Roboto', Arial, sans-serif;.
|
|
||
| .nav__link a { | ||
| text-decoration: none; | ||
| color: black; |
There was a problem hiding this comment.
Ensure that the color contrast between the text and background is sufficient for accessibility. The current color 'black' on a white background is generally good, but be mindful of other potential background colors.
|
|
||
| a.is-active, | ||
| .nav__link a:hover { | ||
| color: var(--blue-color); |
There was a problem hiding this comment.
Using CSS variables like var(--blue-color) is a good practice for maintainability. Ensure that this variable is defined in the :root selector, which it is in this case.
