Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add task solution #4641

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Conversation

lmmaarriiaa
Copy link

@lmmaarriiaa lmmaarriiaa commented Feb 28, 2024

  • 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 ❗️

Copy link

@DanilWeda DanilWeda left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good!
image

Check the build version and demo link.
Thanks!

alt="Moyo logo"
/>
</a>
<nav class="nav">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Multiline sibling elements in HTML should have an empty line between them.


.nav__link {
display: inline-block;
height: 60px;

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You don't actually need both height and line-height in this case. One of them should be sufficient, just make sure that text is vertically centered.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi! This is my way to make text centered and I have no idea how to do it another way in this case. Could you help?

Copy link

@undeletable undeletable Mar 10, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

line-height sets the height of text line to 60px. So if there are no additional margins/paddings/borders etc., the element would be 60px high. This means that if you remove height style in this case, nothing would change.

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

Copy link

@undeletable undeletable left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Well done! There's just a small discrepancy with the guideline, so I'm approving.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants