From 1e85b84207a4a192b2d4109bba8b31e133e3e493 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=D0=98=D0=B3=D0=BE=D1=80=D1=8C=20=D0=A9=D0=B5=D1=80=D0=B1?= =?UTF-8?q?=D0=B0=D0=BA=D0=BE=D0=B2?= Date: Sun, 18 Aug 2024 17:23:24 +0300 Subject: [PATCH] reviews tablet --- source/index.html | 133 ++++++++++++++++++++++++++------ source/js/main.js | 31 +++++++- source/sass/blocks/about.scss | 1 + source/sass/blocks/reviews.scss | 87 ++++++++++++++++++--- source/sass/blocks/sssss.scss | 0 5 files changed, 213 insertions(+), 39 deletions(-) create mode 100644 source/sass/blocks/sssss.scss diff --git a/source/index.html b/source/index.html index 8779de233..3f42df268 100644 --- a/source/index.html +++ b/source/index.html @@ -296,7 +296,7 @@

Путь к подножию -
  • tours__ +
  • @@ -587,9 +587,7 @@

    Наша цель

    - - -
    +

    Отзывы

    @@ -597,6 +595,7 @@

    Отзывы

    • +
      Отзывы

    • srcset="./img/reviews/reviews-1-desctop.jpg 1x, ./img/reviews/reviews-1-desctop@2x.jpg 2x"> - Захватывающие вершины Кавказа. + Фролов Александр.
    -

    Осенью ходили в поход на Алтай с друзьями. Впечатления потрясающие! Инструкторы, настоящие эксперты, +

    Осенью ходили в поход на Алтай с друзьями. Впечатления потрясающие! Инструкторы, настоящие эксперты, всему научили, все показали. Делились историями о местах, людях, культуре места.

    - -

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

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

    - -

    Фролов Александр

    - 38 лет, Москва +

    Фролов Александр

    + 38 лет, Москва +
    + + + +
  • +
    +
    + + + + + + + Иван Соловьёв. + +
    +
    +

    Хороший полноценный поход с разнообразными локациями. В начале дорога идёт по лыжне, далее прошли мимо + полигона, по болотам, у озёр и лесных ручьёв, остатков дач конца 19 века. + Было очень интересно! +

    +

    Инструктор Федор дружелюбный, внимательный к технике безопасности и своим туристам. + Всем советую этот тур.

    +

    Иван Соловьёв

    + 25 лет, Владивосток +
    +
    +
    • + +
  • +
    +
    + + + + + + + Евгения Баженова. + +
    +
    +

    Ранее не ходила на такие длинные дистанции. В первый день прошли около 30 км, физически я устала + на 18 км, поэтому не была уверена, пройду ли до конца. Но я справилась. Второй день прошёл легче, + чем ожидала, видимо организм уже привык. +

    +

    Спасибо ребятам, инструкторам за помощь и поддержку! Я была рада быть в такой компании.

    +

    Евгения Баженова

    + 23 года, Кострома
    +
    +
    • + +
  • +
    +
    + + + + + + + Елена Пирогова. + +
    +
    +

    Это был опыт, изменивший мою жизнь! Думала, не справлюсь, но все получилось! Дух захватывает, когда + наконец‑то, преодолев все трудности и препятствия, взбираешься на вершину. +

    +

    У нас собралась потрясающая команда. Все друг друга поддерживали, по вечерам мы сидели вместе у костра и пели песни. Обязательно повторю такое приключение!

    +

    Елена Пирогова

    + 37 лет, Тюмень +
    +
    • -
    - - -
    + +
    + +
    @@ -659,9 +748,7 @@

    Остались вопросы?

    - - - + diff --git a/source/js/main.js b/source/js/main.js index e9e896c6c..16bc3d85e 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -24,7 +24,6 @@ const swiperHero = new Swiper('.hero__swiper', { type: 'bullets' }, }); - swiperHero.update(); const swiperTours = new Swiper('.tours__swiper', { @@ -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', @@ -75,5 +99,4 @@ const swiperTraining = new Swiper('.training__swiper', { } }, }); - swiperTraining.update(); diff --git a/source/sass/blocks/about.scss b/source/sass/blocks/about.scss index 7ac8d63ed..77eb55b0d 100644 --- a/source/sass/blocks/about.scss +++ b/source/sass/blocks/about.scss @@ -100,6 +100,7 @@ } @media (min-width: $desktop-width) { + top: -39px; font-size: 55px; line-height: 55px; } diff --git a/source/sass/blocks/reviews.scss b/source/sass/blocks/reviews.scss index 78cb429d0..6de0bfef9 100644 --- a/source/sass/blocks/reviews.scss +++ b/source/sass/blocks/reviews.scss @@ -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 { @@ -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 { @@ -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; + } +} diff --git a/source/sass/blocks/sssss.scss b/source/sass/blocks/sssss.scss new file mode 100644 index 000000000..e69de29bb