Skip to content

Commit

Permalink
reviews tablet
Browse files Browse the repository at this point in the history
  • Loading branch information
@Ayronhayd
Ayronhayd committed Aug 18, 2024
1 parent 003635e commit 1e85b84
Show file tree
Hide file tree
Showing 5 changed files with 213 additions and 39 deletions.
133 changes: 110 additions & 23 deletions source/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -296,7 +296,7 @@ <h3 class="tours__card-title">Путь к подножию
</div>
</li>

<li class="tours__slide swiper-slide">tours__
<li class="tours__slide swiper-slide">
<picture>
<source type="image/webp" width="380" height="416" media="(min-width: 1440px)"
srcset="./img//tours/tours-desctop-3.webp 1x, ./img//tours/[email protected] 2x">
Expand Down Expand Up @@ -587,16 +587,15 @@ <h3>Наша цель</h3>
</section>




<section class="reviews conteiner" data-test="reviews">
<section class="reviews" data-test="reviews">
<h2 class="reviews__title title" data-shadow="Отзывы">Отзывы</h2>

<div class="reviews__swiper swiper">

<ul class="reviews__wrapper swiper-wrapper">

<li class="reviews__slide swiper-slide">
<div class="reviews__shadow">
<div class="reviews__wrap-img">
<picture>
<source type="image/webp" width="258" height="253" media="(min-width: 1440px)"
Expand All @@ -609,33 +608,123 @@ <h2 class="reviews__title title" data-shadow="Отзывы">Отзывы</h2>
srcset="./img/reviews/reviews-1-desctop.jpg 1x, ./img/reviews/[email protected] 2x">
<source type="image/jpeg" width="186" height="237" media="(min-width: 768px)"
srcset="./img/reviews/reviews-1-tablet.jpg 1x, ./img/reviews/[email protected] 2x">
<img class="reviews__img" src="./img/reviews/reviews-1-mobil.jpg" srcset="./img/reviews/[email protected]"
width="250" height="169" alt="Захватывающие вершины Кавказа.">
<img class="reviews__img" src="./img/reviews/reviews-1-mobil.jpg"
srcset="./img/reviews/[email protected]" width="250" height="169" alt="Фролов Александр.">
</picture>
</div>
<div class="reviews__content">
<p>Осенью ходили в поход на Алтай с друзьями. Впечатления потрясающие! Инструкторы, настоящие эксперты,
<p>Осенью ходили в поход на Алтай с друзьями. Впечатления потрясающие! Инструкторы, настоящие эксперты,
всему научили, все показали. Делились историями о местах, людях, культуре места.
</p>

<p>С уверенностью могу сказать, что жизнь разделилась на до этого и после. Ещё никогда не отдыхал так душой
<p>С уверенностью могу сказать, что жизнь разделилась на до этого и после. Ещё никогда не отдыхал
так душой
и телом. Всем очень рекомендую!</p>

<h3>Фролов Александр</h3>
<small>38 лет, Москва</small>
<h3>Фролов Александр</h3>
<small>38 лет, Москва</small>
</div>
</div>
</li>

<li class="reviews__slide swiper-slide">
<div class="reviews__shadow">
<div class="reviews__wrap-img">
<picture>
<source type="image/webp" width="258" height="253" media="(min-width: 1440px)"
srcset="./img/reviews/reviews-2-desctop.webp 1x, ./img/reviews/[email protected] 2x">
<source type="image/webp" width="186" height="237" media="(min-width: 768px)"
srcset="./img/reviews/reviews-2-tablet.webp 1x, ./img/reviews/[email protected] 2x">
<source type="image/webp" width="250" height="169"
srcset="./img/reviews/reviews-2-mobil.webp 1x, ./img/reviews/[email protected] 2x">
<source type="image/jpeg" width="258" height="253" media="(min-width: 1440px)"
srcset="./img/reviews/reviews-2-desctop.jpg 1x, ./img/reviews/[email protected] 2x">
<source type="image/jpeg" width="186" height="237" media="(min-width: 768px)"
srcset="./img/reviews/reviews-2-tablet.jpg 1x, ./img/reviews/[email protected] 2x">
<img class="reviews__img" src="./img/reviews/reviews-2-mobil.jpg"
srcset="./img/reviews/[email protected]" width="250" height="169" alt="Иван Соловьёв.">
</picture>
</div>
<div class="reviews__content">
<p>Хороший полноценный поход с разнообразными локациями. В начале дорога идёт по лыжне, далее прошли мимо
полигона, по болотам, у озёр и лесных ручьёв, остатков дач конца 19 века.
Было очень интересно!
</p>
<p>Инструктор Федор дружелюбный, внимательный к технике безопасности и своим туристам.
Всем советую этот тур.</p>
<h3>Иван Соловьёв</h3>
<small>25 лет, Владивосток</small>
</div>
</div>
</li>

