New change in file index and style

[BorisMund]

Demo
https://borismund.github.io/layout_moyo-header/

Test report link
https://mate-academy.github.io/layout_moyo-header/report/html_report/

---

• 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
• The Google Fonts Configuration follows requirements.

[mateacademy-ai-mentor]

Review Summary

Hey there! 🎉 I'm approving this pull request so you can move forward. There are a few things to keep in mind for future improvements.

Here's a breakdown:

• HTML: The logo should be wrapped in an <a> tag. This will make it a clickable link, which is what the task asks for. The logo should also be a link with an image inside (from [src/images](src/images)), but it should not be a part of the <nav>.
• CSS:
  • Font Family: Make sure to add a fallback font to your font-family property in the body selector. This ensures that if the primary font doesn't load, the page still looks readable. Something like font-family: 'Your Font', sans-serif; would work.
  • Header Width: Remove the max-width from the header. The header should stretch across the entire page.
  • CSS Variables: Using CSS variables for the blue color will make it easier to maintain your styles. Define it once at the top (e.g., :root { --blue-color: #yourblue; }) and reuse it throughout your CSS.
  • Uppercase Text: Use CSS (text-transform: uppercase;) to transform the nav links to uppercase instead of typing them that way in the HTML.
  • Active Link: Implement the blue line below the active link using a pseudo-element (::after or ::before). This is a cleaner and more efficient way to achieve the effect.
  • Google Fonts Configuration: Google Fonts Configuration does not follow requirements. You should select ONLY roman style, medium (500) weight and normal width for embedding.
  • Header Height: The header height is set in header styles, but it should be set for the links.

Remember to take another look at the comments to fully understand the suggested changes and why they are important. Keep up the great work, and don't hesitate to ask questions as you continue learning! 😊

---

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

Footnotes

1. Rate AI review example ↩

[mateacademy-ai-mentor]

The logo should be wrapped in a link (<a> tag). According to the task description, "the logo should also be a link with an image inside (from src/images). But it should not be a part of the <nav>".

[mateacademy-ai-mentor]

Add a fallback font to the font-family property. According to the checklist, you should "Remember to use fallback fonts - alternative font-family in case the main one doesn't work".

[mateacademy-ai-mentor]

It's recommended to use CSS variables for the blue color. The checklist says: "CSS Variable is used for a blue color".

[mateacademy-ai-mentor]

Pseudo-element should be used for a blue line below the active link. The checklist says: "Pseudo-element is used for a blue line below the active link".

[mateacademy-ai-mentor]

The header's max-width should be removed. The task description says that "the header should stretch the full page width (don't use a horizontal margin)".