training

Ayronhayd · Aug 15, 2024 · 9dda785 · 9dda785
1 parent a25f228
commit 9dda785
Show file tree

Hide file tree

Showing 39 changed files with 248 additions and 153 deletions.
diff --git a/source/img/training/training-1.jpg b/source/img/training/training-1.jpg
diff --git a/source/img/training/training-1.webp b/source/img/training/training-1.webp
diff --git a/source/img/training/[email protected] b/source/img/training/[email protected]
diff --git a/source/img/training/[email protected] b/source/img/training/[email protected]
diff --git a/source/img/training/training-2.jpg b/source/img/training/training-2.jpg
diff --git a/source/img/training/training-2.webp b/source/img/training/training-2.webp
diff --git a/source/img/training/[email protected] b/source/img/training/[email protected]
diff --git a/source/img/training/[email protected] b/source/img/training/[email protected]
diff --git a/source/img/training/training-3.jpg b/source/img/training/training-3.jpg
diff --git a/source/img/training/training-3.webp b/source/img/training/training-3.webp
diff --git a/source/img/training/[email protected] b/source/img/training/[email protected]
diff --git a/source/img/training/[email protected] b/source/img/training/[email protected]
diff --git a/source/img/training/training-4.jpg b/source/img/training/training-4.jpg
diff --git a/source/img/training/training-4.webp b/source/img/training/training-4.webp
diff --git a/source/img/training/[email protected] b/source/img/training/[email protected]
diff --git a/source/img/training/[email protected] b/source/img/training/[email protected]
diff --git a/source/img/training/training-5.webp b/source/img/training/training-5.webp
diff --git a/source/img/training/[email protected] b/source/img/training/[email protected]
diff --git a/source/img/training/training-desctop-1.jpg b/source/img/training/training-desctop-1.jpg
diff --git a/source/img/training/training-desctop-1.webp b/source/img/training/training-desctop-1.webp
diff --git a/source/img/training/[email protected] b/source/img/training/[email protected]
diff --git a/source/img/training/[email protected] b/source/img/training/[email protected]
diff --git a/source/img/training/training-desctop-2.jpg b/source/img/training/training-desctop-2.jpg
diff --git a/source/img/training/training-desctop-2.webp b/source/img/training/training-desctop-2.webp
diff --git a/source/img/training/[email protected] b/source/img/training/[email protected]
diff --git a/source/img/training/[email protected] b/source/img/training/[email protected]
diff --git a/source/img/training/training-desctop-3.jpg b/source/img/training/training-desctop-3.jpg
diff --git a/source/img/training/training-desctop-3.webp b/source/img/training/training-desctop-3.webp
diff --git a/source/img/training/[email protected] b/source/img/training/[email protected]
diff --git a/source/img/training/[email protected] b/source/img/training/[email protected]
diff --git a/source/img/training/training-tablet-3.jpg b/source/img/training/training-tablet-3.jpg
diff --git a/source/img/training/training-tablet-3.webp b/source/img/training/training-tablet-3.webp
diff --git a/source/img/training/[email protected] b/source/img/training/[email protected]
diff --git a/source/img/training/[email protected] b/source/img/training/[email protected]
diff --git a/source/index.html b/source/index.html
diff --git a/source/js/main.js b/source/js/main.js
@@ -15,11 +15,9 @@ magicLink.forEach((btn) => {
 // swiper
 const swiperHero = new Swiper('.hero__swiper', {
   modules: [Pagination],
-  // Optional parameters
   loop: true,
   slidesPerView: 1,
 
-  // If we need pagination
   pagination: {
     el: '.hero__pagination',
     clickable: true,

diff --git a/source/sass/blocks/swiper.scss b/source/sass/blocks/swiper.scss
@@ -15,22 +15,6 @@
   background-color: $color-white;
 }
 
-.button-swiper {
-  display: none;
-
-  @media (min-width: $tablet-width) {
-    display: block;
-    position: absolute;
-    right: 45px;
-    top: 60px;
-  }
-
-  @media (min-width: $desktop-width) {
-    right: 120px;
-    top: 120px;
-  }
-}
-
 .swiper-button {
   width: 37px;
   height: 35px;
@@ -58,7 +42,7 @@
     }
   }
 
-  &:focus {
+  &:focus-visible {
     border: 1px solid transparent;
     background-color: $color-white;
     outline: none;
@@ -78,7 +62,7 @@
   }
 }
 
-.tours__button-next {
+.swiper__button-next {
   transform: scaleX(-1);
 }
 

diff --git a/source/sass/blocks/tours.scss b/source/sass/blocks/tours.scss
@@ -25,6 +25,22 @@
   }
 }
 
+.tours__button-wrap {
+  display: none;
+
+  @media (min-width: $tablet-width) {
+    display: block;
+    position: absolute;
+    right: 45px;
+    top: 60px;
+  }
+
+  @media (min-width: $desktop-width) {
+    right: 120px;
+    top: 120px;
+  }
+}
+
 .tours__swiper.swiper {
   width: 290px;
   padding-bottom: 25px;
@@ -221,7 +237,7 @@
   gap: 1px;
 }
 
-.full-star {
+.tours__full-star {
   mask-image: url("/__spritemap#sprite-full-star-view");
   mask-repeat: no-repeat;
   background-color: $color-white;
@@ -230,7 +246,7 @@
   display: block;
 }
 
-.empty-star {
+.tours__empty-star {
   mask-image: url("/__spritemap#sprite-empty-star-view");
   mask-repeat: no-repeat;
   background-color: $color-white;

diff --git a/source/sass/blocks/training.scss b/source/sass/blocks/training.scss
@@ -15,6 +15,11 @@
       line-height: 24px;
       margin-bottom: 30px;
     }
+
+    @media (min-width: $desktop-width) {
+      margin-right: 335px;
+      margin-bottom: 62px;
+    }
   }
 }
 
@@ -24,8 +29,13 @@
   @media (min-width: $tablet-width) {
     margin: 19px 0 34px;
   }
+
+  @media (min-width: $desktop-width) {
+    margin-bottom: 32px;
+  }
 }
 
+
 .training__instructors {
   font-family: $font-800;
   font-size: 22px;
@@ -44,6 +54,24 @@
   @media (min-width: $desktop-width) {
     font-size: 35px;
     line-height: 35px;
+    margin-bottom: 16px;
+  }
+}
+
+.training__button-wrap {
+  display: none;
+
+  @media (min-width: $tablet-width) {
+    display: flex;
+    gap: 4px;
+    position: absolute;
+    right: 45px;
+    top: 197px;
+  }
+
+  @media (min-width: $desktop-width) {
+    right: 120px;
+    top: 212px;
   }
 }
 
@@ -52,7 +80,11 @@
   padding: 14px;
 
   @media (min-width: $tablet-width) {
-    min-height: 385px;
+    min-height: 388px;
+  }
+
+  @media (min-width: $desktop-width) {
+    min-height: 356px;
   }
 
   p {
@@ -80,6 +112,10 @@
   @media (min-width: $tablet-width) {
     width: 678px;
   }
+
+  @media (min-width: $desktop-width) {
+    width: 1200px;
+  }
 }
 
 .training__content {
@@ -106,11 +142,39 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  color: $icon-basic;
+
+  &:hover {
+    border-color: $color-basic;
+  }
+
+  &:focus-visible {
+    border-color: transparent;
+    outline: none;
+  }
+
+  &:active {
+    color: $icon-dark-bg;
+    background-color: $icon-two;
+    border-color: transparent;
+  }
+
+  @media (min-width: $tablet-width) {
+    width: 26px;
+  }
+
+  @media (min-width: $desktop-width) {
+    width: 24px;
+  }
 }
 
+.training__vk-link-disabled {
+  color: rgba($color-basic, 0.3);
+  border-color: rgba($color-basic, 0.3);
+  pointer-events: none;
+}
 
 .training__icon {
   width: 16px;
   height: 9px;
-  color: $icon-basic;
 }