From e642645348b40985f4af2cf8577054bdb9dd1437 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=98=D0=B3=D0=BE=D1=80=D1=8C=20=D0=A9=D0=B5=D1=80=D0=B1?=
 =?UTF-8?q?=D0=B0=D0=BA=D0=BE=D0=B2?= <dj_jazz2010@mail.ru>
Date: Tue, 27 Aug 2024 21:24:26 +0300
Subject: [PATCH] footer

---
 source/img/sprite/pin-filled.svg |   3 +
 source/index.html                |  79 +++++++++++----------
 source/sass/blocks/contact.scss  | 118 ++++++++++++++++++++++++++++++-
 source/sass/blocks/footer.scss   |  65 ++++++++++++++++-
 source/sass/blocks/social.scss   |  15 ++++
 5 files changed, 237 insertions(+), 43 deletions(-)
 create mode 100644 source/img/sprite/pin-filled.svg

diff --git a/source/img/sprite/pin-filled.svg b/source/img/sprite/pin-filled.svg
new file mode 100644
index 000000000..65ccaf56e
--- /dev/null
+++ b/source/img/sprite/pin-filled.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 1C15.1421 1 18.5 4.19996 18.5 8.14732V8.57782C18.5 10.1572 17.9822 11.6971 17.0189 12.9823L11.0148 20.9927C11.0076 21.0024 10.9924 21.0024 10.9852 20.9927L4.98114 12.9823C4.01784 11.6971 3.5 10.1572 3.5 8.57782V8.14732C3.5 4.19996 6.85786 1 11 1ZM9.66733 5.76428C8.82517 6.14804 8.21352 6.87379 8.00552 7.73609C7.79753 8.59839 8.01582 9.50338 8.59862 10.1949C9.18141 10.8864 10.0653 11.2892 11 11.2892C11.9347 11.2892 12.8186 10.8864 13.4014 10.1949C13.9842 9.50338 14.2025 8.59839 13.9945 7.73609C13.7865 6.87379 13.1748 6.14804 12.3327 5.76428C11.4905 5.38052 10.5095 5.38052 9.66733 5.76428Z" fill="#0266C1"/>
+</svg>
diff --git a/source/index.html b/source/index.html
index 740a9c049..c0c813dd7 100644
--- a/source/index.html
+++ b/source/index.html
@@ -938,44 +938,45 @@ <h2 class="form__title">Остались вопросы?</h2>
 
 
   <footer class="footer" data-test="footer" id="footer">
-    <div class="footer__contact contact" id="contact">
-      <h2 class="contact__title title">Контакты</h2>
-      <p>Свяжитесь с нами любым удобным для вас способом или приходите к нам в гости. Мы будем рады поделиться
-        увлекательными историями и подобрать для вас тур.</p>
-      <ul class="contact__list">
-        <li class="contact__item contact__item--tel">Телефон
-          <span>
-            <a class="contact__link" href="tel:+79837454545">+7 983 745-45-45</a>
-          </span>
-        </li>
-        <li class="contact__item contact__item--mail">Email
-          <span>
-            <a class="contact__link" href="mailto:info@lifetour.com">info@lifetour.com</a>
-          </span>
-        </li>
-        <li class="contact__item contact__item--addres">Адрес
-          <address class="contact__link">
-            г. Москва, пр-т Мира,<br>д. 14, офис 101
-          </address>
-        </li>
-      </ul>
-    </div>
-    <div class="contact__map">
-      <picture>
-        <source type="image/webp" width="600" height="324" media="(min-width: 1440px)"
-          srcset="./img/footer/map-desctop.webp 1x, ./img/footer/map-desctop@2x.webp 2x">
-        <source type="image/webp" width="768" height="340" media="(min-width: 768px)"
-          srcset="./img/footer/map-tablet.webp 1x, ./img/footer/map-tablet@2x.webp 2x">
-        <source type="image/webp" width="320" height="343"
-          srcset="./img/footer/map-mobil.webp 1x, ./img/footer/map-mobil@2x.webp 2x">
-
-        <source type="image/jpeg" width="600" height="324" media="(min-width: 1440px)"
-          srcset="./img/footer/map-desctop.jpg 1x, ./img/footer/map-desctop.@2x.jpg 2x">
-        <source type="image/jpeg" width="768" height="340" media="(min-width: 768px)"
-          srcset="./img/footer/map-tablet.jpg 1x, ./img/footer/map-tablet@2x.jpg 2x">
-        <img class="contact__img" src="./img/footer/map-mobil.jpg" srcset="./img/footer/map-mobil@2x.jpg" width="320"
-          height="343" alt="г.Москва, пр-т Мира, д.14, офис 101.">
-      </picture>
+    <div class="footer__conteiner">
+      <div class="footer__contact contact" id="contact">
+        <h2 class="contact__title title" data-shadow="Контакты">Контакты</h2>
+        <p>Свяжитесь с нами любым удобным для вас способом или приходите к нам в гости. Мы будем рады поделиться
+          увлекательными историями и подобрать для вас тур.</p>
+        <ul class="contact__list">
+          <li class="contact__item contact__item--tel">Телефон
+            <span>
+              <a class="contact__link" href="tel:+79837454545">+7 983 745-45-45</a>
+            </span>
+          </li>
+          <li class="contact__item contact__item--mail">Email
+            <span>
+              <a class="contact__link" href="mailto:info@lifetour.com">info@lifetour.com</a>
+            </span>
+          </li>
+          <li class="contact__item contact__item--addres">Адрес
+            <address class="contact__link">
+              г. Москва, пр-т Мира, <br>д. 14, офис 101
+            </address>
+          </li>
+        </ul>
+      </div>
+      <div class="contact__map">
+        <picture>
+          <source type="image/webp" width="600" height="324" media="(min-width: 1440px)"
+            srcset="./img/footer/map-desctop.webp 1x, ./img/footer/map-desctop@2x.webp 2x">
+          <source type="image/webp" width="768" height="340" media="(min-width: 768px)"
+            srcset="./img/footer/map-tablet.webp 1x, ./img/footer/map-tablet@2x.webp 2x">
+          <source type="image/webp" width="320" height="343"
+            srcset="./img/footer/map-mobil.webp 1x, ./img/footer/map-mobil@2x.webp 2x">
+          <source type="image/jpeg" width="600" height="324" media="(min-width: 1440px)"
+            srcset="./img/footer/map-desctop.jpg 1x, ./img/footer/map-desctop.@2x.jpg 2x">
+          <source type="image/jpeg" width="768" height="340" media="(min-width: 768px)"
+            srcset="./img/footer/map-tablet.jpg 1x, ./img/footer/map-tablet@2x.jpg 2x">
+          <img class="contact__img" src="./img/footer/map-mobil.jpg" srcset="./img/footer/map-mobil@2x.jpg" width="320"
+            height="343" alt="г.Москва, пр-т Мира, д.14, офис 101.">
+        </picture>
+      </div>
     </div>
 
 
