From efe634a652f87c9836f3a9f8f5ef981723a6d267 Mon Sep 17 00:00:00 2001
From: Sergiy Lopatkin <lopatkinsergiy@gmail.com>
Date: Wed, 13 Nov 2024 13:18:48 +0300
Subject: [PATCH] commit

---
 src/blocks/cards.scss      |   1 -
 src/blocks/navigation.scss |   1 -
 src/index.html             | 164 ++++++++++++++++++++++++++++++-------
 3 files changed, 135 insertions(+), 31 deletions(-)
diff --git a/src/blocks/cards.scss b/src/blocks/cards.scss
index d4799afa87..83e252bd5f 100644
--- a/src/blocks/cards.scss
+++ b/src/blocks/cards.scss
@@ -1,4 +1,3 @@
-
 body {
   margin: 0;
   font-family: Roboto, sans-serif;
diff --git a/src/blocks/navigation.scss b/src/blocks/navigation.scss
index 85d50461e3..dc7b71bef0 100644
--- a/src/blocks/navigation.scss
+++ b/src/blocks/navigation.scss
@@ -1,4 +1,3 @@
-
 body {
   margin: 0;
 }
diff --git a/src/index.html b/src/index.html
index 2e290c00a5..b551cdc929 100644
--- a/src/index.html
+++ b/src/index.html
@@ -2,20 +2,32 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0"
+    />
     <title>Catalog</title>
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+    />
     <link
       href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap"
       rel="stylesheet"
     />
-    <link rel="stylesheet" href="styles/index.scss" />
+    <link
+      rel="stylesheet"
+      href="styles/index.scss"
+    />
   </head>
 
   <body>
     <header class="header">
       <div class="logo">
-        <a href="index.html" class="logo__link">
+        <a
+          href="index.html"
+          class="logo__link"
+        >
           <img
             src="./images/logo.png"
             alt="MOYO logo"
@@ -25,30 +37,89 @@
       </div>
       <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>
+            <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>
-          <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>
 
     <section class="catalog">
-      <article class="card" data-qa="card">
+      <article
+        class="card"
+        data-qa="card"
+      >
         <div class="card__image">
           <img
             src="./images/imac.jpeg"
             alt="APPLE A1419 iMac 27"
           />
         </div>
-        <h3 class="card__title">APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h3>
+        <h3 class="card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h3>
         <p class="card__code">Product code: 195434</p>
         <div class="card__assessment">
           <div class="stars stars--4">
@@ -73,14 +144,19 @@ <h3 class="card__title">APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h3
         </button>
       </article>
 
-      <article class="card" data-qa="card">
+      <article
+        class="card"
+        data-qa="card"
+      >
         <div class="card__image">
           <img
             src="./images/imac.jpeg"
             alt="APPLE A1419 iMac 27"
           />
         </div>
-        <h3 class="card__title">APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h3>
+        <h3 class="card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h3>
         <p class="card__code">Product code: 195434</p>
         <div class="card__assessment">
           <div class="stars stars--4">
@@ -105,14 +181,19 @@ <h3 class="card__title">APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h3
         </button>
       </article>
 
-      <article class="card" data-qa="card">
+      <article
+        class="card"
+        data-qa="card"
+      >
         <div class="card__image">
           <img
             src="./images/imac.jpeg"
             alt="APPLE A1419 iMac 27"
           />
         </div>
-        <h3 class="card__title">APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h3>
+        <h3 class="card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h3>
         <p class="card__code">Product code: 195434</p>
         <div class="card__assessment">
           <div class="stars stars--4">
@@ -137,14 +218,19 @@ <h3 class="card__title">APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h3
         </button>
       </article>
 
-      <article class="card" data-qa="card">
+      <article
+        class="card"
+        data-qa="card"
+      >
         <div class="card__image">
           <img
             src="./images/imac.jpeg"
             alt="APPLE A1419 iMac 27"
           />
         </div>
-        <h3 class="card__title">APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h3>
+        <h3 class="card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h3>
         <p class="card__code">Product code: 195434</p>
         <div class="card__assessment">
           <div class="stars stars--4">
@@ -169,14 +255,19 @@ <h3 class="card__title">APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h3
         </button>
       </article>
 
-      <article class="card" data-qa="card">
+      <article
+        class="card"
+        data-qa="card"
+      >
         <div class="card__image">
           <img
             src="./images/imac.jpeg"
             alt="APPLE A1419 iMac 27"
           />
         </div>
-        <h3 class="card__title">APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h3>
+        <h3 class="card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h3>
         <p class="card__code">Product code: 195434</p>
         <div class="card__assessment">
           <div class="stars stars--4">
@@ -201,14 +292,19 @@ <h3 class="card__title">APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h3
         </button>
       </article>
 
-      <article class="card" data-qa="card">
+      <article
+        class="card"
+        data-qa="card"
+      >
         <div class="card__image">
           <img
             src="./images/imac.jpeg"
             alt="APPLE A1419 iMac 27"
           />
         </div>
-        <h3 class="card__title">APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h3>
+        <h3 class="card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h3>
         <p class="card__code">Product code: 195434</p>
         <div class="card__assessment">
           <div class="stars stars--4">
@@ -233,14 +329,19 @@ <h3 class="card__title">APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h3
         </button>
       </article>
 
-      <article class="card" data-qa="card">
+      <article
+        class="card"
+        data-qa="card"
+      >
         <div class="card__image">
           <img
             src="./images/imac.jpeg"
             alt="APPLE A1419 iMac 27"
           />
         </div>
-        <h3 class="card__title">APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h3>
+        <h3 class="card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h3>
         <p class="card__code">Product code: 195434</p>
         <div class="card__assessment">
           <div class="stars stars--4">
@@ -265,14 +366,19 @@ <h3 class="card__title">APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h3
         </button>
       </article>
 
-      <article class="card" data-qa="card">
+      <article
+        class="card"
+        data-qa="card"
+      >
         <div class="card__image">
           <img
             src="./images/imac.jpeg"
             alt="APPLE A1419 iMac 27"
           />
         </div>
-        <h3 class="card__title">APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)</h3>
+        <h3 class="card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h3>
         <p class="card__code">Product code: 195434</p>
         <div class="card__assessment">
           <div class="stars stars--4">
