From caef7a84f08c08dc79cf8ba8f787fbc1bfdb6c47 Mon Sep 17 00:00:00 2001 From: Patryk Czarnocki Date: Sat, 19 Oct 2024 21:54:12 +0200 Subject: [PATCH 01/14] header base --- readme.md | 5 +++-- src/index.html | 35 +++++++++++++++++++++++++++++++++++ src/style.css | 26 ++++++++++++++++++++++++++ 3 files changed, 64 insertions(+), 2 deletions(-) diff --git a/readme.md b/readme.md index e72b8051e7..46a8fde421 100644 --- a/readme.md +++ b/readme.md @@ -1,4 +1,5 @@ # Moyo header + Create HTML page with the header using `flexbox` based on the [Figma Mockup](https://www.figma.com/file/1sog2rmfyCjnVxkeZ3ptnc/MOYO-%2F-Header?node-id=0%3A1&mode=dev). The page should match the design Pixel Perfect: all the sizes, colors and distanced MUST be the same as on the design. @@ -27,8 +28,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://pat5513.github.io/layout_moyo-header/) +- [TEST REPORT LINK](https://pat5513.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..654e6bf4ec 100644 --- a/src/index.html +++ b/src/index.html @@ -11,12 +11,47 @@ content="ie=edge" /> Moyo header + + + +

Moyo header

+
+
+ +
+ +
diff --git a/src/style.css b/src/style.css index 293d3b1f13..266aafbd11 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,29 @@ +:root { + --nav-text: #000; + --nav-hover: background: #00acdc; +} + body { margin: 0; + font-family: Roboto, sans-serif; +} + +.header { + width: 100vw; + border: 5px solid gray; + display: flex; +} + +.nav { + height: 60px; +} + +li { + display: inline; + text-transform: uppercase; +} + +a { + text-decoration: none; + color: var(--nav-text); } From 1c46c71d58a392aa07fad644bb5f4606acaa8803 Mon Sep 17 00:00:00 2001 From: Patryk Czarnocki Date: Sun, 20 Oct 2024 11:12:28 +0200 Subject: [PATCH 02/14] styling improve --- src/index.html | 31 ++++++++++++++----------------- src/style.css | 41 ++++++++++++++++++++++++++++++++++------- 2 files changed, 48 insertions(+), 24 deletions(-) diff --git a/src/index.html b/src/index.html index 654e6bf4ec..27af93ccd8 100644 --- a/src/index.html +++ b/src/index.html @@ -18,7 +18,6 @@

Moyo header

-
- -
+
diff --git a/src/style.css b/src/style.css index 266aafbd11..8f9666a7d8 100644 --- a/src/style.css +++ b/src/style.css @@ -3,27 +3,54 @@ --nav-hover: background: #00acdc; } -body { +* { + box-sizing: border-box; margin: 0; + padding: 0; +} + +li, +a { font-family: Roboto, sans-serif; + font-weight: 500; + font-size: 12px; + text-decoration: none; + color: var(--nav-text); + text-transform: uppercase; + cursor: pointer; +} + +.nav__links li a { + transition: all 0.3s ease 0s; +} + +.nav__links li a:hover { + color: var(--nav-hover); } .header { width: 100vw; - border: 5px solid gray; display: flex; + justify-content: space-between; + align-items: center; + border: 1px solid black; } .nav { - height: 60px; + display: flex; + width: 80%; + margin: auto; + align-items: center; + justify-content: center; + height: 100%; } li { - display: inline; + display: inline-block; + padding: 0 20px; text-transform: uppercase; } -a { - text-decoration: none; - color: var(--nav-text); +.logo { + padding: 10px; } From d1be9a38c1832fc6b0ba4724017727409b710542 Mon Sep 17 00:00:00 2001 From: Patryk Czarnocki Date: Sun, 20 Oct 2024 12:58:51 +0200 Subject: [PATCH 03/14] hover underlines --- src/index.html | 9 ++++++++- src/style.css | 18 +++++++++++++++--- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/src/index.html b/src/index.html index 27af93ccd8..31a4fc7833 100644 --- a/src/index.html +++ b/src/index.html @@ -42,7 +42,14 @@

Moyo header

  • Apple
  • Samsung
  • Smartphones
    • -
  • Laptops & computers
    • +
  • + + Laptops & computers + +
  • Gadgets
  • Tablets
  • Photo
    • diff --git a/src/style.css b/src/style.css index 8f9666a7d8..c9f6d18fdb 100644 --- a/src/style.css +++ b/src/style.css @@ -1,6 +1,6 @@ :root { --nav-text: #000; - --nav-hover: background: #00acdc; + --nav-hover: #00acdc; } * { @@ -33,7 +33,8 @@ a { display: flex; justify-content: space-between; align-items: center; - border: 1px solid black; + padding: 0 50px; + position: relative; } .nav { @@ -41,7 +42,7 @@ a { width: 80%; margin: auto; align-items: center; - justify-content: center; + justify-content: flex-end; height: 100%; } @@ -54,3 +55,14 @@ li { .logo { padding: 10px; } + +.nav__links li:hover::after { + content: ''; + display: block; + height: 4px; + width: 30px; + background-color: var(--nav-hover); + border-radius: 50; + position: absolute; + bottom: 0; +} From 2aa6a8b8917444676ec78f5392fcbf04c626e5f9 Mon Sep 17 00:00:00 2001 From: Patryk Czarnocki Date: Sun, 20 Oct 2024 13:04:10 +0200 Subject: [PATCH 04/14] style touch --- src/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/style.css b/src/style.css index c9f6d18fdb..db8b4886db 100644 --- a/src/style.css +++ b/src/style.css @@ -48,7 +48,7 @@ a { li { display: inline-block; - padding: 0 20px; + padding: 0 10px; text-transform: uppercase; } From 6c2a20785ffec1fde5454aa8a7ff40b4ff295333 Mon Sep 17 00:00:00 2001 From: Patryk Czarnocki Date: Sun, 20 Oct 2024 15:15:34 +0200 Subject: [PATCH 05/14] padding improve --- src/style.css | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/style.css b/src/style.css index db8b4886db..b1b004fdd6 100644 --- a/src/style.css +++ b/src/style.css @@ -34,35 +34,41 @@ a { justify-content: space-between; align-items: center; padding: 0 50px; - position: relative; } .nav { display: flex; - width: 80%; - margin: auto; align-items: center; justify-content: flex-end; - height: 100%; } li { + position: relative; display: inline-block; - padding: 0 10px; text-transform: uppercase; + padding: 0 10px; +} + +li:first-of-type { + padding-left: 0; +} + +li:last-of-type { + padding-right: 0; } .logo { - padding: 10px; + padding: 10px 0; } -.nav__links li:hover::after { +.nav__links a:hover::after { content: ''; display: block; height: 4px; - width: 30px; background-color: var(--nav-hover); border-radius: 50; position: absolute; - bottom: 0; + bottom: -22px; + right: 10px; + left: 10px; } From 6768f5f1fe3e08bdca0743255c5f029f35c5af40 Mon Sep 17 00:00:00 2001 From: Patryk Czarnocki Date: Sun, 20 Oct 2024 16:31:52 +0200 Subject: [PATCH 06/14] is-active link --- src/index.html | 9 ++++++++- src/style.css | 8 ++++++-- 2 files changed, 14 insertions(+), 3 deletions(-) diff --git a/src/index.html b/src/index.html index 31a4fc7833..94bd4d0f20 100644 --- a/src/index.html +++ b/src/index.html @@ -39,7 +39,14 @@

    Moyo header

    />