add interacton styles

mate-academy · Aug 16, 2024 · 55054da · 55054da
1 parent 0637077
commit 55054da
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 37 deletions.
diff --git a/src/assets/icons/carbon_arrow-up-light.svg b/src/assets/icons/carbon_arrow-up-light.svg
diff --git a/src/index.html b/src/index.html
@@ -385,6 +385,11 @@ <h2 class="gallery__title main__section-title">Галерея</h2>
       </section>
     </main>
 
+    <a
+      href="#"
+      class="page__to-top"
+    ></a>
+
     <footer class="footer">
       <div
         class="footer__hero"
@@ -396,16 +401,21 @@ <h2 class="hero__title">Підписка</h2>
             <p class="hero__motto">
               Бути в курсі всіх актуальних подій та останніх новин.
             </p>
-            <form class="hero__input">
+            <form
+              class="hero__input"
+              name="reg"
+            >
               <input
                 type="email"
                 class="hero__field"
                 placeholder="E-mail"
                 name="email"
+                required
               />
               <button
                 class="hero__btn box box--secondary"
                 type="submit"
+                name="submit"
               ></button>
             </form>
           </div>
@@ -501,23 +511,42 @@ <h2 class="hero__title">Підписка</h2>
 
             <div class="table__content">
               <p class="table__extra-info">
-                вул. М. Грушевського, 6; Київ, 01001
+                <a
+                  href="https://maps.app.goo.gl/AsaixqT342415iBMA"
+                  class="footer__contact"
+                  target="_blank"
+                >
+                  вул. М. Грушевського, 6; Київ, 01001
+                </a>
                 <br />
-                тел. +38 (044)
-                <span class="no-wrap">278-13-57</span>
+                тел.
+                <a
+                  href="tel:+380442781357"
+                  class="footer__contact"
+                >
+                  +38 (044)
+                  <span class="no-wrap">278-13-57</span>
+                </a>
                 <br />
-                факс +38 (044)
-                <span class="no-wrap">278-74-54</span>
+                факс
+                <a
+                  href="tel:+380442787454"
+                  class="footer__contact"
+                >
+                  +38 (044)
+                  <span class="no-wrap">278-74-54</span>
+                </a>
                 <br />
-                e-mail: [email protected]
+                e-mail:
+                <a
+                  href="mailto:[email protected]"
+                  class="footer__contact"
+                >
+                  [email protected]
+                </a>
               </p>
             </div>
           </section>
-
-          <a
-            href="#"
-            class="footer__to-top"
-          ></a>
         </div>
 
         <div class="footer__d-line d-line d-line--horizontal"></div>

diff --git a/src/styles/blocks/action-button.scss b/src/styles/blocks/action-button.scss
@@ -14,7 +14,7 @@
     content: '';
     width: 100%;
     height: 100%;
-    background-color: $bg-dark-color;
+    background-color: $primary-decor-color;
     opacity: 0.2;
     transform: translateX(-101%);
     transition: transform $hover-duration;

diff --git a/src/styles/blocks/exhibition.scss b/src/styles/blocks/exhibition.scss
@@ -16,6 +16,22 @@
 
   &__details {
     grid-column: 9 / span 4;
+    cursor: pointer;
+    position: relative;
+
+    &::after {
+      opacity: 0;
+      content: '';
+      display: block;
+      position: absolute;
+      height: 110%;
+      width: 110%;
+      background-color: rgba($primary-decor-color, 0.1);
+      top: -5%;
+      left: -5%;
+    }
+
+    @include hover-after(opacity, 1);
 
     @include on-tablet {
       @include page-grid;

diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss
@@ -121,29 +121,6 @@
     }
   }
 
-  &__to-top {
-    display: none;
-    border: 1px solid $primary-decor-color;
-    background-image: url('../assets/icons/carbon_arrow-up.svg');
-    background-color: $bg-light-color;
-    background-repeat: no-repeat;
-    background-position: center;
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    cursor: pointer;
-    box-sizing: border-box;
-    z-index: 20;
-
-    position: fixed;
-    right: $content-padding--s;
-    bottom: 100px;
-
-    @include on-phone {
-      display: block;
-    }
-  }
-
   &__legal {
     grid-column: 1 / -1;
     display: flex;
@@ -162,4 +139,26 @@
 
     color: $heading-color;
   }
+
+  &__contact {
+    position: relative;
+    border-bottom: 1px solid transparent;
+
+    @include hover(color, $primary-decor-color);
+    @include hover(border-bottom, 1px solid $primary-decor-color);
+
+    &::after {
+      content: '';
+      position: absolute;
+      width: 9px;
+      aspect-ratio: 1;
+      background-color: $primary-decor-color;
+      right: -15px;
+      bottom: 0;
+      transform: translateY(-50%);
+      opacity: 0;
+    }
+
+    @include hover-after(opacity, 1);
+  }
 }
diff --git a/src/styles/blocks/gallery-grid.scss b/src/styles/blocks/gallery-grid.scss
@@ -5,6 +5,9 @@
 
   &__cell {
     display: flex;
+    cursor: pointer;
+
+    @include hover(transform, scale(1.02));
 
     &--narrow {
       grid-column: span 4;

diff --git a/src/styles/blocks/lecture.scss b/src/styles/blocks/lecture.scss
@@ -31,10 +31,15 @@
     position: absolute;
     bottom: 0;
     transform: translateY(50%);
+    cursor: pointer;
+
+    @include hover(transform, translateY(50%) scale(1.05));
 
     @include on-tablet {
       padding-inline: 55px;
       transform: translateY(60%);
+
+      @include hover(transform, translateY(60%) scale(1.05));
     }
 
     @include on-phone {

diff --git a/src/styles/blocks/page.scss b/src/styles/blocks/page.scss
@@ -46,4 +46,33 @@
       transform: translateY(0);
     }
   }
+
+  &__to-top {
+    display: none;
+    border: 1px solid $primary-decor-color;
+    background-image: url('../assets/icons/carbon_arrow-up.svg');
+    background-color: $bg-light-color;
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 50px;
+    height: 50px;
+    border-radius: 50%;
+    cursor: pointer;
+    box-sizing: border-box;
+    z-index: 20;
+
+    position: fixed;
+    right: $content-padding--s;
+    bottom: 100px;
+
+    &:hover {
+      background-image: url('../assets/icons/carbon_arrow-up-light.svg');
+    }
+
+    @include hover(background-color, $primary-decor-color);
+
+    @include on-phone {
+      display: block;
+    }
+  }
 }
diff --git a/src/styles/blocks/scroll-to-section.scss b/src/styles/blocks/scroll-to-section.scss
@@ -6,7 +6,7 @@
   width: fit-content;
   color: $tip-color;
 
-  @include hover(color, $text-dark-color);
+  @include hover(color, $secondary-decor-color);
 
   &__decor {
     background-color: $primary-decor-color;