goitacademy · suciu31DNS · Feb 21, 2024 · Feb 21, 2024 · Feb 21, 2024 · Feb 21, 2024
diff --git a/assets/actions-config-step-1.png b/assets/actions-config-step-1.png
diff --git a/assets/actions-config-step-2.png b/assets/actions-config-step-2.png
diff --git a/assets/how-it-works.png b/assets/how-it-works.png
diff --git a/assets/repo-settings.png b/assets/repo-settings.png
diff --git a/assets/status.png b/assets/status.png
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,21 +1,22 @@
 {
-  "name": "parcel-project-template",
+  "name": "The-Watch-Spot",
   "version": "2.0.0",
   "description": "",
-  "homepage": "https://goitacademy.github.io/parcel-project-template",
+  "homepage": "https://biancabaclava1.github.io/The-Watch-Spot/",
   "scripts": {
     "start": "parcel src/*.html",
-    "build": "parcel build src/*.html --public-url /parcel-project-template/"
+    "build": "parcel build src/*.html --public-url /The-Watch-Spot/"
+
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/goitacademy/parcel-project-template.git"
+    "url": "git@github.com:biancabaclava1/The-Watch-Spot.git"
   },
   "keywords": [],
-  "author": "Alexander Repeta <alexander.repeta@gmail.com>",
+  "author": "Baclava Bianca <mimibaclava@yahoo.com>",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/goitacademy/parcel-project-template/issues"
+    "url": "https://github.com/biancabaclava1/The-Watch-Spot/issues"
   },
   "dependencies": {
     "modern-normalize": "^1.1.0"
@@ -28,3 +29,4 @@
   },
   "browserslist": "> 0.5%, last 2 versions, not dead"
 }
+
diff --git a/src/images/about-us-gif-desk.png b/src/images/about-us-gif-desk.png
diff --git a/src/images/about-us-gif-mob.png b/src/images/about-us-gif-mob.png
diff --git a/src/images/about-us-gif-tab.png b/src/images/about-us-gif-tab.png
diff --git a/src/images/catalog-watch1.png b/src/images/catalog-watch1.png
diff --git a/src/images/catalog-watch10.png b/src/images/catalog-watch10.png
diff --git a/src/images/catalog-watch11.png b/src/images/catalog-watch11.png
diff --git a/src/images/catalog-watch12.png b/src/images/catalog-watch12.png
diff --git a/src/images/catalog-watch2.png b/src/images/catalog-watch2.png
diff --git a/src/images/catalog-watch3.png b/src/images/catalog-watch3.png
diff --git a/src/images/catalog-watch4.png b/src/images/catalog-watch4.png
diff --git a/src/images/catalog-watch5.png b/src/images/catalog-watch5.png
diff --git a/src/images/catalog-watch6.png b/src/images/catalog-watch6.png
diff --git a/src/images/catalog-watch7.png b/src/images/catalog-watch7.png
diff --git a/src/images/catalog-watch8.png b/src/images/catalog-watch8.png
diff --git a/src/images/catalog-watch9.png b/src/images/catalog-watch9.png
diff --git a/src/images/green-bronze-black-watch-desk.png b/src/images/green-bronze-black-watch-desk.png
diff --git a/src/images/green-bronze-black-watch-tab-mob.png b/src/images/green-bronze-black-watch-tab-mob.png
diff --git a/src/images/green-bronze-hand-watch-desk.png b/src/images/green-bronze-hand-watch-desk.png
diff --git a/src/images/green-bronze-hand-watch-tab-mob.png b/src/images/green-bronze-hand-watch-tab-mob.png
diff --git a/src/images/header-black-watch.png b/src/images/header-black-watch.png
diff --git a/src/images/header-blsilver-watch.png b/src/images/header-blsilver-watch.png
diff --git a/src/images/header-green-watch.png b/src/images/header-green-watch.png
diff --git a/src/images/header-hand-watch-mob.png b/src/images/header-hand-watch-mob.png
diff --git a/src/images/header-hand-watch-tab.png b/src/images/header-hand-watch-tab.png
diff --git a/src/images/header-hand-watch.png b/src/images/header-hand-watch.png
diff --git a/src/images/header-silver-watch.png b/src/images/header-silver-watch.png
diff --git a/src/images/header-white-watch.png b/src/images/header-white-watch.png
diff --git a/src/images/icons.svg b/src/images/icons.svg
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/images/modal-watch.png b/src/images/modal-watch.png
diff --git a/src/images/sale-image1-desk-tab.png b/src/images/sale-image1-desk-tab.png
diff --git a/src/images/sale-image1-mob.png b/src/images/sale-image1-mob.png
diff --git a/src/images/sale-image2-desk-tab.png b/src/images/sale-image2-desk-tab.png
diff --git a/src/images/sale-image2-mob.png b/src/images/sale-image2-mob.png
diff --git a/src/images/sale-image3-desk-tab.png b/src/images/sale-image3-desk-tab.png
diff --git a/src/images/sale-image3-mob.png b/src/images/sale-image3-mob.png
diff --git a/src/images/sale-image4-desk-tab.png b/src/images/sale-image4-desk-tab.png
diff --git a/src/images/sale-image4-mob.png b/src/images/sale-image4-mob.png
diff --git a/src/images/sale-watch-desk-tab.png b/src/images/sale-watch-desk-tab.png
diff --git a/src/images/sale-watch-mob.png b/src/images/sale-watch-mob.png
diff --git a/src/index.html b/src/index.html
@@ -1,15 +1,25 @@
 <!DOCTYPE html>
-<html lang="ru">
+<html lang="en">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Page title</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Epilogue:ital,wght@0,100..900;1,100..900&display=swap"
+      rel="stylesheet"
+    />
+    <title>TITLU</title>
     <link rel="stylesheet" href="./sass/index.scss" />
     <script type="module" src="./index.js"></script>
   </head>
   <body>
