add solution

[mark-chep]

• 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 ❗️
[x] The Google Fonts Configuration follows requirements.

[mateacademy-ai-mentor]

Review Summary

Good effort on setting up the header structure with semantic HTML and Flexbox. However, some changes are needed because several key requirements were not met.

Here are the issues that need to be addressed:

1. Styling by Tag Name: In src/style.css, the <header> element is styled directly. The task requires styling elements with classes, not tag names (except for html and body). Please add a class to the header and use it for styling.
2. Forbidden Padding on Nav Links: The .nav__link class has padding, which is explicitly forbidden by the requirement "Nav Links should not have any padding". This also incorrectly determines the header's height.
3. Incorrect Header Height: The header's height should be set in one place: by applying a height property to the navigation links. Please remove the padding from the links and the margin from the logo, and instead set a specific height on the links to control the header's size.
4. Invalid href Attribute: In src/index.html, the link for "laptops & computers" contains spaces in its href attribute. URLs cannot contain spaces, so please replace them with hyphens.

Please fix these issues to align your solution with the project requirements.

---

✨ Please rate this review in the Platform's notification center¹. I will be grateful for your feedback! ✨

Important

Fix the issues, commit the changes, and then re-request my review using the Re-request review button² in the Reviewers tab.

Tip

If you have any comments about this review, please leave a message in the Add a comment section below and mention me with the @mateacademy-ai-mentor tag³.
I will read your message during my next review of your pull request. Please do not reply directly to my comments, as that feature is not supported yet.

Caution

Do not close the pull request until the review is complete. Closing it early can lead to unexpected behavior and disrupt the review process.

Footnotes

1. Rate AI review example ↩

2. Re-request AI review example ↩

3. Add AI review comments example ↩

[mateacademy-ai-mentor]

The alt attribute should be more descriptive. While 'website logo' is acceptable, something more specific like 'Moyo website logo' would better align with best practices for accessibility.

[mateacademy-ai-mentor]

The href attribute should not contain spaces. This violates the code style rules. Consider replacing spaces with hyphens, like laptops-and-computers.

[mateacademy-ai-mentor]

According to the task requirements, you should avoid styling elements by their tag name (except for html and body). Please add a class to the <header> element in your HTML and use that class for styling.

[mateacademy-ai-mentor]

This margin contributes to the header's height, but the requirement is that the height should be set in one place, on the navigation links. Also, using both top and bottom margins (margin: 10px 0) is inconsistent with the code style guideline to use only top or only bottom margins.

[mateacademy-ai-mentor]

These CSS properties have no effect here. text-decoration applies to text-containing elements like <a>, not <li>. justify-content applies to flex containers, but .nav__item is a flex item, not a container. These lines can be removed.

[mateacademy-ai-mentor]

This violates the requirement that 'Nav Links should not have any padding'. Instead, you should set a specific height on the links (as per the Figma design) and then center the text vertically. This approach also violates checklist item #1: 'Header height is set in 1 place (for the links)', as the header's height is currently influenced by both this padding and the logo's margin.