Good-Production
/
triumf-landing
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added reviews adaptive

Browse Source
gh-pages
Aliaksei Karzhou 1 year ago
parent ae3b7fd5c7
commit 32e6628824
8 changed files with 538 additions and 10 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 142
      assets/css/index.css
  2. 29
      assets/js/sliders.js
  3. 3
      assets/scss/_b-reset.scss
  4. 64
      assets/scss/_l-reviews.scss
  5. 90
      assets/scss/_l-step-by-step.scss
  6. 1
      assets/scss/_m-button.scss
  7. 1
      assets/scss/index.scss
  8. 218
      index.html

142
assets/css/index.css
Unescape View File

@ -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;
}

29
assets/js/sliders.js
Unescape View File

@ -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',
},
});

3
assets/scss/_b-reset.scss
Unescape View File

@ -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;
}

64
assets/scss/_l-reviews.scss
Unescape View File

@ -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;

90
assets/scss/_l-step-by-step.scss
Unescape View File

@ -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;
}
}

1
assets/scss/_m-button.scss
Unescape View File

@ -63,6 +63,7 @@
}
&--dark {
background-color: $blue;
color: $white;
border-color: rgba($color: $white, $alpha: 0.3);

1
assets/scss/index.scss
Unescape View File

@ -21,3 +21,4 @@
@import './l-advantages';
@import './l-facts';
@import './l-reviews';
@import './l-step-by-step';

218
index.html
Unescape View File

@ -313,26 +313,169 @@
<section class="reviews">
<div class="container">
<div class="tag">О нашем центре</div>
<div class="tag">Отзывы клиентов</div>
<h2 class="reviews__title">
Реальные истории реабилитантов, <span>которые сумели побороть зависимость</span>
Реальные истории реабилитантов, <br />
<span>которые сумели побороть зависимость</span>
</h2>
<div class="reviews__slider">
<div class="swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"></div>
<div class="swiper-slide">
<div class="reviews__slide">
<div class="reviews__slide-video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/XIMLoLxmTDw?si=wFzm5etjCkaNdMl5"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
<div class="reviews__slide-name">Иван, 27 лет</div>
<div class="reviews__slide-text">
По рекомендации лечащего врача и посещать участника программы согласовании
куратором близкие могут посещать участника программы...
</div>
</div>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide">
<div class="reviews__slide">
<div class="reviews__slide-video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/XIMLoLxmTDw?si=wFzm5etjCkaNdMl5"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
<div class="reviews__slide-name">Иван, 27 лет</div>
<div class="reviews__slide-text">
По рекомендации лечащего врача и посещать участника программы согласовании
куратором близкие могут посещать участника программы...
</div>
</div>
</div>
<div class="swiper-slide">
<div class="reviews__slide">
<div class="reviews__slide-video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/XIMLoLxmTDw?si=wFzm5etjCkaNdMl5"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
<div class="reviews__slide-name">Иван, 27 лет</div>
<div class="reviews__slide-text">
По рекомендации лечащего врача и посещать участника программы согласовании
куратором близкие могут посещать участника программы...
</div>
</div>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide">
<div class="reviews__slide">
<div class="reviews__slide-video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/XIMLoLxmTDw?si=wFzm5etjCkaNdMl5"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
<div class="reviews__slide-name">Иван, 27 лет</div>
<div class="reviews__slide-text">
По рекомендации лечащего врача и посещать участника программы согласовании
куратором близкие могут посещать участника программы...
</div>
</div>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide">
<div class="reviews__slide">
<div class="reviews__slide-video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/XIMLoLxmTDw?si=wFzm5etjCkaNdMl5"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
<div class="reviews__slide-name">Иван, 27 лет</div>
<div class="reviews__slide-text">
По рекомендации лечащего врача и посещать участника программы согласовании
куратором близкие могут посещать участника программы...
</div>
</div>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide">
<div class="reviews__slide">
<div class="reviews__slide-video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/XIMLoLxmTDw?si=wFzm5etjCkaNdMl5"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
<div class="reviews__slide-name">Иван, 27 лет</div>
<div class="reviews__slide-text">
По рекомендации лечащего врача и посещать участника программы согласовании
куратором близкие могут посещать участника программы...
</div>
</div>
</div>
<div class="swiper-slide"></div>
<div class="swiper-slide">
<div class="reviews__slide">
<div class="reviews__slide-video">
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/XIMLoLxmTDw?si=wFzm5etjCkaNdMl5"
title="YouTube video player"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
referrerpolicy="strict-origin-when-cross-origin"
allowfullscreen
></iframe>
</div>
<div class="reviews__slide-name">Иван, 27 лет</div>
<div class="reviews__slide-text">
По рекомендации лечащего врача и посещать участника программы согласовании
куратором близкие могут посещать участника программы...
</div>
</div>
</div>
</div>
</div>
</div>
@ -343,6 +486,65 @@
</div>
</div>
</section>
<section class="step-by-step">
<div class="container">
<div class="tag">Этапы реабилитации</div>
<h2 class="step-by-step__title">
С чего начать? <br />
<span>Шаг за шагом к трезвой жизни</span>
</h2>
<div class="step-by-step__wrapper">
<div class="step-by-step__controls">
<button class="step-by-step__controls-button active">
<span class="step-by-step__controls-button-number">01</span>
<span class="step-by-step__controls-button-text">Заявка</span>
</button>
<button class="step-by-step__controls-button">
<span class="step-by-step__controls-button-number">02</span>
<span class="step-by-step__controls-button-text">Прибытие в центр</span>
</button>
<button class="step-by-step__controls-button">
<span class="step-by-step__controls-button-number">03</span>
<span class="step-by-step__controls-button-text">Детокс</span>
</button>
<button class="step-by-step__controls-button">
<span class="step-by-step__controls-button-number">04</span>
<span class="step-by-step__controls-button-text">Подписание договора</span>
</button>
<button class="step-by-step__controls-button">
<span class="step-by-step__controls-button-number">05</span>
<span class="step-by-step__controls-button-text">Реабилитация</span>
</button>
<button class="step-by-step__controls-button">
<span class="step-by-step__controls-button-number">06</span>
<span class="step-by-step__controls-button-text">Подготовка к выпуску</span>
</button>
<button class="step-by-step__controls-button">
<span class="step-by-step__controls-button-number">07</span>
<span class="step-by-step__controls-button-text">Социальная адаптация</span>
</button>
</div>
<div class="step-by-step__content">
<div class="step-by-step__card">
<h4 class="step-by-step__card-title">
Вы оставляете заявку на нашем сайте или по телефону 8 (800) 101-21-27
</h4>
<div>
Наш специалист выслушает вас, ответит на все вопросы, расскажет о программах
реабилитации и назначит дату прибытия в центр
</div>
<div>
<button class="button button--lg button--dark">Оставить заявку</button>
</div>
</div>
</div>
</div>
</div>
</section>
</main>
<script src="./assets/js/swiper-bundle.min.js" defer></script>

Write Preview
Loading…
Cancel
Save