@@ -1006,7 +1007,7 @@ <h2 class="contact__title title">Контакты</h2>
       </ul>
 
       <div class="footer__tel tel">
-        <a class="footer__link tel__link" href="tel:+78000000000">8 800 000-00-00</a>
+        <a class="footer__link tel__link" href="tel:+78007253232">8 800 725-32-32</a>
       </div>
     </div>
 
diff --git a/source/sass/blocks/contact.scss b/source/sass/blocks/contact.scss
index 3377f0dbd..01afe9f04 100644
--- a/source/sass/blocks/contact.scss
+++ b/source/sass/blocks/contact.scss
@@ -3,6 +3,16 @@
   width: 320px;
   margin: 0 auto;
 
+  @media (min-width: $tablet-width) {
+    padding: 0 40px 0 45px;
+    width: 768px;
+  }
+
+  @media (min-width: $desktop-width) {
+    width: auto;
+    padding: 0;
+  }
+
   p {
     font-size: 14px;
     line-height: 20px;
@@ -12,12 +22,33 @@
     @media (min-width: $tablet-width) {
       font-size: 16px;
       line-height: 24px;
+      width: 570px;
+      margin: 0 0 40px;
+    }
+
+    @media (min-width: $desktop-width) {
+      margin: 0 0 50px;
+      width: auto;
+      padding-right: 50px;
     }
   }
 }
 
 .contact__title {
   margin: 0 0 28px;
+
+  @media (min-width: $tablet-width) {
+    margin: 0 0 21px;
+  }
+
+  @media (min-width: $desktop-width) {
+    margin: 0 0 23px;
+  }
+}
+
+.contact__title[data-shadow]::after {
+  top: -15px;
+  left: 20px;
 }
 
 .contact__list {
@@ -28,6 +59,18 @@
   flex-direction: column;
   gap: 30px;
   margin-bottom: 30px;
+  flex-wrap: wrap;
+
+  @media (min-width: $tablet-width) {
+    flex-direction: row;
+    gap: 40px;
+    margin-bottom: 40px;
+  }
+
+  @media (min-width: $desktop-width) {
+    flex-direction: column;
+    gap: 35px;
+  }
 }
 
 .contact__item {
@@ -39,8 +82,18 @@
   font-size: 14px;
   font-weight: 600;
   line-height: 14px;
-
   padding-left: 32px;
+
+  @media (min-width: $tablet-width) {
+    font-size: 16px;
+    line-height: 16px;
+    padding-left: 34px;
+  }
+
+  @media (min-width: $desktop-width) {
+    font-size: 18px;
+    padding-left: 56px;
+  }
 }
 
 .contact__item--tel::after,
