add task solution #5878
add task solution #5878
Conversation
There was a problem hiding this comment.
Great job on implementing the task requirements! 🎉 Your code is well-structured and meets the core functionality needed. There are a few minor improvements suggested, like refining the alt attribute and removing the unnecessary Inter font, but these don't impact the overall functionality. Keep up the good work and consider the feedback for future enhancements! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <a | ||
| href="#" | ||
| class="header_link" | ||
| > | ||
| <img | ||
| src="images/logo.png" | ||
| alt="logo Moyo" | ||
| /> | ||
| </a> |
There was a problem hiding this comment.
Consider adding aria-label to the anchor tag for better accessibility, especially if the link text is not descriptive enough for screen readers.
| <a | ||
| class="nav_link is-active" | ||
| href="#" | ||
| > | ||
| Apple | ||
| </a> |
There was a problem hiding this comment.
The is-active class is used here. Ensure that this class is styled in your CSS to visually indicate the active state of the navigation item.
| <nav class="nav"> | ||
| <ul class="nav_list"> | ||
| <li class="nav_item"> | ||
| <a | ||
| class="nav_link is-active" | ||
| href="#" | ||
| > | ||
| Apple | ||
| </a> | ||
| </li> | ||
|
|
||
| <li class="nav_item"> | ||
| <a | ||
| class="nav_link" | ||
| href="#" | ||
| > | ||
| Samsung | ||
| </a> | ||
| </li> | ||
|
|
||
| <li class="nav_item"> | ||
| <a | ||
| class="nav_link" | ||
| href="#" | ||
| > | ||
| Smartphones | ||
| </a> | ||
| </li> | ||
|
|
||
| <li class="nav_item"> | ||
| <a | ||
| class="nav_link" | ||
| href="#" | ||
| data-qa="hover" | ||
| > | ||
| Laptops & Computers | ||
| </a> | ||
| </li> | ||
|
|
||
| <li class="nav_item"> | ||
| <a | ||
| class="nav_link" | ||
| href="#" | ||
| > | ||
| Gadgets | ||
| </a> | ||
| </li> | ||
|
|
||
| <li class="nav_item"> | ||
| <a | ||
| class="nav_link" | ||
| href="#" | ||
| > | ||
| Tablets | ||
| </a> | ||
| </li> | ||
|
|
||
| <li class="nav_item"> | ||
| <a | ||
| class="nav_link" | ||
| href="#" | ||
| > | ||
| Photo | ||
| </a> | ||
| </li> | ||
|
|
||
| <li class="nav_item"> | ||
| <a | ||
| class="nav_link" | ||
| href="#" | ||
| > | ||
| Video | ||
| </a> | ||
| </li> | ||
| </ul> | ||
| </nav> |
There was a problem hiding this comment.
Consider using semantic HTML5 elements like <nav> for the navigation section to enhance the semantic structure of the document.
| } | ||
|
|
||
| html { | ||
| font-family: Roboto, sans-serif; |
There was a problem hiding this comment.
Ensure that the font 'Roboto' is properly loaded in your HTML file, as it is being used as the primary font-family here.
| .nav_link:hover { | ||
| color: #00acdc; | ||
| } |
There was a problem hiding this comment.
The comment about disabling stylelint for no-descending-specificity suggests there might be a specificity issue. Consider reviewing your CSS selectors to ensure specificity is managed properly without needing to disable linting rules.
| .is-active { | ||
| color: var(--accent-color); | ||
| } | ||
|
|
||
| .is-active::after { | ||
| content: ''; | ||
| display: block; | ||
| position: absolute; | ||
| bottom: 0; | ||
| width: 100%; | ||
| height: 4px; | ||
| background-color: var(--accent-color); | ||
| border-radius: 8px; | ||
| } |
There was a problem hiding this comment.
The .is-active class is styled to indicate the active state of a navigation link. Ensure that this class is applied correctly in your HTML to reflect the active state visually.
❗️ Copy this Checklist to the Pull Request description after links, and put - [x] before each point after you checked it.
[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 ❗️