Merge pull request #128 from KirillKapteily/Kirill-footer

Fixed styles
KirillKapteily · Jan 25, 2025 · f41a9d8 · f41a9d8
2 parents e2cb14a + 2090aa2
commit f41a9d8
Show file tree

Hide file tree

Showing 3 changed files with 129 additions and 49 deletions.
diff --git a/src/img/footer/symbol-defs.svg b/src/img/footer/symbol-defs.svg
diff --git a/src/partials/footer.html b/src/partials/footer.html
@@ -1,56 +1,57 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1.0" />
-    <title>Yacht Adventures</title>
-    <link
-      rel="stylesheet"
-      href="footer.scss" />
-  </head>
-  <body>
-    <footer class="footer">
-      <div class="footer__container">
-        <div class="footer__logo">
-          <span class="footer__logo icon">⛵</span>
-          <span class="footer__text">YACHT ADVENTURES</span>
-        </div>
 
-        <ul class="footer__menu">
-          <li><a href="#" class="footer__link">ABOUT</a></li>
-          <li><a href="#" class="footer__link">YACHTS</a></li>
-          <li><a href="#" class="footer__link">REVIEWS</a></li>
-        </ul>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Yacht Adventures</title>
+  <link rel="stylesheet" href="footer.scss" />
+</head>
 
-        <div class="footer__social">
-          <h4 class="footer__social-title">WE IN SOCIAL</h4>
-          <div class="footer__icons">
-            <a href="#" class="footer__social-link">
-              <img
-                src="./img/jpg/facebook.jpg"
-                alt="Facebook" />
-            </a>
-            <a href="#" class="footer__social-link">
-              <img
-                src="./img/jpg/instagram.jpg"
-                alt="Instagram" />
-            </a>
-            <a href="#" class="footer__social-link">
-              <img
-                src="./img/jpg/youtube.jpg"
-                alt="YouTube" />
-            </a>
-          </div>
-        </div>
+<body>
+  <footer class="footer">
+
+    <div class="footer__container">
+      <hr class="hr">
+      <div class="footer__logo">
+        <span class="footer__logo icon">⛵</span>
+        <span class="footer__text dm-sans">YACHT ADVENTURES</span>
       </div>
 
-      <div class="footer__bottom">
-        <p>2023. Yacht Adventures</p>
-        <p><a href="#" class="footer__privacy">Privacy Policy</a></p>
+      <ul class="footer__menu">
+        <li><a href="#" class="footer__link dm-sans">ABOUT</a></li>
+        <li><a href="#" class="footer__link dm-sans">YACHTS</a></li>
+        <li><a href="#" class="footer__link dm-sans">REVIEWS</a></li>
+      </ul>
+
+      <div class="footer__social">
+        <h4 class="footer__social-title  dm-sans">WE IN SOCIAL</h4>
+        <div class="footer__icons">
+          <a href="#" class="footer__social-link">
+            <svg class="fotter__icon">
+              <use href="../img/footer/symbol-defs.svg#icon-facebook" width="40" height="40"></use>
+          </svg>
+          </a>
+          <a href="#" class="footer__social-link">
+            <svg class="fotter__icon">
+              <use href="../img/footer/symbol-defs.svg#icon-instagram" width="40" height="40"></use>
+          </svg>
+          </a>
+          <a href="#" class="footer__social-link">
+            <svg class="fotter__icon">
+              <use href="../img/footer/symbol-defs.svg#icon-youtube" width="40" height="40"></use>
+          </svg>
+          </a>
+        </div>
       </div>
-    </footer>
-  </body>
-</html>
+    </div>
+
+    <div class="footer__bottom">
+      <p class="footer__cop dm-sans">2023. Yacht Adventures</p>
+      <p><a href="#" class="footer__privacy dm-sans">Privacy Policy</a></p>
+    </div>
+    <div class="decor__footer"> </div>
+  </footer>
+</body>
 
+</html>
diff --git a/src/sass/components/footer.scss b/src/sass/components/footer.scss
@@ -15,6 +15,40 @@ body {
   color: $text-color;
 }
 
+.footer__text{
+  color: $text-color;
+}
+
+.fotter__icon{
+  width: 40px;
+  height: 40px;
+  fill: #f6f5ef;
+
+
+  &:hover{
+ fill: $accent-color;
+
+  }
+}
+
+.hr{
+  border: 1px solid rgba(246, 245, 239, 0.2);
+  width: 100%;
+  margin-bottom: 64px;
+}
+
+.decor__footer{
+  filter: blur(200px);
+/* light green */
+background: rgb(147, 171, 174);
+opacity: 0.9;
+position: absolute;
+width: 215px;
+height: 215px;
+left: 289px;
+top: 5765px;
+}
+
 .footer {
   background-color: $primary-color;
   padding: 20px 0;
@@ -45,9 +79,30 @@ body {
     }
   }
 
+
+
+
+  .footer__cop{
+    color: $accent-color;
+    font-size: 14px;
+font-weight: 400;
+line-height: 118%;
+letter-spacing: 3%;
+  }
+.footer__bottom{
+  display: flex;
+  justify-content: center;
+  gap: 32px;
+  margin-top: 200px;
+}
+
+
+
   &__menu {
     list-style: none;
     display: flex;
+    justify-content: center;
+    align-items: center;
 
     li {
       margin-left: 30px;
@@ -68,17 +123,22 @@ body {
     text-align: right;
 
     &-title {
-      margin-bottom: 10px;
+      margin-bottom: 16px;
       font-size: 14px;
+      color: $text-color;
+      text-align: left;
     }
 
     .footer__icons {
       display: flex;
       justify-content: flex-end;
 
+
+
       .footer__social-link {
         display: inline-block;
         margin-left: 10px;
+        color: $text-color;
 
         img {
           width: 24px;