diff --git a/components/headers/Header1.jsx b/components/headers/Header1.jsx index 7585525..d265692 100644 --- a/components/headers/Header1.jsx +++ b/components/headers/Header1.jsx @@ -46,21 +46,23 @@ export default function Header1() { -
-
- - GET A QUOTE - -
-
-
openMobilemenu()} - className="sidebar__toggle" - > - -
-
-
+
+
+ + GET A QUOTE + + +
+
+
openMobilemenu()} className="sidebar__toggle"> + +
+
+
+ diff --git a/public/assets/css/main.css b/public/assets/css/main.css index d186c8f..69bf635 100644 --- a/public/assets/css/main.css +++ b/public/assets/css/main.css @@ -21,96 +21,68 @@ Version: 1.0.0 --bg: #1e2023; --box-shadow: 0px 1px 14px 0px rgba(0, 0, 0, 0.13); } - .theme-btn { background-color: var(--theme); color: var(--white); - display: inline-block; + display: inline-flex; + align-items: center; + justify-content: center; font-size: 16px; font-weight: 700; - padding: 24px 50px; + padding: 16px 36px; border-radius: 0; text-transform: uppercase; - -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; position: relative; z-index: 1; + white-space: nowrap; + gap: 10px; /* Spacing between text and icon */ line-height: 1; } -.theme-btn::before { - content: ""; - background-color: var(--header); - width: 0; - height: 50%; - position: absolute; - top: 0; - left: 0; - -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); - transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); - z-index: -1; + +.theme-btn i { + font-size: 16px; + line-height: 1; + display: inline-block; } + +.theme-btn:hover { + color: var(--white); +} + +.theme-btn::before, .theme-btn::after { content: ""; background-color: var(--header); width: 0; height: 50%; position: absolute; + z-index: -1; + transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); +} + +.theme-btn::before { + top: 0; + left: 0; +} + +.theme-btn::after { bottom: 0; right: 0; - -webkit-transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); - transition: all 0.3s cubic-bezier(0.785, 0.135, 0.15, 0.86); - z-index: -1; -} -.theme-btn i { - margin-left: 10px; -} -.theme-btn:hover { - color: var(--white); } + .theme-btn:hover::before, .theme-btn:hover::after { width: 100%; } -.theme-btn.bg-white { - background-color: var(--white); - color: var(--header); -} -.theme-btn.bg-white:hover { - color: var(--white); -} + @media (max-width: 767px) { .theme-btn { - padding: 20px 32px; - } -} -@media (max-width: 575px) { - .theme-btn { - padding: 18px 30px; + padding: 14px 28px; font-size: 14px; } } -.link-btn { - display: inline-block; - color: var(--text); - text-align: center; - font-family: "DM Sans"; - font-size: 16px; - font-weight: 600; - text-transform: capitalize; -} -.link-btn i { - margin-left: 10px; - transform: rotate(-40deg); - transition: all 0.4s ease-in-out; -} -.link-btn:hover { - color: var(--theme); -} -.link-btn:hover i { - margin-left: 10px; - transform: rotate(0); -} /* -------------------------------------------- Template Default Fonts & Fonts Styles diff --git a/public/assets/scss/_header.scss b/public/assets/scss/_header.scss index 41028e2..ce2b75a 100644 --- a/public/assets/scss/_header.scss +++ b/public/assets/scss/_header.scss @@ -465,7 +465,7 @@ position: relative; list-style: none; display: inline-block; - margin-inline-end: 50px; + margin-inline-end: 23px; &:last-child { margin-inline-end: 0;