<li class="reviews__slide swiper-slide">
<div class="reviews__shadow">
<div class="reviews__wrap-img">
<picture>
<source type="image/webp" width="258" height="253" media="(min-width: 1440px)"
srcset="./img/reviews/reviews-3-desctop.webp 1x, ./img/reviews/[email protected] 2x">
<source type="image/webp" width="186" height="237" media="(min-width: 768px)"
srcset="./img/reviews/reviews-3-tablet.webp 1x, ./img/reviews/[email protected] 2x">
<source type="image/webp" width="250" height="169"
srcset="./img/reviews/reviews-3-mobil.webp 1x, ./img/reviews/[email protected] 2x">
<source type="image/jpeg" width="258" height="253" media="(min-width: 1440px)"
srcset="./img/reviews/reviews-3-desctop.jpg 1x, ./img/reviews/[email protected] 2x">
<source type="image/jpeg" width="186" height="237" media="(min-width: 768px)"
srcset="./img/reviews/reviews-3-tablet.jpg 1x, ./img/reviews/[email protected] 2x">
<img class="reviews__img" src="./img/reviews/reviews-3-mobil.jpg"
srcset="./img/reviews/[email protected]" width="250" height="169" alt="Евгения Баженова.">
</picture>
</div>
<div class="reviews__content">
<p>Ранее не ходила на такие длинные дистанции. В первый день прошли около 30 км, физически я устала
на 18 км, поэтому не была уверена, пройду ли до конца. Но я справилась. Второй день прошёл легче,
чем ожидала, видимо организм уже привык.
</p>
<p>Спасибо ребятам, инструкторам за помощь и поддержку! Я была рада быть в такой компании.</p>
<h3>Евгения Баженова</h3>
<small>23 года, Кострома</small>
</div>
</div>
</li>

<li class="reviews__slide swiper-slide">
<div class="reviews__shadow">
<div class="reviews__wrap-img">
<picture>
<source type="image/webp" width="258" height="253" media="(min-width: 1440px)"
srcset="./img/reviews/reviews-4-desctop.webp 1x, ./img/reviews/[email protected] 2x">
<source type="image/webp" width="186" height="237" media="(min-width: 768px)"
srcset="./img/reviews/reviews-4-tablet.webp 1x, ./img/reviews/[email protected] 2x">
<source type="image/webp" width="250" height="169"
srcset="./img/reviews/reviews-4-mobil.webp 1x, ./img/reviews/[email protected] 2x">
<source type="image/jpeg" width="258" height="253" media="(min-width: 1440px)"
srcset="./img/reviews/reviews-4-desctop.jpg 1x, ./img/reviews/[email protected] 2x">
<source type="image/jpeg" width="186" height="237" media="(min-width: 768px)"
srcset="./img/reviews/reviews-4-tablet.jpg 1x, ./img/reviews/[email protected] 2x">
<img class="reviews__img" src="./img/reviews/reviews-4-mobil.jpg"
srcset="./img/reviews/[email protected]" width="250" height="169" alt="Елена Пирогова.">
</picture>
</div>
<div class="reviews__content">
<p>Это был опыт, изменивший мою жизнь! Думала, не справлюсь, но все получилось! Дух захватывает, когда
наконец‑то, преодолев все трудности и препятствия, взбираешься на вершину.
</p>
<p>У нас собралась потрясающая команда. Все друг друга поддерживали, по вечерам мы сидели вместе у костра и пели песни. Обязательно повторю такое приключение!</p>
<h3>Елена Пирогова</h3>
<small>37 лет, Тюмень</small>
</div>
</div>
</li>

</ul>

<div class="training__button-wrap">
<button class="training__button-prev swiper__button-prev swiper-button" type="button" tabindex="0">
<span class="visually-hidden">Слайдер-назад</span>
</button>
<button class="training__button-next swiper__button-next swiper-button" type="button" tabindex="0">
<span class="visually-hidden">Слайдер-вперед</span>
</button>
</div>
</div>
<div class="reviews__button-wrap">
<button class="reviews__button-prev swiper__button-prev swiper-button" type="button" tabindex="0">
<span class="visually-hidden">Слайдер-назад</span>
</button>
<button class="reviews__button-next swiper__button-next swiper-button" type="button" tabindex="0">
<span class="visually-hidden">Слайдер-вперед</span>
</button>

