From 104e60a2d858825ab0dd9036af2466ad3ba8aaab Mon Sep 17 00:00:00 2001 From: Vadym Valchak Date: Mon, 6 May 2024 19:42:06 +0300 Subject: [PATCH 1/4] Added solution --- readme.md | 4 ++-- src/index.html | 50 +++++++++++++++++++++++++++++++++++++++- src/style.css | 62 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 113 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index e72b8051e7..57caa4ca81 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 `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://vadym-valchak.github.io/layout_moyo-header/) +- [TEST REPORT LINK](https://vadym-valchak.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. diff --git a/src/index.html b/src/index.html index b39fe97123..75d0ddafa0 100644 --- a/src/index.html +++ b/src/index.html @@ -15,8 +15,56 @@ rel="stylesheet" href="./style.css" /> + + + -

Moyo header

+ +
+ + +
diff --git a/src/style.css b/src/style.css index 293d3b1f13..14e04192bb 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,65 @@ +* { + padding: 0; + margin: 0; +} + +html { + font-family: Roboto, Arial, sans-serif; + font-size: 12px; + + --active-menu: #00acdc; +} + body { margin: 0; } + +.logo a, +.logo img { + display: block; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 50px; +} + +.nav ul { + display: flex; + list-style: none; + column-gap: 20px; +} + +.menu-item:last-child { + margin-right: 0; +} + +.menu-item a { + display: block; + position: relative; + align-items: center; + font-weight: 500; + font-style: normal; + line-height: 60px; + color: black; + text-transform: uppercase; + text-decoration: none; +} + +.nav .is-active::after { + content: ''; + display: block; + position: absolute; + height: 4px; + width: 100%; + bottom: 0; + background-color: var(--active-menu); + border-radius: 4px; +} + +.nav .is-active, +.nav [data-qa='hover']:hover { + color: var(--active-menu); +} From 0be256041ef797201e56ecc90968e417c438dfa7 Mon Sep 17 00:00:00 2001 From: Vadym Valchak Date: Mon, 6 May 2024 22:03:20 +0300 Subject: [PATCH 2/4] Added classes instide tags --- src/index.html | 63 +++++++++++++++++++++++++++++++++++++++++++------- src/style.css | 14 +++++------ 2 files changed, 62 insertions(+), 15 deletions(-) diff --git a/src/index.html b/src/index.html index 75d0ddafa0..f47f7cbf41 100644 --- a/src/index.html +++ b/src/index.html @@ -32,8 +32,12 @@
diff --git a/src/style.css b/src/style.css index 14e04192bb..c0afbd022c 100644 --- a/src/style.css +++ b/src/style.css @@ -14,8 +14,8 @@ body { margin: 0; } -.logo a, -.logo img { +.logo-link, +.logo-img { display: block; } @@ -26,7 +26,7 @@ body { padding: 0 50px; } -.nav ul { +.menu-items { display: flex; list-style: none; column-gap: 20px; @@ -36,7 +36,7 @@ body { margin-right: 0; } -.menu-item a { +.menu-link { display: block; position: relative; align-items: center; @@ -48,7 +48,7 @@ body { text-decoration: none; } -.nav .is-active::after { +.is-active::after { content: ''; display: block; position: absolute; @@ -59,7 +59,7 @@ body { border-radius: 4px; } -.nav .is-active, -.nav [data-qa='hover']:hover { +.is-active, +.menu-link:hover { color: var(--active-menu); } From 0fff24cb7f0e10c48ef7406d4202cb69dce60856 Mon Sep 17 00:00:00 2001 From: Vadym Valchak Date: Tue, 7 May 2024 08:39:25 +0300 Subject: [PATCH 3/4] Fixed elements class name --- src/index.html | 64 +++++++++++++++++++++++++++----------------------- src/style.css | 7 +++--- 2 files changed, 37 insertions(+), 34 deletions(-) diff --git a/src/index.html b/src/index.html index f47f7cbf41..74496a8e29 100644 --- a/src/index.html +++ b/src/index.html @@ -29,82 +29,86 @@ /> -
- + + +