From 36e5f278802cd444661394f0699e55605e3157be Mon Sep 17 00:00:00 2001
From: Alex Marcovych <alexmarcovych@gmail.com>
Date: Mon, 20 Jan 2025 22:27:21 +0200
Subject: [PATCH] add task solution
---
readme.md | 4 ++--
src/index.html | 61 +++++++++++++++++++++++++++++++++++++++++++++-
src/style.css | 65 ++++++++++++++++++++++++++++++++++++++++++++++++++
3 files changed, 127 insertions(+), 3 deletions(-)
diff --git a/readme.md b/readme.md
index e72b8051e7..0cde94573f 100644
--- a/readme.md
+++ b/readme.md
@@ -27,8 +27,8 @@ 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://alex-marcovych.github.io/layout_moyo-header/)
+- [TEST REPORT LINK](https://alex-marcovych.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.
diff --git a/src/index.html b/src/index.html
index b39fe97123..b7be8d8b8d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -15,8 +15,67 @@
rel="stylesheet"
href="./style.css"
/>
+ <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@500&display=swap"
+ rel="stylesheet"
+ />
</head>
<body>
- <h1>Moyo header</h1>
+ <header class="header">
+ <div class="header__logo">
+ <a href="#">
+ <img
+ src="/src/images/logo.png"
+ alt="site-logo"
+ />
+ </a>
+ </div>
+ <nav class="menu">
+ <ul class="menu__list">
+ <li class="menu__list-item">
+ <a
+ href="#"
+ class="is-active"
+ >
+ Apple
+ </a>
+ </li>
+ <li class="menu__list-item">
+ <a href="#">Samsung</a>
+ </li>
+ <li class="menu__list-item">
+ <a href="#">Smartphones</a>
+ </li>
+ <li class="menu__list-item">
+ <a
+ href="#"
+ data-qa="hover"
+ >
+ Laptops & Computers
+ </a>
+ </li>
+ <li class="menu__list-item">
+ <a href="#">Gadgets</a>
+ </li>
+ <li class="menu__list-item">
+ <a href="#">Tablets</a>
+ </li>
+ <li class="menu__list-item">
+ <a href="#">Photo</a>
+ </li>
+ <li class="menu__list-item">
+ <a href="#">Video</a>
+ </li>
+ </ul>
+ </nav>
+ </header>
</body>
</html>
diff --git a/src/style.css b/src/style.css
index 293d3b1f13..5b678f9304 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,68 @@
body {
margin: 0;
+ font-family: Roboto, serif;
+}
+
+:root {
+ --blue: #00acdc;
+}
+
+.header {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0 50px;
+}
+
+.header__logo {
+ height: 40px;
+}
+
+.menu__list {
+ list-style-type: none;
+ display: flex;
+ margin: 0;
+ padding: 0;
+}
+
+.menu__list-item {
+ margin-right: 20px;
+}
+
+.menu__list-item a {
+ color: #000;
+ text-decoration: none;
+ text-transform: uppercase;
+ font-size: 12px;
+ font-weight: 500;
+ line-height: 60px;
+ position: relative;
+ height: 60px;
+ display: inline-block;
+}
+
+.menu__list-item:last-child {
+ margin-right: 0;
+}
+
+.menu__list-item a:hover {
+ color: #00acdc;
+}
+
+a.is-active {
+ color: #00acdc;
+}
+
+a.is-active::after {
+ content: '';
+ position: absolute;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ height: 4px;
+ background-color: #00acdc;
+ transform: scaleX(1);
+ transform-origin: center;
+ transition: transform 0.3s ease-in-out;
+ border-radius: 8px;
}