From 9f41cc95e819fe0e69628863c06b1bfe233a29a2 Mon Sep 17 00:00:00 2001 From: Mykola Dotsenko <130664123+MykolaDotsenko@users.noreply.github.com> Date: Wed, 7 Feb 2024 09:26:59 +0200 Subject: [PATCH 1/4] add task solution --- readme.md | 4 +-- src/index.html | 26 ++++++++++++++++- src/style.css | 77 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 104 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index 878beb2f85..6250805e46 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://MykolaDotsenko.github.io/layout_moyo-header/) +- [TEST REPORT LINK](https://MykolaDotsenko.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 f67d080ee0..53b64df80e 100644 --- a/src/index.html +++ b/src/index.html @@ -6,9 +6,33 @@ content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> Moyo header + + + -

Moyo header

+
+ + +
diff --git a/src/style.css b/src/style.css index 293d3b1f13..a719b53357 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,80 @@ + +:root { + --main-color: #00acdc; +} + body { + font-family: Roboto, sans-serif; + margin: 0; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + background-color: #fff; + color: #000; + position: relative; + padding: 0 50px; +} + +.header img { + height: 100%; + width: 100%; +} + +.header__logo { + display: block; + width: 40px; + height: 40px; +} + +.header__list { + list-style: none; margin: 0; + padding: 0; + display: flex; +} + +.nav__item { + margin-left: 20px; + text-decoration: none; +} + +.nav__item:first-child { + margin-left: 0; +} + +.nav__link.is-active { + color: var(--main-color); +} + +.nav__link { + position: relative; + display: flex; + align-items: center; + height: 60px; + font-family: Roboto, sans-serif; + font-size: 12px; + font-weight: 500; + white-space: nowrap; + text-decoration: none; + text-transform: uppercase; + color: #000; +} + +.nav__link:hover { + color: var(--main-color); +} + + +.nav__link.is-active::after { +content: ""; +position: absolute; +bottom: 0; +left: 0; +right: 0; +height: 4px; +border-radius: 2px; +background-color: var(--main-color); } From 118a1e3ecff16a7cdc563dadd57f346ec6d0b585 Mon Sep 17 00:00:00 2001 From: Mykola Dotsenko <130664123+MykolaDotsenko@users.noreply.github.com> Date: Wed, 7 Feb 2024 09:38:08 +0200 Subject: [PATCH 2/4] Update readme.md --- readme.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/readme.md b/readme.md index 6250805e46..fe18d35a08 100644 --- a/readme.md +++ b/readme.md @@ -32,10 +32,10 @@ The page should match the design Pixel Perfect: all the sizes, colors and distan ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it. -- [ ] Header height is set in 1 place (for the links) -- [ ] Content is vertically centered (for any header height) -- [ ] CSS is used to show all letters in Uppercase (don't type them in HTML) -- [ ] Logo is an image wrapped with a link -- [ ] **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) +- [x] Header height is set in 1 place (for the links) +- [x] Content is vertically centered (for any header height) +- [x] CSS is used to show all letters in Uppercase (don't type them in HTML) +- [x] Logo is an image wrapped with a link +- [x] **CSS Variable** is used for a blue color +- [x] Pseudo-element is used for a blue line below the active link +- [x] Code follows all the [Code Style Rules ❗️](./checklist.md) From 403008b8c6c155ab023d0ae6e470a6bc5fea9279 Mon Sep 17 00:00:00 2001 From: Mykola Dotsenko <130664123+MykolaDotsenko@users.noreply.github.com> Date: Wed, 7 Feb 2024 10:01:15 +0200 Subject: [PATCH 3/4] add task solution --- readme.md | 14 +++++++------- src/index.html | 16 ++++++++-------- src/style.css | 26 +++++++++++++------------- 3 files changed, 28 insertions(+), 28 deletions(-) diff --git a/readme.md b/readme.md index 6250805e46..fe18d35a08 100644 --- a/readme.md +++ b/readme.md @@ -32,10 +32,10 @@ The page should match the design Pixel Perfect: all the sizes, colors and distan ❗️ Copy this `Checklist` to the `Pull Request` description after links, and put `- [x]` before each point after you checked it. -- [ ] Header height is set in 1 place (for the links) -- [ ] Content is vertically centered (for any header height) -- [ ] CSS is used to show all letters in Uppercase (don't type them in HTML) -- [ ] Logo is an image wrapped with a link -- [ ] **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) +- [x] Header height is set in 1 place (for the links) +- [x] Content is vertically centered (for any header height) +- [x] CSS is used to show all letters in Uppercase (don't type them in HTML) +- [x] Logo is an image wrapped with a link +- [x] **CSS Variable** is used for a blue color +- [x] Pseudo-element is used for a blue line below the active link +- [x] Code follows all the [Code Style Rules ❗️](./checklist.md) diff --git a/src/index.html b/src/index.html index 53b64df80e..74f1763402 100644 --- a/src/index.html +++ b/src/index.html @@ -20,17 +20,17 @@ diff --git a/src/style.css b/src/style.css index a719b53357..a7de23e494 100644 --- a/src/style.css +++ b/src/style.css @@ -1,6 +1,7 @@ - :root { --main-color: #00acdc; + --text-color: #000; + --link-hover-color: var(--main-color); } body { @@ -13,7 +14,7 @@ body { justify-content: space-between; align-items: center; background-color: #fff; - color: #000; + color: var(--text-color); position: relative; padding: 0 50px; } @@ -60,21 +61,20 @@ body { white-space: nowrap; text-decoration: none; text-transform: uppercase; - color: #000; + color: var(--text-color); } .nav__link:hover { - color: var(--main-color); + color: var(--link-hover-color); } - .nav__link.is-active::after { -content: ""; -position: absolute; -bottom: 0; -left: 0; -right: 0; -height: 4px; -border-radius: 2px; -background-color: var(--main-color); + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 4px; + border-radius: 2px; + background-color: var(--main-color); } From 7adca078c00c4f6144e1f66ed3c29395182f59b1 Mon Sep 17 00:00:00 2001 From: Mykola Dotsenko <130664123+MykolaDotsenko@users.noreply.github.com> Date: Wed, 7 Feb 2024 10:44:56 +0200 Subject: [PATCH 4/4] Apply suggestions from code review Co-authored-by: Oleh Herasymchuk <56752562+OleziO@users.noreply.github.com> --- src/index.html | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index 74f1763402..cd15794a57 100644 --- a/src/index.html +++ b/src/index.html @@ -24,8 +24,13 @@
  • Samsung
  • Smartphones
  • - Laptops & computers + + Laptops & computers +
  • Gadgets
  • Tablets