diff --git a/assets/css/index.css b/assets/css/index.css index 5b385dd..4dd8206 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -2272,6 +2272,14 @@ h3 { .team__slider .swiper { overflow: visible; } +.team__slider .swiper-slide { + height: auto; +} +.team__slide { + display: flex; + flex-direction: column; + height: 100%; +} .team__slide-figure-image { display: block; max-width: 100%; @@ -2298,7 +2306,7 @@ h3 { font-size: 19px; } } -.team__slide-text { +.team__slide-position { margin: 0 0 26px; font-weight: 500; font-size: 16px; @@ -2306,11 +2314,33 @@ h3 { color: #878787; } @media (max-width: 768px) { - .team__slide-text { + .team__slide-position { margin-bottom: 13px; font-size: 14px; } } +.team__slide-text { + display: none; + flex-direction: column; + gap: 16px; + font-weight: 400; + font-size: 15px; + line-height: 145%; + color: #878787; +} +@media (max-width: 768px) { + .team__slide-text { + font-size: 14px; + } +} +.team__slide-text > p { + margin: 0; +} +.team__slide-buttons { + flex: 1 1 auto; + display: flex; + align-items: flex-end; +} .team__slide-button { padding: 0; font-weight: 400; @@ -2323,6 +2353,63 @@ h3 { background: none; cursor: pointer; } +.team__modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1000; + display: none; + align-items: center; + justify-content: center; + background-color: rgba(45, 45, 45, 0.25); + -webkit-backdrop-filter: blur(10px); + backdrop-filter: blur(10px); +} +.team__modal.active { + display: flex; +} +.team__modal-body { + position: relative; + max-height: calc(100vh - 100px); + max-width: calc(100% - 30px); + width: 580px; + padding: 40px 32px; + box-sizing: border-box; + border-radius: 8px 30px; + background-color: #ffffff; +} +.team__modal-body::before { + content: ""; + position: absolute; + top: -26px; + right: -26px; + z-index: 1001; + display: block; + width: 28px; + height: 28px; + background: url(../img/icons/close.svg) center no-repeat; + cursor: pointer; +} +.team__modal-content { + max-height: calc(100vh - 180px); + padding-right: 4px; + overflow: auto; + /* Handle */ +} +.team__modal-content::-webkit-scrollbar { + width: 4px; +} +.team__modal-content::-webkit-scrollbar-track { + background: rgba(45, 45, 45, 0.05); +} +.team__modal-content::-webkit-scrollbar-thumb { + background: rgba(45, 45, 45, 0.1); +} +.team__modal .team__slide-text { + display: flex; +} .team__controls { display: flex; justify-content: center; diff --git a/assets/img/icons/close.svg b/assets/img/icons/close.svg new file mode 100644 index 0000000..2d79570 --- /dev/null +++ b/assets/img/icons/close.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/assets/js/main.js b/assets/js/main.js index 1d6bad4..670b282 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -1,2 +1,3 @@ import './sliders.js'; import './step-by-step.js'; +import './team.js'; diff --git a/assets/js/team.js b/assets/js/team.js new file mode 100644 index 0000000..69e1d5f --- /dev/null +++ b/assets/js/team.js @@ -0,0 +1,31 @@ +const teamModal = document.querySelector('.team__modal'); +const teamSlides = document.querySelectorAll('.team__slide'); + +teamSlides.forEach((slide) => { + slide.addEventListener('click', (event) => { + const isMoreButton = event.target.classList.contains('team__slide-button'); + if (teamModal && isMoreButton) { + const parentSlide = event.target.closest('.team__slide'); + const slideChildElems = [...parentSlide.children] + .filter((element) => !element.classList.contains('team__slide-buttons')) + .map((element) => element.cloneNode(true)); + const teamModalBody = teamModal.querySelector('.team__modal-body'); + if (teamModalBody) { + teamModalBody.innerHTML = ''; + const teamModalContent = document.createElement('div'); + teamModalContent.classList.add('team__modal-content'); + teamModalContent.append(...slideChildElems); + teamModalBody.append(teamModalContent); + teamModal.classList.add('active'); + } + } + }); +}); + +if (teamModal) { + teamModal.addEventListener('click', (event) => { + const isModal = event.target.classList.contains('team__modal'); + const isModalBody = event.target.classList.contains('team__modal-body'); + if (isModal || isModalBody) event.currentTarget.classList.remove('active'); + }); +} diff --git a/assets/scss/_l-team.scss b/assets/scss/_l-team.scss index 66e2a65..4df55cb 100644 --- a/assets/scss/_l-team.scss +++ b/assets/scss/_l-team.scss @@ -31,10 +31,18 @@ &__slider { & .swiper { overflow: visible; + + &-slide { + height: auto; + } } } &__slide { + display: flex; + flex-direction: column; + height: 100%; + &-figure { &-image { display: block; @@ -62,7 +70,7 @@ } } - &-text { + &-position { margin: 0 0 26px; font-weight: 500; font-size: 16px; @@ -75,6 +83,30 @@ } } + &-text { + display: none; + flex-direction: column; + gap: 16px; + font-weight: 400; + font-size: 15px; + line-height: 145%; + color: $grey; + + @include tablet { + font-size: 14px; + } + + & > p { + margin: 0; + } + } + + &-buttons { + flex: 1 1 auto; + display: flex; + align-items: flex-end; + } + &-button { padding: 0; font-weight: 400; @@ -88,6 +120,71 @@ } } + &__modal { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + z-index: 1000; + display: none; + align-items: center; + justify-content: center; + background-color: rgba($color: $black, $alpha: 0.25); + backdrop-filter: blur(10px); + + &.active { + display: flex; + } + + &-body { + position: relative; + max-height: calc(100vh - 100px); + max-width: calc(100% - 30px); + width: 580px; + padding: 40px 32px; + box-sizing: border-box; + border-radius: 8px 30px; + background-color: $white; + + &::before { + content: ''; + position: absolute; + top: -26px; + right: -26px; + z-index: 1001; + display: block; + width: 28px; + height: 28px; + background: url(../img/icons/close.svg) center no-repeat; + cursor: pointer; + } + } + + &-content { + max-height: calc(100vh - 180px); + padding-right: 4px; + overflow: auto; + + &::-webkit-scrollbar { + width: 4px; + } + + &::-webkit-scrollbar-track { + background: rgba($color: $black, $alpha: 0.05); + } + + /* Handle */ + &::-webkit-scrollbar-thumb { + background: rgba($color: $black, $alpha: 0.1); + } + } + } + + &__modal &__slide-text { + display: flex; + } + &__controls { display: flex; justify-content: center; diff --git a/index.html b/index.html index 9e453c7..b3905c6 100644 --- a/index.html +++ b/index.html @@ -1398,10 +1398,38 @@ alt="doctor" /> -
Андрей Владимирович Гынгазов
+
Алексей Петрович Красноперов
+
+ Консультант по алкогольной зависимости, бывший зависимый +
- Ведущий психолог реабилитационного центра, стаж более 20 лет +

+ Алексей является консультантом в реабилитационном центре для людей, + страдающих алкогольной зависимостью. +

+ +

+ Он сам прошел через трудный путь борьбы с алкоголизмом и знает, насколько + это сложно и болезненно. Но он также знает, что выздоровление возможно, и + посвятил себя помощи другим людям, столкнувшимся с этой проблемой. +

+ +

+ После прохождения курса реабилитации, Алексей решил получить дополнительное + образование в области психологии. Это помогло ему лучше понять механизмы + развития зависимости и методы эффективной терапии. Теперь он может не только + делиться своим личным опытом, но и применять профессиональные знания и + навыки для поддержки и сопровождения наших пациентов. +

+ +

+ “Моя главная цель - помочь людям вернуть контроль над своей жизнью, + восстановить здоровье и отношения с близкими. Я знаю, что это непростой + путь, но я верю, что вместе мы сможем преодолеть любые трудности”, - делится + Алексей. +

+
@@ -1418,8 +1446,13 @@ />
Андрей Владимирович Гынгазов
+
Ведущий психолог, стаж более 20 лет
- Ведущий психолог реабилитационного центра, стаж более 20 лет + Групповая психотерапия, направленная на сплоченность группы на работу с + отрицанием и защитами. Вырабатка мотивации для трезвости индивидуально для + каждого, умение работать со своими чувствами, встречаться с ними, осознавать + свои желания. Учится ставить реалистичные цели в жизни, что необходимо для + химически зависимого человека
@@ -1436,9 +1469,35 @@ alt="doctor" /> -
Андрей Владимирович Гынгазов
+
Александр Владимирович Михайлов
+
+ Консультант по химической зависимости, бывший зависимый +
- Ведущий психолог реабилитационного центра, стаж более 20 лет +

+ Александр является консультантом по химической зависимости в + реабилитационном центре. Он прошел непростой путь борьбы с наркотической + зависимостью, но сейчас чист и полон сил помогать другим людям, оказавшимся + в такой же ситуации. “Я понимаю, насколько тяжело бороться с химической + зависимостью. Это настоящая война с самим собой, со своими страхами и + демонами. Но я могу с уверенностью сказать, что победить эту болезнь + возможно. Главное - не сдаваться и верить в себя”, - говорит Александр +

+ +

+ После реабилитации Александр прошел специальные курсы консультантов по + зависимостям, изучил методики и техники, которые помогают человеку + избавиться от пагубной привычки и начать новую жизнь. Сейчас он применяет + этот опыт в работе с нашими клиентами. +

+ +

+ “Моя задача - поддержать, вдохновить и направить человека на правильный + путь. Я знаю, как важно иметь рядом того, кто понимает тебя, кто прошел + через то же самое. Я готов выслушать, дать совет и помочь в любой ситуации. + Вместе мы обязательно справимся с этой проблемой. Я верю в каждого, кто + решил бороться. Добро пожаловать в новую жизнь!” +

@@ -1455,9 +1514,32 @@ alt="doctor" /> -
Андрей Владимирович Гынгазов
+
Сергей Валерьевич Михайлов
+
+ Консультант по химической зависимости, бывший зависимый +
- Ведущий психолог реабилитационного центра, стаж более 20 лет +

+ Михайлов Сергей Валерьевич ему 37 лет. Несколько лет назад он боролся с + тяжелой наркотической зависимостью, которая разрушала его жизнь. Но + благодаря прохождению реабилитационной программы, он смог победить свою + болезнь и вернуться к нормальной жизни. +

+

+ Теперь Сергей работает консультантом в том же реабилитационном центре, где + когда-то проходил лечение. Он делится своим опытом и помогает другим людям, + страдающим от алкогольной и наркотической зависимости, найти путь к + выздоровлению. +

+

+ Сергей понимает, через что проходят ребята, потому что сам прошел этот + непростой путь. Он умеет находить подход к каждому человеку, вселяет в них + надежду и веру в свои силы. Сергей знает, что жить с зависимостью можно, и + своим примером доказывает это. Его искренность, сочувствие и профессионализм + вдохновляют клиентов двигаться вперед и не сдаваться. Сергей - живое + доказательство того, что выздоровление возможно, и это придает его работе + особый смысл. +

@@ -1474,10 +1556,38 @@ alt="doctor" /> -
Андрей Владимирович Гынгазов
+
Алексей Петрович Красноперов
+
+ Консультант по алкогольной зависимости, бывший зависимый +
- Ведущий психолог реабилитационного центра, стаж более 20 лет +

+ Алексей является консультантом в реабилитационном центре для людей, + страдающих алкогольной зависимостью. +

+ +

+ Он сам прошел через трудный путь борьбы с алкоголизмом и знает, насколько + это сложно и болезненно. Но он также знает, что выздоровление возможно, и + посвятил себя помощи другим людям, столкнувшимся с этой проблемой. +

+ +

+ После прохождения курса реабилитации, Алексей решил получить дополнительное + образование в области психологии. Это помогло ему лучше понять механизмы + развития зависимости и методы эффективной терапии. Теперь он может не только + делиться своим личным опытом, но и применять профессиональные знания и + навыки для поддержки и сопровождения наших пациентов. +

+ +

+ “Моя главная цель - помочь людям вернуть контроль над своей жизнью, + восстановить здоровье и отношения с близкими. Я знаю, что это непростой + путь, но я верю, что вместе мы сможем преодолеть любые трудности”, - делится + Алексей. +

+
@@ -1494,8 +1604,13 @@ />
Андрей Владимирович Гынгазов
+
Ведущий психолог, стаж более 20 лет
- Ведущий психолог реабилитационного центра, стаж более 20 лет + Групповая психотерапия, направленная на сплоченность группы на работу с + отрицанием и защитами. Вырабатка мотивации для трезвости индивидуально для + каждого, умение работать со своими чувствами, встречаться с ними, осознавать + свои желания. Учится ставить реалистичные цели в жизни, что необходимо для + химически зависимого человека
@@ -1512,9 +1627,77 @@ alt="doctor" /> -
Андрей Владимирович Гынгазов
+
Александр Владимирович Михайлов
+
+ Консультант по химической зависимости, бывший зависимый +
+
+

+ Александр является консультантом по химической зависимости в + реабилитационном центре. Он прошел непростой путь борьбы с наркотической + зависимостью, но сейчас чист и полон сил помогать другим людям, оказавшимся + в такой же ситуации. “Я понимаю, насколько тяжело бороться с химической + зависимостью. Это настоящая война с самим собой, со своими страхами и + демонами. Но я могу с уверенностью сказать, что победить эту болезнь + возможно. Главное - не сдаваться и верить в себя”, - говорит Александр +

+ +

+ После реабилитации Александр прошел специальные курсы консультантов по + зависимостям, изучил методики и техники, которые помогают человеку + избавиться от пагубной привычки и начать новую жизнь. Сейчас он применяет + этот опыт в работе с нашими клиентами. +

+ +

+ “Моя задача - поддержать, вдохновить и направить человека на правильный + путь. Я знаю, как важно иметь рядом того, кто понимает тебя, кто прошел + через то же самое. Я готов выслушать, дать совет и помочь в любой ситуации. + Вместе мы обязательно справимся с этой проблемой. Я верю в каждого, кто + решил бороться. Добро пожаловать в новую жизнь!” +

+
+
+ +
+
+
+ +
+
+
+ doctor +
+
Сергей Валерьевич Михайлов
+
+ Консультант по химической зависимости, бывший зависимый +
- Ведущий психолог реабилитационного центра, стаж более 20 лет +

+ Михайлов Сергей Валерьевич ему 37 лет. Несколько лет назад он боролся с + тяжелой наркотической зависимостью, которая разрушала его жизнь. Но + благодаря прохождению реабилитационной программы, он смог победить свою + болезнь и вернуться к нормальной жизни. +

+

+ Теперь Сергей работает консультантом в том же реабилитационном центре, где + когда-то проходил лечение. Он делится своим опытом и помогает другим людям, + страдающим от алкогольной и наркотической зависимости, найти путь к + выздоровлению. +

+

+ Сергей понимает, через что проходят ребята, потому что сам прошел этот + непростой путь. Он умеет находить подход к каждому человеку, вселяет в них + надежду и веру в свои силы. Сергей знает, что жить с зависимостью можно, и + своим примером доказывает это. Его искренность, сочувствие и профессионализм + вдохновляют клиентов двигаться вперед и не сдаваться. Сергей - живое + доказательство того, что выздоровление возможно, и это придает его работе + особый смысл. +

@@ -1529,6 +1712,10 @@
+ +
+
+