goitacademy · tania1103 · Aug 25, 2024 · Aug 25, 2024 · Aug 26, 2024 · Aug 29, 2024
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -2,10 +2,10 @@
   "name": "parcel-project-template",
   "version": "2.0.0",
   "description": "",
-  "homepage": "https://goitacademy.github.io/parcel-project-template",
+  "homepage": "https://DutuGabriel.github.io/Team-3-project",
   "scripts": {
     "start": "parcel src/*.html",
-    "build": "parcel build src/*.html --public-url /parcel-project-template/"
+    "build": "parcel build src/*.html --public-url /Team-3-project/"
   },
   "repository": {
     "type": "git",

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/watch01.jpg b/src/images/watch01.jpg
diff --git a/src/images/[email protected] b/src/images/[email protected]
diff --git a/src/images/watch02.jpg b/src/images/watch02.jpg
diff --git a/src/images/[email protected] b/src/images/[email protected]
diff --git a/src/images/watch03.jpg b/src/images/watch03.jpg
diff --git a/src/images/[email protected] b/src/images/[email protected]
diff --git a/src/images/watch04.jpg b/src/images/watch04.jpg
diff --git a/src/images/[email protected] b/src/images/[email protected]
diff --git a/src/images/watch05.jpg b/src/images/watch05.jpg
diff --git a/src/images/[email protected] b/src/images/[email protected]
diff --git a/src/images/watch06.jpg b/src/images/watch06.jpg
diff --git a/src/images/[email protected] b/src/images/[email protected]
diff --git a/src/images/watch07.jpg b/src/images/watch07.jpg
diff --git a/src/images/[email protected] b/src/images/[email protected]
diff --git a/src/images/watch08.jpg b/src/images/watch08.jpg
diff --git a/src/images/[email protected] b/src/images/[email protected]
diff --git a/src/images/watch09.jpg b/src/images/watch09.jpg
diff --git a/src/images/[email protected] b/src/images/[email protected]
diff --git a/src/images/watch10.jpg b/src/images/watch10.jpg
diff --git a/src/images/[email protected] b/src/images/[email protected]
diff --git a/src/images/watch11.jpg b/src/images/watch11.jpg
diff --git a/src/images/[email protected] b/src/images/[email protected]
diff --git a/src/images/watch12.jpg b/src/images/watch12.jpg
diff --git a/src/images/[email protected] b/src/images/[email protected]
diff --git a/src/index.html b/src/index.html
@@ -1,15 +1,24 @@
 <!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>
+    <title>Team 3 Project</title>
     <link rel="stylesheet" href="./sass/index.scss" />
+    <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"
+    />
     <script type="module" src="./index.js"></script>
+    <script type="module" src="./modal.js"></script>
   </head>
   <body>
-    <h1>Example title</h1>
     <!-- ❗️❗️❗️ Add partials like so for every page -->
-    <include src="./partials/example.html"></include>
+    <include src="./partials/header.html"></include>
+    <include src="./partials/hero.html"></include>
+    <include src="./partials/catalog.html"></include>
+    <include src="./partials/modal.html"></include>
   </body>
 </html>
diff --git a/src/modal.js b/src/modal.js
@@ -0,0 +1,18 @@
+(() => {
+    const refs = {
+      openModalBtn: document.querySelectorAll("[data-modal-open]"),
+      closeModalBtn: document.querySelector("[data-modal-close]"),
+      modal: document.querySelector("[data-modal]"),
+    };
+
+    refs.openModalBtn.forEach((element) => {
+      element.addEventListener("click", toggleModal);
+    });
+
+    refs.closeModalBtn.addEventListener("click", toggleModal);
+
+    function toggleModal() {
+      refs.modal.classList.toggle("is-hidden");
+      document.body.classList.toggle("no-scroll");
+    }
+  })();