demo for mentor

mate-academy · Sep 21, 2023 · 8875f03 · 8875f03
1 parent e0c958b
commit 8875f03
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 12 deletions.
diff --git a/src/images/arrow.svg b/src/images/arrow.svg
diff --git a/src/index.html b/src/index.html
@@ -195,7 +195,25 @@ <h3 class="exibition__info-title exibition__info-title--2">Мистецтво Х
             <div class="exibition-button--2-wrapper--1">
               <form action="#" class="exibition-button--2"
                 onsubmit="this.reset(); return false;">
-                <button type="submit" class="button--2">Архів виставок</button>
+                <button type="submit" class="button--2">
+                  <p class="button--2-text">Архів виставок</p>
+                  <svg width="20" height="20"
+                  viewBox="0 0 20 20" fill="none"
+                  xmlns="http://www.w3.org/2000/svg">
+                    <!-- <path
+                    d="M3.33337 10H16.6667" stroke="#CD4D31"
+                    stroke-width="2" stroke-linecap="round"
+                    stroke-linejoin="round"
+                    />
+                    <path
+                     d="M10.8334 4.1665L16.6667 9.99984L10.8334 15.8332"
+                     stroke="#CD4D31"
+                     stroke-width="2"
+                     stroke-linecap="round"
+                     stroke-linejoin="round"
+                    /> -->
+                  </svg>
+                </button>
               </form>
             </div>
 
@@ -242,7 +260,9 @@ <h3 class="exibition__info-title exibition__info-title--4">Майстер-кла
             <div class="exibition-button--2-wrapper--2">
               <form action="#" class="exibition-button--2"
                 onsubmit="this.reset(); return false;">
-                <button type="submit" class="button--2">Календар подій</button>
+                <button type="submit" class="button--2">
+                  <p class="button--2-text">Календар подій</p>
+                </button>
               </form>
             </div>
 
@@ -283,7 +303,9 @@ <h2 class="news__title">Новини</h2>
 
             <form action="#" class="news-button"
               onsubmit="this.reset(); return false;">
-              <button type="submit" class="button--2 button--2-news">Усі новини</button>
+              <button type="submit" class="button--2 button--2-news">
+                <p class="button--2-text">Усі новини</p>
+              </button>
             </form>
           </div>
 
@@ -313,7 +335,9 @@ <h3 class="news__info-date--title exibition__info-title">Міжнародний
             <div class="exibition-button--2-wrapper--3">
               <form action="#" class="exibition-button--2"
                 onsubmit="this.reset(); return false;">
-                <button type="submit" class="button--2">Усі новини</button>
+                <button type="submit" class="button--2">
+                  <p class="button--2-text">Усі новини</p>
+                </button>
               </form>
             </div>
 
@@ -339,7 +363,7 @@ <h2 class="subscribe__title">Підпишіться на дайджест</h2>
               class="subscribe__form"
               onsubmit="this.reset(); return false;">
               <input
-              type="text"
+              type="email"
               name="email"
               id="email"
               placeholder="e-mail"

diff --git a/src/styles/blocks/button--2.scss b/src/styles/blocks/button--2.scss
@@ -3,12 +3,9 @@
   height: 60px;
   background-color: #f1f5f4;
   border: 1px solid #cd4d31;
-  color: #cd4d31;
-  font-family: "Raleway", sans-serif;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 600;
-  line-height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
   &-news {
     width: 210px;
@@ -18,4 +15,16 @@
       display: block;
     }
   }
+
+  &-text {
+    color: #cd4d31;
+    font-family: "Raleway", sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 100%;
+    padding-right: 3px;
+  }
+
+
 }
diff --git a/src/styles/blocks/button.scss b/src/styles/blocks/button.scss
@@ -14,4 +14,13 @@
     width: 330px;
   }
 
+  &:hover {
+    background-color: #af3419;
+  }
+
+  &:focus {
+    background-color: #ea340d;
+  }
+
+  transition: all $duration;
 }
diff --git a/src/styles/blocks/icon.scss b/src/styles/blocks/icon.scss
@@ -6,4 +6,10 @@
   &:last-child {
     margin-right: 0;
   }
+
+  &:hover {
+    scale: 120%;
+  }
+
+  transition: all $duration;
 }
diff --git a/src/styles/blocks/subscibe.scss b/src/styles/blocks/subscibe.scss
@@ -106,17 +106,33 @@
     outline: none;
 
     &::placeholder {
-      color: #1c1b29;
       font-weight: 400;
     }
 
+    &:hover::placeholder,
+    &:hover:invalid {
+      border-color: #cd4d31;
+      color: #cd4d31;
+    }
+
+    &:focus:invalid {
+      border-color: #cd4d31;
+      color: #cd4d31;
+    }
+
+    &:focus::placeholder {
+      color: #cd4d31;
+    }
+
     @include onTablet {
       width: 450px;
     }
 
     @include onDesktop {
       width: 470px;
     }
+
+    transition: all $duration;
   }
 
   &-button {

diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss
@@ -12,6 +12,12 @@
   &__logo {
     width: 123px;
     height: 40px;
+
+    transition: all $duration;
+
+    &:hover {
+      scale: 110%;
+    }
   }
 
   &__language {
@@ -42,10 +48,22 @@
   &__icon {
     &--menu {
       padding-right: 40px;
+
+      transition: all $duration;
+
+      &:hover {
+        scale: 120%;
+      }
     }
 
     &--cross {
       padding-right: 40px;
+
+      transition: all $duration;
+
+      &:hover {
+        scale: 120%;
+      }
     }
   }
 }
diff --git a/src/styles/utils/_vars.scss b/src/styles/utils/_vars.scss
@@ -4,3 +4,5 @@ $mobile-min-width: 320px;
 $tablet-min-width: 640px;
 $desktop-min-width: 1280px;
 $large-desktop-min-width: 1440px;
+
+$duration: 0.3s;