Moyo header #5730
Moyo header #5730
Conversation
thalie-git
commented
Nov 25, 2024
thalie-git
commented
- 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 ❗️
There was a problem hiding this comment.
Great job on your submission! 🎉 Your code meets the core requirements of the task, and the functionality is intact. While there are a few minor improvements suggested, such as refining CSS class naming to follow BEM conventions and ensuring that all lines of code do not exceed 80 characters, these do not impact the overall functionality. Keep up the good work, and consider the feedback for future enhancements. Happy coding! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| <a | ||
| href="#" |
There was a problem hiding this comment.
The href attribute for the logo link is set to '#', which is a placeholder. Consider providing a valid URL or using JavaScript to handle the click event if it's meant to be interactive.
| <ul class="nav_list"> | ||
| <li class="nav_item"> | ||
| <a | ||
| href="#" |
There was a problem hiding this comment.
The href attribute for the navigation links is set to '#', which is a placeholder. Consider providing valid URLs for each link to improve navigation.
| <a | ||
| href="#" | ||
| 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 that this attribute is necessary for your application or remove it if not needed.
| .nav_link .is-active { | ||
| color: var(--active-link-color); | ||
| } |
There was a problem hiding this comment.
The selector .nav_link .is-active seems redundant because .is-active is already styled separately. Ensure that this selector is necessary or remove it to avoid conflicts.
