add task layout_moyo_header #6078
Conversation
There was a problem hiding this comment.
Your code is almost there! 🎉 However, there are a few critical issues that need addressing before we can approve it. Specifically, the CSS file should include a fallback font for Roboto, and a CSS variable should be used for the blue color as per the requirements. Additionally, please replace tag names with class selectors for styling, and ensure consistent 2-space indentation in both HTML and CSS files. Lastly, update the image path to a relative one for better compatibility. Once these are fixed, you'll be all set! Keep up the great work! 😊
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
🔄 Fix the issues, commit the changes, and then re-request my review using the Re-request review button in the Reviewers tab.
There was a problem hiding this comment.
Great job on making several improvements based on the previous review! 🎉 While there are still a few issues to address, such as using a CSS variable for the blue color #00acdc and ensuring all elements are styled using class selectors instead of tag names, your progress is commendable. Additionally, updating the image path to a relative one and adding a fallback font for 'Roboto' will enhance compatibility. These changes are important for the functionality and maintainability of your code. Keep up the good work, and make sure to address these points in future updates to continue improving your skills! 🚀
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| href="#" | ||
| > | ||
| <img | ||
| src="/src/images/logo.png" |
There was a problem hiding this comment.
The image path should be updated to a relative path for better compatibility, as previously suggested.
| @@ -1,3 +1,84 @@ | |||
| body { | |||
| font-family: Roboto, serif; | |||
There was a problem hiding this comment.
Consider adding a fallback font for 'Roboto' to ensure better compatibility across different browsers and systems.
| font-weight: 500; | ||
| list-style: none; | ||
| text-decoration: none; | ||
| color: #000; |
There was a problem hiding this comment.
Use a CSS variable for the color value '#000' to maintain consistency and ease of maintenance.
| } | ||
|
|
||
| .nav-link:hover { | ||
| color: #00acdc; |
There was a problem hiding this comment.
Use a CSS variable for the color value '#00acdc' as per the requirements.
| } | ||
|
|
||
| .is-active { | ||
| color: #00acdc; |
There was a problem hiding this comment.
Use a CSS variable for the color value '#00acdc' as per the requirements.
|
|
||
| .is-active::after { | ||
| content: ''; | ||
| background-color: #00acdc; |
There was a problem hiding this comment.
Use a CSS variable for the color value '#00acdc' as per the requirements.
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 ❗️