mate-academy · romka12254 · Sep 16, 2024 · Sep 16, 2024 · Sep 16, 2024 · Sep 17, 2024
diff --git 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 `<your_account>` with your Github username and copy the links to `Pull Request` description:
 
-- [DEMO LINK](https://<your_account>.github.io/layout_moyo-header/)
-- [TEST REPORT LINK](https://<your_account>.github.io/layout_moyo-header/report/html_report/)
+- [DEMO LINK](https://romka12254.github.io/layout_moyo-header/)
+- [TEST REPORT LINK](https://romka12254.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/fonts/roboto-v32-latin-500.woff2 b/src/fonts/roboto-v32-latin-500.woff2
diff --git a/src/fonts/roboto-v32-latin-regular.woff2 b/src/fonts/roboto-v32-latin-regular.woff2
diff --git a/src/index.html b/src/index.html
@@ -15,8 +15,109 @@
  rel="stylesheet"
  href="./style.css"
  />
+ <!-- <link rel="stylesheet" href="https://fonts.google.com/specimen/Roboto"> -->
+ <link
+ rel="preconnect"
+ href="https://fonts.googleapis.com"
+ />
+ <link
+ rel="preconnect"
+ href="https://fonts.gstatic.com"
+ />
+ <link
+ href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500&display=swap"
+ rel="stylesheet"
+ />
  </head>
  <body>
- <h1>Moyo header</h1>
+ <header class="header">
+ <a
+ href="index.html"
+ class="header__logo-link"
+ >
+ <img
+ src="./images/logo.png"
+ alt="Moyo logo"
+ class="header__logo-pic"
+ />
+ </a>
+
+ <nav class="nav">
+ <ul class="nav__list">
+ <li class="nav__item">
+ <a
+ href="#"
+ class="nav__link is-active"
+ >
+ Apple
+ </a>
+ </li>
+
+ <li class="nav__item">
+ <a
+ href="#"
+ class="nav__link"
+ >
+ Samsung
+ </a>
+ </li>
+
+ <li class="nav__item">
+ <a
+ href="#"
+ class="nav__link"
+ >
+ Smartphones
+ </a>
+ </li>
+
+ <li class="nav__item">
+ <a
+ href="#"
+ class="nav__link"
+ data-qa="hover"
+ >
+ Laptops & Computers
+ </a>
+ </li>
+
+ <li class="nav__item">
+ <a
+ href="#"
+ class="nav__link"
+ >
+ Gadgets
+ </a>
+ </li>
+
+ <li class="nav__item">
+ <a
+ href="#"
+ class="nav__link"
+ >
+ Tablets
+ </a>
+ </li>
+
+ <li class="nav__item">
+ <a
+ href="#"
+ class="nav__link"
+ >
+ Photo
+ </a>
+ </li>
+
+ <li class="nav__item">
+ <a
+ href="#"
+ class="nav__link"
+ >
+ Video
+ </a>
+ </li>
+ </ul>
+ </nav>
+ </header>
  </body>
 </html>
diff --git a/src/style.css b/src/style.css
@@ -1,3 +1,75 @@
+:root {
+ --active-color: #00acdc;
+}
+
 body {
  margin: 0;
 }
+
+html {
+ font-family: Roboto, 'Helvetica Neue', Arial, sans-serif;
+ font-size: 12px;
+ font-weight: 500;
+}
+
+.header {
+ display: flex;
+ width: 100%;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 50px;
+ box-sizing: border-box;
+}
+
+.nav__list {
+ display: flex;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.nav__link {
+ display: flex;
+ height: 60px;
+ line-height: 60px;
+ padding: 0;
+ margin: 0;
+
+ color: #000;
+ text-decoration: none;
+ text-transform: uppercase;
+}
+
+.nav__item {
+ margin-right: 20px;
+}
+
+.nav__item:last-child {
+ margin-right: 0;
+}
+
+.is-active::after {
+ position: absolute;
+ bottom: 0;
+ display: block;
+ content: '';
+ height: 4px;
+ width: 100%;
+ background-color: var(--active-color);
+ border-radius: 8px;
+}
+
+.header__logo-pic {
+ display: block;
+ width: 40px;
+ height: 40px;
+}
+
+.nav__link:hover {
+ color: var(--active-color);
+}
+
+.is-active {
+ color: var(--active-color);
+ position: relative;
+}