diff --git a/assets/css/index.css b/assets/css/index.css index 750a1c2..3c0e386 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -2236,4 +2236,96 @@ h3 { } .price__list-item--active .price__list-item-title, .price__list-item--active .price__list-item-time, .price__list-item--active .price__list-item-description { border-color: rgba(255, 255, 255, 0.2); +} + +.team { + margin: 100px 0 90px; +} +@media (max-width: 768px) { + .team { + margin: 90px 0; + } +} +.team__title { + margin: 18px 0 25px; +} +@media (max-width: 768px) { + .team__title { + margin: 18px 0 14px; + } +} +.team__description { + margin: 25px 0; + font-weight: 400; + font-size: 21px; + line-height: 139%; + text-align: center; + color: #4d4d4d; +} +@media (max-width: 768px) { + .team__description { + margin: 14px 0 37px; + font-size: 16px; + } +} +.team__slider .swiper { + overflow: visible; +} +.team__slide-figure-image { + display: block; + max-width: 100%; + height: 388px; + -o-object-fit: cover; + object-fit: cover; + border-radius: 10px 40px; +} +@media (max-width: 768px) { + .team__slide-figure-image { + border-radius: 8px 30px; + } +} +.team__slide-name { + margin: 19px 0 9px; + font-weight: 500; + font-size: 26px; + line-height: 129%; + letter-spacing: 0.01em; + color: #2d2d2d; +} +@media (max-width: 768px) { + .team__slide-name { + font-size: 19px; + } +} +.team__slide-text { + margin: 0 0 26px; + font-weight: 500; + font-size: 16px; + line-height: 129%; + color: #878787; +} +@media (max-width: 768px) { + .team__slide-text { + margin-bottom: 13px; + font-size: 14px; + } +} +.team__slide-button { + padding: 0; + font-weight: 400; + font-size: 14px; + text-decoration: underline; + -webkit-text-decoration-skip-ink: none; + text-decoration-skip-ink: none; + color: #609eff; + border: none; + background: none; + cursor: pointer; +} +.team__controls { + display: flex; + justify-content: center; + align-items: center; + gap: 24px; + margin-top: 40px; } \ No newline at end of file diff --git a/assets/img/doctor.jpg b/assets/img/doctor.jpg new file mode 100644 index 0000000..47306dc Binary files /dev/null and b/assets/img/doctor.jpg differ diff --git a/assets/js/sliders.js b/assets/js/sliders.js index d423fee..a76d548 100644 --- a/assets/js/sliders.js +++ b/assets/js/sliders.js @@ -98,7 +98,6 @@ window.addEventListener('resize', function () { swiperMode(); }); - const reviewsSwiper = new Swiper('.reviews .swiper', { slidesPerView: 1, breakpoints: { @@ -127,20 +126,47 @@ const reviewsSwiper = new Swiper('.reviews .swiper', { }, }); -const conditionsThumbsSwiper = new Swiper(".conditions__sliders-thumbs .swiper", { +const conditionsThumbsSwiper = new Swiper('.conditions__sliders-thumbs .swiper', { spaceBetween: 16, slidesPerView: 3, freeMode: true, watchSlidesProgress: true, }); -const conditionsSwiper = new Swiper(".conditions__sliders-main .swiper", { +const conditionsSwiper = new Swiper('.conditions__sliders-main .swiper', { spaceBetween: 20, navigation: { - nextEl: ".conditions__sliders .button--next", - prevEl: ".conditions__sliders .button--prev", + nextEl: '.conditions__sliders .button--next', + prevEl: '.conditions__sliders .button--prev', }, thumbs: { swiper: conditionsThumbsSwiper, }, -}); \ No newline at end of file +}); + +const teamSwiper = new Swiper('.team .swiper', { + slidesPerView: 1, + breakpoints: { + 320: { + slidesPerView: 1.1, + spaceBetween: 30, + }, + 480: { + slidesPerView: 1.3, + }, + 576: { + slidesPerView: 1.8, + }, + 768: { + slidesPerView: 2.5, + }, + 992: { + spaceBetween: 40, + slidesPerView: 3, + }, + }, + navigation: { + nextEl: '.team .button--next', + prevEl: '.team .button--prev', + }, +}); diff --git a/assets/scss/_l-team.scss b/assets/scss/_l-team.scss new file mode 100644 index 0000000..0c894f5 --- /dev/null +++ b/assets/scss/_l-team.scss @@ -0,0 +1,97 @@ +.team { + margin: 100px 0 90px; + + @include tablet { + margin: 90px 0; + } + + &__title { + margin: 18px 0 25px; + + @include tablet { + margin: 18px 0 14px; + } + } + + &__description { + margin: 25px 0; + font-weight: 400; + font-size: 21px; + line-height: 139%; + text-align: center; + color: $darkgrey; + + @include tablet { + margin: 14px 0 37px; + font-size: 16px; + } + } + + &__slider { + & .swiper { + overflow: visible; + } + } + + &__slide { + &-figure { + &-image { + display: block; + max-width: 100%; + height: 388px; + object-fit: cover; + border-radius: 10px 40px; + + @include tablet { + border-radius: 8px 30px; + } + } + } + + &-name { + margin: 19px 0 9px; + font-weight: 500; + font-size: 26px; + line-height: 129%; + letter-spacing: 0.01em; + color: $black; + + @include tablet { + font-size: 19px; + } + } + + &-text { + margin: 0 0 26px; + font-weight: 500; + font-size: 16px; + line-height: 129%; + color: $grey; + + @include tablet { + margin-bottom: 13px; + font-size: 14px; + } + } + + &-button { + padding: 0; + font-weight: 400; + font-size: 14px; + text-decoration: underline; + text-decoration-skip-ink: none; + color: #609eff; + border: none; + background: none; + cursor: pointer; + } + } + + &__controls { + display: flex; + justify-content: center; + align-items: center; + gap: 24px; + margin-top: 40px; + } +} diff --git a/assets/scss/index.scss b/assets/scss/index.scss index 74d9b15..d55789c 100644 --- a/assets/scss/index.scss +++ b/assets/scss/index.scss @@ -28,3 +28,4 @@ @import './l-how-it-work'; @import './l-socialization'; @import './l-price'; +@import './l-team'; diff --git a/index.html b/index.html index 38e20a5..9e453c7 100644 --- a/index.html +++ b/index.html @@ -1370,6 +1370,167 @@ + +
+
+
Наша команда
+ +

+ Команда опытных специалистов -
+ проводники к жизни без зависимостей +

+ +

+ В нашем центре работают специалисты в области медицины и психологии, накопившие за + долгие годы уникальные знания и навыки. У каждого более 5-ти лет опыта, они проходят + постоянное обучение и повышение квалификации +

+ +
+
+
+
+
+
+ doctor +
+
Андрей Владимирович Гынгазов
+
+ Ведущий психолог реабилитационного центра, стаж более 20 лет +
+
+ +
+
+
+ +
+
+
+ doctor +
+
Андрей Владимирович Гынгазов
+
+ Ведущий психолог реабилитационного центра, стаж более 20 лет +
+
+ +
+
+
+ +
+
+
+ doctor +
+
Андрей Владимирович Гынгазов
+
+ Ведущий психолог реабилитационного центра, стаж более 20 лет +
+
+ +
+
+
+ +
+
+
+ doctor +
+
Андрей Владимирович Гынгазов
+
+ Ведущий психолог реабилитационного центра, стаж более 20 лет +
+
+ +
+
+
+ +
+
+
+ doctor +
+
Андрей Владимирович Гынгазов
+
+ Ведущий психолог реабилитационного центра, стаж более 20 лет +
+
+ +
+
+
+ +
+
+
+ doctor +
+
Андрей Владимирович Гынгазов
+
+ Ведущий психолог реабилитационного центра, стаж более 20 лет +
+
+ +
+
+
+ +
+
+
+ doctor +
+
Андрей Владимирович Гынгазов
+
+ Ведущий психолог реабилитационного центра, стаж более 20 лет +
+
+ +
+
+
+
+
+
+ +
+ + +
+
+