</div>
</section>
Expand All @@ -659,9 +748,7 @@ <h2 class="title title--white">Остались вопросы?</h2>

<footer class="footer" data-test="footer" id="footer">footer</footer>




<script src="js/vandor/swiper.js"></script>
<script type="module" src="js/main.js"></script>
</body>

Expand Down
31 changes: 27 additions & 4 deletions source/js/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,6 @@ const swiperHero = new Swiper('.hero__swiper', {
type: 'bullets'
},
});

swiperHero.update();

const swiperTours = new Swiper('.tours__swiper', {
Expand All @@ -49,13 +48,38 @@ const swiperTours = new Swiper('.tours__swiper', {
}
},
});

swiperTours.update();

const swiperTraining = new Swiper('.training__swiper', {
const swiperReviews = new Swiper('.reviews__swiper', {
modules: [Navigation],
loop: false,
slidesPerView: 'auto',
navigation: {
nextEl: '.reviews__button-next',
prevEl: '.reviews__button-prev',
},
breakpoints: {
320: {
initialSlide: 0,
},
768: {
spaceBetween: 0,

},
1440: {
spaceBetween: 100,
},
},
});
swiperReviews.update();


// в этом коде есть какай-то ошибка. если ниже подключить другой слайдер то он будет не работать
const swiperTraining = new Swiper('.training__swiper', {
modules: [Navigation],
spaceBetween: 20,
loop: false,

navigation: {
nextEl: '.training__button-next',
prevEl: '.training__button-prev',
Expand All @@ -75,5 +99,4 @@ const swiperTraining = new Swiper('.training__swiper', {
}
},
});

swiperTraining.update();
1 change: 1 addition & 0 deletions source/sass/blocks/about.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,7 @@
}

@media (min-width: $desktop-width) {
top: -39px;
font-size: 55px;
line-height: 55px;
}
Expand Down
87 changes: 75 additions & 12 deletions source/sass/blocks/reviews.scss
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,80 @@
.reviews {
padding: 20px 15px;
}
position: relative;
padding: 10px 5px;

.reviews__swiper {
box-shadow: 0 0 20px 0 rgba($reviews-shadow, 0.1);
@media (min-width: $tablet-width) {
padding: 37px 30px;
padding-right: 0;
}

@media (min-width: $desktop-width) {
max-width: 1440px;
margin: 0 auto;
padding: 197px 0 0 110px;
}
}

.reviews__wrapper {
list-style: none;
margin: 0;
padding: 0;
}

.reviews__slide.swiper-slide {
@media (min-width: $tablet-width) {
width: 595px;
}
}

.reviews__shadow {
box-shadow: 0 0 20px 0 rgba($reviews-shadow, 0.1);
padding: 20px;
padding-bottom: 16px;
margin: 10px;

@media (min-width: $tablet-width) {
display: grid;
grid-template-columns: 186px 1fr;
column-gap: 30px;
margin: 15px;
}
}

.reviews__title {
margin-bottom: 31px;
}
margin: 10px 0 21px 10px;

.reviews__wrap-img {
margin-bottom: 19px;
@media (min-width: $tablet-width) {
margin: 25px 15px 20px;
}
}

.reviews__img {
margin-bottom: 19px;
display: block;
width: 250px;
height: 169px;

@media (min-width: $tablet-width) {
width: 186px;
height: 237px;
margin-bottom: 4px;
}
}

.reviews__content {
width: 250px;

p {
font-size: 12px;
line-height: 18px;
margin: 0;
padding: 0;
margin-bottom: 10px;

@media (min-width: $tablet-width) {
margin-top: 4px;
}

@media (min-width: $desktop-width) {
font-size: 14px;
line-height: 22px;
}
}

h3 {
Expand All @@ -47,6 +86,13 @@
padding: 0;
margin-top: 16px;
margin-bottom: 2px;

@media (min-width: $tablet-width) {
font-size: 13px;
line-height: 13px;
margin-top: 26px;
margin-bottom: 0;
}
}

small {
Expand All @@ -58,3 +104,20 @@
padding: 0;
}
}

.reviews__button-wrap {
display: none;

@media (min-width: $tablet-width) {
display: flex;
gap: 4px;
position: absolute;
right: 45px;
top: 62px;
}

@media (min-width: $desktop-width) {
right: 120px;
top: 212px;
}
}
Empty file added source/sass/blocks/sssss.scss
View file
Empty file.

0 comments on commit 1e85b84

Please sign in to comment.