From 062bcddf947f3184ae9d3ff708283041c50afc8b Mon Sep 17 00:00:00 2001
From: maykonfox <19071987m@gmail.com>
Date: Wed, 28 Jan 2026 21:30:39 -0300
Subject: [PATCH 1/7] =?UTF-8?q?altera=C3=A7=C3=A3o=20html=20e=20css?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
src/index.html | 61 ++++++++++++++++++++++++++++++-------
src/style.css | 82 +++++++++++++++++++++++++++++++++++++++++++++++++-
2 files changed, 131 insertions(+), 12 deletions(-)
diff --git a/src/index.html b/src/index.html
index b39fe97123..9abdf09531 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,22 +1,61 @@
-
+
-
+
Moyo header
-
+
+
+
+
- Moyo header
+
diff --git a/src/style.css b/src/style.css
index 293d3b1f13..cf8033c657 100644
--- a/src/style.css
+++ b/src/style.css
@@ -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);
+}
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-weight: 500;
+ padding:0 40px;
+ background-color: #fff;
+}
+.logo img {
+ display: block;
+ width: 40px;
+ height: 40px;
+ src: url(images/logo.png);
+}
+.nav_list {
+ display: flex;
+ list-style: none;
+}
+
+.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;
+ 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);
+ opacity: 1;
+}
+.nav_link.is-active::after {
+ transform: translateX(-50%) scaleX(1);
+ opacity: 1;
}
From e8e07aeac3a2a34baf1f26e4935e0e022d4d970e Mon Sep 17 00:00:00 2001
From: maykonfox <19071987m@gmail.com>
Date: Wed, 28 Jan 2026 23:41:48 -0300
Subject: [PATCH 2/7] Fix: change image path to relative
---
readme.md | 8 ++++----
src/index.html | 15 ++++++++-------
src/style.css | 5 ++---
3 files changed, 14 insertions(+), 14 deletions(-)
diff --git a/readme.md b/readme.md
index fc0db80092..b4e13bd1b3 100644
--- a/readme.md
+++ b/readme.md
@@ -27,8 +27,8 @@ The page should match the design Pixel Perfect: all the sizes, colors and distan
❗️ Replace `` with your GitHub username and copy the links to the `Pull Request` description:
-- [DEMO LINK](https://.github.io/layout_moyo-header/)
-- [TEST REPORT LINK](https://.github.io/layout_moyo-header/report/html_report/)
+- [DEMO LINK](https://github.com/maykonfox/layout_moyo-header-fox)
+- [TEST REPORT LINK](https://https://github.com/mate-academy/layout_moyo-header/pull/7481)
❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it.
@@ -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.
-
\ No newline at end of file
+- [ ] The Google Fonts Configuration follows requirements.
+
diff --git a/src/index.html b/src/index.html
index 9abdf09531..4237c61ef4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -1,7 +1,7 @@
-
+
Moyo header
-
+
+
+
+ 