From ef68ac03b8a102b0e0c8ba1824c2729050f63c94 Mon Sep 17 00:00:00 2001 From: Amir Al-Mohamad <131036084+amir-al-mohamad@users.noreply.github.com> Date: Wed, 11 Sep 2024 18:20:12 +0300 Subject: [PATCH 1/4] add task solution --- readme.md | 4 +-- src/index.html | 87 +++++++++++++++++++++++++++++++++++++++++++++++++- src/style.css | 75 +++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 163 insertions(+), 3 deletions(-) diff --git a/readme.md b/readme.md index e72b8051e7..e9cccdb58e 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://amir-al-mohamad.github.io/layout_moyo-header/) +- [TEST REPORT LINK](https://amir-al-mohamad.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..8da39b6774 100644 --- a/src/index.html +++ b/src/index.html @@ -11,12 +11,97 @@ content="ie=edge" /> Moyo header + -

Moyo header

+
+ + +
diff --git a/src/style.css b/src/style.css index 293d3b1f13..e28517a3cb 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,78 @@ body { + font-family: Roboto, system-ui; + font-weight: 500; + font-size: 12px; + color: #000; margin: 0; + + --header-height: 60px; + --blue-color: #00acdc; +} + +.header { + padding: 0 50px; + display: flex; + justify-content: space-between; + align-items: center; +} + +.header__logo { + height: 40px; + width: 40px; +} + +.header__img { + height: 100%; + width: 100%; + display: inline-block; +} + +.menu { + align-items: center; + display: flex; +} + +.menu__list { + padding: 0; + margin: 0; + display: flex; +} + +.menu__item { + margin-right: 20px; + list-style: none; +} + +.menu__item:last-child { + margin-right: 0; +} + +.menu__link { + text-decoration: none; + text-transform: uppercase; + white-space: nowrap; + text-align: center; + display: block; + color: inherit; + line-height: var(--header-height); +} + +.menu__link.is-active, +.menu__link:hover { + color: var(--blue-color); +} + +.menu__link.is-active { + position: relative; +} + +.menu__link.is-active::after { + width: 100%; + height: 4px; + border-radius: 8px; + left: 0; + background-color: var(--blue-color); + bottom: 0; + position: absolute; + content: ''; } From b89fc7f60e523dbadaccb5be2f81293ce8b24626 Mon Sep 17 00:00:00 2001 From: Amir Al-Mohamad <131036084+amir-al-mohamad@users.noreply.github.com> Date: Wed, 18 Sep 2024 19:13:02 +0300 Subject: [PATCH 2/4] add task solution --- src/index.html | 6 +++--- src/style.css | 6 +++++- 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/src/index.html b/src/index.html index 8da39b6774..6999883e81 100644 --- a/src/index.html +++ b/src/index.html @@ -24,12 +24,12 @@
@@ -62,7 +62,7 @@
  • Laptops & Computers diff --git a/src/style.css b/src/style.css index e28517a3cb..9b1adfd837 100644 --- a/src/style.css +++ b/src/style.css @@ -1,5 +1,9 @@ +:root { + --font-family: 'Roboto', Arial, sans-serif; +} + body { - font-family: Roboto, system-ui; + font-family: var(--font-family); font-weight: 500; font-size: 12px; color: #000; From 52f7639840b5a40b78b7cecb6fce909f978d590f Mon Sep 17 00:00:00 2001 From: Amir Al-Mohamad <131036084+amir-al-mohamad@users.noreply.github.com> Date: Thu, 19 Sep 2024 13:51:05 +0300 Subject: [PATCH 3/4] add task solution --- src/style.css | 17 ++++++++--------- 1 file changed, 8 insertions(+), 9 deletions(-) diff --git a/src/style.css b/src/style.css index 9b1adfd837..f93ed92a44 100644 --- a/src/style.css +++ b/src/style.css @@ -42,15 +42,6 @@ body { display: flex; } -.menu__item { - margin-right: 20px; - list-style: none; -} - -.menu__item:last-child { - margin-right: 0; -} - .menu__link { text-decoration: none; text-transform: uppercase; @@ -80,3 +71,11 @@ body { position: absolute; content: ''; } + +.menu__item { + margin-right: 20px; +} + +.menu__item:last-child { + margin-right: 0; +} From 7ab341df4d92ebe135de2bc4162bb1858531d24e Mon Sep 17 00:00:00 2001 From: Amir Al-Mohamad <131036084+amir-al-mohamad@users.noreply.github.com> Date: Thu, 19 Sep 2024 14:26:47 +0300 Subject: [PATCH 4/4] add task solution --- src/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/style.css b/src/style.css index f93ed92a44..54dc429f8f 100644 --- a/src/style.css +++ b/src/style.css @@ -74,6 +74,7 @@ body { .menu__item { margin-right: 20px; + list-style: none; } .menu__item:last-child {