From 54b28b6419115f003cdbac53094b4d9ec73d8fcf Mon Sep 17 00:00:00 2001
From: Sergey Delovskiy <moy.pohod@gmail.com>
Date: Mon, 30 Sep 2024 15:12:35 +0300
Subject: [PATCH] add task solution

---
 src/index.html          | 16 +++++++---
 src/styles/footer.scss  |  5 +++
 src/styles/header.scss  |  2 ++
 src/styles/sign-up.scss | 67 +++++++++++++++++++++++++++--------------
 4 files changed, 64 insertions(+), 26 deletions(-)

diff --git a/src/index.html b/src/index.html
index 83ef1810b..4aa77f827 100644
--- a/src/index.html
+++ b/src/index.html
@@ -38,7 +38,7 @@
       </a>
 
       <div class="header-icons">
-        <a href="#menu" class="header-burger-menu">
+        <a href="#aside" class="header-burger-menu">
           <img
             src="./images/burger-menu.svg"
             alt="burger-menu"
@@ -75,7 +75,7 @@
       </div>
     </header>
 
-    <aside class="aside" id="menu">
+    <aside class="aside" id="aside">
       <div class="container">
         <div class="aside-container-for-grid">
           <div class="aside-top-bar">
@@ -304,15 +304,23 @@
                 placeholder="E-mail"
                 required
               >
+
+              <button type="submit" class="sign-up-contact-form-red-box">
+                <img
+                  src="./images/sign-up-red-box-arrow.png"
+                  alt="arrow"
+                  class="sign-up-contact-form-red-box-arrow"
+                >
+              </button>
             </form>
 
-            <a href="#" class="sign-up-red-box">
+            <!-- <a href="#" class="sign-up-red-box">
               <img
                 src="./images/sign-up-red-box-arrow.png"
                 alt="arrow"
                 class="sign-up-red-box-arrow"
               >
-            </a>
+            </a> -->
           </div>
         </div>
 
diff --git a/src/styles/footer.scss b/src/styles/footer.scss
index 731494d35..c7a87ce51 100644
--- a/src/styles/footer.scss
+++ b/src/styles/footer.scss
@@ -117,6 +117,10 @@
       grid-row: 1;
       padding-right: 65px;
     }
+
+    &-description:hover {
+      color: blue;
+    }
   }
 
   &-schedule, &-contacts {
@@ -129,6 +133,7 @@
       color: #0F0E08;
     }
 
+
     &-title {
       margin-top: 40px;
       margin-bottom: 20px;
diff --git a/src/styles/header.scss b/src/styles/header.scss
index 90cfb64bc..f63895c8b 100644
--- a/src/styles/header.scss
+++ b/src/styles/header.scss
@@ -48,6 +48,8 @@
 
   &-burger-menu {
     display: flex;
+    // cursor: pointer;
+    // pointer-events: all;
 
     &-icon {
       height: 24px;
diff --git a/src/styles/sign-up.scss b/src/styles/sign-up.scss
index 5681362f4..549f25768 100644
--- a/src/styles/sign-up.scss
+++ b/src/styles/sign-up.scss
@@ -49,6 +49,18 @@
   }
 
   &-contact-form {
+    margin-top: 50px;
+    display: flex;
+
+    // flex-direction: row;
+    gap: 0;
+    align-items: center;
+    justify-content: center;
+
+    @include onTablet {
+      gap: 16px;
+      margin-top: 64px;
+    }
 
 
     &-email {
@@ -65,35 +77,46 @@
       box-sizing: border-box;
       margin: 0;
     }
-  }
 
-  &-red-box {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 50px;
-    height: 50px;
-    border: none;
-    background-color: #F14A27;
-    margin: 0;
+    &-red-box {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 50px;
+      height: 50px;
+      border: none;
+      background-color: #F14A27;
+      margin: 0;
+    }
   }
+
+  // &-red-box {
+  //   display: flex;
+  //   justify-content: center;
+  //   align-items: center;
+  //   width: 50px;
+  //   height: 50px;
+  //   border: none;
+  //   background-color: #F14A27;
+  //   margin: 0;
+  // }
 }
 
-.container-for-form-and-square {
-  margin-top: 50px;
-  display: flex;
+// .container-for-form-and-square {
+//   margin-top: 50px;
+//   display: flex;
 
-  // flex-direction: row;
-  gap: 0;
-  align-items: center;
-  justify-content: center;
+//   // flex-direction: row;
+//   gap: 0;
+//   align-items: center;
+//   justify-content: center;
 
-  @include onTablet {
-    gap: 16px;
-    margin-top: 64px;
-  }
+//   @include onTablet {
+//     gap: 16px;
+//     margin-top: 64px;
+//   }
 
-}
+// }
 
 .container-for-all-form {
   position: absolute;