From e19f512773f2421d15327c491cbbe7f12acf920b Mon Sep 17 00:00:00 2001 From: Erik Hulinian Date: Sat, 27 Jan 2024 18:33:15 +0200 Subject: [PATCH 1/8] add task solution --- readme.md | 4 +-- src/index.html | 57 +++++++++++++++++++++++++++++++++++++---- src/style.css | 69 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 123 insertions(+), 7 deletions(-) diff --git a/readme.md b/readme.md index 878beb2f85..c3aedf66ed 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://Ehulinian.github.io/layout_moyo-header/) +- [TEST REPORT LINK](https://Ehulinian.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..8c289017c5 100644 --- a/src/index.html +++ b/src/index.html @@ -1,14 +1,61 @@ - + - + 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..f7d6f71bb1 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,72 @@ body { margin: 0; } + +.header { + font-family: Roboto, sans-serif; + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 50px; + background: #fff; + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); +} + +.logo { + display: block; + height: 40px; + width: 40px; +} + +.logo__image { + height: 100%; + width: 100%; +} + +.nav__list { + display: flex; + padding: 0; + margin: 0; + list-style: none; +} + +.nav__item { + margin-left: 20px; +} + +.nav__item:first-child { + margin-left: 0; +} + +.nav__link { + position: relative; + display: flex; + align-items: center; + height: 60px; + font-size: 12px; + font-weight: 500; + white-space: nowrap; + text-decoration: none; + text-transform: uppercase; + color: #000; + transition: color 0.3s; +} + +.nav__link:hover { + color: #00acdc; +} + +.nav__link.is-active { + color: #00acdc; +} + +.nav__link.is-active::after { + content: ""; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 4px; + border-radius: 2px; + background-color: #00acdc; +} From d5a12c8e62b810bb1aec499629142994332bd0d3 Mon Sep 17 00:00:00 2001 From: Erik Hulinian Date: Tue, 30 Jan 2024 17:45:05 +0200 Subject: [PATCH 2/8] fix --- src/index.html | 27 ++++++++++++++++++--------- src/style.css | 4 ++-- 2 files changed, 20 insertions(+), 11 deletions(-) diff --git a/src/index.html b/src/index.html index 8c289017c5..58b4362db3 100644 --- a/src/index.html +++ b/src/index.html @@ -3,25 +3,26 @@ + content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> + content="ie=edge"> Moyo header + href="./style.css"> + href="https://fonts.googleapis.com/"> + href="https://fonts.gstatic.com/" + crossorigin="true"> + rel="stylesheet">
@@ -30,27 +31,35 @@
  • Apple
    • +
  • Samsung
    • +
  • Smartphones
    • +
  • - Laptops & computers
    • +
  • Gadgets
    • +
  • Tablets
    • +
  • Photo
    • +
  • Video
    • diff --git a/src/style.css b/src/style.css index f7d6f71bb1..6c17639ad3 100644 --- a/src/style.css +++ b/src/style.css @@ -56,11 +56,11 @@ body { color: #00acdc; } -.nav__link.is-active { +.is-active { color: #00acdc; } -.nav__link.is-active::after { +.is-active::after { content: ""; position: absolute; bottom: 0; From 48b44dce0a6a94d7d9c3a2e02a8854a97a179fee Mon Sep 17 00:00:00 2001 From: Erik Hulinian Date: Tue, 30 Jan 2024 21:03:48 +0200 Subject: [PATCH 3/8] fix --- src/style.css | 23 +++++++++++++++++------ 1 file changed, 17 insertions(+), 6 deletions(-) diff --git a/src/style.css b/src/style.css index 6c17639ad3..1abf3bfa57 100644 --- a/src/style.css +++ b/src/style.css @@ -1,13 +1,18 @@ +:root { + --main-color: #00acdc; +} + body { margin: 0; } .header { - font-family: Roboto, sans-serif; display: flex; justify-content: space-between; align-items: center; + padding: 0 50px; + background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } @@ -40,33 +45,39 @@ body { .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; + transition: color 0.3s; } .nav__link:hover { - color: #00acdc; + color: var(--main-color); } -.is-active { - color: #00acdc; +.nav__link.is-active { + color: var(--main-color); } -.is-active::after { +.nav__link.is-active::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; + height: 4px; border-radius: 2px; - background-color: #00acdc; + background-color: var(--main-color); } From dfc043679d6406690e319590340ba21aea65cc47 Mon Sep 17 00:00:00 2001 From: Erik Hulinian Date: Wed, 31 Jan 2024 13:48:10 +0200 Subject: [PATCH 4/8] fixed --- src/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/style.css b/src/style.css index 1abf3bfa57..c41e217707 100644 --- a/src/style.css +++ b/src/style.css @@ -8,6 +8,7 @@ body { .header { display: flex; + justify-content: space-between; align-items: center; From 77df4bf6cae5e6c77d778ed6d5974fc13c442070 Mon Sep 17 00:00:00 2001 From: Erik Hulinian Date: Wed, 31 Jan 2024 14:50:34 +0200 Subject: [PATCH 5/8] Revert "fix" This reverts commit 48b44dce0a6a94d7d9c3a2e02a8854a97a179fee. --- src/style.css | 23 ++++++----------------- 1 file changed, 6 insertions(+), 17 deletions(-) diff --git a/src/style.css b/src/style.css index c41e217707..9ce5d646c9 100644 --- a/src/style.css +++ b/src/style.css @@ -1,19 +1,14 @@ -:root { - --main-color: #00acdc; -} - body { margin: 0; } .header { + font-family: Roboto, sans-serif; display: flex; justify-content: space-between; align-items: center; - padding: 0 50px; - background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } @@ -46,39 +41,33 @@ body { .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; - transition: color 0.3s; } .nav__link:hover { - color: var(--main-color); + color: #00acdc; } -.nav__link.is-active { - color: var(--main-color); +.is-active { + color: #00acdc; } -.nav__link.is-active::after { +.is-active::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; - height: 4px; border-radius: 2px; - background-color: var(--main-color); + background-color: #00acdc; } From 9886dd3ea0dcff29a0a8b03c3fa9bde41a15f26c Mon Sep 17 00:00:00 2001 From: Erik Hulinian Date: Thu, 1 Feb 2024 21:42:46 +0200 Subject: [PATCH 6/8] Revert "fix" This reverts commit d5a12c8e62b810bb1aec499629142994332bd0d3. --- src/index.html | 27 +++++++++------------------ src/style.css | 4 ++-- 2 files changed, 11 insertions(+), 20 deletions(-) diff --git a/src/index.html b/src/index.html index 58b4362db3..8c289017c5 100644 --- a/src/index.html +++ b/src/index.html @@ -3,26 +3,25 @@ + content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> + content="ie=edge"> Moyo header + href="./style.css"> + href="https://fonts.googleapis.com/"> + href="https://fonts.gstatic.com/" + crossorigin="true"> + rel="stylesheet">
    @@ -31,35 +30,27 @@
  • Apple
    • -
  • Samsung
    • -
  • Smartphones
    • -
  • - Laptops & computers
    • -
  • Gadgets
    • -
  • Tablets
    • -
  • Photo
    • -
  • Video
    • diff --git a/src/style.css b/src/style.css index 9ce5d646c9..14ea294a8f 100644 --- a/src/style.css +++ b/src/style.css @@ -57,11 +57,11 @@ body { color: #00acdc; } -.is-active { +.nav__link.is-active { color: #00acdc; } -.is-active::after { +.nav__link.is-active::after { content: ""; position: absolute; bottom: 0; From 21bff609b5e24dce88c42b6445f12541fe43bcfe Mon Sep 17 00:00:00 2001 From: Erik Hulinian Date: Wed, 7 Feb 2024 14:14:03 +0200 Subject: [PATCH 7/8] normalfix --- src/index.html | 32 ++++++++++++++++++++++---------- src/style.css | 22 +++++++++++++++------- 2 files changed, 37 insertions(+), 17 deletions(-) diff --git a/src/index.html b/src/index.html index 8c289017c5..4932099f28 100644 --- a/src/index.html +++ b/src/index.html @@ -3,25 +3,29 @@ + content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> + + content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> + content="ie=edge"> Moyo header + + href="./style.css"> + href="https://fonts.googleapis.com/"> - + href="https://fonts.gstatic.com/" + crossorigin="true"> +
    @@ -30,27 +34,35 @@
  • Apple
    • +
  • Samsung
    • +
  • Smartphones
    • +
  • - Laptops & computers
    • +
  • Gadgets
    • +
  • Tablets
    • +
  • Photo
    • +
  • Video
    • diff --git a/src/style.css b/src/style.css index 14ea294a8f..b54fd12369 100644 --- a/src/style.css +++ b/src/style.css @@ -1,14 +1,16 @@ body { margin: 0; + + --main-color: #00acdc; } .header { - font-family: Roboto, sans-serif; display: flex; - justify-content: space-between; align-items: center; + padding: 0 50px; + background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); } @@ -41,33 +43,39 @@ body { .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; + transition: color 0.3s; } .nav__link:hover { - color: #00acdc; + color: var(--main-color); } -.nav__link.is-active { - color: #00acdc; +.is-active { + color: var(--main-color); } -.nav__link.is-active::after { +.is-active::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; + height: 4px; border-radius: 2px; - background-color: #00acdc; + background-color: var(--main-color) } From c9d610c39bcf9837fb9856ecbeda2f9843b9b685 Mon Sep 17 00:00:00 2001 From: Erik Hulinian Date: Sat, 10 Feb 2024 16:45:10 +0200 Subject: [PATCH 8/8] lastfix --- src/index.html | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/index.html b/src/index.html index 4932099f28..f4c2850804 100644 --- a/src/index.html +++ b/src/index.html @@ -24,7 +24,8 @@
    @@ -44,7 +45,8 @@
  • - Laptops & computers