Skip to content

added header with navigation #7271

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

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+173 −5
Open

added header with navigation #7271

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
018d142
added header with navigation
Renata11111-afk Nov 24, 2025
fe77573
fixed the issues
Renata11111-afk Nov 24, 2025
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
8 changes: 4 additions & 4 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@ 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 the `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://Renata11111-afk.github.io/layout_moyo-header/)
- [TEST REPORT LINK](https://Renata11111-afk.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.

Expand All @@ -39,5 +39,5 @@ The page should match the design Pixel Perfect: all the sizes, colors and distan
- [ ] **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)
- [ ] The Google Fonts Configuration follows requirements.
![alt text](./assets/image.png)
- [ ] The Google Fonts Configuration follows requirements.
![alt text](./assets/image.png)
93 changes: 92 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,99 @@
rel="stylesheet"
href="./style.css"
/>
<link
rel="preconnect"
href="https://fonts.googleapis.com"
/>
<link
rel="preconnect"
href="https://fonts.gstatic.com"
crossorigin="anonymous"
/>
<link
href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Nov 24, 2025

Choose a reason for hiding this comment

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

This line exceeds the 80-character limit specified in the code style requirements. While long URLs can sometimes be an exception, it's a good practice to be mindful of this rule.

rel="stylesheet"
/>
</head>
<body>
<h1>Moyo header</h1>
<header class="header">
<a href="#home-page">
<img
class="logo"
src="/src/images/logo.png"
alt="logo"
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Nov 24, 2025

Choose a reason for hiding this comment

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

The alt attribute value "logo" is not descriptive enough. According to the requirements, it should describe the image content, for instance, alt="Moyo company logo".

/>
</a>

<nav class="nav">
<ul class="nav-list">
<li class="nav-item">
<a
class="nav-link is-active"
href="#apple"
>
Apple
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#samsung"
>
Samsung
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#smartphones"
>
Smartphones
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
data-qa="hover"
href="#laptops-&-computers"
>
Laptops & Computers
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#gadgets"
>
Gadgets
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#tablets"
>
Tablets
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#photo"
>
Photo
</a>
</li>
<li class="nav-item">
<a
class="nav-link"
href="#video"
>
Video
</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
80 changes: 80 additions & 0 deletions src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,83 @@
:root {
--color: #00acdc;
}

html {
font-family: Roboto, sans-serif;
font-weight: 500;
font-size: 12px;
text-transform: uppercase;
}

body {
margin: 0;
padding: 0;
}

.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 50px;
}

.logo {
padding: 0;
height: 40px;
width: 40px;
display: block;
}

.nav-list {
display: flex;
margin: 0;
padding: 0;
}

.nav-list:first-child {
margin-left: 0;
}
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Nov 24, 2025

Choose a reason for hiding this comment

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

This rule is incorrect and unnecessary. .nav-list:first-child selects a .nav-list that is the first child of its parent, which is not what you want here. You already create spacing between items with .nav-item + .nav-item (lines 46–47). Remove this rule or, if you intended to target the first list item, use .nav-item:first-child or .nav-list > .nav-item:first-child instead.


.nav-item {
display: flex;
list-style: none;
}

.nav-item + .nav-item {
margin-left: 20px;
}

.nav-link {
display: flex;
text-decoration: none;
position: relative;
align-items: center;
height: 60px;
color: black;
Comment on lines 46 to 53
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Nov 24, 2025

Choose a reason for hiding this comment

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

Nav Links should not have any padding but have the text centered. Your .nav-link vertically centers text with align-items: center, but it doesn't horizontally center the link content. Add justify-content: center to .nav-link so the link text is centered inside the link area (keep padding at 0 to satisfy the requirement).

}

.nav-link:hover {
color: var(--color);
}

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

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

@media (max-width: 1024px) {
.nav__item {
margin-right: 20px;
}
Comment on lines 76 to 79
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Nov 24, 2025

Choose a reason for hiding this comment

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

This is a class-name typo that breaks responsive rules and violates the checklist item: "Code follows all the Code Style Rules ❗️ (./checklist.md)" — the media query targets .nav__item but your markup and other CSS use .nav-item (hyphen). Change the selector to .nav-item so the rule applies correctly.

}