diff --git a/src/index.html b/src/index.html
index f67d080ee0..f8170044b2 100644
--- a/src/index.html
+++ b/src/index.html
@@ -3,12 +3,61 @@
+ 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/main.js b/src/main.js
index ad9a93a7c1..416f4c8191 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1 +1,15 @@
'use strict';
+
+const links = document.querySelectorAll('.navigation__link');
+
+function handleClick(targetLink) {
+ links.forEach(elem => {
+ if (elem.classList.contains('is-active')) {
+ elem.classList.remove('is-active');
+ }
+ });
+ targetLink.target.classList.add('is-active');
+}
+
+links.forEach(elem =>
+ elem.addEventListener('click', handleClick));
diff --git a/src/style.css b/src/style.css
index 293d3b1f13..a1cf7a6dc2 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,87 @@
+@import "https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap";
+
+:root {
+ --blue-color: #00acdc;
+}
+
+* {
+ box-sizing: border-box;
+}
+
+ul {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+a {
+ text-decoration: none;
+ color: black;
+}
+
body {
margin: 0;
+ font-family: Roboto, sans-serif;
+ font-size: 12px;
+ font-weight: 500;
+ line-height: normal;
+}
+
+html {
+ margin: 0;
+}
+
+.header {
+ padding: 0 50px;
+ width: 100%;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+
+.header__logo {
+ height: 40px;
+}
+
+.header__navigation {
+ display: flex;
+ flex-direction: row;
+}
+
+.navigation__item {
+ height: 60px;
+ display: flex;
+ align-items: center;
+}
+
+.navigation__link {
+ text-transform: uppercase;
+ display: flex;
+ position: relative;
+ flex-direction: column;
+ justify-content: center;
+ height: 100%;
+}
+
+.navigation__item:not(:last-child) {
+ margin-right: 20px;
+}
+
+.navigation__link:hover {
+ color: var(--blue-color);
+}
+
+.navigation__link.is-active {
+ color: var(--blue-color);
+}
+
+.navigation__link.is-active::after {
+ content: "";
+ position: absolute;
+ background-color: var(--blue-color);
+ width: 100%;
+ height: 4px;
+ border-radius: 8px;
+ left: 0;
+ bottom: 0;
}
+
+
+