new commit

mate-academy · Sep 29, 2023 · ddd7feb · ddd7feb
1 parent 76c1005
commit ddd7feb
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 22 deletions.
diff --git 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 protected]"
             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
@@ -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
@@ -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
@@ -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
@@ -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;