From 55054dae07a0dcea2bc7a06806c3f4c2494817df Mon Sep 17 00:00:00 2001
From: iryna lysko <goiralysko@gmail.com>
Date: Fri, 16 Aug 2024 11:50:29 +0300
Subject: [PATCH] add interacton styles

---
 src/assets/icons/carbon_arrow-up-light.svg |  3 ++
 src/index.html                             | 53 +++++++++++++++++-----
 src/styles/blocks/action-button.scss       |  2 +-
 src/styles/blocks/exhibition.scss          | 16 +++++++
 src/styles/blocks/footer.scss              | 45 +++++++++---------
 src/styles/blocks/gallery-grid.scss        |  3 ++
 src/styles/blocks/lecture.scss             |  5 ++
 src/styles/blocks/page.scss                | 29 ++++++++++++
 src/styles/blocks/scroll-to-section.scss   |  2 +-
 9 files changed, 121 insertions(+), 37 deletions(-)
 create mode 100644 src/assets/icons/carbon_arrow-up-light.svg

diff --git a/src/assets/icons/carbon_arrow-up-light.svg b/src/assets/icons/carbon_arrow-up-light.svg
new file mode 100644
index 000000000..8df0272bc
--- /dev/null
+++ b/src/assets/icons/carbon_arrow-up-light.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 2L3 7L3.705 7.705L7.5 3.915V14H8.5V3.915L12.295 7.705L13 7L8 2Z" fill="white"/>
+</svg>
diff --git a/src/index.html b/src/index.html
index 99955928a..67f4320ee 100644
--- 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: info@namu.kiev.ua
+                e-mail:
+                <a
+                  href="mailto:info@namu.kiev.ua"
+                  class="footer__contact"
+                >
+                  info@namu.kiev.ua
+                </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
index 641fac6bc..519ec3be2 100644
--- 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
index e2279d6f4..1cc838824 100644
--- 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
index 2f179f9a0..47525a4e5 100644
--- 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
index 4e46a196f..737282613 100644
--- 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
index 241421894..135c1e992 100644
--- 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
index 9f794ba0d..669a0689d 100644
--- 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
index 15e76e885..a77dacdb4 100644
--- 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;