add MoYo logo #5751
add MoYo logo #5751
Conversation
mmromanova
commented
Nov 28, 2024
mmromanova
commented
- DEMO LINK
- TEST REPORT LINK
There was a problem hiding this comment.
Great job on your submission! 🎉 Your code meets most of the task requirements, and you've implemented key features like semantic tags, CSS variables, and Flexbox effectively. While there are a few areas for improvement, such as ensuring semantic correctness in HTML structure and maintaining consistent CSS formatting, these are learning opportunities. Please review the comments to enhance your code, especially regarding accessibility and semantic structure. Keep up the good work and continue refining your skills!
✨ Please rate this review in the Platform's notification center. I will be grateful for your feedback! ✨
| > | ||
| <img | ||
| src="./images/logo.png" | ||
| alt="MOYO Logo" |
There was a problem hiding this comment.
Consider adding a more descriptive alt text for the logo image to improve accessibility. Instead of 'MOYO Logo', you could use something like 'MOYO Company Logo'.
| <div id="apple"> | ||
| <a | ||
| href="#apple" | ||
| class="menu-item is-active" |
There was a problem hiding this comment.
The 'is-active' class is used here, which suggests that this menu item is currently active. Ensure that this class is dynamically managed if the active state changes based on user interaction or page context.
| <a | ||
| href="#laptops" | ||
| class="menu-item" | ||
| data-qa="hover" |
There was a problem hiding this comment.
The 'data-qa' attribute is used here, which is typically for testing purposes. Ensure this attribute is necessary for your project requirements, and consider removing it if not needed.
| body { | ||
| margin: 0; | ||
| padding: 0; | ||
| font-family: Roboto, sans-serif; |
There was a problem hiding this comment.
Ensure that the font 'Roboto' is loaded correctly in your HTML file. If it's not loading, verify the link to Google Fonts in your HTML file.
| position: relative; | ||
| text-align: center; | ||
| text-decoration: none; | ||
| color: #000; |
There was a problem hiding this comment.
The color for the '.menu-item' is set to black (#000). Consider checking the contrast ratio to ensure it meets accessibility standards, especially if the background color is dark.
| } | ||
|
|
||
| .menu-item.is-active { | ||
| color: var(--blue-color); |
There was a problem hiding this comment.
The '.menu-item.is-active' class changes the color to the variable '--blue-color'. Ensure this color provides sufficient contrast against the background for readability.
