feat: added team
This commit is contained in:
Aliaksei Karzhou
@@ -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;
|
||||
}
|
||||
BIN
assets/img/doctor.jpg
Normal file
BIN
assets/img/doctor.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 105 KiB |
@@ -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,
|
||||
},
|
||||
});
|
||||
});
|
||||
|
||||
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',
|
||||
},
|
||||
});
|
||||
|
||||
97
assets/scss/_l-team.scss
Normal file
97
assets/scss/_l-team.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -28,3 +28,4 @@
|
||||
@import './l-how-it-work';
|
||||
@import './l-socialization';
|
||||
@import './l-price';
|
||||
@import './l-team';
|
||||
|
||||
161
index.html
161
index.html
@@ -1370,6 +1370,167 @@
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="team">
|
||||
<div class="container">
|
||||
<div class="tag">Наша команда</div>
|
||||
|
||||
<h2 class="team__title">
|
||||
Команда опытных специалистов -<br />
|
||||
<span>проводники к жизни без зависимостей</span>
|
||||
</h2>
|
||||
|
||||
<p class="team__description">
|
||||
В нашем центре работают специалисты в области медицины и психологии, накопившие за
|
||||
долгие годы уникальные знания и навыки. У каждого более 5-ти лет опыта, они проходят
|
||||
постоянное обучение и повышение квалификации
|
||||
</p>
|
||||
|
||||
<div class="team__slider">
|
||||
<div class="swiper">
|
||||
<div class="swiper-wrapper">
|
||||
<div class="swiper-slide">
|
||||
<div class="team__slide">
|
||||
<figure class="team__slide-figure">
|
||||
<img
|
||||
class="team__slide-figure-image"
|
||||
src="./assets/img/doctor.jpg"
|
||||
alt="doctor"
|
||||
/>
|
||||
</figure>
|
||||
<div class="team__slide-name">Андрей Владимирович Гынгазов</div>
|
||||
<div class="team__slide-text">
|
||||
Ведущий психолог реабилитационного центра, стаж более 20 лет
|
||||
</div>
|
||||
<div class="team__slide-buttons">
|
||||
<button class="team__slide-button">Информация о специалисте</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="team__slide">
|
||||
<figure class="team__slide-figure">
|
||||
<img
|
||||
class="team__slide-figure-image"
|
||||
src="./assets/img/doctor.jpg"
|
||||
alt="doctor"
|
||||
/>
|
||||
</figure>
|
||||
<div class="team__slide-name">Андрей Владимирович Гынгазов</div>
|
||||
<div class="team__slide-text">
|
||||
Ведущий психолог реабилитационного центра, стаж более 20 лет
|
||||
</div>
|
||||
<div class="team__slide-buttons">
|
||||
<button class="team__slide-button">Информация о специалисте</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="team__slide">
|
||||
<figure class="team__slide-figure">
|
||||
<img
|
||||
class="team__slide-figure-image"
|
||||
src="./assets/img/doctor.jpg"
|
||||
alt="doctor"
|
||||
/>
|
||||
</figure>
|
||||
<div class="team__slide-name">Андрей Владимирович Гынгазов</div>
|
||||
<div class="team__slide-text">
|
||||
Ведущий психолог реабилитационного центра, стаж более 20 лет
|
||||
</div>
|
||||
<div class="team__slide-buttons">
|
||||
<button class="team__slide-button">Информация о специалисте</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="team__slide">
|
||||
<figure class="team__slide-figure">
|
||||
<img
|
||||
class="team__slide-figure-image"
|
||||
src="./assets/img/doctor.jpg"
|
||||
alt="doctor"
|
||||
/>
|
||||
</figure>
|
||||
<div class="team__slide-name">Андрей Владимирович Гынгазов</div>
|
||||
<div class="team__slide-text">
|
||||
Ведущий психолог реабилитационного центра, стаж более 20 лет
|
||||
</div>
|
||||
<div class="team__slide-buttons">
|
||||
<button class="team__slide-button">Информация о специалисте</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="team__slide">
|
||||
<figure class="team__slide-figure">
|
||||
<img
|
||||
class="team__slide-figure-image"
|
||||
src="./assets/img/doctor.jpg"
|
||||
alt="doctor"
|
||||
/>
|
||||
</figure>
|
||||
<div class="team__slide-name">Андрей Владимирович Гынгазов</div>
|
||||
<div class="team__slide-text">
|
||||
Ведущий психолог реабилитационного центра, стаж более 20 лет
|
||||
</div>
|
||||
<div class="team__slide-buttons">
|
||||
<button class="team__slide-button">Информация о специалисте</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="team__slide">
|
||||
<figure class="team__slide-figure">
|
||||
<img
|
||||
class="team__slide-figure-image"
|
||||
src="./assets/img/doctor.jpg"
|
||||
alt="doctor"
|
||||
/>
|
||||
</figure>
|
||||
<div class="team__slide-name">Андрей Владимирович Гынгазов</div>
|
||||
<div class="team__slide-text">
|
||||
Ведущий психолог реабилитационного центра, стаж более 20 лет
|
||||
</div>
|
||||
<div class="team__slide-buttons">
|
||||
<button class="team__slide-button">Информация о специалисте</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="swiper-slide">
|
||||
<div class="team__slide">
|
||||
<figure class="team__slide-figure">
|
||||
<img
|
||||
class="team__slide-figure-image"
|
||||
src="./assets/img/doctor.jpg"
|
||||
alt="doctor"
|
||||
/>
|
||||
</figure>
|
||||
<div class="team__slide-name">Андрей Владимирович Гынгазов</div>
|
||||
<div class="team__slide-text">
|
||||
Ведущий психолог реабилитационного центра, стаж более 20 лет
|
||||
</div>
|
||||
<div class="team__slide-buttons">
|
||||
<button class="team__slide-button">Информация о специалисте</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="team__controls">
|
||||
<button class="button button--prev"></button>
|
||||
<button class="button button--next"></button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
<script src="./assets/js/swiper-bundle.min.js" defer></script>
|
||||
|
||||
Reference in New Issue
Block a user