From cc960ecccf1152096da9b0aa4a508c10ce263848 Mon Sep 17 00:00:00 2001 From: Artem Puzenko Date: Sat, 14 Sep 2024 20:06:02 +0300 Subject: [PATCH 1/9] add task solution --- readme.md | 4 +- src/index.html | 63 ++++++++++++++++++++++++- src/style.css | 126 +++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 190 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index e72b8051e7..321f7c003d 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://artuom2283.github.io/layout_moyo-header/) +- [TEST REPORT LINK](https://artuom2283.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..308443cdb4 100644 --- a/src/index.html +++ b/src/index.html @@ -11,12 +11,73 @@ content="ie=edge" /> Moyo header + + + -

Moyo header

+
+ + +
diff --git a/src/style.css b/src/style.css index 293d3b1f13..46834fc8c5 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,129 @@ +:root { + --link-color: #00acdc; +} + +html { + font-family: Roboto, sans-serif; + font-size: 12px; + font-weight: 500; +} + body { margin: 0; } + +.header { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 50px; + margin-top: 10px; + margin-bottom: 10px; + height: 60px; + box-sizing: border-box; +} + +.nav-logo a { + display: flex; + align-items: center; +} + +img { + width: 40px; + height: 40px; +} + +.nav { + display: flex; + align-items: center; +} + +.nav-links { + display: flex; + justify-content: flex-end; +} + +ul { + list-style: none; + padding: 0; + margin: 0; + line-height: 60px; +} + +li { + display: inline-block; + margin-left: 17px; + text-align: center; + height: 60px; + line-height: 60px; +} + +.nav a { + all: unset; + text-decoration: none; + cursor: pointer; + display: flex; +} + +a[data-qa='hover'] { + /* color: var(--link-color); */ +} + +a[data-qa='hover']:hover { + color: var(--link-color); +} + +a.is-active::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 4px; + background-color: var(--link-color); + border-radius: 2px; + transform: scaleX(1); + transition: transform 0.15s ease-in-out; +} + +a.is-active:hover::after { + transform: scaleX(1); +} + +li.is-active { + position: relative; +} + +li.is-active:link { + color: black; +} + +li.is-active:visited { + color: grey; +} + +li.is-active:hover { + text-decoration-color: var(--link-color); +} + +/* li.is-active::after { + content: ''; + position: absolute; + left: 0; + bottom: 0; + width: 100%; + height: 4px; + background-color: var(--link-color); + border-radius: 2px; + transform: scaleX(0); + transition: transform 0.15s ease-in-out; +} */ + +li.is-active:hover::after { + transform: scaleX(1); +} + +li.nav-item.is-active.apple-active a { + color: var(--link-color); +} From d9149a3d72337261564a8414fd8684e4e0676f00 Mon Sep 17 00:00:00 2001 From: Artem Puzenko Date: Sat, 14 Sep 2024 20:34:09 +0300 Subject: [PATCH 2/9] style fix --- src/style.css | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/style.css b/src/style.css index 46834fc8c5..e6610f5f23 100644 --- a/src/style.css +++ b/src/style.css @@ -59,6 +59,10 @@ li { line-height: 60px; } +li:first-child { + margin-left: 0; +} + .nav a { all: unset; text-decoration: none; From 36d3f039f2cccb687f20990e0f446df9da88944e Mon Sep 17 00:00:00 2001 From: Artem Puzenko Date: Sat, 14 Sep 2024 20:57:12 +0300 Subject: [PATCH 3/9] add task solution --- src/index.html | 22 +++++++++++----------- src/style.css | 11 +++-------- 2 files changed, 14 insertions(+), 19 deletions(-) diff --git a/src/index.html b/src/index.html index 308443cdb4..22f743094f 100644 --- a/src/index.html +++ b/src/index.html @@ -31,49 +31,49 @@
diff --git a/src/style.css b/src/style.css index 2e676ac132..4cbae9ce71 100644 --- a/src/style.css +++ b/src/style.css @@ -43,7 +43,7 @@ img { justify-content: flex-end; } -ul.nav-list { +.nav-list { list-style: none; padding: 0; margin: 0; @@ -70,15 +70,20 @@ li:first-child { color: black; } +.nav-item:nth-of-type(1) .nav__link { + color: var(--link-color) !important; +} + a[data-qa='hover']:hover { color: var(--link-color); } -a.is-active { +.is-active { color: var(--link-color); + position: relative; } -a.is-active::after { +.is-active::after { content: ''; position: absolute; left: 0; @@ -91,43 +96,22 @@ a.is-active::after { transition: transform 0.15s ease-in-out; } -a.is-active:hover::after { +.is-active:hover::after { transform: scaleX(1); } -li.is-active { - position: relative; -} - -li.is-active:link { +.is-active:link { color: black; } -li.is-active:visited { +.is-active:visited { color: grey; } -li.is-active:hover { +.is-active:hover { text-decoration-color: var(--link-color); } -/* li.is-active::after { - content: ''; - position: absolute; - left: 0; - bottom: 0; - width: 100%; - height: 4px; - background-color: var(--link-color); - border-radius: 2px; - transform: scaleX(0); - transition: transform 0.15s ease-in-out; -} */ - -li.is-active:hover::after { - transform: scaleX(1); -} - -li.nav-item.is-active.apple-active a { +.nav-item.is-active.apple-active a { color: var(--link-color); } From 3071fea480b39f0ae0ff2c0b7c0642ccd557af6f Mon Sep 17 00:00:00 2001 From: Artem Puzenko Date: Sun, 15 Sep 2024 22:51:45 +0300 Subject: [PATCH 6/9] fixed the mistakes --- src/index.html | 66 ++++++++++++++++++++++++++++++++++++++------------ src/style.css | 15 +++++++----- 2 files changed, 60 insertions(+), 21 deletions(-) diff --git a/src/index.html b/src/index.html index ffb5682b91..ceccb9e084 100644 --- a/src/index.html +++ b/src/index.html @@ -30,49 +30,85 @@
- + + MOYO-logo + diff --git a/src/style.css b/src/style.css index 4cbae9ce71..0df985df7b 100644 --- a/src/style.css +++ b/src/style.css @@ -18,7 +18,6 @@ body { align-items: center; justify-content: space-between; padding: 0 50px; - margin: 10px 0; height: 60px; box-sizing: border-box; } @@ -50,7 +49,7 @@ img { line-height: 60px; } -li { +.nav-item { display: inline-block; margin-left: 17px; text-align: center; @@ -58,11 +57,11 @@ li { line-height: 60px; } -li:first-child { +.nav-item:first-child { margin-left: 0; } -.nav a { +.nav .nav__link { text-transform: uppercase; text-decoration: none; cursor: pointer; @@ -70,11 +69,15 @@ li:first-child { color: black; } +.nav__link:hover { + color: var(--link-color) !important; +} + .nav-item:nth-of-type(1) .nav__link { color: var(--link-color) !important; } -a[data-qa='hover']:hover { +.nav__link[data-qa='hover']:hover { color: var(--link-color); } @@ -112,6 +115,6 @@ a[data-qa='hover']:hover { text-decoration-color: var(--link-color); } -.nav-item.is-active.apple-active a { +.nav-item.is-active.apple-active .nav__link { color: var(--link-color); } From da9ecb3b112d702f9a729eaef32d62620f3812c8 Mon Sep 17 00:00:00 2001 From: Artem Puzenko Date: Mon, 16 Sep 2024 08:18:58 +0300 Subject: [PATCH 7/9] fixed the mistakes 2.0 --- src/style.css | 28 ++-------------------------- 1 file changed, 2 insertions(+), 26 deletions(-) diff --git a/src/style.css b/src/style.css index 0df985df7b..a3b385a0b8 100644 --- a/src/style.css +++ b/src/style.css @@ -70,14 +70,10 @@ img { } .nav__link:hover { - color: var(--link-color) !important; -} - -.nav-item:nth-of-type(1) .nav__link { - color: var(--link-color) !important; + color: var(--link-color); } -.nav__link[data-qa='hover']:hover { +.nav__link[href='#apple'] { color: var(--link-color); } @@ -98,23 +94,3 @@ img { transform: scaleX(1); transition: transform 0.15s ease-in-out; } - -.is-active:hover::after { - transform: scaleX(1); -} - -.is-active:link { - color: black; -} - -.is-active:visited { - color: grey; -} - -.is-active:hover { - text-decoration-color: var(--link-color); -} - -.nav-item.is-active.apple-active .nav__link { - color: var(--link-color); -} From 6240ce31bb2057cd2faf5285577d9f22366d3602 Mon Sep 17 00:00:00 2001 From: Artem Puzenko Date: Mon, 16 Sep 2024 09:59:47 +0300 Subject: [PATCH 8/9] fixed the mistakes 3.0 --- src/index.html | 15 +++++++++------ src/style.css | 4 +--- 2 files changed, 10 insertions(+), 9 deletions(-) diff --git a/src/index.html b/src/index.html index ceccb9e084..98e30e5058 100644 --- a/src/index.html +++ b/src/index.html @@ -30,12 +30,15 @@
- - MOYO-logo - + +