training

.gitignore

@@ -6,7 +6,6 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
-
 node_modules
 dist
 backstop_data

source/index.html

@@ -48,7 +48,6 @@
     </div>
   </header>
 
-
   <main class="page-main">
     <h1 class="visually-hidden">Турагентство Lifetour.</h1>
     <section class="hero" data-test="hero">
@@ -177,7 +176,6 @@ <h3>Магические пейзажи Алтайского Края</h3>
       </div>
     </section>
 
-
     <section class="tours container" data-test="tours">
       <h2 class="tours__title title" data-shadow="Ближайшие туры">Ближайшие туры</h2>
       <div class="button-swiper">
@@ -233,7 +231,7 @@ <h3 class="tours__card-title">Путешествие
                 <p class="tours__data-wrap">
                   Даты набора:
                   <span class="tours__data">
-                    <time datetime="12-06">12.06</time>–<time datetime="19-06">19.06</time>
+                    <time datetime="06-12">12.06</time>–<time datetime="06-19">19.06</time>
                   </span>
                 </p>
 
@@ -287,7 +285,7 @@ <h3 class="tours__card-title">Путь к подножию
                 <p class="tours__data-wrap">
                   Даты набора:
                   <span class="tours__data">
-                    <time datetime="14-06">14.06</time>–<time datetime="23-06">23.06</time>
+                    <time datetime="06-14">14.06</time>–<time datetime="06-23">23.06</time>
                   </span>
                 </p>
 
@@ -313,10 +311,10 @@ <h3 class="tours__card-title">Путь к подножию
             <div class="tours__card">
               <div class="tours__card-wrapper-1">
                 <p class="tours__pin-filled">Адыгея</p>
-                  <ul class="tours__duration">
-                    <li class="tours__sun">7 дней</li>
-                    <li class="tours__moon">6 ночей</li>
-                  </ul>
+                <ul class="tours__duration">
+                  <li class="tours__sun">7 дней</li>
+                  <li class="tours__moon">6 ночей</li>
+                </ul>
               </div>
 
               <h3 class="tours__card-title">Через Фишт
@@ -336,7 +334,7 @@ <h3 class="tours__card-title">Через Фишт
                 <p class="tours__data-wrap">
                   Даты набора:
                   <span class="tours__data">
-                    <time datetime="15-07">15.07</time>–<time datetime="19-07">19.07</time>
+                    <time datetime="07-15">15.07</time>–<time datetime="07-19">19.07</time>
                   </span>
                 </p>
 
@@ -385,7 +383,7 @@ <h3 class="tours__card-title">Восхождение
                 <p class="tours__data-wrap">
                   Даты набора:
                   <span class="tours__data">
-                    <time datetime="12-07">12.07</time>–<time datetime="19-07">19.07</time>
+                    <time datetime="07-12">12.07</time>–<time datetime="07-19">19.07</time>
                   </span>
                 </p>
 
@@ -395,10 +393,6 @@ <h3 class="tours__card-title">Восхождение
               </div>
             </div>
           </li>
-
-
-
-
         </ul>
       </div>
 
@@ -407,8 +401,68 @@ <h3 class="tours__card-title">Восхождение
       </div>
     </section>
 
-    <section class="training" data-test="training">
-      <h2 class="title" data-shadow="Обучение">Обучение</h2>
+    <section class="training container" data-test="training">
+      <h2 class="training__title title" data-shadow="Обучение">Обучение</h2>
+      <p>Обучение проводится квалифицированными специалистами, за плечами которых десятки пройденных маршрутов Кавказа,
+        Крыма, Гималаев, Эльбруса, Алтая, Карелии, Адыгеи и других.</p>
+
+      <div>
+        <h2 class="training__instructors">Наши инструкторы</h2>
+        <div class="button-swiper">
+          <div class="training__button-prev swiper-button"></div>
+          <div class="training__button-next swiper-button"></div>
+        </div>
+
+        <div class="training__swiper swiper">
+          <ul class="training__swiper swiper-wrapper">
+            <li class="training__slide swiper-slide">
+              <picture>
+                <source type="image/webp" width="260" height="200"
+                  srcset="./img/training/training-3.webp 1x, ./img/training/[email protected] 2x">
+                <img class="training__img" src="./img/training/training-3.jpg" srcset="./img/training/[email protected]"
+                  width="260" height="200" alt="Надежда Колесниченко.">
+              </picture>
+              <div class="training__content">
+                <h3>Надежда Колесниченко</h3>
+                  <a class="training__vk-link" href="#">
+                    <span class="visually-hidden">Открыть страницу в контакте.</span>
+                    <svg class="training__icon" width="16" height="9">
+                      <use href="/__spritemap#sprite-vk"></use>
+                    </svg>
+                  </a>
+              </div>
+              <p>Участники говорят, что Надежда ответственная, приятная в общении,
+                и в поездках с ней чувствуешь себя
+                спокойно и уверенно.</p>
+            </li>
+
+            <li class="training__slide swiper-slide">
+              <picture>
+                <source type="image/webp" width="260" height="200"
+                  srcset="./img/training/training-3.webp 1x, ./img/training/[email protected] 2x">
+                <img class="training__img" src="./img/training/training-3.jpg" srcset="./img/training/[email protected]"
+                  width="260" height="200" alt="Надежда Колесниченко.">
+              </picture>
+              <div class="training__content">
+                <h3>Надежда Колесниченко</h3>
+                  <a class="training__vk-link" href="#">
+                    <span class="visually-hidden">Открыть страницу в контакте.</span>
+                    <svg class="training__icon" width="16" height="9">
+                      <use href="/__spritemap#sprite-vk"></use>
+                    </svg>
+                  </a>
+              </div>
+              <p>Участники говорят, что Надежда ответственная, приятная в общении,
+                и в поездках с ней чувствуешь себя
+                спокойно и уверенно.</p>
+            </li>
+          </ul>
+
+        </div>
+
+      </div>
+
+
     </section>
 
     <section class="about" data-test="about">

