Partial Footer Section Implementation

package.json

@@ -1,21 +1,21 @@
 {
-  "name": "parcel-project-template",
+  "name": "team-project",
   "version": "2.0.0",
   "description": "",
-  "homepage": "https://goitacademy.github.io/parcel-project-template",
+  "homepage": "https://alinaelenadogaru.github.io/team-project",
   "scripts": {
     "start": "parcel src/*.html",
-    "build": "parcel build src/*.html --public-url /parcel-project-template/"
+    "build": "parcel build src/*.html --public-url /team-project/"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/goitacademy/parcel-project-template.git"
+    "url": "git+https://github.com/alinaelenadogaru/team-project.git"
   },
   "keywords": [],
   "author": "Alexander Repeta <alexander.repeta@gmail.com>",
   "license": "ISC",
   "bugs": {
-    "url": "https://github.com/goitacademy/parcel-project-template/issues"
+    "url": "https://github.com/alinaelenadogaru/team-project/issues"
   },
   "dependencies": {
     "modern-normalize": "^1.1.0"

src/css/footer.css

@@ -0,0 +1,262 @@
+/* :root {
+  --footer-background: #1e2827;
+  --primary-font: 'Epilogue', sans-serif;
+  --secondary-font: 'Raleway', sans-serif;
+  --primary-color: #1e2827;
+} */
+
+* {
+  margin: 0;
+  padding: 0;
+  border: 0px;
+}
+
+ul {
+  list-style: none;
+}
+
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+footer {
+  font-family:  'Epilogue';
+  background-color: #1e2827;
+  color: white;
+  box-sizing: border-box;
+  padding-left: 104px;
+  padding-right: 104px;
+  padding-top: 132px;
+}
+
+.footer-logo svg {
+  fill: white;
+  width: 50px;
+  height: 50px;
+  margin-bottom: 40px;
+}
+
+.footer-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.footer-address {
+  font-family: var(--primary-font);
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: -0.02em;
+  text-align: left;
+  margin-top: 18px;
+}
+
+.footer-nav li {
+  margin-bottom: 18px;
+  font-family: var(--primary-font);
+  font-size: 18px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: -0.02em;
+  text-align: left;
+}
+
+.footer-social {
+  width: 28px;
+  height: 28px;
+  border: 1px solid #ffffff1a;
+  border-radius: 10px;
+}
+
+.footer-socials ul {
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+}
+
+footer .container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.footer-copyright-terms {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 174px;
+  padding-bottom: 32px;
+  font-family: var(--primary-font);
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: -0.02em;
+  text-align: right;
+  color: #c6cdd1;
+}
+
+.footer-terms a {
+  padding-left: 18px;
+}
+
+.footer-mobile_socials {
+  display: none;
+}
+
+@media screen and (min-width: 375px) and (max-width: 767px) {
+  .footer-socials {
+    display: none;
+  }
+
+  footer {
+    padding: 40px 20px 20px 20px;
+  }
+
+  footer .container {
+    margin: 0;
+  }
+
+  .footer-info {
+    min-width: 140px;
+  }
+
+  .footer-nav {
+    margin-left: 138px;
+    min-width: 80px;
+  }
+
+  .footer-social {
+    width: 40px;
+    height: 40px;
+  }
+
+  .footer-address {
+    font-family: var(--primary-font);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: -0.02em;
+    text-align: left;
+  }
+
+  .footer-info a {
+    font-family: var(--primary-font);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    text-align: left;
+  }
+
+  .footer-nav {
+    font-family: var(--primary-font);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: -0.02em;
+    text-align: left;
+  }
+
+  .footer-mobile_socials {
+    display: flex;
+    flex-direction: row;
+    gap: 14px;
+    margin-top: 40px;
+    margin-bottom: 80px;
+  }
+
+  .footer-copyright-terms a {
+    margin-top: 80px;
+    margin-bottom: 0px;
+    font-family: var(--primary-font);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: -0.02em;
+    text-align: left;
+  }
+
+  .footer-terms {
+    padding-top: 18px;
+  }
+
+  .footer-copyright-terms {
+    align-items: flex-start;
+    flex-direction: column;
+  }
+}
+
+@media screen and (min-width: 768px) and (max-width: 1280px) {
+  .footer-socials {
+    display: none;
+  }
+
+  footer {
+    padding: 40px 20px 20px 20px;
+  }
+
+  footer .container {
+    margin: 0;
+  }
+
+  .footer-info {
+    min-width: 140px;
+  }
+
+  .footer-nav {
+    margin-left: 138px;
+    min-width: 80px;
+  }
+
+  .footer-social {
+    width: 40px;
+    height: 40px;
+  }
+
+  .footer-address {
+    font-family: var(--primary-font);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: -0.02em;
+    text-align: left;
+  }
+
+  .footer-info a {
+    font-family: var(--primary-font);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    text-align: left;
+  }
+
+  .footer-nav {
+    font-family: var(--primary-font);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: -0.02em;
+    text-align: left;
+  }
+
+  .footer-mobile_socials {
+    display: flex;
+    flex-direction: row;
+    gap: 14px;
+    margin-top: 40px;
+    margin-bottom: 80px;
+  }
+
+  .footer-copyright-terms a {
+    margin-top: 152px;
+    margin-bottom: 0px;
+    font-family: var(--primary-font);
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 18px;
+    letter-spacing: -0.02em;
+    text-align: left;
+  }
+
+  .footer-copyright-terms {
+    gap: 18px;
+  }
+}

src/index.html

@@ -1,15 +1,40 @@
+
+
 <!DOCTYPE html>
+
 <html lang="ru">
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Page title</title>
     <link rel="stylesheet" href="./sass/index.scss" />
+
+
+
+
+
+
+    <link rel="stylesheet" href="./sass/catalog.css"/>
+      <link rel="stylesheet" href="./css/footer.css" />
+
+
+    <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>
   </head>
   <body>
-    <h1>Example title</h1>
-    <!-- ❗️❗️❗️ Add partials like so for every page -->
-    <include src="./partials/example.html"></include>
+
+
+    <include src="./partials/catalog.html"></include>
+
+
+   <!-- FOOTER SECTION -->
+  <include src="./partials/footer-section.html"></include>
+
+
   </body>
 </html>
+

src/modalsection.js

@@ -0,0 +1,14 @@
+(() => {
+  const refs = {
+    openModalBtn: document.querySelector("[data-modal-open]"),
+    closeModalBtn: document.querySelector("[data-modal-close]"),
+    modal: document.querySelector("[data-modal]"),
+  };
+
+  refs.openModalBtn.addEventListener("click", toggleModal);
+  refs.closeModalBtn.addEventListener("click", toggleModal);
+
+  function toggleModal() {
+    refs.modal.classList.toggle("is-hidden");
+  }
+})();