feat: added footer

1 year ago · f1f7528cde
parent c2eb6a55dc
commit f1f7528cde
7 changed files with 392 additions and 2 deletions
--- a/assets/css/index.css
+++ b/assets/css/index.css
@ -193,6 +193,9 @@ h3 {
    font-size: 7px;
  }
 }
+.logo--light .logo__text-name, .logo--light .logo__text-slogan {
+  color: #ffffff;
+}

 .social-link {
  display: inline-block;
@ -222,6 +225,20 @@ h3 {
 .social-link--tg:active {
  background-color: #45b3ea;
 }
+.social-link--youtube {
+  background-image: url(../img/icons/whatsapp.svg);
+  background-color: #ff0000;
+}
+.social-link--youtube:active {
+  background-color: #da0000;
+}
+.social-link--vk {
+  background-image: url(../img/icons/telegram.svg);
+  background-color: #0077ff;
+}
+.social-link--vk:active {
+  background-color: #0067dd;
+}
 .social-link--phone {
  width: auto;
  height: auto;
@ -345,6 +362,10 @@ h3 {
  border-color: #3081ff;
  background-color: #3081ff;
 }
+.button--order--light {
+  color: #dcdcdc;
+  border-color: white;
+}
 .button--prev, .button--next {
  height: 60px;
  width: 60px;
@ -545,6 +566,144 @@ h3 {
  background-color: #3081ff;
 }

+.footer {
+  margin-top: -106px;
+  background-color: #2d2d2d;
+}
+@media (max-width: 992px) {
+  .footer {
+    margin-top: -54px;
+  }
+}
+.footer__nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 18px 36px;
+  padding: 203px 0 27px;
+}
+@media (max-width: 1240px) {
+  .footer__nav {
+    justify-content: center;
+  }
+}
+@media (max-width: 992px) {
+  .footer__nav {
+    display: none;
+  }
+}
+.footer__nav-link {
+  font-weight: 400;
+  font-size: 15px;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.8);
+}
+.footer__wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 29px 0 60px;
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+@media (max-width: 992px) {
+  .footer__wrapper {
+    flex-direction: column;
+    gap: 32px;
+    padding: 110px 0 30px;
+    border: none;
+  }
+}
+.footer .logo {
+  order: 0;
+}
+@media (max-width: 992px) {
+  .footer .logo__link {
+    flex-direction: column;
+  }
+}
+.footer .logo__text {
+  text-align: center;
+}
+.footer__info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 5px;
+  order: 1;
+  min-height: 32px;
+  padding-left: 50px;
+  background: url(../img/icons/location-circle.svg) center left no-repeat;
+}
+@media (max-width: 992px) {
+  .footer__info {
+    align-items: center;
+    padding: 50px 0 0;
+    background: url(../img/icons/location-circle.svg) center top no-repeat;
+  }
+}
+.footer__info-address {
+  font-weight: 400;
+  font-size: 15px;
+  line-height: 130%;
+  color: #cacaca;
+}
+.footer__info-worktime {
+  font-weight: 300;
+  font-size: 11px;
+  color: #ededed;
+}
+.footer__social {
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  order: 2;
+}
+@media (max-width: 992px) {
+  .footer__social {
+    order: 3;
+  }
+}
+.footer__phone {
+  flex: 0 0 auto;
+  order: 3;
+}
+@media (max-width: 992px) {
+  .footer__phone {
+    order: 2;
+  }
+}
+.footer__phone-link {
+  font-weight: 600;
+  font-size: 24px;
+  color: #ffffff;
+}
+.footer__buttons {
+  flex: 0 0 auto;
+  order: 4;
+}
+.footer__copyrights {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  padding: 27px 0;
+  font-weight: 300;
+  font-size: 11px;
+  color: rgba(255, 255, 255, 0.4);
+  border-top: 1px solid rgba(255, 255, 255, 0.1);
+}
+@media (max-width: 992px) {
+  .footer__copyrights {
+    flex-direction: column;
+  }
+}
+.footer__copyrights > a {
+  color: #609eff;
+}
+
@media (max-width: 1240px) {
  .first-screen .container {
    padding: 0;
--- a/assets/img/icons/location-circle.svg
+++ b/assets/img/icons/location-circle.svg
@ -0,0 +1,4 @@
+<svg width="30" height="31" viewBox="0 0 30 31" fill="none" xmlns="http://www.w3.org/2000/svg">
+<ellipse cx="15" cy="15.4671" rx="15" ry="15.3333" fill="#609EFF"/>
+<path d="M14.9157 8.02794C13.0501 8.20569 11.4148 9.25989 10.5504 10.832C10.4069 11.0956 10.18 11.6993 10.1132 12.0088C9.86623 13.1243 10.0264 14.2643 10.5638 15.2695C10.6438 15.4196 11.7018 16.9642 12.9133 18.7018C14.5486 21.0462 15.146 21.8797 15.2294 21.9287C15.383 22.0238 15.6166 22.0238 15.7701 21.9287C15.8502 21.8797 16.4576 21.037 18.0762 18.7202C19.2844 16.9918 20.3457 15.4411 20.4358 15.2725C21.0632 14.0988 21.1733 12.7382 20.7361 11.5093C20.4558 10.7217 20.0186 10.0659 19.3845 9.48361C18.1997 8.39569 16.5811 7.86859 14.9157 8.02794ZM16.1172 10.8228C17.0149 11.0527 17.7125 11.7054 17.9394 12.5298C17.9661 12.6248 17.9861 12.8515 17.9861 13.0507C17.9861 13.4277 17.9461 13.6269 17.8092 13.9241C17.4989 14.5953 16.8414 15.1101 16.0671 15.2909C15.8302 15.3461 15.1694 15.3461 14.9324 15.2909C14.1581 15.1101 13.5007 14.5953 13.1903 13.9241C13.0534 13.6269 13.0134 13.4277 13.0134 13.0507C13.0134 12.6738 13.0534 12.4746 13.1903 12.1773C13.5007 11.5031 14.2082 10.9515 14.9324 10.8167C15.0325 10.7983 15.146 10.7768 15.1827 10.7707C15.3062 10.7431 15.947 10.7799 16.1172 10.8228Z" fill="white"/>
+</svg>
--- a/assets/scss/_l-footer.scss
+++ b/assets/scss/_l-footer.scss
@ -1,2 +1,144 @@
 .footer {
+  margin-top: -106px;
+  background-color: $black;
+
+  @include laptop {
+    margin-top: -54px;
+  }
+
+  &__nav {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 18px 36px;
+    padding: 203px 0 27px;
+
+    @include desktop {
+      justify-content: center;
+    }
+
+    @include laptop {
+      display: none;
+    }
+
+    &-link {
+      font-weight: 400;
+      font-size: 15px;
+      text-align: center;
+      color: rgba($color: $white, $alpha: 0.8);
+    }
+  }
+
+  &__wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 24px;
+    padding: 29px 0 60px;
+    border-top: 1px solid rgba($color: $white, $alpha: 0.1);
+
+    @include laptop {
+      flex-direction: column;
+      gap: 32px;
+      padding: 110px 0 30px;
+      border: none;
+    }
+  }
+
+  & .logo {
+    order: 0;
+
+    &__link {
+      @include laptop {
+        flex-direction: column;
+      }
+    }
+
+    &__text {
+      text-align: center;
+    }
+  }
+
+  &__info {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 5px;
+    order: 1;
+    min-height: 32px;
+    padding-left: 50px;
+    background: url(../img/icons/location-circle.svg) center left no-repeat;
+
+    @include laptop {
+      align-items: center;
+      padding: 50px 0 0;
+      background: url(../img/icons/location-circle.svg) center top no-repeat;
+    }
+
+    &-address {
+      font-weight: 400;
+      font-size: 15px;
+      line-height: 130%;
+      color: $lightgrey;
+    }
+
+    &-worktime {
+      font-weight: 300;
+      font-size: 11px;
+      color: $greybg;
+    }
+  }
+
+  &__social {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 18px;
+    order: 2;
+
+    @include laptop {
+      order: 3;
+    }
+  }
+
+  &__phone {
+    flex: 0 0 auto;
+    order: 3;
+
+    @include laptop {
+      order: 2;
+    }
+
+    &-link {
+      font-weight: 600;
+      font-size: 24px;
+      color: $white;
+    }
+  }
+
+  &__buttons {
+    flex: 0 0 auto;
+    order: 4;
+  }
+
+  &__copyrights {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 16px;
+    padding: 27px 0;
+    font-weight: 300;
+    font-size: 11px;
+    color: rgba($color: $white, $alpha: 0.4);
+    border-top: 1px solid rgba($color: $white, $alpha: 0.1);
+
+    @include laptop {
+      flex-direction: column;
+    }
+
+    & > a {
+      color: $blue;
+    }
+  }
 }
--- a/assets/scss/_m-button.scss
+++ b/assets/scss/_m-button.scss
@ -107,6 +107,11 @@
      border-color: $darkblue;
      background-color: $darkblue;
    }
+
+    &--light {
+      color: #dcdcdc;
+      border-color: rgba($color: $white, $alpha: 1.0);
+    }
  }

  &--prev,
