From 8d4ae2560d37a3daa03e09128caf0698165d37b7 Mon Sep 17 00:00:00 2001 From: Diana Date: Wed, 11 Sep 2024 22:16:01 +0300 Subject: [PATCH 01/12] add task solution --- readme.md | 4 +- src/index.html | 46 +++++++++++++++++++-- src/style.css | 107 ++++++++++++++++++++++++++++++++++++++++++++++++- 3 files changed, 151 insertions(+), 6 deletions(-) diff --git a/readme.md b/readme.md index e72b8051e7..9d3ed3a60a 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://Krrampuss.github.io/layout_moyo-header/) +- [TEST REPORT LINK](https://Krrampuss.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..733d67ed63 100644 --- a/src/index.html +++ b/src/index.html @@ -10,13 +10,53 @@ http-equiv="X-UA-Compatible" content="ie=edge" /> + + > + Moyo header - -

Moyo header

- +
+ + +
diff --git a/src/style.css b/src/style.css index 293d3b1f13..0c2e56d8a3 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,108 @@ -body { +html { + --color: #00acdc; +} + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +header { + width: 100%; + display: flex; + align-items: center; + justify-content: space-between; + background-color: #fff; margin: 0; + font-family: Roboto, sans-serif; + font-size: 12px; + font-weight: 500; + line-height: 60px; + text-transform: uppercase; +} + +.logo { + margin-left: 50px; + display: flex; + align-items: center; +} + +header .logo img { + height: 40px; +} + +nav { + flex-grow: 1; + display: flex; + justify-content: flex-end; + margin-left: 419px; + margin-right: 50px; + height: 60px; +} + +ul { + display: flex; + align-items: center; + list-style: none; +} + +li { + margin: 0 10px; +} + +li:first-child { + margin-left: 0; +} + +li:last-child { + margin-right: 0; +} + +a { + text-decoration: none; + color: #000; + font-weight: 500; + text-align: center; + display: flex; + justify-content: center; + align-items: center; +} + +a:hover { + color: var(--color); +} + +.is-active { + color: var(--color); + position: relative; +} + +.is-active::after { + content: ''; + position: absolute; + width: 37px; + height: 4px; + top: 56px; + bottom: 0; + background-color: var(--color); + border-radius: 8px; +} + +@media (max-width: 1024px) { + nav { + margin-left: 243px; + } + + li { + margin: 0 10px; + } + + li:first-child { + margin-left: 0; + } + + li:last-child { + margin-right: 0; + } } From 8540202044865390b94b85ec014c126e3118393b Mon Sep 17 00:00:00 2001 From: Diana Date: Wed, 11 Sep 2024 23:02:35 +0300 Subject: [PATCH 02/12] add task solution --- readme.md | 4 +- src/index.html | 132 +++++++++++++++++++++++++++++++++---------------- src/style.css | 99 ++++++++++++------------------------- 3 files changed, 123 insertions(+), 112 deletions(-) diff --git a/readme.md b/readme.md index 9d3ed3a60a..972f2a9bf0 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://Krrampuss.github.io/layout_moyo-header/) -- [TEST REPORT LINK](https://Krrampuss.github.io/layout_moyo-header/report/html_report/) +- [DEMO LINK](https://github.com/Krrampuss/layout_moyo-header) +- [TEST REPORT LINK](https://github.com/Krrampuss/layout_moyo-header) ❗️ 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 733d67ed63..b4cc62f0ff 100644 --- a/src/index.html +++ b/src/index.html @@ -10,53 +10,101 @@ http-equiv="X-UA-Compatible" content="ie=edge" /> + Moyo header + + - > - - Moyo header -
- - -
+ +
+ + logo + + +
+ diff --git a/src/style.css b/src/style.css index 0c2e56d8a3..79c5213864 100644 --- a/src/style.css +++ b/src/style.css @@ -1,108 +1,71 @@ -html { - --color: #00acdc; -} - * { margin: 0; padding: 0; - box-sizing: border-box; } -header { - width: 100%; - display: flex; - align-items: center; - justify-content: space-between; - background-color: #fff; - margin: 0; - font-family: Roboto, sans-serif; - font-size: 12px; - font-weight: 500; - line-height: 60px; - text-transform: uppercase; +html { + --header-link-color: #00acdc; } -.logo { - margin-left: 50px; - display: flex; - align-items: center; +body { + margin: 0; } -header .logo img { - height: 40px; +img { + display: block; } -nav { - flex-grow: 1; +header { display: flex; - justify-content: flex-end; - margin-left: 419px; - margin-right: 50px; - height: 60px; + justify-content: space-between; + align-items: center; + padding: 0 50px; + font-family: Roboto, sans-serif; + font-size: 12px; + font-weight: 500; } -ul { +.nav__list { display: flex; - align-items: center; list-style: none; + margin: 0; + padding: 0; } -li { - margin: 0 10px; -} - -li:first-child { - margin-left: 0; +.nav__list__item { + margin-right: 20px; } -li:last-child { +.nav__list__item:last-child { margin-right: 0; } -a { - text-decoration: none; - color: #000; - font-weight: 500; - text-align: center; +.nav__list__item__link { display: flex; - justify-content: center; align-items: center; + height: 60px; + color: #000; + text-decoration: none; + text-transform: uppercase; } -a:hover { - color: var(--color); +.nav__list__item__link:hover { + color: var(--header-link-color); } .is-active { - color: var(--color); position: relative; + color: var(--header-link-color); } .is-active::after { content: ''; position: absolute; - width: 37px; + width: 100%; height: 4px; - top: 56px; + left: 0; + right: 0; bottom: 0; - background-color: var(--color); border-radius: 8px; -} - -@media (max-width: 1024px) { - nav { - margin-left: 243px; - } - - li { - margin: 0 10px; - } - - li:first-child { - margin-left: 0; - } - - li:last-child { - margin-right: 0; - } + background: var(--header-link-color); } From dbeac27c1ad1151325f5484beb2bcb948c56011c Mon Sep 17 00:00:00 2001 From: Diana Skrypnyk Date: Sat, 14 Sep 2024 13:48:35 +0300 Subject: [PATCH 03/12] Add files via upload --- index.html | 110 +++++++++++++++++++++++++++++++++++++++++++++++++++++ style.css | 71 ++++++++++++++++++++++++++++++++++ 2 files changed, 181 insertions(+) create mode 100644 index.html create mode 100644 style.css diff --git a/index.html b/index.html new file mode 100644 index 0000000000..9164e4f6f2 --- /dev/null +++ b/index.html @@ -0,0 +1,110 @@ + + + + + + + Moyo header + + + + + + +
+ + MOYO main logo + + +
+ + diff --git a/style.css b/style.css new file mode 100644 index 0000000000..bcff192828 --- /dev/null +++ b/style.css @@ -0,0 +1,71 @@ +* { + margin: 0; + padding: 0; +} + +.html { + --header-link-color: #00acdc; +} + +.body { + margin: 0; +} + +.img { + display: block; +} + +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 50px; + font-family: Roboto, sans-serif; + font-size: 12px; + font-weight: 500; +} + +.nav__list { + display: flex; + list-style: none; + margin: 0; + padding: 0; +} + +.nav__list__item { + margin-right: 20px; +} + +.nav__list__item:last-child { + margin-right: 0; +} + +.nav__list__item__link { + display: flex; + align-items: center; + height: 60px; + color: #000; + text-decoration: none; + text-transform: uppercase; +} + +.nav__list__item__link:hover { + color: var(--header-link-color); +} + +.is-active { + position: relative; + color: var(--header-link-color); +} + +.is-active::after { + content: ''; + position: absolute; + width: 100%; + height: 4px; + left: 0; + right: 0; + bottom: 0; + border-radius: 8px; + background: var(--header-link-color); +} From d0c1010260e0246f2e2707f6efa968138ca013c5 Mon Sep 17 00:00:00 2001 From: Diana Skrypnyk Date: Mon, 16 Sep 2024 09:54:02 +0300 Subject: [PATCH 04/12] Delete style.css2 --- style.css | 71 ------------------------------------------------------- 1 file changed, 71 deletions(-) delete mode 100644 style.css diff --git a/style.css b/style.css deleted file mode 100644 index bcff192828..0000000000 --- a/style.css +++ /dev/null @@ -1,71 +0,0 @@ -* { - margin: 0; - padding: 0; -} - -.html { - --header-link-color: #00acdc; -} - -.body { - margin: 0; -} - -.img { - display: block; -} - -.header { - display: flex; - justify-content: space-between; - align-items: center; - padding: 0 50px; - font-family: Roboto, sans-serif; - font-size: 12px; - font-weight: 500; -} - -.nav__list { - display: flex; - list-style: none; - margin: 0; - padding: 0; -} - -.nav__list__item { - margin-right: 20px; -} - -.nav__list__item:last-child { - margin-right: 0; -} - -.nav__list__item__link { - display: flex; - align-items: center; - height: 60px; - color: #000; - text-decoration: none; - text-transform: uppercase; -} - -.nav__list__item__link:hover { - color: var(--header-link-color); -} - -.is-active { - position: relative; - color: var(--header-link-color); -} - -.is-active::after { - content: ''; - position: absolute; - width: 100%; - height: 4px; - left: 0; - right: 0; - bottom: 0; - border-radius: 8px; - background: var(--header-link-color); -} From a1c586f9f831a60308d1db921136875492ec8634 Mon Sep 17 00:00:00 2001 From: Diana Skrypnyk Date: Mon, 16 Sep 2024 09:55:10 +0300 Subject: [PATCH 05/12] Delete index.html2 --- index.html | 110 ----------------------------------------------------- 1 file changed, 110 deletions(-) delete mode 100644 index.html diff --git a/index.html b/index.html deleted file mode 100644 index 9164e4f6f2..0000000000 --- a/index.html +++ /dev/null @@ -1,110 +0,0 @@ - - - - - - - Moyo header - - - - - - -
- - MOYO main logo - - -
- - From 3aecc1f2371d051815bec524ba579aebec0c2143 Mon Sep 17 00:00:00 2001 From: Diana Date: Mon, 16 Sep 2024 09:47:19 +0300 Subject: [PATCH 06/12] apdate --- src/index.html | 10 +++++----- src/style.css | 8 ++++---- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/index.html b/src/index.html index b4cc62f0ff..0378490b0f 100644 --- a/src/index.html +++ b/src/index.html @@ -1,5 +1,5 @@ - + - -
+ +
- logo