-    <h1>Example title</h1>
     <!-- ❗️❗️❗️ Add partials like so for every page -->
-    <include src="./partials/example.html"></include>
+    <include src="../src/partials/header.html"></include>
+    <main>
+      <include src="../src/partials/hero.html"></include>
+      <include src="../src/partials/sale.html"></include>
+    </main>
+    <include src="../src/partials/footer.html"></include>
   </body>
 </html>
diff --git a/src/partials/example.html b/src/partials/example.html
diff --git a/src/partials/footer.html b/src/partials/footer.html
@@ -0,0 +1,53 @@
+<article class="footer-container">
+  <footer class="footer-section">
+    <div class="footer-adress-cont">
+      <svg><use href="./images/icons.svg#footer-logo"></use></svg>
+      <a class="footer-text-styles" href="+380684439426">+380 (68) 443-94-26</a>
+      <a
+        class="footer-text-styles"
+        href="https://maps.app.goo.gl/sZrxMTvQ6JyYaXbX6"
+        target="_blank"
+        >1678 S. Pioneer Road <br />
+        Salt Lake City <br />
+        UT 84104</a
+      >
+
+      <p class="footer-all-right-reserved">
+        ©2022 The Watch Spot. All rights reserved.
+      </p>
+    </div>
+    <div>
+      <ul class="footer-nav-ul">
+        <li><a class="footer-text-styles" href="ABOUT US">ABOUT US</a></li>
+        <li><a class="footer-text-styles" href="Catalog">CATALOG</a></li>
+        <li><a class="footer-text-styles" href="SALE">SALE</a></li>
+      </ul>
+    </div>
+    <div class="footer-social-links">
+      <ul class="footer-ul-cont">
+        <li>
+          <a href="">
+            <svg class="footer-list-border">
+              <use href="./images/icons.svg#footer-facebook"></use>
+            </svg>
+          </a>
+        </li>
+        <li>
+          <a href="">
+            <svg class="footer-list-border">
+              <use href="./images/icons.svg#footer-instagram"></use>
+            </svg>
+          </a>
+        </li>
+        <li>
+          <a href="">
+            <svg class="footer-list-border">
+              <use href="./images/icons.svg#footer-youtube"></use>
+            </svg>
+          </a>
+        </li>
+      </ul>
+      <p class="footer-privacy">Privacy Policy <span>Terms of Service</span></p>
+    </div>
+  </footer>
+</article>
diff --git a/src/partials/header.html b/src/partials/header.html
@@ -0,0 +1,21 @@
+<header class="header">
+    <article>
+        <div class="header-content">
+            <svg width="40px" height="40px">
+                <use></use>
+            </svg>
+            <h1 class="logo-text">thewatchspot</h1>
+            <div class="test">
+                <nav class="nav-content">
+                    <ul class="list nav-list">
+                        <li class="nav-item ">About us</li>
+                        <li class="nav-item">Catalog</li>
+                        <li class="nav-item">sale</li>
+                    </ul>
+                </nav>
+                <button class="header-button">+380 (68) 443-94-26</button>
+            </div>
+        </div>
+
+    </article>
+</header>
diff --git a/src/partials/hero.html b/src/partials/hero.html
@@ -0,0 +1,68 @@
+<!-- hero section -->
+<article class="hero">
+    <div class="hero-text">
+        <h1 class="hero-title">Welcome to our collection of premium watches</h1>
+        <p class="hero-paragraf">Our watches are not just timepieces, but also an expression of your personality and
+            lifestyle. From classic
+            designs to
+            modern ones, we have a watch to suit every taste and occasion.</p>
+    </div>
+    <div class="test">
+        <div class="carousel">
+            <div class="poze">
+                <img src="./images/header-black-watch.png" class="active poza">
+                <img src="./images/header-blsilver-watch.png" class="poza">
+                <img src="./images/header-green-watch.png" class="poza">
+                <img src="./images/header-silver-watch.png" class="poza">
+                <img src="./images/header-white-watch.png" class="poza">
+            </div>
+            <div class="controls">
+                <div class="butoane">
+                    <button class="buton" onclick="prevImage()">
+                        <svg width="8" height="14" viewBox="0 0 8 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M7 13L1 7L7 1" stroke="white" stroke-opacity="0.5" stroke-linecap="round"
+                                stroke-linejoin="round" />
+                        </svg>
+                    </button>
+                    <button class="buton" onclick="nextImage()"><svg width="8" height="14" viewBox="0 0 8 14"
+                            fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path d="M1 13L7 7L1 1" stroke="white" stroke-linecap="round" stroke-linejoin="round" />
+                        </svg>
+                    </button>
+                </div>
+                <div class="contor">
+                    <span class="numar" id="counter">1</span>
+                    <svg class="linie" width="40" height="2" viewBox="0 0 40 2" fill="none"
+                        xmlns="http://www.w3.org/2000/svg">
+                        <path d="M0 1H40" stroke="white" />
+                    </svg> 5
+                </div>
+            </div>
+        </div>
+        <div>
+            <img src="./images/header-hand-watch.png" alt="">
+        </div>
+    </div>
+    <script>
+        const images = document.querySelectorAll('.carousel img');
+        let index = 0;
+        const counter = document.getElementById('counter');
+
+        function showImage(index) {
+            images.forEach(image => image.classList.remove('active'));
+            images[index].classList.add('active');
+            counter.textContent = index + 1;
+        }
+
+        function nextImage() {
+            index = (index + 1) % images.length;
+            showImage(index);
+        }
+
+        function prevImage() {
+            index = (index - 1 + images.length) % images.length;
+            showImage(index);
+        }
+    </script>
+
+</article>