diff --git a/assets/css/index.css b/assets/css/index.css index 4d884a1..f89d8eb 100644 --- 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; diff --git a/assets/img/icons/location-circle.svg b/assets/img/icons/location-circle.svg new file mode 100644 index 0000000..4636191 --- /dev/null +++ b/assets/img/icons/location-circle.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/scss/_l-footer.scss b/assets/scss/_l-footer.scss index ee9fb41..8f080ae 100644 --- 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; + } + } } diff --git a/assets/scss/_m-button.scss b/assets/scss/_m-button.scss index b30cae9..6c587b1 100644 --- 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, diff --git a/assets/scss/_m-logo.scss b/assets/scss/_m-logo.scss index 08f130e..a01f64f 100644 --- 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; + } } diff --git a/assets/scss/_m-social-link.scss b/assets/scss/_m-social-link.scss index daa5919..302ffa7 100644 --- 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; diff --git a/index.html b/index.html index 7cf5ff3..5a0b597 100644 --- a/index.html +++ b/index.html @@ -498,7 +498,8 @@

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

@@ -1895,6 +1896,61 @@ + +