diff --git a/assets/css/index.css b/assets/css/index.css index 336913f..1559fc0 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1562,4 +1562,220 @@ h3 { .why-program__slider-controls { display: flex; } +} + +.conditions { + margin: 114px 0; +} +@media (max-width: 768px) { + .conditions { + margin: 89px 0; + } +} +.conditions__title { + margin: 21px auto 10px; +} +.conditions__location { + display: flex; + align-items: stretch; + gap: 48px; + margin: 0 0 48px; +} +@media (max-width: 1240px) { + .conditions__location { + gap: 24px; + } +} +@media (max-width: 992px) { + .conditions__location { + flex-direction: column; + margin: 0 0 30px; + } +} +.conditions__location-text, .conditions__location-address { + border-radius: 40px 12px; +} +@media (max-width: 992px) { + .conditions__location-text, .conditions__location-address { + border-radius: 30px 10px; + } +} +.conditions__location-text { + display: flex; + align-items: center; + justify-content: center; + padding: 16px 36px; + font-weight: 500; + font-size: 23px; + line-height: 141%; + text-align: center; + color: #4d4d4d; + background-color: #ffffff; +} +@media (max-width: 768px) { + .conditions__location-text { + padding: 14px 18px; + font-size: 16px; + } +} +.conditions__location-address { + flex: 0 0 auto; + display: flex; + align-items: center; + gap: 20px; + padding: 30px 32px 30px 45px; + font-weight: 700; + font-size: 35px; + line-height: 146%; + color: #ffffff; + background-color: #609eff; +} +@media (max-width: 992px) { + .conditions__location-address { + justify-content: center; + } +} +@media (max-width: 768px) { + .conditions__location-address { + padding: 18px 18px 18px 24px; + font-size: 21px; + } +} +.conditions__location-address::before { + content: ""; + flex: 0 0 auto; + height: 28px; + width: 22px; + background: url(../img/icons/location.svg) center no-repeat; +} +.conditions__sliders { + position: relative; + z-index: 10; + margin: 48px 0; +} +@media (max-width: 768px) { + .conditions__sliders { + margin: 48px -15px 108px; + } +} +.conditions__sliders-main .swiper-slide img { + display: block; + height: 566px; + width: 100%; + -o-object-fit: cover; + object-fit: cover; + border-radius: 66px 22px; +} +@media (max-width: 768px) { + .conditions__sliders-main .swiper-slide img { + height: 380px; + border-radius: 40px 16px; + } +} +.conditions__sliders-thumbs { + position: absolute; + left: 50%; + bottom: 32px; + width: 440px; + z-index: 100; + transform: translateX(-50%); +} +@media (max-width: 768px) { + .conditions__sliders-thumbs { + bottom: -54px; + max-width: calc(100% - 30px); + } +} +.conditions__sliders-thumbs .swiper-slide img { + display: block; + height: 84px; + width: 100%; + box-sizing: border-box; + -o-object-fit: cover; + object-fit: cover; + border: 2px solid #ffffff; + border-radius: 5px 12px; +} +@media (max-width: 768px) { + .conditions__sliders-thumbs .swiper-slide img { + height: 64px; + } +} +.conditions__sliders-thumbs .swiper-slide-thumb-active img { + border-color: #609eff; +} +.conditions__sliders-controls { + position: absolute; + top: 50%; + left: 40px; + right: 40px; + z-index: 101; + display: flex; + justify-content: space-between; + align-items: center; + transform: translateY(-50%); +} +@media (max-width: 768px) { + .conditions__sliders-controls { + left: 15px; + right: 15px; + } +} +.conditions__advantages { + display: flex; + flex-wrap: wrap; + gap: 44px 60px; +} +@media (max-width: 992px) { + .conditions__advantages { + gap: 44px; + } +} +@media (max-width: 576px) { + .conditions__advantages { + gap: 36px; + } +} +.conditions__advantage { + flex: calc(33.3333333333% - 40px); + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; +} +@media (max-width: 992px) { + .conditions__advantage { + flex: calc(50% - 22px); + } +} +@media (max-width: 576px) { + .conditions__advantage { + flex: 1 1 100%; + } +} +.conditions__advantage-figure { + display: flex; + align-items: center; + justify-content: center; + height: 64px; + width: 64px; + border-radius: 64px; + background-color: #609eff; +} +.conditions__advantage-figure-image { + display: block; + max-width: 100%; + height: auto; +} +.conditions__advantage-text { + font-weight: 500; + font-size: 21px; + line-height: 146%; + text-align: center; + color: #878787; +} +@media (max-width: 768px) { + .conditions__advantage-text { + font-size: 19px; + } } \ No newline at end of file diff --git a/assets/img/conditions.jpg b/assets/img/conditions.jpg new file mode 100644 index 0000000..71cfe94 Binary files /dev/null and b/assets/img/conditions.jpg differ diff --git a/assets/img/icons/cottage.svg b/assets/img/icons/cottage.svg new file mode 100644 index 0000000..9fe8d86 --- /dev/null +++ b/assets/img/icons/cottage.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/assets/img/icons/eye.svg b/assets/img/icons/eye.svg new file mode 100644 index 0000000..4a8e669 --- /dev/null +++ b/assets/img/icons/eye.svg @@ -0,0 +1,4 @@ + + + + diff --git a/assets/img/icons/location.svg b/assets/img/icons/location.svg new file mode 100644 index 0000000..4360d56 --- /dev/null +++ b/assets/img/icons/location.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/img/icons/lodging.svg b/assets/img/icons/lodging.svg new file mode 100644 index 0000000..ad837f4 --- /dev/null +++ b/assets/img/icons/lodging.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/img/icons/nutrition.svg b/assets/img/icons/nutrition.svg new file mode 100644 index 0000000..dc6559c --- /dev/null +++ b/assets/img/icons/nutrition.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/assets/img/icons/table-tennis.svg b/assets/img/icons/table-tennis.svg new file mode 100644 index 0000000..4be5266 --- /dev/null +++ b/assets/img/icons/table-tennis.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/assets/js/sliders.js b/assets/js/sliders.js index 69b1cc4..bd09f2d 100644 --- a/assets/js/sliders.js +++ b/assets/js/sliders.js @@ -99,4 +99,22 @@ const reviewsSwiper = new Swiper('.reviews .swiper', { nextEl: '.reviews .button--next', prevEl: '.reviews .button--prev', }, +}); + +const conditionsThumbsSwiper = new Swiper(".conditions__sliders-thumbs .swiper", { + spaceBetween: 16, + slidesPerView: 3, + freeMode: true, + watchSlidesProgress: true, +}); + +const conditionsSwiper = new Swiper(".conditions__sliders-main .swiper", { + spaceBetween: 20, + navigation: { + nextEl: ".conditions__sliders .button--next", + prevEl: ".conditions__sliders .button--prev", + }, + thumbs: { + swiper: conditionsThumbsSwiper, + }, }); \ No newline at end of file diff --git a/assets/scss/_l-conditions.scss b/assets/scss/_l-conditions.scss new file mode 100644 index 0000000..8e33670 --- /dev/null +++ b/assets/scss/_l-conditions.scss @@ -0,0 +1,224 @@ +.conditions { + margin: 114px 0; + + @include tablet { + margin: 89px 0; + } + + &__title { + margin: 21px auto 10px; + } + + &__location { + display: flex; + align-items: stretch; + gap: 48px; + margin: 0 0 48px; + + @include desktop { + gap: 24px; + } + + @include laptop { + flex-direction: column; + margin: 0 0 30px; + } + + &-text, + &-address { + border-radius: 40px 12px; + + @include laptop { + border-radius: 30px 10px; + } + } + + &-text { + display: flex; + align-items: center; + justify-content: center; + padding: 16px 36px; + font-weight: 500; + font-size: 23px; + line-height: 141%; + text-align: center; + color: $darkgrey; + background-color: $white; + + @include tablet { + padding: 14px 18px; + font-size: 16px; + } + } + + &-address { + flex: 0 0 auto; + display: flex; + align-items: center; + gap: 20px; + padding: 30px 32px 30px 45px; + font-weight: 700; + font-size: 35px; + line-height: 146%; + color: $white; + background-color: $blue; + + @include laptop { + justify-content: center; + } + + @include tablet { + padding: 18px 18px 18px 24px; + font-size: 21px; + } + + &::before { + content: ''; + flex: 0 0 auto; + height: 28px; + width: 22px; + background: url(../img/icons/location.svg) center no-repeat; + } + } + } + + &__sliders { + position: relative; + z-index: 10; + margin: 48px 0; + + @include tablet { + margin: 48px -15px 108px; + } + + &-main { + & .swiper { + &-slide { + & img { + display: block; + height: 566px; + width: 100%; + object-fit: cover; + border-radius: 66px 22px; + + @include tablet { + height: 380px; + border-radius: 40px 16px; + } + } + } + } + } + + &-thumbs { + position: absolute; + left: 50%; + bottom: 32px; + width: 440px; + z-index: 100; + transform: translateX(-50%); + + @include tablet { + bottom: -54px; + max-width: calc(100% - 30px); + } + + & .swiper { + &-slide { + & img { + display: block; + height: 84px; + width: 100%; + box-sizing: border-box; + object-fit: cover; + border: 2px solid $white; + border-radius: 5px 12px; + + @include tablet { + height: 64px; + } + } + + &-thumb-active img { + border-color: $blue; + } + } + } + } + + &-controls { + position: absolute; + top: 50%; + left: 40px; + right: 40px; + z-index: 101; + display: flex; + justify-content: space-between; + align-items: center; + transform: translateY(-50%); + + @include tablet { + left: 15px; + right: 15px; + } + } + } + + &__advantages { + display: flex; + flex-wrap: wrap; + gap: 44px 60px; + + @include laptop { + gap: 44px; + } + + @include mobile { + gap: 36px; + } + } + + &__advantage { + flex: calc(100% / 3 - 60px / 3 * 2); + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + + @include laptop { + flex: calc(100% / 2 - 44px / 2); + } + + @include mobile { + flex: 1 1 100%; + } + + &-figure { + display: flex; + align-items: center; + justify-content: center; + height: 64px; + width: 64px; + border-radius: 64px; + background-color: $blue; + + &-image { + display: block; + max-width: 100%; + height: auto; + } + } + + &-text { + font-weight: 500; + font-size: 21px; + line-height: 146%; + text-align: center; + color: $grey; + + @include tablet { + font-size: 19px; + } + } + } +} diff --git a/assets/scss/index.scss b/assets/scss/index.scss index 397852f..6b051f1 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -24,3 +24,4 @@ @import './l-step-by-step'; @import './l-twelve-steps'; @import './l-why-program'; +@import './l-conditions'; diff --git a/index.html b/index.html index 0758d69..6bf7b92 100644 --- a/index.html +++ b/index.html @@ -942,6 +942,141 @@ + +
+
+
Условия проживания
+ +

+ Комофортные условия проживания и атмосфера, + способствующая созданию нового образа жизни +

+ +
+
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+
+
+
+ +
+
+ +
+
+ +
+
+
+
+ +
+ + +
+
+ +
+
+ Каждый желающий может приехать и посмотреть условия проживания с разрешения персонала +
+
г. Томск, пр. Ленина, 186
+
+ +
+
+
+ lodging +
+
+ По 4 человека в комнате с собственным душем и туалетом +
+
+ +
+
+ cottage +
+
+ Нет высоких заборов и решеток, не создается впечатление тюрьмы +
+
+ +
+
+ table-tennis +
+
+ Комната отдыха с различными развлечениями +
+
+ +
+
+ weightlifting +
+
Собственный спортивный зал и площадка
+
+ +
+
+ eye +
+
+ Каждый день под наблюдением опытных специалистов и кураторов +
+
+ +
+
+ nutrition +
+
+ Сбалансирование 3х-разовое здоровое питание +
+
+
+
+