From 1eea446078c1a8f496e39b1296d2dc8e2b9a6f34 Mon Sep 17 00:00:00 2001 From: diachkinainna Date: Sat, 7 Dec 2024 18:51:59 +0200 Subject: [PATCH 01/13] add solution --- src/index.html | 96 +++++++++++++++++++++++++++++++++++++++++++++++++- src/style.css | 55 +++++++++++++++++++++++++++++ 2 files changed, 150 insertions(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index b39fe97123..44cd5f5ba2 100644 --- a/src/index.html +++ b/src/index.html @@ -1,6 +1,19 @@ + + + -

Moyo header

+
+
+ + MOYO-logo + +
+ +
diff --git a/src/style.css b/src/style.css index 293d3b1f13..2a32865937 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,58 @@ body { margin: 0; + + --active-link-color: #00acdc; +} + +header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 50px; +} + +.logo__img { + display: block; + width: 40px; + height: 40px; +} + +.nav__list { + list-style: none; + margin: 0; + padding: 0; + display: flex; +} + +.nav__link { + display: flex; + height: 60px; + align-items: center; + font-family: Roboto, sans-serif; + text-decoration: none; + text-transform: uppercase; + font-weight: 500px; + font-size: 12px; + color: #000; + margin-left: 20px; +} + +a.is-active { + color: var(--active-link-color); + margin: 0; +} + +:hover { + color: var(--active-link-color); +} + +a.is-active::after { + content: ''; + height: 4px; + width: 37px; + position: absolute; + right: 649px; + top: 56px; + background-color: var(--active-link-color); + border-radius: 8px; } From 7620ec8e4bcae800e07eea6666a1cac4f3e50a1e Mon Sep 17 00:00:00 2001 From: diachkinainna Date: Sat, 7 Dec 2024 20:22:40 +0200 Subject: [PATCH 02/13] delete redundant selector --- src/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/style.css b/src/style.css index 2a32865937..2ab4262c0f 100644 --- a/src/style.css +++ b/src/style.css @@ -37,7 +37,7 @@ header { margin-left: 20px; } -a.is-active { +is-active { color: var(--active-link-color); margin: 0; } @@ -46,7 +46,7 @@ a.is-active { color: var(--active-link-color); } -a.is-active::after { +is-active::after { content: ''; height: 4px; width: 37px; From 7bf831d91e6c601f39e80e2e23ee26f23cc919a7 Mon Sep 17 00:00:00 2001 From: diachkinainna Date: Sat, 7 Dec 2024 20:30:46 +0200 Subject: [PATCH 03/13] solution --- src/style.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/style.css b/src/style.css index 2ab4262c0f..2a32865937 100644 --- a/src/style.css +++ b/src/style.css @@ -37,7 +37,7 @@ header { margin-left: 20px; } -is-active { +a.is-active { color: var(--active-link-color); margin: 0; } @@ -46,7 +46,7 @@ is-active { color: var(--active-link-color); } -is-active::after { +a.is-active::after { content: ''; height: 4px; width: 37px; From 98cfdbe2d82bc63aaee6dddd0d72cbe270cda269 Mon Sep 17 00:00:00 2001 From: diachkinainna Date: Sat, 7 Dec 2024 20:45:30 +0200 Subject: [PATCH 04/13] deploy solution --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index 44cd5f5ba2..0ee07c58ca 100644 --- a/src/index.html +++ b/src/index.html @@ -38,7 +38,7 @@ > MOYO-logo From 7e2561fa88acf73dd45fadc81b1173d639a0664d Mon Sep 17 00:00:00 2001 From: diachkinainna Date: Sat, 7 Dec 2024 21:05:02 +0200 Subject: [PATCH 05/13] fixed after:: --- src/style.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/style.css b/src/style.css index 2a32865937..37f83508d0 100644 --- a/src/style.css +++ b/src/style.css @@ -25,6 +25,7 @@ header { } .nav__link { + position: relative; display: flex; height: 60px; align-items: center; @@ -37,7 +38,7 @@ header { margin-left: 20px; } -a.is-active { +.is-active { color: var(--active-link-color); margin: 0; } @@ -46,13 +47,12 @@ a.is-active { color: var(--active-link-color); } -a.is-active::after { +.is-active::after { content: ''; height: 4px; - width: 37px; position: absolute; - right: 649px; - top: 56px; + width: 100%; + bottom: 0; background-color: var(--active-link-color); border-radius: 8px; } From 67a98ad1786a889e9b109c8580e23006c91701ff Mon Sep 17 00:00:00 2001 From: diachkinainna Date: Sun, 8 Dec 2024 12:16:34 +0200 Subject: [PATCH 06/13] test --- src/style.css | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/style.css b/src/style.css index 37f83508d0..d41417dc3d 100644 --- a/src/style.css +++ b/src/style.css @@ -18,6 +18,7 @@ header { } .nav__list { + flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; @@ -25,7 +26,6 @@ header { } .nav__link { - position: relative; display: flex; height: 60px; align-items: center; @@ -39,6 +39,7 @@ header { } .is-active { + position: relative; color: var(--active-link-color); margin: 0; } From b5517254d7ecf6e7199398982cddee15eb004c39 Mon Sep 17 00:00:00 2001 From: diachkinainna Date: Mon, 9 Dec 2024 12:06:25 +0200 Subject: [PATCH 07/13] test solution --- src/index.html | 36 ++++++++++++++++++------------------ src/style.css | 18 +++++++++++++----- 2 files changed, 31 insertions(+), 23 deletions(-) diff --git a/src/index.html b/src/index.html index 0ee07c58ca..f0b8f67fc5 100644 --- a/src/index.html +++ b/src/index.html @@ -1,6 +1,15 @@ + + + - - - Moyo header -
+
  • Apple @@ -54,7 +54,7 @@
  • Samsung @@ -62,7 +62,7 @@
  • Smartphones @@ -70,7 +70,7 @@
  • @@ -79,7 +79,7 @@
  • Gadgets @@ -87,7 +87,7 @@
  • Tablets @@ -95,7 +95,7 @@
  • Photo @@ -103,7 +103,7 @@
  • Video diff --git a/src/style.css b/src/style.css index d41417dc3d..d90a4e5f35 100644 --- a/src/style.css +++ b/src/style.css @@ -4,7 +4,7 @@ body { --active-link-color: #00acdc; } -header { +.header { display: flex; align-items: center; justify-content: space-between; @@ -18,30 +18,36 @@ header { } .nav__list { - flex-wrap: nowrap; list-style: none; margin: 0; padding: 0; display: flex; } +.nav__item { + margin-right: 20px; +} + .nav__link { + position: relative; display: flex; height: 60px; align-items: center; + justify-content: center; font-family: Roboto, sans-serif; text-decoration: none; text-transform: uppercase; font-weight: 500px; font-size: 12px; color: #000; - margin-left: 20px; +} + +.nav__item:last-child { + margin-right: 0; } .is-active { - position: relative; color: var(--active-link-color); - margin: 0; } :hover { @@ -49,10 +55,12 @@ header { } .is-active::after { + display: block; content: ''; height: 4px; position: absolute; width: 100%; + left: 0; bottom: 0; background-color: var(--active-link-color); border-radius: 8px; From 132596552edc29f93834dfd85b883c922ba83ae5 Mon Sep 17 00:00:00 2001 From: diachkinainna Date: Mon, 9 Dec 2024 14:06:52 +0200 Subject: [PATCH 08/13] test2 --- src/style.css | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/src/style.css b/src/style.css index d90a4e5f35..baff3cb5a3 100644 --- a/src/style.css +++ b/src/style.css @@ -24,12 +24,7 @@ body { display: flex; } -.nav__item { - margin-right: 20px; -} - .nav__link { - position: relative; display: flex; height: 60px; align-items: center; @@ -40,14 +35,13 @@ body { font-weight: 500px; font-size: 12px; color: #000; -} - -.nav__item:last-child { - margin-right: 0; + margin-left: 20px; } .is-active { + position: relative; color: var(--active-link-color); + margin: 0; } :hover { @@ -55,12 +49,10 @@ body { } .is-active::after { - display: block; content: ''; height: 4px; position: absolute; width: 100%; - left: 0; bottom: 0; background-color: var(--active-link-color); border-radius: 8px; From 7e23fbf330a60cd4a63033dfb9e76f3a322f325d Mon Sep 17 00:00:00 2001 From: diachkinainna Date: Tue, 10 Dec 2024 07:27:06 +0200 Subject: [PATCH 09/13] add index.html --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index f0b8f67fc5..a4a9005f2b 100644 --- a/src/index.html +++ b/src/index.html @@ -38,7 +38,7 @@ > Moyo-logo
    • From c85c09dc0e0913c23068e8a5ac280098ae1bf4b7 Mon Sep 17 00:00:00 2001 From: diachkinainna Date: Tue, 10 Dec 2024 08:09:52 +0200 Subject: [PATCH 10/13] test3 --- src/index.html | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/src/index.html b/src/index.html index a4a9005f2b..fa96f0c2be 100644 --- a/src/index.html +++ b/src/index.html @@ -30,7 +30,7 @@ /> -
    +
    -