made catalog

mate-academy · Nov 13, 2024 · 1169f74 · 1169f74
1 parent 56dc17c
commit 1169f74
Show file tree

Hide file tree

Showing 18 changed files with 564 additions and 4 deletions.
diff --git a/readme.md b/readme.md
@@ -9,7 +9,7 @@ Create an HTML page with a catalog. Develop semantic page structure as shown on
 - add `data-qa="card-hover"` (not just `hover`) to the link `Buy` inside the first card
 - nav links color is not `black` anymore (nav links should have `#060b35` color)
 - add the class `is-active` to the first link (`Apple`) in the navigation
-- use `<main>` tag for cards container 
+- use `<main>` tag for cards container
 - use the grid for cards with different numbers of columns:
   - 1 for the smaller screens
   - 2 starting at `488px`
@@ -33,8 +33,8 @@ This is possible because [we use the Parcel library](https://en.parceljs.org/scs
 ## Checklist
 
 ❗️ Replace `<your_account>` with your GitHub username and copy the links to the `Pull Request` description:
-- [DEMO LINK](https://<your_account>.github.io/layout_catalog/)
-- [TEST REPORT LINK](https://<your_account>.github.io/layout_catalog/report/html_report/)
+- [DEMO LINK](https://fendered.github.io/layout_catalog/)
+- [TEST REPORT LINK](https://fendered.github.io/layout_catalog/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
@@ -1,5 +1,6 @@
 <!doctype html>
 <html lang="en">
+  <!-- #region head -->
   <head>
     <meta charset="UTF-8" />
     <meta
@@ -20,8 +21,330 @@
       href="styles/index.scss"
     />
   </head>
+  <!-- #endregion -->
 
   <body>
-    <h1>Catalog</h1>
+    <!-- #region header -->
+    <header class="header">
+      <a href="index.html">
+        <img
+          class="header__logo"
+          src="./images/logo.png"
+          alt="logo"
+        />
+      </a>
+      <nav class="header__navigation">
+        <ul class="header__list">
+          <li class="header__link"><a class="is-active">Apple</a></li>
+          <li class="header__link"><a>Samsung</a></li>
+          <li class="header__link"><a>Smartphones</a></li>
+          <li
+            class="header__link"
+            data-qa="nav-hover"
+          >
+            <a>Laptops & Computers</a>
+          </li>
+          <li class="header__link"><a>Gadgets</a></li>
+          <li class="header__link"><a>Tablets</a></li>
+          <li class="header__link"><a>Photo</a></li>
+          <li class="header__link"><a>Video</a></li>
+        </ul>
+      </nav>
+    </header>
+    <!-- #endregion -->
+    <main class="main">
+      <!-- #region card -->
+      <div
+        class="card"
+        data-qa="card"
+      >
+        <img
+          class="card__image"
+          src="/src/images/imac.jpeg"
+          alt="Product"
+        />
+        <h2 class="card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+        <p class="card__subtitle">Product code: 195434</p>
+
+        <div class="card__response">
+          <div class="stars">
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+          </div>
+
+          <div class="card__text">Reviews: 5</div>
+        </div>
+
+        <div class="card__price">
+          <p class="left">Price:</p>
+          <p class="right">$2,199</p>
+        </div>
+        <a
+          href="#"
+          class="card__buy"
+          data-qa="card-hover"
+        >
+          BUY
+        </a>
+      </div>
+      <!-- #endregion -->
+      <!-- #region card -->
+      <div class="card">
+        <img
+          class="card__image"
+          src="/src/images/imac.jpeg"
+          alt="Product"
+        />
+        <h2 class="card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+        <p class="card__subtitle">Product code: 195434</p>
+
+        <div class="card__response">
+          <div class="stars">
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+          </div>
+
+          <div class="card__text">Reviews: 5</div>
+        </div>
+
+        <div class="card__price">
+          <p class="left">Price:</p>
+          <p class="right">$2,199</p>
+        </div>
+        <a
+          href="#"
+          class="card__buy"
+        >
+          BUY
+        </a>
+      </div>
+      <!-- #endregion -->
+      <!-- #region card -->
+      <div class="card">
+        <img
+          class="card__image"
+          src="/src/images/imac.jpeg"
+          alt="Product"
+        />
+        <h2 class="card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+        <p class="card__subtitle">Product code: 195434</p>
+
+        <div class="card__response">
+          <div class="stars">
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+          </div>
+
+          <div class="card__text">Reviews: 5</div>
+        </div>
+
+        <div class="card__price">
+          <p class="left">Price:</p>
+          <p class="right">$2,199</p>
+        </div>
+        <a
+          href="#"
+          class="card__buy"
+        >
+          BUY
+        </a>
+      </div>
+      <!-- #endregion -->
+      <!-- #region card -->
+      <div class="card">
+        <img
+          class="card__image"
+          src="/src/images/imac.jpeg"
+          alt="Product"
+        />
+        <h2 class="card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+        <p class="card__subtitle">Product code: 195434</p>
+
+        <div class="card__response">
+          <div class="stars">
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+          </div>
+
+          <div class="card__text">Reviews: 5</div>
+        </div>
+
+        <div class="card__price">
+          <p class="left">Price:</p>
+          <p class="right">$2,199</p>
+        </div>
+        <a
+          href="#"
+          class="card__buy"
+        >
+          BUY
+        </a>
+      </div>
+      <!-- #endregion -->
+      <!-- #region card -->
+      <div class="card">
+        <img
+          class="card__image"
+          src="/src/images/imac.jpeg"
+          alt="Product"
+        />
+        <h2 class="card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+        <p class="card__subtitle">Product code: 195434</p>
+
+        <div class="card__response">
+          <div class="stars">
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+          </div>
+
+          <div class="card__text">Reviews: 5</div>
+        </div>
+
+        <div class="card__price">
+          <p class="left">Price:</p>
+          <p class="right">$2,199</p>
+        </div>
+        <a
+          href="#"
+          class="card__buy"
+        >
+          BUY
+        </a>
+      </div>
+      <!-- #endregion -->
+      <!-- #region card -->
+      <div class="card">
+        <img
+          class="card__image"
+          src="/src/images/imac.jpeg"
+          alt="Product"
+        />
+        <h2 class="card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+        <p class="card__subtitle">Product code: 195434</p>
+
+        <div class="card__response">
+          <div class="stars">
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+          </div>
+
+          <div class="card__text">Reviews: 5</div>
+        </div>
+
+        <div class="card__price">
+          <p class="left">Price:</p>
+          <p class="right">$2,199</p>
+        </div>
+        <a
+          href="#"
+          class="card__buy"
+        >
+          BUY
+        </a>
+      </div>
+      <!-- #endregion -->
+      <!-- #region card -->
+      <div class="card">
+        <img
+          class="card__image"
+          src="/src/images/imac.jpeg"
+          alt="Product"
+        />
+        <h2 class="card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+        <p class="card__subtitle">Product code: 195434</p>
+
+        <div class="card__response">
+          <div class="stars">
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+          </div>
+
+          <div class="card__text">Reviews: 5</div>
+        </div>
+
+        <div class="card__price">
+          <p class="left">Price:</p>
+          <p class="right">$2,199</p>
+        </div>
+        <a
+          href="#"
+          class="card__buy"
+        >
+          BUY
+        </a>
+      </div>
+      <!-- #endregion -->
+      <!-- #region card -->
+      <div class="card">
+        <img
+          class="card__image"
+          src="/src/images/imac.jpeg"
+          alt="Product"
+        />
+        <h2 class="card__title">
+          APPLE A1419 iMac 27" Retina 5K Monoblock (MNED2UA/A)
+        </h2>
+        <p class="card__subtitle">Product code: 195434</p>
+
+        <div class="card__response">
+          <div class="stars">
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+            <div class="stars__star"></div>
+          </div>
+
+          <div class="card__text">Reviews: 5</div>
+        </div>
+
+        <div class="card__price">
+          <p class="left">Price:</p>
+          <p class="right">$2,199</p>
+        </div>
+        <a
+          href="#"
+          class="card__buy"
+        >
+          BUY
+        </a>
+      </div>
+      <!-- #endregion -->
+    </main>
   </body>
 </html>
diff --git a/src/styles/fonts/Roboto/Roboto-Black.ttf b/src/styles/fonts/Roboto/Roboto-Black.ttf
diff --git a/src/styles/fonts/Roboto/Roboto-BlackItalic.ttf b/src/styles/fonts/Roboto/Roboto-BlackItalic.ttf
diff --git a/src/styles/fonts/Roboto/Roboto-Bold.ttf b/src/styles/fonts/Roboto/Roboto-Bold.ttf
diff --git a/src/styles/fonts/Roboto/Roboto-BoldItalic.ttf b/src/styles/fonts/Roboto/Roboto-BoldItalic.ttf
diff --git a/src/styles/fonts/Roboto/Roboto-Italic.ttf b/src/styles/fonts/Roboto/Roboto-Italic.ttf
diff --git a/src/styles/fonts/Roboto/Roboto-Light.ttf b/src/styles/fonts/Roboto/Roboto-Light.ttf
diff --git a/src/styles/fonts/Roboto/Roboto-LightItalic.ttf b/src/styles/fonts/Roboto/Roboto-LightItalic.ttf
diff --git a/src/styles/fonts/Roboto/Roboto-Medium.ttf b/src/styles/fonts/Roboto/Roboto-Medium.ttf
diff --git a/src/styles/fonts/Roboto/Roboto-MediumItalic.ttf b/src/styles/fonts/Roboto/Roboto-MediumItalic.ttf
diff --git a/src/styles/fonts/Roboto/Roboto-Regular.ttf b/src/styles/fonts/Roboto/Roboto-Regular.ttf
diff --git a/src/styles/fonts/Roboto/Roboto-Thin.ttf b/src/styles/fonts/Roboto/Roboto-Thin.ttf
diff --git a/src/styles/fonts/Roboto/Roboto-ThinItalic.ttf b/src/styles/fonts/Roboto/Roboto-ThinItalic.ttf
diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -1,3 +1,15 @@
+@import './modules/card';
+@import './modules/header';
+@import './modules/main';
+
+@font-face {
+  font-family: Roboto;
+  src: url(./fonts/Roboto/Roboto-Medium.ttf);
+  font-weight: 500;
+  font-style: normal;
+}
+
 body {
   margin: 0;
+  font-family: Roboto, sans-serif;
 }