From ddd7feb43a066ef0dc10a283aa71d29e834e4289 Mon Sep 17 00:00:00 2001
From: Vovchuk <kulivackijvoloda@gmail.com>
Date: Fri, 29 Sep 2023 19:34:52 +0300
Subject: [PATCH] new commit

---
 src/index.html                  | 47 ++++++++++++++++++++++-----------
 src/styles/blocks/footer.scss   |  2 +-
 src/styles/blocks/header.scss   | 10 +++----
 src/styles/blocks/services.scss |  6 +++++
 src/styles/utils/_mixins.scss   | 14 ++++++++++
 5 files changed, 57 insertions(+), 22 deletions(-)
diff --git a/src/index.html b/src/index.html
index e12e3f6ace..24020119db 100644
--- a/src/index.html
+++ b/src/index.html
@@ -23,7 +23,7 @@
   <body>
     <header class="header">
       <div class="top-bar">
-        <wrap class="wrap">
+        <div class="wrap">
           <a href="#" class="link">
             <img
             src="./images/Air.png"
@@ -52,7 +52,7 @@
               </li>
             </ul>
           </nav>
-        </wrap>
+        </div>
         <div class="header__hire">Hire us</div>
       </div>
       <div class="wrapper">
@@ -287,15 +287,17 @@ <h1 class="testimonials__title">What people say</h1>
           </div>
         </div>
       </section>
-      <section class="unique__section">
+      <section class="unique__section" id="unique__section">
         <div class="unique__section__wrap">
           <h1 class="unique__section__title">Vision, Passion, Results</h1>
           <div class="grid__wrap">
             <span class="unique__section__text">We are sure that first-rate job is possible only if all three components are united.</span>
             <div class="unique__section__href">
-              <button class="unique__section__button">
-                <span class="unique__section__button-text">Apply</span>
-              </button>
+              <a href="#">
+                <button class="unique__section__button">
+                  <span class="unique__section__button-text">Apply</span>
+                </button>
+              </a>
             </div>
           </div>
         </div>
@@ -305,40 +307,53 @@ <h1 class="unique__section__title">Vision, Passion, Results</h1>
     <footer class="footer">
       <div class="footer__wrapper-top">
         <span class="footer__title">Send us a message</span>
-        <div class="input__wrap">
+        <form
+          class="input__wrap"
+          action="http://localhost:8080/"
+          onsubmit="this.reset(); return false"
+        >
           <input
             type="email"
             placeholder="email@gmail.com"
             class="footer__input"
+            required
           >
           <input
             type="text"
             placeholder="Your name"
             class="footer__input"
+            required
           >
           <input
             type="text"
             placeholder="Your message"
             class="footer__input"
+            required
           >
-        </div>
-        <div class="footer__href">
           <button
-            type="submit"
-            form="nameform"
-            value="Submit"
             class="footer__button"
-            name="submit__button"
           >
             <span class="footer__button-text">Send</span>
           </button>
-        </div>
+        </form>
         <div class="footer__bottom">
           <span class="footer__side-title">Contact us</span>
           <span class="footer__grey-text">Call us</span>
-          <a href="tel: 654321987" class="footer__number-address">654 321 987</a>
+          <a
+            href="tel: 654321987"
+            class="footer__number-address"
+            target="_blank"
+          >
+            654 321 987
+          </a>
           <span class="footer__grey-text">Visit us</span>
-          <a href="https://www.google.com.ua/maps/search/2905+West+Drive,+Buffalo+Grove/@42.1804757,-88.073085,11z?entry=ttu" class="footer__number-address">2905 West Drive, Buffalo Grove</a>
+          <a
+            href="https://www.google.com.ua/maps/search/2905+West+Drive,+Buffalo+Grove/@42.1804757,-88.073085,11z?entry=ttu"
+            class="footer__number-address"
+            target="_blank"
+          >
+          2905 West Drive, Buffalo Grove
+          </a>
           <span class="footer__grey-text text__before-social">our socials</span>
           <div class="footer__social">
             <a
diff --git a/src/styles/blocks/footer.scss b/src/styles/blocks/footer.scss
index 128c7f24e1..3c7ec41963 100644
--- a/src/styles/blocks/footer.scss
+++ b/src/styles/blocks/footer.scss
@@ -129,7 +129,7 @@
   @include onDesktop {
     grid-column: 7 / -1;
 
-    margin-top: -380px;
+    margin-top: -45px;
   }
 }
 
diff --git a/src/styles/blocks/header.scss b/src/styles/blocks/header.scss
index 851e6c0ff5..7045255119 100644
--- a/src/styles/blocks/header.scss
+++ b/src/styles/blocks/header.scss
@@ -2,10 +2,6 @@
   background-color: rgba(44, 44, 44, 1);
   padding-bottom: 35px;
   width: 100%;
-
-  @include onBiggestDesk {
-    padding-left: 173px;
-  }
 }
 
 .header__icon {
@@ -29,12 +25,16 @@
   position: relative;
 
   @include onBiggestDesk {
-    margin-right: 300px;
+    // margin-right: 300px;
   }
 
   @include onLargeScreen {
     margin-top: -10px;
   }
+
+  @include onLargestScreen {
+    margin-top: 0;
+  }
 }
 
 .header__hire::after {
diff --git a/src/styles/blocks/services.scss b/src/styles/blocks/services.scss
index 26c1119aa1..fada555cae 100644
--- a/src/styles/blocks/services.scss
+++ b/src/styles/blocks/services.scss
@@ -77,6 +77,8 @@
 
   grid-column: 1 / -1;
 
+  @include hover(transform, scale(1.1));
+
   margin-bottom: 24px;
 
   @include onTablet {
@@ -89,6 +91,10 @@
     margin-left: 0;
     padding-inline: 0;
   }
+
+  @include onBiggestDesk {
+    width: 264px;
+  }
 }
 
 .service__first {
diff --git a/src/styles/utils/_mixins.scss b/src/styles/utils/_mixins.scss
index 8f7dd62716..316ac058f2 100644
--- a/src/styles/utils/_mixins.scss
+++ b/src/styles/utils/_mixins.scss
@@ -15,6 +15,14 @@
   @include onDesktop {
     padding-inline: 54px;
   }
+
+  @include onBiggestDesk {
+    padding-inline: 227px;
+  }
+
+  @include onLargestScreen {
+    padding-inline: 707px;
+  }
 }
 
 @mixin paddingTop() {
@@ -51,6 +59,12 @@
   }
 }
 
+@mixin onLargestScreen {
+  @media (min-width: 2560px) {
+    @content;
+  }
+}
+
 @mixin pageGrid {
   --columns: 2;
   display: grid;
