Skip to content

Develop #7503

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
Thiago-BRoca wants to merge 10 commits into
base: master
Choose a base branch
from
Open

Develop #7503

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
4eadfd1
added task solution for moyo header
Thiago-BRoca Feb 4, 2026
3b4fbd9
update CSS according to checklist.md
Thiago-BRoca Feb 4, 2026
ea81810
fix header height and navigation styles
Thiago-BRoca Feb 4, 2026
aea38f1
fix active link underline positioning and clean CSS
Thiago-BRoca Feb 4, 2026
e93d14e
fix CSS lint issues
Thiago-BRoca Feb 4, 2026
5d60d60
fix nav link font size and simplify selectors
Thiago-BRoca Feb 4, 2026
4cd9e3d
remove duplicated navigation styles
Thiago-BRoca Feb 4, 2026
7b3cec8
fix header background positioning
Thiago-BRoca Feb 4, 2026
0ce72ed
add horizontal padding to header container
Thiago-BRoca Feb 4, 2026
470d6cd
fix: fix GitHub Pages link causing 404 error
Thiago-BRoca Feb 5, 2026
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://Thiago-BRoca.github.io/layout_moyo-header/)
- [TEST REPORT LINK](https://Thiago-BRoca.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)
32 changes: 29 additions & 3 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,10 @@
<!doctype html>
<html lang="en">
<head>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap" rel="stylesheet">

<meta charset="UTF-8" />
<meta
name="viewport"
Expand All @@ -10,13 +14,35 @@
http-equiv="X-UA-Compatible"
content="ie=edge"
/>
<title>Moyo header</title>
<link
rel="stylesheet"
href="./style.css"
/>
</head>
<body>
<h1>Moyo header</h1>
</body>
<header class="header">
<div class="container">
<a href="">
<img
src="./images/logo.png"
alt="moyo logo"
class="logo"
/>
</a>

<nav>
<ul class="nav_list">
<li class="nav_items"><a class="nav_links is-active" href="#">Apple</a></li>
<li class="nav_items"><a class="nav_links" href="#">Samsung</a></li>
<li class="nav_items"><a class="nav_links" href="#">Smartphones</a></li>
<li class="nav_items"><a class="nav_links" data-qa="hover" href="#">Laptops & Computers</a></li>
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 4, 2026

Choose a reason for hiding this comment

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

This line is longer than 80 characters. The <a> element also has more than two attributes, so according to the code style rules, it should be formatted with each attribute on a new line. Applying this formatting will also fix the line length issue.

<li class="nav_items"><a class="nav_links" href="#">Gadgets</a></li>
<li class="nav_items"><a class="nav_links" href="#">Tablets</a></li>
<li class="nav_items"><a class="nav_links" href="#">Photo</a></li>
<li class="nav_items"><a class="nav_links" href="#">Video</a></li>
</ul>
</nav>
</div>
</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 @@
html {
margin: 0;
font-family: 'Roboto', Arial, sans-serif;
font-style: normal;
font-weight: 500;
width: normal;
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 4, 2026

Choose a reason for hiding this comment

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

The value normal is not valid for the width property in CSS. This property should be removed as it has no effect and is incorrect.

--color-primary: #00acdc
}

body {
margin: 0;
}

.header {
margin: 0;
}

.container {
display: flex;
background-color: #ffffff;
justify-content: space-between;
align-items: center;
max-width: 80%;
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 4, 2026

Choose a reason for hiding this comment

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

The requirement is to match the design 'Pixel Perfect'. The Figma mockup specifies a content container width of 1140px. Using a percentage-based max-width will not match the design on all screen sizes. Please use a fixed value.

margin: 0 auto;
}

.nav_list {
list-style-type: none;
margin: 0;
padding: 0;
}

.nav_items:not(:last-child) {
margin-right: 20px;
}

.nav_list .nav_links {
display: inline-block;
text-transform: uppercase;
}

.nav_list {
display: flex;
}
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 4, 2026

Choose a reason for hiding this comment

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

The styles for the .nav_list selector are split into two separate rule blocks. It's best practice to define all styles for a selector in one place for better readability and maintenance. Please merge this display: flex; property into the .nav_list block on line 27.


.logo {
display: flex;
}

.nav_list .nav_links:link {
text-decoration: none;
color: black;
}

.nav_list .nav_links:visited {
text-decoration: none;
color: black;
}

.nav_list .nav_links:hover {
color: var(--color-primary);
}

.nav_list .nav_links.is-active {
position: relative;
color: var(--color-primary);
}

.nav_list .nav_links.is-active::after {
content: "";
position: absolute;
width: 100%;
height: 2px;
background-color: var(--color-primary);
bottom: -8px;
Copy link

@mateacademy-ai-mentor mateacademy-ai-mentor Feb 4, 2026

Choose a reason for hiding this comment

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

A negative bottom value places the underline outside of the link's clickable area, which doesn't match the visual design in Figma. The underline should be positioned 8px below the text but inside the 56px height of the link. You'll need to calculate a positive bottom value to achieve this.

left: 0;
border-radius: 8px;
}

.nav_links {
height: 56px;
line-height: 56px;
}
Loading