diff --git a/src/index.html b/src/index.html index 62b8ba5a39..8a19893523 100644 --- a/src/index.html +++ b/src/index.html @@ -10,6 +10,18 @@ http-equiv="X-UA-Compatible" content="ie=edge" /> + + + Moyo header -

Moyo header

+
- -
diff --git a/src/style.css b/src/style.css index 293d3b1f13..c997eae7ae 100644 --- a/src/style.css +++ b/src/style.css @@ -1,3 +1,78 @@ +html, body { + width: 100%; + height: 100%; + margin: 0; + font-family: Roboto, sans-serif; +} + +h1 { + margin: 38px 0; +} + +.header { + justify-content: space-between; + display: flex; + align-items: center; + padding: 0 50px; +} + +.logo { + display: flex; + align-items: center; +} + +.nav { + height: 60px; + display: flex; +} + +.nav-links { + display: flex; + height: 100%; + margin: 0; + padding: 0; +} + +a { + text-decoration: none; + display: flex; + height: 100%; + align-items: center; + color: #000; + font-size: 12px; + font-weight: 500; + text-transform: uppercase; +} + +a:hover { + color: #00acdc; +} + +.is-active { + color: #00acdc; + + position: relative; +} + +.link { + text-decoration: none; + list-style: none; + margin-right: 20px; +} + +.is-active::after { + width: 100%; + content: ''; + position: absolute; + bottom: 0; + left: 0; + height: 4px; + background-color: #00acdc; + + border-radius: 8px; +} + +.last { margin: 0; }