From c85192d2c9f447413e8ea31d09885979302ca272 Mon Sep 17 00:00:00 2001
From: Igor Plavutskyi <gkfdf@ukr.net>
Date: Thu, 6 Feb 2025 15:49:17 +0200
Subject: [PATCH 1/3] Updated files and added new image

---
 .github/workflows/test.yml-template |  29 +++++++
 package-lock.json                   |   9 ++-
 package.json                        |   3 +-
 readme.md                           |   4 +-
 src/images/logo.png                 | Bin 1820 -> 0 bytes
 src/images/moyo_1.png               | Bin 0 -> 2290 bytes
 src/index.html                      |  83 ++++++++++++++++++-
 src/style.css                       | 119 +++++++++++++++++++++++++++-
 8 files changed, 236 insertions(+), 11 deletions(-)
 create mode 100644 .github/workflows/test.yml-template
 delete mode 100644 src/images/logo.png
 create mode 100644 src/images/moyo_1.png

diff --git a/.github/workflows/test.yml-template b/.github/workflows/test.yml-template
new file mode 100644
index 0000000000..8b5743ecb4
--- /dev/null
+++ b/.github/workflows/test.yml-template
@@ -0,0 +1,29 @@
+name: Test
+
+on:
+  pull_request:
+    branches: [ master ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm install
+    - run: npm test
+    - name: Upload HTML report(backstop data)
+      if: ${{ always() }}
+      uses: actions/upload-artifact@v2
+      with:
+        name: report
+        path: backstop_data
diff --git a/package-lock.json b/package-lock.json
index 7eef7e5ecc..3738cb1849 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@mate-academy/backstop-config": "latest",
         "@mate-academy/bemlint": "latest",
         "@mate-academy/linthtml-config": "latest",
-        "@mate-academy/scripts": "^1.8.6",
+        "@mate-academy/scripts": "^1.9.12",
         "@mate-academy/stylelint-config": "latest",
         "backstopjs": "6.3.23",
         "jest": "^29.7.0",
@@ -1211,10 +1211,11 @@
       "dev": true
     },
     "node_modules/@mate-academy/scripts": {
-      "version": "1.8.6",
-      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.8.6.tgz",
-      "integrity": "sha512-b4om/whj4G9emyi84ORE3FRZzCRwRIesr8tJHXa8EvJdOaAPDpzcJ8A0sFfMsWH9NUOVmOwkBtOXDu5eZZ00Ig==",
+      "version": "1.9.12",
+      "resolved": "https://registry.npmjs.org/@mate-academy/scripts/-/scripts-1.9.12.tgz",
+      "integrity": "sha512-/OcmxMa34lYLFlGx7Ig926W1U1qjrnXbjFJ2TzUcDaLmED+A5se652NcWwGOidXRuMAOYLPU2jNYBEkKyXrFJA==",
       "dev": true,
+      "license": "MIT",
       "dependencies": {
         "@octokit/rest": "^17.11.2",
         "@types/get-port": "^4.2.0",
diff --git a/package.json b/package.json
index 45fd6b0d41..ef9b108584 100644
--- a/package.json
+++ b/package.json
@@ -17,13 +17,12 @@
   "keywords": [],
   "author": "Mate Academy",
   "license": "GPL-3.0",
-  "dependencies": {},
   "devDependencies": {
     "@linthtml/linthtml": "^0.9.6",
     "@mate-academy/backstop-config": "latest",
     "@mate-academy/bemlint": "latest",
     "@mate-academy/linthtml-config": "latest",
-    "@mate-academy/scripts": "^1.8.6",
+    "@mate-academy/scripts": "^1.9.12",
     "@mate-academy/stylelint-config": "latest",
     "backstopjs": "6.3.23",
     "jest": "^29.7.0",
diff --git a/readme.md b/readme.md
index 8a1dd91f32..e5ee303afe 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 the `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://IPlavutskyi.github.io/layout_moyo-header/)
+- [TEST REPORT LINK](https://IPlavutskyi.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/images/logo.png b/src/images/logo.png
deleted file mode 100644
index 9ea6299ec2a9cbc388bf91d4567c23bcf7dcd985..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 1820
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
KMNUMnLSTY<;9rFR

diff --git a/src/images/moyo_1.png b/src/images/moyo_1.png
new file mode 100644
index 0000000000000000000000000000000000000000..76742b48aec1277c0c1bd9a484b1dd3675e912d3
GIT binary patch
literal 2290
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
M07*qoM6N<$f`ou!{r~^~

literal 0
HcmV?d00001

diff --git a/src/index.html b/src/index.html
index b39fe97123..b5b20e0775 100644
--- a/src/index.html
+++ b/src/index.html
@@ -13,10 +13,89 @@
     <title>Moyo header</title>
     <link
       rel="stylesheet"
-      href="./style.css"
+      href="style.css"
     />
   </head>
   <body>
-    <h1>Moyo header</h1>
+    <header class="header">
+      <a
+        href="#"
+        class="logo"
+      >
+        <img
+          src="./images/logo.png"
+          alt="Logo"
+        />
+      </a>
+      <nav class="nav">
+        <ul class="nav__list">
+          <li>
+            <a
+              href="#"
+              class="nav__link apple is-active"
+            >
+              Apple
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="nav__link"
+            >
+              Samsung
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="nav__link"
+            >
+              Smartphones
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="nav__link"
+              data-qa="hover"
+            >
+              Laptops & Computers
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="nav__link"
+            >
+              Gadgets
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="nav__link"
+            >
+              Tablets
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="nav__link"
+            >
+              Photo
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              class="nav__link"
+            >
+              Video
+            </a>
+          </li>
+        </ul>
+      </nav>
+    </header>
   </body>
 </html>
diff --git a/src/style.css b/src/style.css
index 293d3b1f13..94d3905df1 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,3 +1,120 @@
-body {
+
+* {
   margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: Roboto, sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  height: 60px;
+  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
+  transition: border 0.3s ease;
+  background: rgba(255, 255, 255, 1);
+
+}
+
+/* Рамка навколо хедера при наведенні */
+.header:hover {
+  border: 2px solid #00acdc;
+}
+
+/* Рамка при натисканні на хедер */
+.header:active {
+  border: 2px solid #00acdc;
+}
+
+.logo {
+  margin-left: 50px;
+}
+
+.logo img {
+  width: 40px;
+  height: 40px;
+  display: block;
+  transition: border 0.3s ease;
+}
+
+/* Рамка навколо логотипа при наведенні */
+.logo:hover {
+  border: 2px solid #00acdc;
+}
+
+/* Тонша рамка навколо логотипа при натисканні */
+.logo:active {
+  border: 1px solid #00acdc;
+}
+
+.nav {
+  margin-right: 50px;
+}
+
+.nav__list {
+  display: flex;
+  list-style: none;
+}
+
+.nav__list li {
+  margin-right: 20px;
+}
+
+.nav__list li:last-child {
+  margin-right: 0;
+}
+
+.nav__link {
+  position: relative;
+  font-size: 12px;
+  font-weight: 500;
+  text-transform: uppercase;
+  color: black;
+  text-decoration: none;
+  transition:
+    color 0.3s ease,
+    border 0.3s ease;
+}
+
+.nav__link:hover {
+  color: #00acdc;
+}
+
+/* Підкреслення при наведенні */
+.nav__link:hover::after {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 2px;
+  background-color: #00acdc;
+  bottom: -2px;
+  left: 0;
+}
+
+/* Рамка при натисканні */
+.nav__link:active {
+  border: 2px solid #00acdc;
+  padding: 2px;
+  background: rgba(0, 172, 220, 1);
+
+}
+
+/* Спеціальний стиль для Apple (підкреслення-плашка) */
+.nav__link.is-active::after {
+  content: '';
+  position: absolute;
+  width: 37px;
+  height: 4px;
+  background: rgba(0, 172, 220, 1);
+  border-radius: 8px;
+  bottom: -22px;
+  left: 50%;
+  transform: translateX(-50%);
 }

From 85522c1101de7fc36caca8b57005fb153758c083 Mon Sep 17 00:00:00 2001
From: Igor Plavutskyi <gkfdf@ukr.net>
Date: Fri, 7 Feb 2025 15:30:38 +0200
Subject: [PATCH 2/3] fixed some errors

---
 src/index.html |  6 +++-
 src/style.css  | 87 ++++++++++++--------------------------------------
 2 files changed, 25 insertions(+), 68 deletions(-)

diff --git a/src/index.html b/src/index.html
index b5b20e0775..dba699d193 100644
--- a/src/index.html
+++ b/src/index.html
@@ -15,6 +15,10 @@
       rel="stylesheet"
       href="style.css"
     />
+    <link
+      rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=Roboto:wght@500&display=swap"
+    />
   </head>
   <body>
     <header class="header">
@@ -23,7 +27,7 @@
         class="logo"
       >
         <img
-          src="./images/logo.png"
+          src="./images/moyo_1.png"
           alt="Logo"
         />
       </a>
diff --git a/src/style.css b/src/style.css
index 94d3905df1..a29d59f663 100644
--- a/src/style.css
+++ b/src/style.css
@@ -1,120 +1,73 @@
-
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
 
-body {
-  font-family: Roboto, sans-serif;
-  font-size: 12px;
-  font-weight: 500;
-}
-
 .header {
+  position: relative;
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   height: 60px;
-  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
-  transition: border 0.3s ease;
   background: rgba(255, 255, 255, 1);
-
-}
-
-/* Рамка навколо хедера при наведенні */
-.header:hover {
-  border: 2px solid #00acdc;
-}
-
-/* Рамка при натисканні на хедер */
-.header:active {
-  border: 2px solid #00acdc;
-}
-
-.logo {
-  margin-left: 50px;
 }
 
 .logo img {
   width: 40px;
   height: 40px;
   display: block;
-  transition: border 0.3s ease;
-}
-
-/* Рамка навколо логотипа при наведенні */
-.logo:hover {
-  border: 2px solid #00acdc;
-}
-
-/* Тонша рамка навколо логотипа при натисканні */
-.logo:active {
-  border: 1px solid #00acdc;
-}
-
-.nav {
-  margin-right: 50px;
+  margin-left: 50px;
 }
 
 .nav__list {
   display: flex;
   list-style: none;
+  align-items: center;
 }
 
 .nav__list li {
+  height: 100%;
+  display: flex;
+  align-items: center;
   margin-right: 20px;
 }
 
 .nav__list li:last-child {
-  margin-right: 0;
+  margin-right: 50px;
 }
 
 .nav__link {
-  position: relative;
+  font-family: Roboto, sans-serif;
   font-size: 12px;
   font-weight: 500;
   text-transform: uppercase;
+  display: flex;
+  position: relative;
   color: black;
   text-decoration: none;
-  transition:
-    color 0.3s ease,
-    border 0.3s ease;
-}
 
-.nav__link:hover {
-  color: #00acdc;
-}
+  justify-content: center; /* Вирівнюємо текст по центру */
 
-/* Підкреслення при наведенні */
-.nav__link:hover::after {
-  content: '';
-  position: absolute;
-  width: 100%;
-  height: 2px;
-  background-color: #00acdc;
-  bottom: -2px;
-  left: 0;
+  line-height: 60px; /* Вирівнюємо текст вертикально */
 }
 
-/* Рамка при натисканні */
-.nav__link:active {
-  border: 2px solid #00acdc;
-  padding: 2px;
-  background: rgba(0, 172, 220, 1);
+.nav__link:hover {
+  color: rgba(0, 172, 220, 1);
+}
 
+.nav__link.is-active {
+  color: #00acdc;
 }
 
-/* Спеціальний стиль для Apple (підкреслення-плашка) */
 .nav__link.is-active::after {
+  display: block;
   content: '';
   position: absolute;
-  width: 37px;
+  width: 100%;
   height: 4px;
   background: rgba(0, 172, 220, 1);
   border-radius: 8px;
-  bottom: -22px;
-  left: 50%;
-  transform: translateX(-50%);
+  bottom: 0;
 }

From f32d45c8711862399d7d5f6b2755c42d076c02f5 Mon Sep 17 00:00:00 2001
From: Igor Plavutskyi <gkfdf@ukr.net>
Date: Fri, 7 Feb 2025 16:36:56 +0200
Subject: [PATCH 3/3] corrected all errors

---
 src/style.css | 10 ++++------
 1 file changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/style.css b/src/style.css
index a29d59f663..2b91edbde0 100644
--- a/src/style.css
+++ b/src/style.css
@@ -12,13 +12,13 @@
   width: 100%;
   height: 60px;
   background: rgba(255, 255, 255, 1);
+  padding: 0 50px;
 }
 
 .logo img {
   width: 40px;
   height: 40px;
   display: block;
-  margin-left: 50px;
 }
 
 .nav__list {
@@ -35,7 +35,7 @@
 }
 
 .nav__list li:last-child {
-  margin-right: 50px;
+  margin-right: 0;
 }
 
 .nav__link {
@@ -47,10 +47,8 @@
   position: relative;
   color: black;
   text-decoration: none;
-
-  justify-content: center; /* Вирівнюємо текст по центру */
-
-  line-height: 60px; /* Вирівнюємо текст вертикально */
+  justify-content: center;
+  line-height: 60px;
 }
 
 .nav__link:hover {