add task solution

[yuammik]

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

[mateacademy-ai-mentor]

Thank you for your hard work on this project! 😊 There are a few critical issues that need to be addressed before we can approve the pull request.

1. Font Embedding: Ensure the Roboto font is embedded with the correct specifications, including the normal width, to meet the task requirements.
2. Logo Link: The logo should be a functional link. Please add an href attribute to the <a> tag for the logo.
3. CSS Variable for Blue Color: Define a CSS variable for the blue color instead of using the color directly.
4. CSS for Uppercase Text: Use CSS to transform text to uppercase rather than typing it directly in uppercase in the HTML.
5. Image Source: Ensure the logo image is sourced from the specified directory structure (src/images).

These changes are crucial for meeting the core requirements of the task. Once these are addressed, we can move forward with approval. Keep up the great work, and don't hesitate to reach out if you need any help! 🚀

✨ 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.

[mateacademy-ai-mentor]

The anchor tags in the navigation menu are missing 'href' attributes. Adding these will make the links functional and improve accessibility.

[yuammik]

Suggested change

	<li><a class="is-active nav_link">APPLE</a></li>
	<li><a class="nav_link">SAMSUNG</a></li>
	<li><a class="nav_link">SMARTPHONES</a></li>
	<li>
	<a
	class="nav_link"
	data-qa="hover"
	>
	LAPTOPS & COMPUTERS
	</a>
	</li>
	<li><a class="nav_link">GADGETS</a></li>
	<li><a class="nav_link">TABLETS</a></li>
	<li><a class="nav_link">PHOTO</a></li>
	<li><a class="nav_link test">VIDEO</a></li>
	<ul>
	<li><a class="is-active nav_link" href="APPLE">APPLE</a></li>
	<li><a class="nav_link" href="#SAMSUNG">SAMSUNG</a></li>
	<li><a class="nav_link" href="#SMARTPHONES">SMARTPHONES</a></li>
	<li>
	<a
	class="nav_link"
	data-qa="hover"
	>
	LAPTOPS & COMPUTERS
	</a>
	</li>
	<li><a class="nav_link" href="#GADGETS">GADGETS</a></li>
	<li><a class="nav_link" href="#TABLETS">TABLETS</a></li>
	<li><a class="nav_link" href="#PHOTO">PHOTO</a></li>
	<li><a class="nav_link test" href="#VIDEO">VIDEO</a></li>
	</ul>

[mateacademy-ai-mentor]

Consider adding a fallback font in the 'font-family' property for better compatibility across different browsers and systems. For example, 'font-family: Roboto, Arial, sans-serif;'.

[yuammik]

Suggested change

	font-family: Roboto, serif;
	padding: 0;
	font-family: Roboto, Arial, sans-serif;

[mateacademy-ai-mentor]

The 'justify-self' property is not applicable to flex containers. You might want to use 'justify-content' or 'align-items' instead, depending on the desired effect.

[mateacademy-ai-mentor]

Great job on addressing some of the previous issues! 🎉 Your efforts in making the logo link functional and embedding the Roboto font with the correct weight are commendable. However, there are a few critical points that need attention:

1. Font Embedding: Ensure the Roboto font includes the 'normal' width as specified in the task requirements.

2. CSS Variable for Blue Color: Consider defining a CSS variable for the blue color (#00acdc) to maintain consistency and ease of maintenance.

3. CSS for Uppercase Text: Transform the navigation link text to uppercase using CSS (text-transform: uppercase;) instead of typing it directly in uppercase in the HTML.

4. Image Source: The logo image should be sourced from the src/images directory as per the task requirements.

These improvements will enhance the functionality and maintainability of your code. Remember, addressing these issues will help you grow as a developer. Keep up the good work and continue learning from your experiences! 🚀

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

[mateacademy-ai-mentor]

The Roboto font is embedded, but it should include the 'normal' width as specified in the task requirements. Please ensure the font is embedded with the correct specifications.

[mateacademy-ai-mentor]

The text in the navigation links is typed in uppercase directly in the HTML. According to the task requirements, you should use CSS to transform text to uppercase instead.

[mateacademy-ai-mentor]

Consider using a CSS variable for the blue color (#00acdc) to ensure consistency and ease of maintenance. Define a variable, for example, --blue-color: #00acdc;, and use it throughout your CSS.

[mateacademy-ai-mentor]

To transform the text to uppercase using CSS, add the text-transform: uppercase; property to the .nav_link class. This will ensure that all navigation links are displayed in uppercase as required.