From 1c9ac078172cf91240716e84852c1130ab87dc6c Mon Sep 17 00:00:00 2001 From: Misha Gurov Date: Wed, 1 May 2024 00:24:45 +0300 Subject: [PATCH 1/3] Created header --- package.json | 2 +- readme.md | 18 ++++----- src/index.html | 108 +++++++++++++++++++++++++++++++++++++++++++++---- src/style.css | 76 ++++++++++++++++++++++++++++++++++ 4 files changed, 186 insertions(+), 18 deletions(-) diff --git a/package.json b/package.json index 431baa9059..ba53b32302 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,7 @@ "@mate-academy/backstop-config": "latest", "@mate-academy/bemlint": "latest", "@mate-academy/linthtml-config": "latest", - "@mate-academy/scripts": "^1.7.3", + "@mate-academy/scripts": "^1.8.1", "@mate-academy/stylelint-config": "latest", "backstopjs": "6.2.2", "jest": "^29.7.0", diff --git a/readme.md b/readme.md index e72b8051e7..b8dd2498e2 100644 --- a/readme.md +++ b/readme.md @@ -27,15 +27,15 @@ 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://Mijomeis.github.io/layout_moyo-header/) +- [TEST REPORT LINK](https://Mijomeister.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. -- [ ] Header height is set in 1 place (for the links) -- [ ] Content is vertically centered (for any header height) -- [ ] CSS is used to show all letters in Uppercase (don't type them in HTML) -- [ ] Logo is an image wrapped with a link -- [ ] **CSS Variable** is used for a blue color -- [ ] Pseudo-element is used for a blue line below the active link -- [ ] Code follows all the [Code Style Rules ❗️](./checklist.md) +- [x] Header height is set in 1 place (for the links) +- [x] Content is vertically centered (for any header height) +- [x] CSS is used to show all letters in Uppercase (don't type them in HTML) +- [x] Logo is an image wrapped with a link +- [x] **CSS Variable** is used for a blue color +- [x] Pseudo-element is used for a blue line below the active link +- [x] Code follows all the [Code Style Rules ❗️](./checklist.md) diff --git a/src/index.html b/src/index.html index b39fe97123..648f25ebf7 100644 --- a/src/index.html +++ b/src/index.html @@ -1,22 +1,114 @@ + + + - - Moyo header + Document -

Moyo header

+
+ + + + + +
diff --git a/src/style.css b/src/style.css index 293d3b1f13..2124411e1a 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,79 @@ +html { + font-family: Roboto, sans-serif; + + font-size: 12px; + font-weight: 500; + line-height: 1.4; + color: #000; + background-color: rgba(22, 22, 23, 0.8); + + --header-height: 60px; +} + body { margin: 0; } + +.header { + position: relative; + display: flex; + justify-content: space-between; + align-items: center; + padding-inline: 50px; + + backdrop-filter: saturate(1.8) blur(20px); + background-color: #fff; +} + +.logo { + img { + width: 40; + } + + height: 40; +} + +.nav__list { + list-style: none; + margin: 0; + padding: 0; + + display: flex; +} + +.nav__toggler { + display: none; +} + +.nav__link { + display: flex; + align-items: center; + box-sizing: border-box; + min-height: var(--header-height); + color: inherit; + text-decoration: none; +} + +.nav__item:not(:last-child) { + margin-right: 20px; +} + +.nav__link:hover { + color: #00acdc; +} + +.is-active { + position: relative; + color: #00acdc; +} + +.is-active::after { + border-radius: 8px; + content: ''; + background-color: #00acdc; + height: 4px; + width: 37px; + position: absolute; + left: 0; + bottom: 0; +} From 2c2476b8f6397d93329e36cdb45f7405101fc287 Mon Sep 17 00:00:00 2001 From: Misha Gurov Date: Thu, 2 May 2024 22:05:57 +0300 Subject: [PATCH 2/3] added shadow --- package-lock.json | 6 +++--- src/style.css | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2bf24b2629..3e4a3eafd3 100644 --- a/package-lock.json +++ b/package-lock.json @@ -995,9 +995,9 @@ "dev": true }, "@mate-academy/scripts": { - "version": "1.7.3", - "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.7.3.tgz", - "integrity": "sha512-5cqlZbgbwIxiicQsjP7OR0cR/QBZTipfe4Eh/6VLn0dvP9yAhnZBu3ZN3PjS/1swlVthnIFrNL7xzU4gbPu3dQ==", + "version": "1.8.1", + "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.1.tgz", + "integrity": "sha512-zRhcI3uiflwWXeODuyELMqh1j4s438nTRiXXQ+v6Cs95kWMrfUDuzmg6ZqqJuIPZtmpg0KTLghGBf38vKalW/g==", "dev": true, "requires": { "@octokit/rest": "^17.11.2", diff --git a/src/style.css b/src/style.css index 2124411e1a..d9a4b6be4c 100644 --- a/src/style.css +++ b/src/style.css @@ -20,7 +20,7 @@ body { justify-content: space-between; align-items: center; padding-inline: 50px; - + box-shadow: 0 2px 4px 0 #0000000D; backdrop-filter: saturate(1.8) blur(20px); background-color: #fff; } From cda99313553b85437485072038b8e56ab1f2d030 Mon Sep 17 00:00:00 2001 From: Misha Gurov Date: Thu, 2 May 2024 22:16:08 +0300 Subject: [PATCH 3/3] change text in css to 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 648f25ebf7..77d08faa30 100644 --- a/src/index.html +++ b/src/index.html @@ -47,7 +47,7 @@ class="nav__link is-active" href="#link-1" > - APPLE + apple
  • @@ -55,7 +55,7 @@ class="nav__link" href="#link-2" > - SAMSUNG + samsung
  • @@ -63,7 +63,7 @@ class="nav__link" href="#link-3" > - SMARTPHONES + smartphones
  • @@ -72,7 +72,7 @@ class="nav__link" href="#link-4" > - LAPTOPS & COMPUTERS + laptops & computers
  • @@ -80,7 +80,7 @@ class="nav__link" href="#link-5" > - GADGETS + gadgets
  • @@ -88,7 +88,7 @@ class="nav__link" href="#link-6" > - TABLETS + tablets
  • @@ -96,7 +96,7 @@ class="nav__link" href="#link-7" > - PHOTO + photo
  • @@ -104,7 +104,7 @@ class="nav__link" href="#link-8" > - VIDEO + video
    • diff --git a/src/style.css b/src/style.css index d9a4b6be4c..2f213ddb31 100644 --- a/src/style.css +++ b/src/style.css @@ -51,6 +51,7 @@ body { box-sizing: border-box; min-height: var(--header-height); color: inherit; + text-transform: uppercase; text-decoration: none; }