Merge pull request #70 from Hrishabh5/Hrishabh

Add animations to button and remove hamburger icon
CodXCrypt · Nov 9, 2021 · 6ff0ffe · 6ff0ffe
2 parents 003f8e1 + 58e6bba
commit 6ff0ffe
Show file tree

Hide file tree

Showing 5 changed files with 84 additions and 60 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.DS_Store
diff --git a/css/.DS_Store b/css/.DS_Store
diff --git a/css/style.css b/css/style.css
@@ -12088,14 +12088,34 @@ h5,
 }
 
 .ftco-navbar-light .navbar-nav > .nav-item > .nav-link {
-  font-size: 15px;
+  font-size: 17px;
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
   padding-left: 20px;
   padding-right: 20px;
   color: #fff;
-  font-weight: 500;
+  font-weight: 600;
   opacity: 1 !important;
+  display: inline-block;
+  position: relative;
+}
+
+.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:after {
+  content: "";
+  position: absolute;
+  width: 100%;
+  transform: scaleX(0);
+  height: 2px;
+  bottom: 17px;
+  left: 0;
+  background-color: rgb(255, 255, 255);
+  transform-origin: bottom center;
+  transition: transform 0.25s ease-out;
+}
+
+.ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover:after {
+  transform: scaleX(0.8);
+  transform-origin: bottom center;
 }
 
 .ftco-navbar-light .navbar-nav > .nav-item > .nav-link:hover,
@@ -12182,7 +12202,16 @@ h5,
 }
 
 .ftco-navbar-light .navbar-nav > .nav-item.active > a {
-  color: #4986fc;
+  color: #4482fd;
+}
+
+.ftco-navbar-light .navbar-nav > .nav-item.active > a:hover {
+  color: #4482fd;
+}
+
+.ftco-navbar-light .navbar-nav > .nav-item.active > .nav-link:hover:after {
+  transform: scaleX(0);
+  transform-origin: bottom center;
 }
 
 @media (max-width: 991.98px) {
@@ -12381,21 +12410,24 @@ h5,
 }
 
 #hero .btn-get-started {
+  border: 1px solid #007bff88;
   font-family: "Raleway", sans-serif;
-  font-weight: 500;
-  font-size: 15px;
+  font-weight: 600;
+  font-size: 17px;
   letter-spacing: 1px;
   display: inline-block;
   padding: 9px 35px;
   border-radius: 50px;
-  transition: 0.5s;
   margin-top: 40px;
-  border: 2px solid #ffc107;
+  background-color: #0275d8;
   color: #fff;
 }
 
 #hero .btn-get-started:hover {
-  background: #ffc107;
+  background: linear-gradient(to right, #007bff 50%, #3999ff 50%);
+  background-size: 200% 100%;
+  background-position: right bottom;
+  transition: all 0.3s ease-out;
 }
 
 @media (min-width: 1024px) {
@@ -12676,9 +12708,10 @@ h3 {
 }
 
 .btn.btn-primary:hover {
-  border: 1px solid #4986fc;
-  background: transparent;
-  color: #4986fc;
+  background: linear-gradient(to right, #4181ff 50%, #6093f8 50%) !important;
+  background-size: 200% 100% !important;
+  background-position: right bottom !important;
+  transition: all 0.3s ease-out !important;
 }
 
 .btn.btn-primary.btn-outline-primary {
@@ -14744,15 +14777,18 @@ License Terms .blog-entry {
   background: none;
   font-size: 16px;
   padding: 0 20px;
-  background: #ffc107;
+  background: #007bff;
   color: #fff;
   transition: 0.3s;
   border-radius: 50px;
   box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
 }
 
 #footer .footer-newsletter form input[type="submit"]:hover {
-  background: #ffce3a;
+  background: linear-gradient(to right, #007bff 50%, #3999ff 50%);
+  background-size: 200% 100%;
+  background-position: right bottom;
+  transition: all 0.3s ease-out;
 }
 
 #footer .credits {
@@ -14768,7 +14804,7 @@ License Terms .blog-entry {
   font-size: 18px;
   display: inline-block;
   background: #e1e4ec;
-  color: #5f6f92;
+  color: #3d465e;
   line-height: 1;
   padding: 8px 0;
   margin-right: 4px;
@@ -14780,7 +14816,7 @@ License Terms .blog-entry {
 }
 
 #footer .social-links a:hover {
-  background: #ffce3a;
+  background: #89c8ff;
   text-decoration: none;
 }
 
@@ -14793,15 +14829,18 @@ License Terms .blog-entry {
   font-size: 18px;
   border: none;
   outline: none;
-  background-color: #ffc107;
+  background-color: #007bff;
   color: white;
   cursor: pointer;
   padding: 15px;
   border-radius: 4px;
 }
 
 #myBtn:hover {
-  background-color: #ffce39;
+  background: linear-gradient(to right, #007bff 50%, #3999ff 50%);
+  background-size: 200% 100%;
+  background-position: right bottom;
+  transition: all 0.4s ease-out;
 }
 
 /* Style the header */
@@ -14839,52 +14878,36 @@ License Terms .blog-entry {
   cursor: pointer;
 }
 
-.bar1,
-.bar2,
-.bar3 {
-  width: 35px;
-  height: 5px;
-  background-color: white;
-  margin: 6px 0;
-  transition: 0.4s;
-}
-
-.change .bar1 {
-  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
-  transform: rotate(-45deg) translate(-9px, 6px);
-}
+@media (max-width: 990.8px) {
+  .bar1,
+  .bar2,
+  .bar3 {
+    width: 35px;
+    height: 5px;
+    background-color: white;
+    margin: 6px 0;
+    transition: 0.4s;
+  }
 
-.change .bar2 {
-  opacity: 0;
-}
+  .change .bar1 {
+    -webkit-transform: rotate(-45deg) translate(-9px, 6px);
+    transform: rotate(-45deg) translate(-9px, 6px);
+  }
 
-.change .bar3 {
-  -webkit-transform: rotate(45deg) translate(-8px, -8px);
-  transform: rotate(45deg) translate(-8px, -8px);
-}
+  .change .bar2 {
+    opacity: 0;
+  }
 
-.form-group {
-  display: flex;
-  align-items: flex-start;
-  margin-bottom: 20px;
-}
+  .change .bar3 {
+    -webkit-transform: rotate(45deg) translate(-8px, -8px);
+    transform: rotate(45deg) translate(-8px, -8px);
+  }
 
-/* -- Custom Scrollbar Styling -- */
 
-::-webkit-scrollbar{
-  width: 1vw;
-  background: #b9cfe4ad;
-  border: 0.5px solid #000000;
-  border-radius: 2px;
-}
-/* Handle */
-::-webkit-scrollbar-thumb {
-  background: #84b5c0a8;
-  border: 0.5px solid #06164d;
-  border-radius: 4px;
-  background-clip: padding-box;
-}
-/* Handle on hover */
-::-webkit-scrollbar-thumb:hover {
-  background: #59738288; 
+  .form-group {
+    display: flex;
+    align-items: flex-start;
+    margin-bottom: 20px;
+  }
 }
+
diff --git a/fonts/.DS_Store b/fonts/.DS_Store
diff --git a/scss/.DS_Store b/scss/.DS_Store