changes added

mate-academy · Jul 16, 2024 · 77317cd · 77317cd
1 parent dce2007
commit 77317cd
Show file tree

Hide file tree

Showing 11 changed files with 106 additions and 32 deletions.
diff --git a/src/index.html b/src/index.html
@@ -62,23 +62,23 @@
               alt="logo"
             />
           </a>
+        </div>
 
-          <input
-            type="checkbox"
-            id="menu-toggle"
-            class="top-bar__menu-toggle-checkbox"
+        <input
+          type="checkbox"
+          id="menu-toggle"
+          class="top-bar__menu-toggle-checkbox"
+        />
+        <label
+          for="menu-toggle"
+          class="top-bar__menu-toggle"
+          aria-label="Toggle menu"
+        >
+          <img
+            src="images/icons/menu.svg"
+            alt="Menu icon"
           />
-          <label
-            for="menu-toggle"
-            class="top-bar__menu-toggle"
-            aria-label="Toggle menu"
-          >
-            <img
-              src="images/icons/menu.svg"
-              alt="Menu icon"
-            />
-          </label>
-        </div>
+        </label>
 
         <nav class="top-bar__nav">
           <ul class="nav-list">
@@ -118,7 +118,7 @@
         </nav>
 
         <a
-          href="#"
+          href="#contact-us"
           class="top-bar__hire-us"
         >
           Hire us
@@ -558,21 +558,36 @@ <h3 class="contacts__title">Contact us</h3>
           </a>
           <p class="contacts__section-title">Our socials</p>
           <div class="contacts__socials">
-            <img
-              class="contacts__socials-facebook"
-              src="./images/icons/facebook.svg"
-              alt="Facebook"
-            />
-            <img
-              class="contacts__socials-twitter"
-              src="./images/icons/twitter.svg"
-              alt="Twitter"
-            />
-            <img
-              class="contacts__socials-instagram"
-              src="./images/icons/instagram.svg"
-              alt="Instagram"
-            />
+            <a
+              href="#"
+              class="contacts__socials-link"
+            >
+              <img
+                class="contacts__socials-facebook"
+                src="./images/icons/facebook.svg"
+                alt="Facebook"
+              />
+            </a>
+            <a
+              href="#"
+              class="contacts__socials-link"
+            >
+              <img
+                class="contacts__socials-twitter"
+                src="./images/icons/twitter.svg"
+                alt="Twitter"
+              />
+            </a>
+            <a
+              href="#"
+              class="contacts__socials-link"
+            >
+              <img
+                class="contacts__socials-instagram"
+                src="./images/icons/instagram.svg"
+                alt="Instagram"
+              />
+            </a>
           </div>
         </div>
       </div>

diff --git a/src/styles/blocks/apply.scss b/src/styles/blocks/apply.scss
@@ -64,6 +64,7 @@
     font-weight: 600;
     line-height: 22.5px;
     text-align: center;
+    cursor: pointer;
 
     color: $c-white;
 

diff --git a/src/styles/blocks/article.scss b/src/styles/blocks/article.scss
@@ -67,8 +67,11 @@
     align-items: center;
 
     &-button {
+      transition: 0.3s;
+
       @include hover(scale, 1.2);
 
+      cursor: pointer;
       width: 40px;
       height: 40px;
       border-radius: 50%;

diff --git a/src/styles/blocks/benefit.scss b/src/styles/blocks/benefit.scss
@@ -4,13 +4,15 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  transition: 0.3s;
 
   @include hover(scale, 1.1);
 
   &-image {
     border-radius: 16px;
     width: 166px;
     height: 166px;
+    transition: 0.3s;
 
     @include hover(scale, 0.9);
   }

diff --git a/src/styles/blocks/bottom-bar.scss b/src/styles/blocks/bottom-bar.scss
@@ -13,5 +13,8 @@
 
   &__logo-menu {
     margin-bottom: 24px;
+    transition: 0.3s;
+
+    @include hover(scale, 1.1);
   }
 }
