fixed moyo header

[TaniaFedortsi]

• [х] 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 ❗️

[mateacademy-ai-mentor]

It looks like you've made a great effort with your code! 👍 However, there are a few issues that need to be addressed before we can approve the pull request. Please take a look at the comments about using fallback fonts, avoiding fixed container sizes, not using the * selector for performance reasons, fixing the href attribute, improving code readability with empty lines, proper attribute formatting, and indentation. Once you've made these adjustments, your code will be even better! Keep up the good work, and let's get these changes made! 💪

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

[mateacademy-ai-mentor]

Remember to add empty lines between multiline sibling blocks of HTML. There should be an empty line between the <a> and <nav> tags to improve readability.

[mateacademy-ai-mentor]

Each attribute should start on a new line with 2-space indentation when there are more than two attributes or attribute values are long. This applies to the <a> tag on lines 21-24 and the <img> tag on lines 25-28.

[mateacademy-ai-mentor]

Add empty lines between multiline sibling elements. There should be an empty line between each <li> block to improve readability.

[mateacademy-ai-mentor]

The href attribute in the <a> tag should not contain spaces. Use a meaningful reference or # if the link is a placeholder.

[mateacademy-ai-mentor]

Remove the duplicate closing </html> tag. There should only be one closing </html> tag at the end of the document.

[mateacademy-ai-mentor]

Don't use the * selector as it impacts the performance. Set styles only for elements that require them. Zeroing out your margins, paddings, or other styles with * is still inefficient for the browser.

[mateacademy-ai-mentor]

Don't fix container sizes like width and height unless there is a specific requirement for that. Let the content size dictate the container's size to avoid overflow or accidental scroll bars.

[mateacademy-ai-mentor]

Remember to use fallback fonts - alternative font-family in case the main one doesn't work. For example: font-family: Roboto, Arial, sans-serif;.