From 624d046e92a6085e9deb4ad4a29908d272f7df17 Mon Sep 17 00:00:00 2001
From: Kostya Vasilenko <kostyantin.vasilenko.03@gmail.com>
Date: Mon, 11 Mar 2024 18:57:40 +0200
Subject: [PATCH] add task solution

---
 readme.md           |  41 ++++++++++++++++
 src/images/.gitkeep |   0
 src/images/logo.png | Bin 0 -> 1820 bytes
 src/index.html      | 117 ++++++++++++++++++++++++++++++++++++++++++++
 src/main.js         |   1 +
 src/style.css       |  89 +++++++++++++++++++++++++++++++++
 6 files changed, 248 insertions(+)
 create mode 100644 readme.md
 create mode 100644 src/images/.gitkeep
 create mode 100644 src/images/logo.png
 create mode 100644 src/index.html
 create mode 100644 src/main.js
 create mode 100644 src/style.css

diff --git a/readme.md b/readme.md
new file mode 100644
index 0000000000..f16d37e97a
--- /dev/null
+++ b/readme.md
@@ -0,0 +1,41 @@
+# 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.
+
+> Here are the [Layout Tasks Instructions](https://mate-academy.github.io/layout_task-guideline)
+
+## Requirements:
+
+- reset browser default margins.
+- use [Roboto font](https://fonts.google.com/specimen/Roboto)
+- use semantic tags: `<header>`, `<img>`, `<nav>`, `<ul>`, `<li>` and `<a>`
+- the header should stretch the full page width
+- the height should be set for nav links (not the header), take it from the design.
+- header content should be vertically centered.
+- Logo should also be a link with an image inside (from [src/images](src/images)). But it should not be a part of the `<nav>`.
+- ❗️ the blue link with a line below should have a class `is-active` in addition to any other classes you add.
+- ❗️ add `data-qa="hover"` attribute to the 4th link for testing (`Laptops & computers`)
+- link color should be changed on `:hover`
+- Use the `::after` and position it relative to a link with `is-active` class
+- Don't use flex `gap` property for indents. It's not supported in tests, use `margin` instead.
+- There should not be margins before the first and after the last list items
+- Don't just copy all styles from Figma. Think, which of them are relevant. Uneven sizes (e.g. `line-height: 14.6px`) are definitely useless.
+- Nav Links should not have any padding, but have text centered
+
+## Checklist
+
+❗️ Replace `<your_account>` with your Github username and copy the links to `Pull Request` description:
+
+- [DEMO LINK](https://Syogunok.github.io/layout_moyo-header/)
+- [TEST REPORT LINK](https://Syogunok.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)
diff --git a/src/images/.gitkeep b/src/images/.gitkeep
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/src/images/logo.png b/src/images/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..9ea6299ec2a9cbc388bf91d4567c23bcf7dcd985
GIT binary patch
literal 1820
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
KMNUMnLSTY<;9rFR

literal 0
HcmV?d00001

diff --git a/src/index.html b/src/index.html
new file mode 100644
index 0000000000..bbf5bdc4ff
--- /dev/null
+++ b/src/index.html
@@ -0,0 +1,117 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
+    />
+    <meta
+      http-equiv="X-UA-Compatible"
+      content="ie=edge"
+    />
+    <title>Moyo header</title>
+    <link
+      rel="preconnect"
+      href="https://fonts.googleapis.com"
+    />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&amp;display=swap"
+    />
+    <link
+      rel="stylesheet"
+      href="./style.css"
+    />
+  </head>
+  <body>
+    <header class="header">
+      <a
+        href="#"
+        class="logo"
+      >
+        <img
+          src="images/logo.png"
+          alt="Moyo logo"
+          class="logo__image"
+        />
+      </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 &amp; 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/main.js b/src/main.js
new file mode 100644
index 0000000000..ad9a93a7c1
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1 @@
+'use strict';
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000000..e332e7884b
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,89 @@
+body {
+  margin: 0;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 50px;
+  background: #fff;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.logo {
+  display: block;
+  height: 40px;
+  width: 40px;
+}
+
+.logo__image {
+  height: 100%;
+  width: 100%;
+}
+
+nav {
+  display: block;
+}
+
+.nav__list {
+  display: flex;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.nav__item {
+  margin-left: 20px;
+}
+
+.nav__item:first-child {
+  margin-left: 0;
+}
+
+.nav__link {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 60px;
+  font-family: Roboto, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  white-space: nowrap;
+  text-decoration: none;
+  text-transform: uppercase;
+  color: #000;
+  transition: color 0.3s;
+}
+
+.nav__link.is-active::after {
+  content: '';
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 4px;
+  border-radius: 2px;
+  background-color: #00acdc;
+}
+
+.nav__link.is-active {
+  color: #00acdc;
+}
+
+.nav__link:hover {
+  color: #00acdc;
+}
+
+ul {
+  display: block;
+  list-style-type: disc;
+  margin-block: 1em;
+  margin-inline: 0;
+  padding-inline-start: 40px;
+}
+
+li {
+  display: list-item;
+  text-align: -webkit-match-parent;
+}