--- a/assets/scss/_m-logo.scss
+++ b/assets/scss/_m-logo.scss
@ -46,6 +46,8 @@
      }
    }

+    
+
    &-slogan {
      font-weight: 400;
      font-size: 9px;
@ -59,4 +61,8 @@
      }
    }
  }
+
+  &--light &__text-name, &--light &__text-slogan {
+    color: $white;
+  }
 }
--- a/assets/scss/_m-social-link.scss
+++ b/assets/scss/_m-social-link.scss
@ -29,6 +29,24 @@
    }
  }

+  &--youtube {
+    background-image: url(../img/icons/whatsapp.svg);
+    background-color: #ff0000;
+
+    &:active {
+      background-color: #da0000;
+    }
+  }
+
+  &--vk {
+    background-image: url(../img/icons/telegram.svg);
+    background-color: #0077ff;
+
+    &:active {
+      background-color: #0067dd;
+    }
+  }
+
  &--phone {
    width: auto;
    height: auto;
@ -46,7 +64,7 @@
      height: 23px;
      width: 23px;
    }
-
+    
    &:active {
      @include laptop {
        background-color: $darkblue;
--- a/index.html
+++ b/index.html
@ -498,7 +498,8 @@
            </h2>

            <p class="callback__description">
-              Наши специалисты проконсультируют вас по любым вопросам. А если требуется срочная и принудительная транспортировка, то мы организуем трансфер в течении 2 часов
+              Наши специалисты проконсультируют вас по любым вопросам. А если требуется срочная и
+              принудительная транспортировка, то мы организуем трансфер в течении 2 часов
            </p>

            <form class="callback__form">
@ -1895,6 +1896,61 @@
      </section>
    </main>

+    <footer class="footer">
+      <div class="container">
+        <nav class="footer__nav">
+          <a class="footer__nav-link" href="#">О центре</a>
+          <a class="footer__nav-link" href="#">Истории выпускников</a>
+          <a class="footer__nav-link" href="#">С чего начать?</a>
+          <a class="footer__nav-link" href="#">Условия проживания</a>
+          <a class="footer__nav-link" href="#">Цены</a>
+          <a class="footer__nav-link" href="#">Специалисты</a>
+          <a class="footer__nav-link" href="#">Частые вопросы</a>
+          <a class="footer__nav-link" href="#">Контакты</a>
+        </nav>
+
+        <div class="footer__wrapper">
+          <div class="logo logo--light">
+            <a class="logo__link" href="./">
+              <figure class="logo__figure">
+                <img class="logo__figure-image" src="./assets/img/logo.svg" alt="logo" />
+              </figure>
+              <div class="logo__text">
+                <span class="logo__text-name">Триумф</span>
+                <span class="logo__text-slogan">Cобственная победа</span>
+              </div>
+            </a>
+          </div>
+
+          <div class="footer__info">
+            <span class="footer__info-address">г. Томск, ул. Севастопольская д. 5</span>
+            <span class="footer__info-worktime">График работы: Круглосуточно</span>
+          </div>
+
+          <div class="footer__social">
+            <a class="social-link social-link--youtube" href="#"></a>
+            <a class="social-link social-link--vk" href="#"></a>
+            <a class="social-link social-link--whatsapp" href="#"></a>
+            <a class="social-link social-link--tg" href="#"></a>
+          </div>
+
+          <div class="footer__phone">
+            <a class="footer__phone-link" href="tel:88001012127"> 8 (800) 101-21-27 </a>
+          </div>
+
+          <div class="footer__buttons">
+            <button class="button button--order button--order--light">Заказать звонок</button>
+          </div>
+        </div>
+
+        <div class="footer__copyrights">
+          <span>Triumftomsk.ru - © Все права защищены. 2024</span>
+          <a href="#">Политика конфиденциальности</a>
+          <span>Разработка и продвижение: Ledoffsky Agency</span>
+        </div>
+      </div>
+    </footer>
+
    <script src="./assets/js/swiper-bundle.min.js" defer></script>
    <script src="./assets/js/main.js" type="module" defer></script>
  </body>