diff --git a/src/styles/blocks/bottom-nav.scss b/src/styles/blocks/bottom-nav.scss
@@ -16,6 +16,9 @@
   &-item {
     list-style-type: none;
     margin-bottom: 24px;
+    transition: 0.3s;
+
+    @include hover(scale, 1.1);
 
     &-link {
       text-decoration: none;

diff --git a/src/styles/blocks/contacts.scss b/src/styles/blocks/contacts.scss
@@ -44,5 +44,9 @@
     align-items: center;
     gap: 32px;
     margin: 16px 0;
+
+    &-link {
+      @include hover(scale, 1.1);
+    }
   }
 }
diff --git a/src/styles/blocks/header-main.scss b/src/styles/blocks/header-main.scss
@@ -29,6 +29,7 @@
     }
 
     &-button {
+      cursor: pointer;
       background-color: $c-blue;
       width: 280px;
       height: 50px;
@@ -74,8 +75,11 @@
 
     &-left,
     &-right {
+      transition: 0.3s;
+
       @include hover(scale, 1.2);
 
+      cursor: pointer;
       background-color: $c-gray;
       border-radius: 50%;
       width: 32px;

diff --git a/src/styles/blocks/message.scss b/src/styles/blocks/message.scss
@@ -40,8 +40,13 @@
       font-size: 16px;
       width: 100%;
       outline: none;
+      color: $c-white;
 
       margin-bottom: 40px;
+
+      &:hover {
+        border-bottom: 2px solid $c-blue;
+      }
     }
 
     &__label {
@@ -66,6 +71,12 @@
       box-sizing: border-box;
 
       margin-bottom: 56px;
+
+      color: $c-white;
+
+      &:hover {
+        border-bottom: 2px solid $c-blue;
+      }
     }
 
     &__button {
@@ -79,6 +90,7 @@
         width: 264px;
       }
 
+      cursor: pointer;
       height: 56px;
       border-radius: 8px;
       background-color: $c-blue;

diff --git a/src/styles/blocks/quote.scss b/src/styles/blocks/quote.scss
@@ -6,6 +6,7 @@
   justify-content: center;
   align-items: center;
   width: 100%;
+  transition: 0.3s;
 
   @include hover(scale, 1.1);
 

diff --git a/src/styles/blocks/top-bar.scss b/src/styles/blocks/top-bar.scss
@@ -29,6 +29,8 @@
       justify-content: center;
       align-items: center;
       gap: 32px;
+
+      @include hover(scale, 1.1);
     }
 
     &__nav {
@@ -48,11 +50,28 @@
       flex-direction: column;
       gap: 16px;
 
+      @include on-mobile {
+        transition: 0.3s ease-out;
+        padding: 5px 30px;
+        position: absolute;
+        left: 130px;
+        top: 30px;
+        background-color: $main-page-color;
+        border: 2px solid $c-gray;
+        border-radius: 8px;
+      }
+
       @include on-desktop-s {
+        padding: 0;
+        position: relative;
+        left: 0;
+        top: 0;
         flex-direction: row;
       }
 
       &-item {
+        @include hover(scale, 1.1);
+
         .nav-list-item-link {
           text-decoration: none;
           color: $c-gray;
@@ -64,22 +83,29 @@
       display: none;
 
       &:checked ~ .top-bar__menu-toggle + .top-bar__nav {
-        display: flex;
+        display: block;
       }
     }
 
     &__menu-toggle {
+      @include hover(scale, 1.1);
+
       display: block;
       background: none;
       border: none;
       cursor: pointer;
+      position: absolute;
+      top: 25px;
+      left: 100px;
 
       @include on-desktop-s {
         display: none;
       }
     }
 
     &__hire-us {
+      @include hover(scale, 1.1);
+
       @include on-mobile {
         white-space: nowrap;
         position: relative;