feat: added reviews adaptive
This commit is contained in:
Aliaksei Karzhou
@@ -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;
|
||||
}
|
||||
@@ -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',
|
||||
},
|
||||
});
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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
Normal file
90
assets/scss/_l-step-by-step.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
@@ -63,6 +63,7 @@
|
||||
}
|
||||
|
||||
&--dark {
|
||||
background-color: $blue;
|
||||
color: $white;
|
||||
border-color: rgba($color: $white, $alpha: 0.3);
|
||||
|
||||
|
||||
@@ -21,3 +21,4 @@
|
||||
@import './l-advantages';
|
||||
@import './l-facts';
|
||||
@import './l-reviews';
|
||||
@import './l-step-by-step';
|
||||
|
||||
Reference in New Issue
Block a user