Good-Production
/
triumf-landing
6
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: added team

Browse Source
gh-pages
Aliaksei Karzhou 1 year ago
parent 506831a2a0
commit f147a2b0d9
6 changed files with 383 additions and 6 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 92
      assets/css/index.css
  2. BIN
      assets/img/doctor.jpg
  3. 38
      assets/js/sliders.js
  4. 97
      assets/scss/_l-team.scss
  5. 1
      assets/scss/index.scss
  6. 161
      index.html

92
assets/css/index.css
Unescape View File

@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 105 KiB

38
assets/js/sliders.js
Unescape View File

@ -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
Unescape View 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;
}
}

1
assets/scss/index.scss
Unescape View File

@ -28,3 +28,4 @@
@import './l-how-it-work';
@import './l-socialization';
@import './l-price';
@import './l-team';

161
index.html
Unescape View File

@ -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>

Write Preview
Loading…
Cancel
Save