add task solution

[Pjankusha]

• DEMO LINK
• TEST REPORT LINK

[etojeDenys]

if you have some problems with tests then feel free to ask for some help in the chat

[Pjankusha]

I added changes, please review

[etojeDenys]

your demo link doesn't work and all tests failed, don't hesitate to ask for some help in the chat

[Pjankusha]

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

[andriy-shymkiv]

looking good, left a few suggestions

[andriy-shymkiv]

I believe that you don't need this class

Suggested change

	<a href="#" class="nav__link is-active blue-link">Apple</a>
	<a href="#" class="nav__link is-active">Apple</a>

[andriy-shymkiv]

is-active is enough for such case

[andriy-shymkiv]

Suggested change

	width: 100%;
	margin: 0;
	padding:0;
	font-family: Roboto, sans-serif;
	margin: 0;
	font-family: Roboto, sans-serif;

[andriy-shymkiv]

Suggested change

	.nav__link {
	display: flex;
	position: relative;
	height: 60px;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	text-decoration: none;
	color: var(--main-text-color);
	}
	.nav__link {
	position: relative;
	height: 60px;
	text-decoration: none;
	color: var(--main-text-color);
	}

[Pjankusha]

Hi, unfortunately your suggestion regarding removing flex in nav__link doesn't work.

[Viktor-Kost]

You can try just to add text-align: center

[Pjankusha]

text-align: center doesn't work even if I change display to block. Regarding requirements to this task text should be centred, and height set to nav__links, flex in this case make it easy to do. And it is works right.

[andriy-shymkiv]

you can just use not:first-child

[Pjankusha]

Thank you for suggestion. It is looks better.

[andriy-shymkiv]

Suggested change

	.blue-link,
	.nav__link:hover {
	color: var(--edit-text-color);
	}
	.is-active,
	.nav__link:hover {
	color: var(--edit-text-color);
	}

[Pjankusha]

Thank you for this suggestion

[anastasiiavorobiova]

Make sure to deploy your page. Feel free to ask for help in the chat

[Viktor-Kost]

Please make sure you've redeployed your work, since at your DEMO we can still see previous solution.
If you need any help feel free to ask at fe_chat

[Viktor-Kost]

html doesn't have default margin

Suggested change

	html, body {
	margin: 0;
	font-family: Roboto, sans-serif;
	}
	html {
	font-family: Roboto, sans-serif;
	}
	body {
	margin: 0;
	}

[Viktor-Kost]

You can try just to add text-align: center