From 17ace99eb2aea5a99d5f5856a1f38c326dda4f2d Mon Sep 17 00:00:00 2001 From: LitviVit Date: Mon, 29 Apr 2024 21:54:23 +0300 Subject: [PATCH 1/6] add task solution --- readme.md | 5 +-- src/index.html | 95 +++++++++++++++++++++++++++++++++++++++++++++++++- src/style.css | 79 ++++++++++++++++++++++++++++++++++++++++- 3 files changed, 175 insertions(+), 4 deletions(-) diff --git a/readme.md b/readme.md index e72b8051e7..100f98fabd 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://LitviVit.github.io/layout_moyo-header/) +- [TEST REPORT LINK](https://LitviVit.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..ce2e1813b3 100644 --- a/src/index.html +++ b/src/index.html @@ -11,12 +11,105 @@ content="ie=edge" /> Moyo header + + + -

Moyo header

+
+ + + +
diff --git a/src/style.css b/src/style.css index 293d3b1f13..838bd3d4a2 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,80 @@ -body { +:root { + --main-color: #00acdc; +} + +body, +ul { margin: 0; + padding: 0; +} + +body { + /* stylelint-disable-next-line font-family-name-quotes */ + font-family: 'Roboto', sans-serif; +} + +.header { + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; +} + +.logo { + display: block; + margin-left: 50px; + margin-right: 50px; +} + +.logo img { + vertical-align: middle; +} + +.nav { + display: flex; +} + +.list { + list-style: none; + display: flex; + align-items: center; + margin: 0 50px 0 0; +} + +.list_item { + margin-right: 20px; +} + +.list_item:last-child { + margin-right: 0; +} + +.nav_link { + display: block; + height: 60px; + text-decoration: none; + color: #000; + font-weight: 500; + font-size: 12px; + line-height: 60px; +} + +.nav_link:hover { + color: var(--main-color); +} + +.is-active { + position: relative; + color: var(--main-color); +} + +.is-active::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 4px; + background-color: var(--main-color); + border-radius: 8px; } From 0053d5dccce7730379e68a8a8056b11823f9f1e8 Mon Sep 17 00:00:00 2001 From: LitviVit Date: Mon, 29 Apr 2024 22:02:07 +0300 Subject: [PATCH 2/6] CSS is used to show all letters in Uppercase --- src/index.html | 16 ++++++++-------- src/style.css | 1 + 2 files changed, 9 insertions(+), 8 deletions(-) diff --git a/src/index.html b/src/index.html index ce2e1813b3..2a52c8a3ff 100644 --- a/src/index.html +++ b/src/index.html @@ -48,7 +48,7 @@ href="#" class="nav_link is-active" > - APPLE + Apple
  • @@ -56,7 +56,7 @@ href="#" class="nav_link" > - SAMSUNG + Samsung
  • @@ -64,7 +64,7 @@ href="#" class="nav_link" > - SMARTPHONES + Smartphones
  • @@ -73,7 +73,7 @@ data-qa="hover" class="nav_link" > - LAPTOPS & COMPUTERS + Laptops & Computers
  • @@ -81,7 +81,7 @@ href="#" class="nav_link" > - GADGETS + Gadgets
  • @@ -89,7 +89,7 @@ href="#" class="nav_link" > - TABLETS + Tablets
  • @@ -97,7 +97,7 @@ href="#" class="nav_link" > - PHOTO + Photo
  • @@ -105,7 +105,7 @@ href="#" class="nav_link" > - VIDEO + Video
    • diff --git a/src/style.css b/src/style.css index 838bd3d4a2..eb7da47e6b 100644 --- a/src/style.css +++ b/src/style.css @@ -57,6 +57,7 @@ body { font-weight: 500; font-size: 12px; line-height: 60px; + text-transform: uppercase; } .nav_link:hover { From 84a5c9a9857283c4d8ed069909cd2e002dd0212a Mon Sep 17 00:00:00 2001 From: LitviVit Date: Mon, 29 Apr 2024 22:08:59 +0300 Subject: [PATCH 3/6] ALL TESTS PASSED! --- src/style.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/style.css b/src/style.css index eb7da47e6b..cbda5e838c 100644 --- a/src/style.css +++ b/src/style.css @@ -32,13 +32,13 @@ body { .nav { display: flex; + margin: 0 50px 0 0; } .list { list-style: none; display: flex; align-items: center; - margin: 0 50px 0 0; } .list_item { From 799df6b2d72bf443d60380ce112b426e1d044a54 Mon Sep 17 00:00:00 2001 From: LitviVit Date: Thu, 2 May 2024 12:42:15 +0300 Subject: [PATCH 4/6] add some improvements and fixes --- src/index.html | 89 ++++++++------------------------------------------ src/style.css | 6 ++-- 2 files changed, 17 insertions(+), 78 deletions(-) diff --git a/src/index.html b/src/index.html index 2a52c8a3ff..4c4105e8e1 100644 --- a/src/index.html +++ b/src/index.html @@ -6,107 +6,46 @@ name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> - + Moyo header - - + + - +
    - - diff --git a/src/style.css b/src/style.css index cbda5e838c..f83e92dbb1 100644 --- a/src/style.css +++ b/src/style.css @@ -9,8 +9,7 @@ ul { } body { - /* stylelint-disable-next-line font-family-name-quotes */ - font-family: 'Roboto', sans-serif; + font-family: Roboto, sans-serif; } .header { @@ -18,6 +17,7 @@ body { display: flex; justify-content: space-between; align-items: center; + box-shadow: 0 2px 4px 0 #0000000d; } .logo { @@ -26,7 +26,7 @@ body { margin-right: 50px; } -.logo img { +.logo .img { vertical-align: middle; } From 1b87964292d32f4cb9a25795c72169b1e51fe7f2 Mon Sep 17 00:00:00 2001 From: LitviVit Date: Thu, 2 May 2024 12:46:48 +0300 Subject: [PATCH 5/6] crossorigin issue --- src/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/index.html b/src/index.html index 4c4105e8e1..e626d0412c 100644 --- a/src/index.html +++ b/src/index.html @@ -9,7 +9,7 @@ Moyo header - + Date: Fri, 3 May 2024 12:41:40 +0300 Subject: [PATCH 6/6] HTML formatting --- src/index.html | 95 ++++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 81 insertions(+), 14 deletions(-) diff --git a/src/index.html b/src/index.html index e626d0412c..7920d15f8f 100644 --- a/src/index.html +++ b/src/index.html @@ -6,46 +6,113 @@ name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" /> - + Moyo header - - + + - +
    -