diff --git a/readme.md b/readme.md index 878beb2f85..9d316c15bb 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://ditiselit.github.io/layout_moyo-header/) +- [TEST REPORT LINK](https://ditiselit.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 f67d080ee0..acffd7936b 100644 --- a/src/index.html +++ b/src/index.html @@ -3,12 +3,40 @@ + content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> Moyo header - + + + + -

Moyo header

+
+ + +
diff --git a/src/style.css b/src/style.css index 293d3b1f13..8842050071 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,75 @@ +html { + font-family: Roboto, sans-serif; + font-size: 12px; + font-style: normal; + font-weight: 500; + line-height: normal; + text-transform: uppercase; +} + +:root { + --main-color: black; + --active-color: #00ACDC; +} + body { margin: 0; } + +.header { + display: flex; + justify-content: space-between; + align-items: center; + padding-left: 50px; + padding-right: 50px; +} + +.logo__img { + display: block; + height: 40px; + width: 40px; +} + +.nav__list { + display: flex; + list-style: none; + padding: 0; + margin: 0; +} + +.nav__item { + display: flex; + gap: 20px; + padding: 0; + margin: 0; +} + +.nav__link { + display: block; + height: 60px; + line-height: 60px; + padding: 0; + text-decoration: none; + color: var(--main-color); +} + +.nav__link:hover { + color: var(--active-color); +} + +.is-active { + color: var(--active-color); + position: relative; +} + + +.is-active::after { + content: ""; + display: block; + height: 4px; + width: 100%; + border-radius: 8px; + background-color: var(--active-color); + position: absolute; + bottom: 0; +}