From b81514830eefd0ff841ce19fa64289d951873816 Mon Sep 17 00:00:00 2001 From: Hrishabh Jain Date: Mon, 4 Oct 2021 00:16:44 +0530 Subject: [PATCH 1/2] Add animations to button and remove hamburger icon --- css/style.css | 77 ++++++++++++++++++++++++++++++++++++++------------- index.html | 4 +-- 2 files changed, 60 insertions(+), 21 deletions(-) diff --git a/css/style.css b/css/style.css index 2658d90..c50078b 100644 --- a/css/style.css +++ b/css/style.css @@ -12073,14 +12073,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, @@ -12167,7 +12187,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) { @@ -12366,21 +12395,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) { @@ -12661,9 +12693,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 { @@ -14864,7 +14897,7 @@ License Terms .blog-entry { background: none; font-size: 16px; padding: 0 20px; - background: #ffc107; + background: #007bff; color: #fff; transition: 0.3s; border-radius: 50px; @@ -14872,7 +14905,10 @@ License Terms .blog-entry { } #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 { @@ -14888,7 +14924,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; @@ -14900,7 +14936,7 @@ License Terms .blog-entry { } #footer .social-links a:hover { - background: #ffce3a; + background: #89c8ff; text-decoration: none; } @@ -14913,7 +14949,7 @@ License Terms .blog-entry { font-size: 18px; border: none; outline: none; - background-color: #ffc107; + background-color: #007bff; color: white; cursor: pointer; padding: 15px; @@ -14921,7 +14957,10 @@ License Terms .blog-entry { } #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 */ @@ -14958,7 +14997,7 @@ License Terms .blog-entry { display: inline-block; cursor: pointer; } - +/* .bar1, .bar2, .bar3 { @@ -14981,7 +15020,7 @@ License Terms .blog-entry { .change .bar3 { -webkit-transform: rotate(45deg) translate(-8px, -8px); transform: rotate(45deg) translate(-8px, -8px); -} +} */ .form-group { display: flex; diff --git a/index.html b/index.html index a3e5578..e3b28c5 100644 --- a/index.html +++ b/index.html @@ -42,9 +42,9 @@
-
+