From d79722e4f7c741d2e24fddfaed6dc3c531c00a8c Mon Sep 17 00:00:00 2001 From: Mateusz Pawlak Date: Fri, 20 Dec 2024 23:09:11 +0100 Subject: [PATCH 1/5] add task solution --- readme.md | 4 +-- src/index.html | 94 +++++++++++++++++++++++++++++++++++++++++++++++++- src/style.css | 78 ++++++++++++++++++++++++++++++++++++++++- 3 files changed, 172 insertions(+), 4 deletions(-) diff --git a/readme.md b/readme.md index e72b8051e7..3262b7dc18 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://codoeh.github.io/layout_moyo-header/) +- [TEST REPORT LINK](https://codoeh.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..f66a325459 100644 --- a/src/index.html +++ b/src/index.html @@ -1,6 +1,19 @@ + + + -

Moyo header

+
+ + +
diff --git a/src/style.css b/src/style.css index 293d3b1f13..75886b45bd 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,79 @@ -body { +* { margin: 0; + padding: 0; + box-sizing: border-box; +} + +body { + font-family: Roboto, sans-serif; + background-color: #f5f5f5; +} + +:root { + --blue-color: rgba(0, 172, 220, 1); +} + +/* Header Styles */ +.header { + height: 60px; + display: flex; + align-items: center; + justify-content: space-evenly; + width: 100%; + background-color: white; + padding: 0 20px; +} + +.logo img { + display: block; + height: 40px; +} + +/* Navigation Styles */ +.navigation { + display: flex; +} + +.nav-list { + display: flex; + list-style: none; + justify-content: flex-end; +} + +.nav-list li:not(:last-child) { + margin-right: 40px; /* Adjust spacing between links */ +} + +.nav-link { + text-decoration: none; + color: black; + font-size: 12px; /* Adjust according to design */ + line-height: 15px; /* Match the header height */ + font-family: Roboto, sans-serif; + font-weight: 500; + text-transform: uppercase; + text-align: center; + position: relative; /* For the ::after pseudo-element */ + transition: color 0.3s ease; +} + +.nav-link:hover { + color: var(--blue-color); +} + +.nav-link.is-active { + color: var(--blue-color); +} + +.nav-link.is-active::after { + width: 35.4px; + height: 2.4px; + border: 1px solid var(--blue-color); + background-color: var(--blue-color); + top: 30px; + left: 0; + right: 0; + border-radius: 8px; + position: absolute; + content: ''; } From c888e013a6199538567a0c0ed82778cb33d13fa1 Mon Sep 17 00:00:00 2001 From: Mateusz Pawlak Date: Sat, 21 Dec 2024 00:12:58 +0100 Subject: [PATCH 2/5] solution2 --- src/style.css | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/style.css b/src/style.css index 75886b45bd..87b7199bbf 100644 --- a/src/style.css +++ b/src/style.css @@ -1,5 +1,5 @@ -* { - margin: 0; +html { + margin: 0 auto; padding: 0; box-sizing: border-box; } @@ -7,6 +7,7 @@ body { font-family: Roboto, sans-serif; background-color: #f5f5f5; + margin: 0; } :root { @@ -15,13 +16,11 @@ body { /* Header Styles */ .header { - height: 60px; display: flex; align-items: center; justify-content: space-evenly; width: 100%; background-color: white; - padding: 0 20px; } .logo img { @@ -32,16 +31,21 @@ body { /* Navigation Styles */ .navigation { display: flex; + align-items: center; } .nav-list { + height: 60px; display: flex; list-style: none; - justify-content: flex-end; + justify-content: center; + align-items: center; + margin: 0; } .nav-list li:not(:last-child) { margin-right: 40px; /* Adjust spacing between links */ + text-align: center; } .nav-link { From 6fb30a4c21804dd282727f549d4e11fb5a60715b Mon Sep 17 00:00:00 2001 From: Mateusz Pawlak Date: Sat, 21 Dec 2024 10:11:06 +0100 Subject: [PATCH 3/5] solution3 --- src/index.html | 4 ++-- src/style.css | 46 ++++++++++++++++++++++++++++++---------------- 2 files changed, 32 insertions(+), 18 deletions(-) diff --git a/src/index.html b/src/index.html index f66a325459..e82ab7cfb8 100644 --- a/src/index.html +++ b/src/index.html @@ -11,7 +11,7 @@ crossorigin="anonymous" /> @@ -72,7 +72,7 @@ class="nav-link link-4" data-qa="hover" > - Laptops & Computers + Laptops & Computers
  • diff --git a/src/style.css b/src/style.css index 87b7199bbf..00b8d91688 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,8 @@ +@font-face { + font-family: Roboto; + src: url(href='https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap'rel='stylesheet'); +} + html { margin: 0 auto; padding: 0; @@ -5,7 +10,7 @@ html { } body { - font-family: Roboto, sans-serif; + font-family: Roboto, serif; background-color: #f5f5f5; margin: 0; } @@ -14,21 +19,20 @@ body { --blue-color: rgba(0, 172, 220, 1); } -/* Header Styles */ .header { display: flex; align-items: center; - justify-content: space-evenly; + justify-content: space-between; width: 100%; - background-color: white; + background-color: rgba(255, 255, 255, 1); } .logo img { display: block; height: 40px; + margin-left: 50px; } -/* Navigation Styles */ .navigation { display: flex; align-items: center; @@ -41,24 +45,34 @@ body { justify-content: center; align-items: center; margin: 0; + white-space: nowrap; +} + +li { + display: flex; + align-items: center; + justify-content: center; } .nav-list li:not(:last-child) { - margin-right: 40px; /* Adjust spacing between links */ - text-align: center; + margin-right: 20px; +} + +.nav-list li:last-child { + margin-right: 50px; } .nav-link { text-decoration: none; - color: black; - font-size: 12px; /* Adjust according to design */ - line-height: 15px; /* Match the header height */ + color: rgba(0, 0, 0, 1); + font-size: 12px; + line-height: 60px; font-family: Roboto, sans-serif; font-weight: 500; text-transform: uppercase; text-align: center; - position: relative; /* For the ::after pseudo-element */ - transition: color 0.3s ease; + position: relative; + align-self: auto; } .nav-link:hover { @@ -70,11 +84,11 @@ body { } .nav-link.is-active::after { - width: 35.4px; - height: 2.4px; - border: 1px solid var(--blue-color); + width: 37px; + height: 4px; + border: 0 solid var(--blue-color); background-color: var(--blue-color); - top: 30px; + bottom: 0; left: 0; right: 0; border-radius: 8px; From ec9bb5c1750da96bf517691f640f755fcf98ff26 Mon Sep 17 00:00:00 2001 From: Mateusz Pawlak Date: Sat, 21 Dec 2024 10:17:47 +0100 Subject: [PATCH 4/5] solution4 --- package-lock.json | 9 +++++---- package.json | 3 +-- src/style.css | 3 ++- 3 files changed, 8 insertions(+), 7 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7eef7e5ecc..3738cb1849 100644 --- a/package-lock.json +++ b/package-lock.json @@ -14,7 +14,7 @@ "@mate-academy/backstop-config": "latest", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "backstopjs": "6.3.23", "jest": "^29.7.0", @@ -1211,10 +1211,11 @@ "dev": true }, "node_modules/@mate-academy/scripts": { - "version": "1.8.6", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz", - "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==", + "version": "1.9.12", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz", + "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==", "dev": true, + "license": "MIT", "dependencies": { "@octokit/rest": "^17.11.2", "@types/get-port": "^4.2.0", diff --git a/package.json b/package.json index 45fd6b0d41..ef9b108584 100644 --- a/package.json +++ b/package.json @@ -17,13 +17,12 @@ "keywords": [], "author": "Mate Academy", "license": "GPL-3.0", - "dependencies": {}, "devDependencies": { "@linthtml/linthtml": "^0.9.6", "@mate-academy/backstop-config": "latest", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.8.6", + "@mate-academy/scripts": "^1.9.12", "@mate-academy/stylelint-config": "latest", "backstopjs": "6.3.23", "jest": "^29.7.0", diff --git a/src/style.css b/src/style.css index 00b8d91688..c9e0db587d 100644 --- a/src/style.css +++ b/src/style.css @@ -39,7 +39,7 @@ body { } .nav-list { - height: 60px; + /* height: 60px; */ display: flex; list-style: none; justify-content: center; @@ -49,6 +49,7 @@ body { } li { + height: 60px; display: flex; align-items: center; justify-content: center; From f11ef76e2a4c13784829ae32d07ce5cad294a91f Mon Sep 17 00:00:00 2001 From: Mateusz Pawlak Date: Sat, 21 Dec 2024 11:41:30 +0100 Subject: [PATCH 5/5] solution5 --- src/style.css | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/src/style.css b/src/style.css index c9e0db587d..8904446ba0 100644 --- a/src/style.css +++ b/src/style.css @@ -1,6 +1,6 @@ @font-face { font-family: Roboto; - src: url(href='https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap'rel='stylesheet'); + src: url('https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap'rel='stylesheet'); } html { @@ -36,16 +36,20 @@ body { .navigation { display: flex; align-items: center; + justify-content: space-around; + margin-right: 50px; } .nav-list { - /* height: 60px; */ display: flex; list-style: none; justify-content: center; align-items: center; - margin: 0; + margin: 0 auto; white-space: nowrap; + overflow: hidden; + padding: 0; + gap: 20px; } li { @@ -53,17 +57,13 @@ li { display: flex; align-items: center; justify-content: center; -} - -.nav-list li:not(:last-child) { - margin-right: 20px; -} - -.nav-list li:last-child { - margin-right: 50px; + width: auto; } .nav-link { + display: flex; + align-items: center; + justify-content: center; text-decoration: none; color: rgba(0, 0, 0, 1); font-size: 12px; @@ -73,7 +73,6 @@ li { text-transform: uppercase; text-align: center; position: relative; - align-self: auto; } .nav-link:hover { @@ -85,13 +84,12 @@ li { } .nav-link.is-active::after { - width: 37px; + width: 100%; height: 4px; - border: 0 solid var(--blue-color); + border: 0; background-color: var(--blue-color); bottom: 0; left: 0; - right: 0; border-radius: 8px; position: absolute; content: '';