diff --git a/readme.md b/readme.md index e72b8051e7..42c438429f 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,15 +28,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://cementix.github.io/layout_moyo-header/) +- [TEST REPORT LINK](https://cementix.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..463ff87365 100644 --- a/src/index.html +++ b/src/index.html @@ -10,6 +10,19 @@ http-equiv="X-UA-Compatible" content="ie=edge" /> + + + Moyo header -

Moyo header

+
+ + +
diff --git a/src/style.css b/src/style.css index 293d3b1f13..e0f4bd1ce0 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,199 @@ -body { +html, +body, +div, +span, +applet, +object, +iframe, +h1, +h2, +h3, +h4, +h5, +h6, +p, +blockquote, +pre, +a, +abbr, +acronym, +address, +big, +cite, +code, +del, +dfn, +em, +img, +ins, +kbd, +q, +s, +samp, +small, +strike, +strong, +sub, +sup, +tt, +var, +b, +u, +i, +center, +dl, +dt, +dd, +ol, +ul, +li, +fieldset, +form, +label, +legend, +table, +caption, +tbody, +tfoot, +thead, +tr, +th, +td, +article, +aside, +canvas, +details, +embed, +figure, +figcaption, +footer, +header, +hgroup, +menu, +nav, +output, +ruby, +section, +summary, +time, +mark, +audio, +video { margin: 0; + padding: 0; + border: 0; + font-family: Roboto, serif; + font-size: 100%; + vertical-align: baseline; +} + +article, +aside, +details, +figcaption, +figure, +footer, +header, +hgroup, +menu, +nav, +section { + display: block; +} + +body { + line-height: 1; + + --link-color: #00acdc; +} + +ol, +ul { + list-style: none; +} + +blockquote, +q { + quotes: none; +} + +blockquote::before, +blockquote::after, +q::before, +q::after { + content: ''; + content: none; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 50px; +} + +ul { + list-style: none; + position: relative; + display: flex; +} + +li { + position: relative; + margin: 0 10px; +} + +ul li:first-child { + margin-left: 0; +} + +ul li:last-child { + margin-right: 0; +} + +a { + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; + height: 60px; + text-decoration: none; + color: black; +} + +a:hover { + color: var(--link-color); +} + +a.is-active { + color: var(--link-color); +} + +a.is-active::after { + content: ''; + display: block; + height: 4px; + width: 100%; + background-color: var(--link-color); + position: absolute; + border-radius: 4px; + bottom: 0; + left: 0; +} + +.logo img { + width: 100%; + height: auto; +} + +.logo { + display: flex; + align-items: center; }