navbar refactor

assets/scss/_buttons.scss

@@ -1,28 +1,54 @@
-.btn {
-  transition: all 0.3s ease;
-  padding: 20px 50px;
-  &:hover {
-    box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
-    transform: scale(1.03);
-  }
-}
-
+// .btn {
+//   transition: all 0.3s ease;
+//   padding: 20px 50px;
+//   border-radius: 7px;
+//   &:hover {
+//     box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
+//     transform: scale(1.03);
+//   }
+// }
 
-    // a {
-    //   display: inline-block;
-    //   padding: 20px 50px;
-    //   font-family: $secondary-font;
-    //   font-size: 16px;
-    //   background: $primary-color;
-    //   border-radius: 7px;
-    //   color: #ffffff;
+    // .hire_button{
+    //     background: $primary_color;
+    //     padding: 15px 30px;
+    //     color: #fff;
     //     text-decoration: none;
+    //     border-radius: 7px;
+    //     font-size: 16px;
+    //     font-family: $secondary-font;
+    //     font-weight: 400;
     //     border: 1px solid transparent;
-    //   transition: all 0.3s ease;
+    //     transition: all .3s ease;
     //     transform: scale(1);
-    //   &:hover {
-    //     background: #425fee;
+    //     &:hover{
+    //         background: #425FEE;
     //         box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
     //         transform: scale(1.03);
     //     }
+    //     @include desktop{
+    //         text-align: center;
+    //     }
     // }
+
+.btn {
+  display: inline-block;
+  padding: 15px 30px;
+  font-family: $secondary-font;
+  font-size: 16px;
+  background: $primary-color;
+  border-radius: 7px;
+  color: #fff;
+  text-decoration: none;
+  border: 1px solid transparent;
+  transition: all 0.3s ease;
+  transform: scale(1);
+  &:hover {
+    background: #425fee;
+    box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
+    transform: scale(1.03);
+  }
+}
+
+.btn-lg {
+  padding: 20px 50px;
+}

assets/scss/components/_hero-section.scss

@@ -70,20 +70,20 @@
         background: $secondary-color;
       }
     }
-    // h1 {
-    //   margin: 0 0 30px 0;
-    //   font-size: 60px;
-    //   font-family: $primary-font;
-    //   color: $secondary-color;
-    //   line-height: 70px;
-    // }
-    // p {
-    //   margin: 0 0 50px 0;
-    //   font-family: $secondary-font;
-    //   color: $secondary-color;
-    //   font-size: 20px;
-    //   line-height: 30px;
-    // }
+    h1 {
+      margin: 0 0 30px 0;
+      font-size: 60px;
+      font-family: $primary-font;
+      color: $secondary-color;
+      line-height: 70px;
+    }
+    p {
+      margin: 0 0 50px 0;
+      font-family: $secondary-font;
+      color: $secondary-color;
+      font-size: 20px;
+      line-height: 30px;
+    }
 
     // a {
     //   display: inline-block;

assets/scss/components/_site-navigation.scss

@@ -41,27 +41,27 @@
         }
     }
     
-    .hire_button{
-        background: $primary_color;
-        padding: 15px 30px;
-        color: #fff;
-        text-decoration: none;
-        border-radius: 7px;
-        font-size: 16px;
-        font-family: $secondary-font;
-        font-weight: 400;
-        border: 1px solid transparent;
-        transition: all .3s ease;
-        transform: scale(1);
-        &:hover{
-            background: #425FEE;
-            box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
-            transform: scale(1.03);
-        }
-        @include desktop{
-            text-align: center;
-        }
-    }
+    // .hire_button{
+    //     background: $primary_color;
+    //     padding: 15px 30px;
+    //     color: #fff;
+    //     text-decoration: none;
+    //     border-radius: 7px;
+    //     font-size: 16px;
+    //     font-family: $secondary-font;
+    //     font-weight: 400;
+    //     border: 1px solid transparent;
+    //     transition: all .3s ease;
+    //     transform: scale(1);
+    //     &:hover{
+    //         background: #425FEE;
+    //         box-shadow: 0 8px 20px rgba(56, 87, 241, 0.3);
+    //         transform: scale(1.03);
+    //     }
+    //     @include desktop{
+    //         text-align: center;
+    //     }
+    // }
     
     &.nav__color__change{
         background: $white;

layouts/partials/header.html

@@ -19,7 +19,7 @@
         {{ end }}
       </ul>
       <div class="navbar-nav">
-              <a href="{{ "contact" | absURL }}" class="hire_button">Hire Me Now</a>
+        <a href="{{ "contact" | absURL }}" class="btn btn-primary hire_button">Hire Me Now</a>
       </div>
     </div>
   </div>