Skip to content

alteração html e css #7481

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
maykonfox wants to merge 7 commits into
base: master
Choose a base branch
from
+213 −179
Open

alteração html e css #7481

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
062bcdd
alteração html e css
maykonfox Jan 29, 2026
e8e07ae
Fix: change image path to relative
maykonfox Jan 29, 2026
181cd5f
Normalize line endings
maykonfox Jan 29, 2026
19e4afd
atualização html e css
maykonfox Jan 29, 2026
eb82014
atualização
maykonfox Jan 29, 2026
f19e658
atualizaçao
maykonfox Jan 29, 2026
bc856fc
atualização
maykonfox Jan 29, 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
61 changes: 50 additions & 11 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,22 +1,61 @@
<!doctype html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<meta
http-equiv="X-UA-Compatible"
content="ie=edge"
content="width=device-width, initial-scale=1.0"
/>
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Moyo header</title>
<link
rel="stylesheet"
href="./style.css"
/>
<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">
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jan 29, 2026

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 guidelines. When an element has long attributes, it's best to place each attribute on a new line to maintain readability.

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

@mateacademy-ai-mentor mateacademy-ai-mentor Jan 29, 2026

Choose a reason for hiding this comment

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

Using an absolute path like /src/images/logo.png for the image source can cause issues when the project is deployed to a subfolder (like on GitHub Pages). It's safer to use a relative path from this HTML file, for example: images/logo.png.

alt="Moyo online store logo"
/>
</a>
<nav class="nav">
<ul class="nav_list">
<li class="nav_item">
<a href="#" class="nav_link">Apple</a>
</li>
<li class="nav_item">
<a href="#" class="nav_link">Samsung</a>
</li>
<li class="nav_item">
<a href="#" class="nav_link">Smartphones</a>
</li>
<li class="nav_item">
<a
href="#"
Comment on lines +71 to +72
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jan 29, 2026

Choose a reason for hiding this comment

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

According to the Figma mockup, the "Smartphones" link should be the active one. To match the design perfectly, please move the is-active class and the aria-current="page" attribute from this link to the <a> tag for "Smartphones". The data-qa="hover" attribute should remain on this link as required.

class="nav_link is-active"
aria-current="page"
data-qa="hover"
>
Laptops & computers
</a>
</li>
<li class="nav_item">
<a href="#" class="nav_link">Gadgets</a>
</li>
<li class="nav_item">
<a href="#" class="nav_link">Tablets</a>
</li>
<li class="nav_item">
<a href="#" class="nav_link">Photos</a>
</li>
<li class="nav_item">
<a href="#" class="nav_link">Video</a>
</li>
</ul>
</nav>
</header>
</body>
</html>
82 changes: 81 additions & 1 deletion src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,83 @@
:root {
--blue: #00acdc;
--nav-height: 56px;
}
body {
margin: 0;
font-family: 'Roboto', Arial, sans-serif;
background-color: rgb(201, 204, 204);
}
Comment on lines 6 to +10
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jan 29, 2026

Choose a reason for hiding this comment

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

The task requires resetting browser default margins. The body element typically has a default margin which should be set to 0. Also, remember to reset default margin and padding for list elements like ul.

.header {
display: flex;
align-items: center;
justify-content: space-between;
font-weight: 500;
padding:0 40px;
background-color: #fff;
}
.logo img {
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jan 29, 2026

Choose a reason for hiding this comment

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

This violates checklist item #7, which includes the rule: "Don't use tag names for styling (except html and body)". Instead of using a descendant selector (.logo img), please add a class directly to the <img> tag in the HTML and style it with that class.

display: block;
width: 40px;
height: 40px;
src: url(images/logo.png);
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jan 29, 2026

Choose a reason for hiding this comment

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

src is not a valid CSS property and has no effect here. The image's source is defined by the src attribute in the HTML <img> tag. This line should be removed.

Copy link
Copy Markdown
Author

@maykonfox maykonfox Jan 29, 2026

Choose a reason for hiding this comment

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

quando tiro a barra antes do src a logo desaparece

}
.nav_list {
display: flex;
list-style: none;
Comment on lines +28 to +30
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jan 29, 2026

Choose a reason for hiding this comment

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

The <ul> element has default browser padding that needs to be reset for correct alignment. Please add padding: 0; to this rule to match the Figma design. It's also good practice to add margin: 0; to reset any default margins on the list.

Copy link
Copy Markdown
Author

@maykonfox maykonfox Jan 29, 2026

Choose a reason for hiding this comment

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

ok corrigido

}

.nav_item + .nav_item {
margin-left: 24px;
}

.nav_link {
text-transform: uppercase;
display: inline-flex;
align-items: center;
justify-content: center;
position: relative;
text-decoration: none;
cursor: pointer;
height: var(--nav-height);
color: #000;
font-size: 14px;
font-weight: 500;
transition: color 0.3s;
}

.nav_link:hover {
color: var(--blue);
}
.nav_link.is-active {
position: relative;
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jan 29, 2026

Choose a reason for hiding this comment

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

This position: relative; declaration is redundant, as it's already defined for all links in the .nav_link class on line 37. You can remove this line for cleaner code.

Copy link
Copy Markdown
Author

@maykonfox maykonfox Jan 29, 2026

Choose a reason for hiding this comment

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

ok corrigido

color: var(--blue);
}
.nav_link::after {
content: '';
position: absolute;
width: 100%;
left: 50%;
bottom: 2px;
height: 4px;
background-color: var(--blue);
border-radius: 8px;
opacity: 0;
transform-origin: center;
transition: opacity 0.2s ease, transform 0.2s ease;
transform: translateX(-50%) scaleX(0);
}
.nav_link:focus-visible{
color: var(--blue);
}
.nav_link:focus-visible::after{
transform: translateX(-50%) scaleX(1);
opacity: 1;
}
.nav_link:hover::after {
transform: translateX(-50%) scaleX(1);
color: var(--blue);
Copy link
Copy Markdown

@mateacademy-ai-mentor mateacademy-ai-mentor Jan 29, 2026

Choose a reason for hiding this comment

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

The color property has no effect on this pseudo-element because it doesn't contain any text (content: ''). The line's color is already being set by background-color. This property can be safely removed.

opacity: 1;
}
.nav_link.is-active::after {
transform: translateX(-50%) scaleX(1);
opacity: 1;
}
Loading