goitacademy · Florin575 · Aug 25, 2024 · Sep 1, 2024 · Sep 1, 2024 · Sep 1, 2024
diff --git a/src/images/logo.png b/src/images/logo.png
diff --git a/src/index.html b/src/index.html
@@ -1,15 +1,20 @@
 <!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>
   </head>
   <body>
-    <h1>Example title</h1>
-    <!-- ❗️❗️❗️ Add partials like so for every page -->
-    <include src="./partials/example.html"></include>
+    <!-- ❗❗❗ Add partials like so for every page -->
+    <include 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,62 @@
+<!--Footer-->
+<footer>
+  <footer class="site-footer">
+    <div class="footer-container">
+      <div class="footer-left">
+        <a href="index.html"
+          ><img src="./images/logoalb.png" alt="Logo" class="footer-logo"
+        /></a>
+        <address>
+          <ul class="contacts-list-footer list">
+            <li class="contacts-item-footer">
+              <a class="contacts-link-footer link" href="tel:+380684439426"
+                >+380 (68) 443-94-26</a
+              >
+            </li>
+            <li class="contacts-item-footer">
+              <a
+                class="contacts-link-footer-adr link"
+                href="https://www.google.com/maps/place/1678+Pioneer+Rd,+Salt+Lake+City,+UT+84104,+Сполучені+Штати+Америки/@40.7335892,-111.9622754,17z/data=!3m1!4b1!4m6!3m5!1s0x8752f35b0826d399:0x2b26230524fd3ca3!8m2!3d40.7335892!4d-111.9600867!16s%2Fg%2F11bw41vm_p"
+                target="_blank"
+                rel="noreferrer noopener"
+                >1678 S. Pioneer Road Salt Lake City UT 84104</a
+              >
+            </li>
+          </ul>
+        </address>
+      </div>
+      <div class="footer-center">
+        <ul class="footer-links">
+          <li><a href="#">ABOUT US</a></li>
+          <li><a href="#">CATALOG</a></li>
+          <li><a href="#">SALE</a></li>
+        </ul>
+      </div>
+      <div class="footer-right">
+        <ul class="social-icons">
+          <a href="https://www.facebook.com/" target="_blank" class="soc-link">
+            <svg class="social-icon" width="24" height="24">
+              <use href="./images/icons.svg#icon-Facebook"></use>
+            </svg>
+          </a>
+            <a href="https://www.instagram.com/" target="_blank" class="soc-link">
+              <svg class="social-icon" width="24" height="24">
+                <use href="./images/icons.svg#icon-Instagram"></use>
+              </svg>
+            <a href="https://www.youtube.com/" target="_blank" class="soc-link">
+              <svg class="social-icon" width="24" height="24">
+                <use href="./images/icons.svg#icon-Youtube"></use>
+              </svg>
+            </a>
+        </ul>
+      </div>
+    </div>
+    <div class="footer-bottom">
+      <p>&copy;2022 The Watch Spot. All rights reserved.</p>
+      <div class="footer-legal">
+        <a href="#">Privacy Policy</a>
+        <a href="#">Terms of Service</a>
+      </div>
+    </div>
+  </footer>
+</footer>
diff --git a/src/partials/images/icons.svg b/src/partials/images/icons.svg
diff --git a/src/partials/images/logoalb.png b/src/partials/images/logoalb.png
diff --git a/src/sass/_example.scss b/src/sass/_example.scss
diff --git a/src/sass/footer.scss b/src/sass/footer.scss
@@ -0,0 +1,104 @@
+body {
+    margin: 0;
+    font-family: 'Epilogue', sans-serif;
+    color: #fff;
+    background-color: #1E2827;
+}
+
+.site-footer {
+    background-color: #1E2827;
+    padding: 40px 20px;
+    color: #fff;
+}
+
+.footer-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding-bottom: 20px;
+    border-bottom: 1px solid #333;
+}
+
+.footer-left {
+    max-width: 200px;
+}
+
+.footer-logo {
+    width: 40px;
+    margin-bottom: 40px;
+}
+
+.footer-contact {
+    line-height: 1.6;
+    color: #b5b5b5;
+    font-size: 14px;
+}
+
+.footer-center {
+    text-align: left;
+}
+
+.footer-links {
+    list-style: none;
+    padding: 0;
+}
+
+.footer-links li {
+    margin-bottom: 10px;
+}
+
+.footer-links a {
+    color: #fff;
+    text-decoration: none;
+    font-weight: bold;
+    transition: color 0.3s ease;
+}
+
+.footer-links a:hover {
+    color: #007aff;
+}
+
+.footer-right {
+    display: flex;
+    align-items: center;
+}
+
+.social-icons a {
+    margin-right: 10px;
+}
+
+.social-icons img {
+    width: 36px;
+    height: 36px;
+    border-radius: 4px;
+    background-color: #FFFFFF1A;
+    padding: 8px;
+    transition: background-color 0.3s ease;
+}
+
+.social-icons a:hover img {
+    background-color: #007aff;
+}
+
+.footer-bottom {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 1200px;
+    margin: 20px auto 0;
+    font-size: 12px;
+    color: #b5b5b5;
+}
+
+.footer-legal a {
+    color: #b5b5b5;
+    text-decoration: none;
+    margin-left: 20px;
+    transition: color 0.3s ease;
+}
+
+.footer-legal a:hover {
+    color: #fff;
+}
diff --git a/src/sass/index.scss b/src/sass/index.scss
@@ -1,2 +1,7 @@
 @import './common';
 @import './example';
+@import './header.scss';
+@import './hero.scss';
+@import './aboutus.scss';
+@import './styles.scss';
+@import './footer.scss';
diff --git a/src/sass/styles.scss b/src/sass/styles.scss
@@ -0,0 +1,74 @@
+/*Project style reset */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p {
+    margin: 0;
+}
+
+ul {
+    padding: 0;
+    margin: 0;
+    list-style-type: none;
+}
+
+a {
+    text-decoration: none;
+    font-style: normal;
+}
+
+body {
+    font-family: 'Epilogue', sans-serif;
+    background-color: var(--white);
+}
+
+img {
+    display: block;
+    width: 100%;
+    height: auto;
+}
+
+:root {
+    --white: #ffffff;
+    --darkgreen: #1e2827;
+    --black: #141414;
+}
+
+.section {
+    min-width: 375px;
+    width: 100%;
+}
+
+.container {
+    max-width: 335px;
+    padding: 0 20px;
+    margin: 0 auto;
+}
+
+@media screen and (min-width: 768px) {
+    .section {
+        min-width: 768px;
+    }
+
+    .container {
+        max-width: 704px;
+        padding: 0 32px;
+    }
+}
+
+@media screen and (min-width: 1280px) {
+    .section {
+        min-width: 1280px;
+    }
+
+    .container {
+        max-width: 1176px;
+        padding: 0 128px;
+    }
+}
+
+/* End style reset */