@@ -57,16 +110,54 @@
 .contact__item--tel::after {
   background-color: $icon-basic;
   mask-image: url("/__spritemap#sprite-phone-view");
+
+  @media (min-width: $tablet-width) {
+    top: -1px;
+    width: 24px;
+    height: 24px;
+  }
+
+  @media (min-width: $desktop-width) {
+    top: 11px;
+    width: 26px;
+    height: 26px;
+  }
 }
 
 .contact__item--mail::after {
   background-color: $icon-basic;
   mask-image: url("/__spritemap#sprite-mail-view");
+
+  @media (min-width: $tablet-width) {
+    top: -1px;
+    width: 24px;
+    height: 24px;
+  }
+
+  @media (min-width: $desktop-width) {
+    top: 11px;
+    width: 26px;
+    height: 26px;
+  }
 }
 
 .contact__item--addres::after {
   background-color: $icon-basic;
   mask-image: url("/__spritemap#sprite-pin-stroke-view");
+
+  @media (min-width: $tablet-width) {
+    top: -1px;
+    left: 1px;
+    width: 24px;
+    height: 24px;
+  }
+
+  @media (min-width: $desktop-width) {
+    top: 11px;
+    left: 0;
+    width: 26px;
+    height: 26px;
+  }
 }
 
 .contact__link {
@@ -78,10 +169,33 @@
   color: $color-basic;
   display: block;
   margin-top: 8px;
+
+  @media (min-width: $tablet-width) {
+    font-size: 14px;
+    line-height: 22px;
+    margin-top: 5px;
+  }
+
+  @media (min-width: $desktop-width) {
+    font-size: 16px;
+    line-height: 24px;
+    margin-top: 10px;
+  }
+}
+
+.contact__link br {
+  @media (min-width: $tablet-width) {
+    display: none;
+  }
 }
 
 .contact__img {
   display: block;
   width: 100%;
-  height: 343px;
+}
+
+.contact__map {
+  @media (min-width: $desktop-width) {
+    margin-top: 26px;
+  }
 }
diff --git a/source/sass/blocks/footer.scss b/source/sass/blocks/footer.scss
index f29f53a36..77f0582ab 100644
--- a/source/sass/blocks/footer.scss
+++ b/source/sass/blocks/footer.scss
@@ -1,17 +1,58 @@
 .footer {
   padding-top: 37px;
   padding-bottom: 20px;
+
+  @media (min-width: $tablet-width) {
+    padding-top: 60px;
+  }
+
+  @media (min-width: $desktop-width) {
+    padding: 124px 0 28px;
+  }
+}
+
+.footer__conteiner {
+  @media (min-width: $desktop-width) {
+    padding: 0 120px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    max-width: 1440px;
+    margin: 0 auto;
+  }
 }
 
 .footer--logo {
   display: block;
   margin: 0 auto 19px;
+
+  @media (min-width: $tablet-width) {
+    margin: 0;
+    margin-right: 36px;
+  }
+
+  @media (min-width: $desktop-width) {
+    margin-right: 136px;
+  }
 }
 
 .footer__nav {
   margin-top: 19px;
   padding-top: 23px;
   border-top: 1px solid rgba($color-basic, 0.2);
+
+  @media (min-width: $tablet-width) {
+    margin-top: 39px;
+    padding: 34px 45px;
+    display: flex;
+  }
+
+  @media (min-width: $desktop-width) {
+    grid-column: 1 / -1;
+    border-top: 2px solid rgba($color-basic, 0.2);
+    padding: 40px 120px 31px 149px;
+    max-width: 1440px;
+    margin: 53px auto 0;
+  }
 }
 
 .footer__tel {
@@ -19,6 +60,13 @@
 
   @media (min-width: $desktop-width) {
     display: block;
+    font-family: $font-600;
+    font-size: 18px;
+    font-weight: 600;
+    line-height: 18px;
+    color: $color-basic;
+    margin-top: 14px;
+    margin-left: auto;
   }
 }
 
@@ -28,6 +76,17 @@
   text-align: center;
   gap: 7px 20px;
   margin-bottom: 19px;
+
+  @media (min-width: $tablet-width) {
+    display: flex;
+    margin: 0;
+    gap: 12px;
+    align-self: center;
+  }
+
+  @media (min-width: $desktop-width) {
+    gap: 19px;
+  }
 }
 
 .footer--link {
@@ -42,8 +101,6 @@
   padding: 3px 5px;
 
   @media (min-width: $tablet-width) {
-    font-size: 16px;
-    line-height: 16px;
     letter-spacing: 0;
   }
 
@@ -52,6 +109,10 @@
     font-weight: 400;
     letter-spacing: 0;
     text-transform: none;
+    font-size: 16px;
+    line-height: 16px;
+    display: block;
+    margin-top: 1px;
   }
 
   &:hover {
diff --git a/source/sass/blocks/social.scss b/source/sass/blocks/social.scss
index 8bb19e8c0..c7a86bc4d 100644
--- a/source/sass/blocks/social.scss
+++ b/source/sass/blocks/social.scss
@@ -1,3 +1,9 @@
+.social {
+  @media (min-width: $desktop-width) {
+    grid-column: 1 / -1;
+  }
+}
+
 .social__list {
   list-style: none;
   margin: 0;
@@ -6,6 +12,15 @@
   justify-content: center;
   gap: 16px;
   margin-bottom: 17px;
+
+  @media (min-width: $tablet-width) {
+    margin-bottom: 28px;
+  }
+
+  @media (min-width: $desktop-width) {
+    gap: 13px;
+    margin-bottom: 16px;
+  }
 }
 
 .social__item {