source/js/main.js

@@ -48,9 +48,33 @@ const swiperTours = new Swiper('.tours__swiper', {
     1440: {
       slidesPerView: 3,
       spaceBetween: 30,
-
     }
   },
 });
 
 swiperTours.update();
+
+const swiperTraining = new Swiper('.training__swiper', {
+  modules: [Navigation],
+  loop: false,
+  spaceBetween: 20,
+  navigation: {
+    nextEl: '.training__button-next',
+    prevEl: '.training__button-prev',
+  },
+
+  breakpoints: {
+    320: {
+      // initialSlide: 3,
+      slidesPerView: 1,
+    },
+    768: {
+      slidesPerView: 3,
+    },
+    1440: {
+      slidesPerView: 4,
+    }
+  },
+});
+
+swiperTraining.update();

source/sass/blocks/title.scss

@@ -5,6 +5,8 @@
   line-height: 22px;
   color: $color-basic;
   position: relative;
+  margin: 0;
+  padding: 0;
 
   @media (min-width: $tablet-width) {
     font-size: 25px;

source/sass/blocks/tours.scss

@@ -1,6 +1,7 @@
 .tours {
   position: relative;
   padding-top: 39px;
+  padding-bottom: 20px;
 
   @media (min-width: $tablet-width) {
     padding: 60px 45px;

source/sass/blocks/training.scss

@@ -0,0 +1,100 @@
+.training {
+  color: $color-basic;
+  padding-top: 20px;
+
+  p {
+    font-size: 14px;
+    line-height: 20px;
+    margin: 0;
+    padding: 0;
+    padding-bottom: 29px;
+
+    @media (min-width: $tablet-width) {
+      font-size: 16px;
+      line-height: 24px;
+    }
+  }
+}
+
+.training__title {
+  margin: 17px 0 33px;
+}
+
+.training__instructors {
+  font-family: $font-800;
+  font-size: 22px;
+  font-weight: 800;
+  line-height: 22px;
+  margin: 0;
+  padding: 0;
+  padding-bottom: 22px;
+
+  @media (min-width: $tablet-width) {
+    font-size: 25px;
+    line-height: 25px;
+  }
+
+  @media (min-width: $desktop-width) {
+    font-size: 35px;
+    line-height: 35px;
+  }
+}
+
+.training__slide {
+  border: 1px solid rgba($border, 0.1);
+  padding: 14px;
+
+  p {
+    font-size: 12px;
+    line-height: 16px;
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.training__img {
+  display: block;
+  width: 260px;
+  height: 200px;
+  object-fit: cover;
+}
+
+.training__swiper {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 290px;
+}
+
+.training__content {
+  display: flex;
+  justify-content: space-between;
+  margin-top: 16px;
+  margin-bottom: 14px;
+
+  h3 {
+    font-family: $font-700;
+    font-size: 14px;
+    font-weight: 700;
+    line-height: 16px;
+    margin: 0;
+    padding: 0;
+    width: 180px;
+  }
+}
+
+.training__vk-link {
+  border: 1px solid rgba(45, 56, 63, 0.1);
+  width: 24px;
+  height: 23px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+
+.training__icon {
+  width: 16px;
+  height: 9px;
+  color: $icon-basic;
+}

source/sass/common/variables.scss

@@ -15,6 +15,9 @@ $button-extra: #1c3374;
 $bg-color: #ffffff;
 $bg-header: #0266c1;
 
+// border training
+$border: #0266c1;
+
 // Иконки
 $icon-basic: #2d383f;
 $icon-two: #0266c1;

source/sass/style.scss

@@ -21,3 +21,5 @@
 @import "./blocks/swiper";
 @import "./blocks/title";
 @import "./blocks/tours";
+@import "./blocks/training";
+