diff --git a/assets/css/index.css b/assets/css/index.css index ee0e5d2..7b1787a 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -85,7 +85,7 @@ img { h2 { margin: 0; - font-weight: 700; + font-weight: 500; font-size: 55px; line-height: 122%; letter-spacing: 0.01em; @@ -93,6 +93,7 @@ h2 { text-align: center; } h2 > span { + font-weight: 700; color: #609eff; } @media (max-width: 992px) { @@ -307,6 +308,7 @@ h3 { color: #3081ff; } .button--dark { + background-color: #609eff; color: #ffffff; border-color: rgba(255, 255, 255, 0.3); } @@ -940,6 +942,7 @@ h3 { .reviews { margin: 100px 0 98px; + overflow: hidden; } @media (max-width: 768px) { .reviews { @@ -954,10 +957,147 @@ h3 { margin: 21px 0 23px; } } +.reviews__slider .swiper { + overflow: visible; +} +.reviews__slide { + padding: 34px; + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 10px 40px; + background-color: #ffffff; +} +@media (max-width: 992px) { + .reviews__slide { + padding: 19px; + } +} +.reviews__slide-video { + height: 205px; + margin: 0 0 15px; + overflow: hidden; + border-radius: 10px 40px; + background-color: #609eff; +} +@media (max-width: 992px) { + .reviews__slide-video { + height: 160px; + } +} +@media (max-width: 768px) { + .reviews__slide-video { + height: 136px; + } +} +.reviews__slide-video > * { + display: block; + width: 100%; + height: 100%; +} +.reviews__slide-name { + margin: 0 0 8px; + font-weight: 600; + font-size: 26px; + line-height: 146%; + color: #4d4d4d; +} +@media (max-width: 768px) { + .reviews__slide-name { + font-size: 20px; + } +} +.reviews__slide-text { + font-style: italic; + font-weight: 400; + font-size: 17px; + line-height: 146%; + color: #878787; +} +@media (max-width: 768px) { + .reviews__slide-text { + font-size: 14px; + } +} .reviews__slider-controls { display: flex; justify-content: center; align-items: center; gap: 24px; margin: 61px 0 0; +} + +.step-by-step { + display: none; + margin: 98px 0 110px; +} +@media (max-width: 768px) { + .step-by-step { + margin: 91px 0 60px; + } +} +.step-by-step__title { + margin: 18px 0 22px; +} +@media (max-width: 768px) { + .step-by-step__title { + margin: 21px 0; + } +} +.step-by-step__wrapper { + display: flex; + gap: 84px; +} +.step-by-step__controls { + display: flex; + flex-direction: column; + gap: 36px; + flex: 0 0 410px; +} +.step-by-step__controls-button { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 20px; + padding: 11px 29px 15px; + border: 1px solid rgba(98, 98, 98, 0.25); + border-radius: 8px 25px; + transition: all ease-in-out 0.1s; + cursor: pointer; +} +.step-by-step__controls-button:hover, .step-by-step__controls-button.active:hover { + background-color: #609eff; + border-color: #609eff; +} +.step-by-step__controls-button:active, .step-by-step__controls-button.active:active { + background-color: #3081ff; + border-color: #3081ff; +} +.step-by-step__controls-button.active { + border-color: white; + background-color: #ffffff; +} +.step-by-step__controls-button-number { + font-weight: 500; + font-size: 28px; + line-height: 146%; + color: #878787; +} +.step-by-step__controls-button-text { + font-weight: 400; + font-size: 24px; + line-height: 146%; + color: #4d4d4d; +} +.step-by-step__controls-button.active .step-by-step__controls-button-number { + font-weight: 700; + color: #2d2d2d; +} +.step-by-step__controls-button.active .step-by-step__controls-button-text { + font-weight: 500; + color: #4d4d4d; +} +.step-by-step__controls-button:hover .step-by-step__controls-button-number, .step-by-step__controls-button:hover .step-by-step__controls-button-text { + color: #ffffff; +} +.step-by-step__content { + flex: 1 1 auto; } \ No newline at end of file diff --git a/assets/js/sliders.js b/assets/js/sliders.js index 6e5d6ce..b24688f 100644 --- a/assets/js/sliders.js +++ b/assets/js/sliders.js @@ -45,3 +45,32 @@ window.addEventListener('load', function () { window.addEventListener('resize', function () { swiperMode(); }); + + +const reviewsSwiper = new Swiper('.reviews .swiper', { + slidesPerView: 1, + breakpoints: { + 320: { + slidesPerView: 1.1, + spaceBetween: 30, + }, + 480: { + slidesPerView: 1.3, + }, + 576: { + slidesPerView: 1.5, + }, + 768: { + spaceBetween: 30, + slidesPerView: 2, + }, + 992: { + spaceBetween: 35, + slidesPerView: 2.5, + }, + }, + navigation: { + nextEl: '.reviews .button--next', + prevEl: '.reviews .button--prev', + }, +}); \ No newline at end of file diff --git a/assets/scss/_b-reset.scss b/assets/scss/_b-reset.scss index 5afdb91..e56243c 100644 --- a/assets/scss/_b-reset.scss +++ b/assets/scss/_b-reset.scss @@ -111,7 +111,7 @@ img { h2 { margin: 0; - font-weight: 700; + font-weight: 500; font-size: 55px; line-height: 122%; letter-spacing: 0.01em; @@ -119,6 +119,7 @@ h2 { text-align: center; & > span { + font-weight: 700; color: $blue; } diff --git a/assets/scss/_l-reviews.scss b/assets/scss/_l-reviews.scss index f8e56a1..96ab93e 100644 --- a/assets/scss/_l-reviews.scss +++ b/assets/scss/_l-reviews.scss @@ -1,5 +1,6 @@ .reviews { margin: 100px 0 98px; + overflow: hidden; @include tablet { margin: 77px 0 92px; @@ -13,6 +14,69 @@ } } + &__slider { + & .swiper { + overflow: visible; + } + } + + &__slide { + padding: 34px; + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 10px 40px; + background-color: $white; + + @include laptop { + padding: 19px; + } + + &-video { + height: 205px; + margin: 0 0 15px; + overflow: hidden; + border-radius: 10px 40px; + background-color: $blue; + + @include laptop { + height: 160px; + } + + @include tablet { + height: 136px; + } + + & > * { + display: block; + width: 100%; + height: 100%; + } + } + + &-name { + margin: 0 0 8px; + font-weight: 600; + font-size: 26px; + line-height: 146%; + color: $darkgrey; + + @include tablet { + font-size: 20px; + } + } + + &-text { + font-style: italic; + font-weight: 400; + font-size: 17px; + line-height: 146%; + color: $grey; + + @include tablet { + font-size: 14px; + } + } + } + &__slider-controls { display: flex; justify-content: center; diff --git a/assets/scss/_l-step-by-step.scss b/assets/scss/_l-step-by-step.scss new file mode 100644 index 0000000..20405e2 --- /dev/null +++ b/assets/scss/_l-step-by-step.scss @@ -0,0 +1,90 @@ +.step-by-step { + display: none; + margin: 98px 0 110px; + + @include tablet { + margin: 91px 0 60px; + } + + &__title { + margin: 18px 0 22px; + + @include tablet { + margin: 21px 0; + } + } + + &__wrapper { + display: flex; + gap: 84px; + } + + &__controls { + display: flex; + flex-direction: column; + gap: 36px; + flex: 0 0 410px; + + &-button { + display: flex; + align-items: center; + justify-content: flex-start; + gap: 20px; + padding: 11px 29px 15px; + border: 1px solid rgba(98, 98, 98, 0.25); + border-radius: 8px 25px; + transition: all ease-in-out 0.1s; + cursor: pointer; + + &:hover, + &.active:hover { + background-color: $blue; + border-color: $blue; + } + + &:active, + &.active:active { + background-color: $darkblue; + border-color: $darkblue; + } + + &.active { + border-color: rgba($color: $white, $alpha: 1); + background-color: $white; + } + + &-number { + font-weight: 500; + font-size: 28px; + line-height: 146%; + color: $grey; + } + + &-text { + font-weight: 400; + font-size: 24px; + line-height: 146%; + color: $darkgrey; + } + + &.active &-number { + font-weight: 700; + color: $black; + } + + &.active &-text { + font-weight: 500; + color: $darkgrey; + } + + &:hover &-number, + &:hover &-text { + color: $white; + } + } + } + + &__content { + flex: 1 1 auto; + } +} diff --git a/assets/scss/_m-button.scss b/assets/scss/_m-button.scss index d58be94..18e0489 100644 --- a/assets/scss/_m-button.scss +++ b/assets/scss/_m-button.scss @@ -63,6 +63,7 @@ } &--dark { + background-color: $blue; color: $white; border-color: rgba($color: $white, $alpha: 0.3); diff --git a/assets/scss/index.scss b/assets/scss/index.scss index 03a522d..c024470 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -21,3 +21,4 @@ @import './l-advantages'; @import './l-facts'; @import './l-reviews'; +@import './l-step-by-step'; diff --git a/index.html b/index.html index 3356a63..7eb97a0 100644 --- a/index.html +++ b/index.html @@ -313,26 +313,169 @@
-
О нашем центре
+
Отзывы клиентов

- Реальные истории реабилитантов, которые сумели побороть зависимость + Реальные истории реабилитантов,
+ которые сумели побороть зависимость

-
+
+
+
+ +
+
Иван, 27 лет
+
+ По рекомендации лечащего врача и посещать участника программы согласовании + куратором близкие могут посещать участника программы... +
+
+
-
+
+
+
+ +
+
Иван, 27 лет
+
+ По рекомендации лечащего врача и посещать участника программы согласовании + куратором близкие могут посещать участника программы... +
+
+
+ +
+
+
+ +
+
Иван, 27 лет
+
+ По рекомендации лечащего врача и посещать участника программы согласовании + куратором близкие могут посещать участника программы... +
+
+
-
+
+
+
+ +
+
Иван, 27 лет
+
+ По рекомендации лечащего врача и посещать участника программы согласовании + куратором близкие могут посещать участника программы... +
+
+
-
+
+
+
+ +
+
Иван, 27 лет
+
+ По рекомендации лечащего врача и посещать участника программы согласовании + куратором близкие могут посещать участника программы... +
+
+
-
+
+
+
+ +
+
Иван, 27 лет
+
+ По рекомендации лечащего врача и посещать участника программы согласовании + куратором близкие могут посещать участника программы... +
+
+
-
+
+
+
+ +
+
Иван, 27 лет
+
+ По рекомендации лечащего врача и посещать участника программы согласовании + куратором близкие могут посещать участника программы... +
+
+
@@ -343,6 +486,65 @@
+ +
+
+
Этапы реабилитации
+ +

+ С чего начать?
+ Шаг за шагом к трезвой жизни +

+ +
+
+ + + + + + + +
+ +
+
+

+ Вы оставляете заявку на нашем сайте или по телефону 8 (800) 101-21-27 +

+
+ Наш специалист выслушает вас, ответит на все вопросы, расскажет о программах + реабилитации и назначит дату прибытия в центр +
+
+ +
+
+
+
+
+