tours-link

Ayronhayd · Aug 11, 2024 · 701efde · 701efde
1 parent cfb02d8
commit 701efde
Show file tree

Hide file tree

Showing 3 changed files with 89 additions and 0 deletions.
diff --git a/source/img/sprite/tour-arrow.svg b/source/img/sprite/tour-arrow.svg
diff --git a/source/index.html b/source/index.html
@@ -401,6 +401,10 @@ <h3 class="tours__card-title">Восхождение
 
         </ul>
       </div>
+
+      <div class="tours__link-wrap">
+        <a class="tours__link" href="#">Показать все туры</a>
+      </div>
     </section>
 
     <section class="training" data-test="training">

diff --git a/source/sass/blocks/tours.scss b/source/sass/blocks/tours.scss
@@ -34,6 +34,7 @@
 
   @media (min-width: $desktop-width) {
     width: 1200px;
+    padding-bottom: 53px;
   }
 }
 
@@ -264,3 +265,84 @@
   line-height: 13px;
   margin-top: 7px;
 }
+
+.tours__link-wrap {
+  display: flex;
+  justify-content: center;
+}
+
+.tours__link {
+  font-family: $font-700;
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 14px;
+  letter-spacing: 0.56px;
+  text-transform: uppercase;
+  color: $color-basic;
+  padding: 10px;
+  padding-right: 29px;
+  position: relative;
+
+  @media (min-width: $tablet-width) {
+    padding: 11px 29px 10px 10px;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: calc(50% - 7px);
+    right: 6px;
+    mask-image: url("/__spritemap#sprite-tour-arrow-view");
+    mask-repeat: no-repeat;
+    background-color: $color-basic;
+    width: 14px;
+    height: 14px;
+    display: block;
+
+    @media (min-width: $tablet-width) {
+      top: calc(50% - 8px);
+      width: 15px;
+      height: 14px;
+    }
+  }
+
+  @media (min-width: $tablet-width) {
+    font-size: 16px;
+    line-height: 16px;
+    letter-spacing: 0.64px;
+  }
+
+  &:hover {
+    color: rgba(2, 102, 193, 0.1);
+
+    &::after {
+      background-color: rgba(2, 102, 193, 0.1);
+    }
+  }
+
+  &:focus {
+    color: $button;
+    outline: none;
+
+    &::after {
+      background-color: $button;
+    }
+  }
+
+  &:active {
+    color: $button-extra;
+
+    &::after {
+      background-color: $button-extra;
+    }
+  }
+}
+
+.tours__link--disabled {
+  color: $color-disabled;
+  pointer-events: none;
+
+  &::after {
+    background-color: $color-disabled;
+  }
+}