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 #4930

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

add task solution #4930

wants to merge 7 commits into from

Conversation

ell10tt
Copy link

@ell10tt ell10tt commented May 6, 2024

  • 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

@vadiimvooo vadiimvooo left a comment

Choose a reason for hiding this comment

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

Good job. You have to make some changes.

src/style.css Outdated
height: 40px;
}

ul {

Choose a reason for hiding this comment

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

use class selector here

src/style.css Outdated
@@ -1,3 +1,90 @@
body {
margin: 0;
}

header {

Choose a reason for hiding this comment

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

use class selector here

header {
font-size: 12px;
text-transform: uppercase;
box-sizing: border-box;

Choose a reason for hiding this comment

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

use this style with * selector

src/style.css Outdated
text-transform: uppercase;
box-sizing: border-box;
width: 100vw;
background-color: #ffff;

Choose a reason for hiding this comment

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

Suggested change
background-color: #ffff;
background-color: #fff;

src/style.css Outdated
Comment on lines 50 to 56
.page-link:hover {
color: #00acdc;
}

.is-active {
color: #00acdc;
}

Choose a reason for hiding this comment

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

Suggested change
.page-link:hover {
color: #00acdc;
}
.is-active {
color: #00acdc;
}
.page-link:hover,
.is-active {
color: #00acdc;
}

src/style.css Outdated
Comment on lines 72 to 88
.roboto-regular {
font-family: Roboto, sans-serif;
font-weight: 400;
font-style: normal;
}

.roboto-medium {
font-family: Roboto, sans-serif;
font-weight: 500;
font-style: normal;
}

.roboto-bold {
font-family: Roboto, sans-serif;
font-weight: 700;
font-style: normal;
}

Choose a reason for hiding this comment

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

This part looks redundant. Just connect font-family and font-style to html selector and use appropriate font-weight in other selectors

@ell10tt ell10tt requested a review from vadiimvooo May 7, 2024 17:49
Copy link

@maxim2310 maxim2310 left a comment

Choose a reason for hiding this comment

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

plz provide demo and test link

@ell10tt ell10tt requested a review from maxim2310 May 7, 2024 18:21
src/index.html Outdated
Comment on lines 45 to 50
<a
class="page-link is-active"
href="#"
>
<li>Apple</li>
</a>

Choose a reason for hiding this comment

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

Suggested change
<a
class="page-link is-active"
href="#"
>
<li>Apple</li>
</a>
<li
class="nav__item"
>
<a href="#" class="nav__link is-active">Apple</a>
</li>

tag a should be inside the li

src/style.css Outdated

.page-link:hover,
.is-active {
color: #00acdc;

Choose a reason for hiding this comment

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

better to move it to some var and reuse everywhere

@ell10tt ell10tt requested a review from etojeDenys May 8, 2024 16:32
Copy link

@GUSILLUS GUSILLUS left a comment

Choose a reason for hiding this comment

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

GJ!

src/index.html Outdated
Comment on lines 42 to 43
</a>
<nav class="roboto-medium">
Copy link

Choose a reason for hiding this comment

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

Add space between elements on one level depths

src/index.html Outdated
<ul class="nav__list">
<li class="nav__item">
<a
href="#"
Copy link

Choose a reason for hiding this comment

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

Consider making links nearest to real practice change from # to actual name /apple in this case

@ell10tt ell10tt requested a review from GUSILLUS May 9, 2024 16:17
Copy link

@GUSILLUS GUSILLUS left a comment

Choose a reason for hiding this comment

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

Gj!)

<nav class="roboto-medium">
<ul class="nav__list">
<li class="nav__item">
<a
href="#"
href="https://www.moyo.ua/portal_brand/apple_1/"
Copy link

Choose a reason for hiding this comment

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

I mean just write /apple but okay) I approve it)

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.

5 participants