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.

Sign up for GitHub

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

Jump to bottom

Develop #5374

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

Develop #5374

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1db2b3a
add solution for moyo header
romka12254 Sep 16, 2024
e37a2bc
add x on goals
romka12254 Sep 16, 2024
161c207
fixed bugs
romka12254 Sep 16, 2024
1ed30c6
fixed problems
romka12254 Sep 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 9 additions & 9 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,15 @@ The page should match the design Pixel Perfect: all the sizes, colors and distan

❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:

- [DEMO LINK](https://<your_account>.github.io/layout_moyo-header/)
- [TEST REPORT LINK](https://<your_account>.github.io/layout_moyo-header/report/html_report/)
- [DEMO LINK](https://romka12254.github.io/layout_moyo-header/)
- [TEST REPORT LINK](https://romka12254.github.io/layout_moyo-header/report/html_report/)

❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.

- [ ] 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 ❗️](./checklist.md)
- [x] Header height is set in 1 place (for the links)
- [x] Content is vertically centered (for any header height)
- [x] CSS is used to show all letters in Uppercase (don't type them in HTML)
- [x] Logo is an image wrapped with a link
- [x] **CSS Variable** is used for a blue color
- [x] Pseudo-element is used for a blue line below the active link
- [x] Code follows all the [Code Style Rules ❗️](./checklist.md)
Binary file added src/fonts/roboto-v32-latin-500.woff2
View file
Open in desktop
Binary file not shown.
Binary file added src/fonts/roboto-v32-latin-regular.woff2
View file
Open in desktop
Binary file not shown.
97 changes: 96 additions & 1 deletion src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,103 @@
rel="stylesheet"
href="./style.css"
/>
<!-- <link rel="stylesheet" href="https://fonts.google.com/specimen/Roboto"> -->
<link
rel="preconnect"
href="https://fonts.googleapis.com"
/>
<link
rel="preconnect"
href="https://fonts.gstatic.com"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;
0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"
Copy link

Choose a reason for hiding this comment

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

The href attribute in the link tag for Google Fonts is too long. It should be split into multiple lines to adhere to the 80 character limit per line. You could place each font weight on a new line to improve readability.

rel="stylesheet"
/>
</head>
<body>
<h1>Moyo header</h1>
<header class="header">
<a
href="index.html"
class="header__logo-link"
>
<img
src="./images/logo.png"
alt="Moyo logo"
class="header__logo-pic"
/>
</a>

<nav class="header__nav">
<ul class="header__list">
<li class="header__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.

Don't use spaces in <a> tag's href property. Anchor links should start with the # symbol if they link to an ID within the same page, or they should be a valid URL if linking to other pages.

class="header__link is-active"
>
Apple
</a>
</li>
<li class="header__item">
Copy link

Choose a reason for hiding this comment

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

Add the blank line between the links

Suggested change
</li>
<li class="header__item">
</li>
<li class="header__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.

Don't use spaces in <a> tag's href property. Anchor links should start with the # symbol if they link to an ID within the same page, or they should be a valid URL if linking to other pages.

class="header__link"
>
Samsung
</a>
</li>
<li class="header__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.

Don't use spaces in <a> tag's href property. Anchor links should start with the # symbol if they link to an ID within the same page, or they should be a valid URL if linking to other pages.

class="header__link"
>
Smartphones
</a>
</li>
<li class="header__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.

Don't use spaces in <a> tag's href property. Anchor links should start with the # symbol if they link to an ID within the same page, or they should be a valid URL if linking to other pages.

class="header__link"
data-qa="hover"
>
Laptops & Computers
</a>
</li>
<li class="header__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.

Don't use spaces in <a> tag's href property. Anchor links should start with the # symbol if they link to an ID within the same page, or they should be a valid URL if linking to other pages.

class="header__link"
>
Gadgets
</a>
</li>
<li class="header__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.

Don't use spaces in <a> tag's href property. Anchor links should start with the # symbol if they link to an ID within the same page, or they should be a valid URL if linking to other pages.

class="header__link"
>
Tablets
</a>
</li>
<li class="header__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.

Don't use spaces in <a> tag's href property. Anchor links should start with the # symbol if they link to an ID within the same page, or they should be a valid URL if linking to other pages.

class="header__link"
>
Photo
</a>
</li>
<li class="header__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.

Don't use spaces in <a> tag's href property. Anchor links should start with the # symbol if they link to an ID within the same page, or they should be a valid URL if linking to other pages.

class="header__link"
>
Video
</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
78 changes: 78 additions & 0 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,81 @@
body {
margin: 0;
padding: 0;
Copy link

Choose a reason for hiding this comment

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

The body hasn't a padding

Suggested change
padding: 0;

}

html {
font-family: Roboto, Arial, sans-serif;
Copy link

Choose a reason for hiding this comment

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

Remember to use fallback fonts - alternative font-family in case the main one doesn't work. For example, font-family: Roboto, Arial, sans-serif; is good, but you could add more alternatives like font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;.

font-size: 12px;
font-weight: 500;

--active-color: #00acdc;
Copy link

Choose a reason for hiding this comment

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

Create a variable with :root selector

}

.header {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
}
Copy link

Choose a reason for hiding this comment

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

Suggested change
justify-content: space-between;
}
justify-content: space-between;
padding: 0 50px;
box-sizing: border-box;
}


.header__nav {
margin: 0 50px 0 0;
}
Copy link

Choose a reason for hiding this comment

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

Suggested change
.header__nav {
margin: 0 50px 0 0;
}


.header__list {
display: flex;
margin: 0;
padding: 0;
list-style: none;
}

.header__link {
display: flex;
height: 60px;
line-height: 60px;

color: #000;
text-decoration: none;
text-transform: uppercase;
}

li {
margin-right: 20px;
}
Copy link

Choose a reason for hiding this comment

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

Avoid using tag names for styling (except html and body). Instead, style elements using .class. For example, consider adding a class to the li elements within .header__list and style that class instead.


li:last-child {
margin-right: 0;
}

.is-active::after {
position: absolute;
bottom: 0;
display: block;
content: '';
height: 4px;
width: 100%;
background-color: var(--active-color);
border-radius: 8px;
}

.header__logo-pic {
display: block;
width: 40px;
height: 40px;
margin: 10px 0 10px 50px;
Copy link

Choose a reason for hiding this comment

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

Suggested change
margin: 10px 0 10px 50px;

}

a {
text-decoration: none;
padding: 0;
margin: 0;
}

a:hover {
Copy link

Choose a reason for hiding this comment

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

Use only class selector

color: var(--active-color);
}

.is-active {
color: var(--active-color);
position: relative;
}
Loading