From b28f7d20386d3211135d30fe6dfef6c7eb6b607a Mon Sep 17 00:00:00 2001 From: Mayukh-Mandal2005 <135952646+Mayukh-Mandal2005@users.noreply.github.com> Date: Sat, 5 Oct 2024 18:02:48 +0530 Subject: [PATCH 1/3] Updated the Navbar UI as asked by the owner with round corners, underline with glowing effect and added much more features --- Css-files/navbarstyles.css | 167 +++++++++++++++++++++++++++++++++++++ Html-files/about.html | 65 +++++++++++---- Html-files/cart.html | 53 +++++++++--- Html-files/contact.html | 63 +++++++++----- Html-files/menu.html | 56 +++++++++++-- Html-files/services.html | 49 ++++++++--- index.html | 81 +++++++++++++++--- style.css | 10 ++- 8 files changed, 459 insertions(+), 85 deletions(-) create mode 100644 Css-files/navbarstyles.css diff --git a/Css-files/navbarstyles.css b/Css-files/navbarstyles.css new file mode 100644 index 00000000..5f22fd7c --- /dev/null +++ b/Css-files/navbarstyles.css @@ -0,0 +1,167 @@ +body { + font-family: 'Philosopher', sans-serif; + margin: 0; + padding: 0; +} + +/* Navbar styles */ +.navbar { + background-color: rgba(255, 255, 245, 0.8); + padding: 1rem; + display: flex; + width: 100%; + justify-content: space-between; + margin: 10px 1px!important; + border-radius: 20px; +} + +.nav-right { + margin-left: auto; + /* Pushes the login/signup to the right side */ + display: flex; + gap: 15px; + /* Space between login and signup */ +} + +.ms-auto { + margin-left: auto; + /* Pushes to the right */ +} + +.navbar-brand { + font-size: 1.5rem; + color: black; + font-weight: bold; + transition: transform 0.3s ease; +} + +.navbar-brand:hover { + transform: scale(1.6); +} + +.navbar-nav .nav-item { + margin-right: 15px; +} + +.nav-link { + color: black; + font-size: 1rem; + font-family: var(--ff-philosopher); + text-decoration: none; + /* Remove default underline */ + position: relative; + transition: all 0.3s ease; +} + +.nav-item.dropdown .nav-link { + text-decoration: none; + /* No underline for dropdown toggle */ +} + +.nav-link:hover { + text-decoration: none; + /* Prevent default underline on hover */ +} + +.nav-link::after { + content: ''; + position: absolute; + left: 0; + bottom: -5px; + width: 0%; + height: 3.5px; + /* Thicker underline */ + background: transparent; + transition: all 0.3s ease-in-out; + box-shadow: + 0 0 30px rgba(255, 159, 128, 1), + /* Initial glow effect with bright peach color */ + 0 0 60px rgba(255, 159, 128, 1); + /* Increased glow effect */ +} + +.nav-link:hover::after { + background: rgba(243, 187, 183, 1); + width: 100%; + box-shadow: 0 0 20px rgba(243, 187, 183, 1); +} + +.nav-btn { + background: none; + border: none; + font-size: 1rem; + cursor: pointer; + color: black; + text-decoration: none; + position: relative; +} + +.nav-btn:hover { + color: #d2691e; +} + +.nav-btn::after { + content: ''; + position: absolute; + left: 0; + bottom: -5px; + width: 0%; + height: 2px; + background: #ffb6c1; + /* Adjust to match background color */ + transition: all 0.3s ease-in-out; + box-shadow: 0 20px #ffb6c1; + /* Glow effect */ +} + +.nav-link:hover::after { + background: rgba(255, 159, 128, 1); + width: 100%; + box-shadow: + 0 0 25px rgba(255, 159, 128, 1), + 0 0 50px rgba(255, 159, 128, 1); + /* Glow effect with bright peach color */ +} + +.nav-link:hover, +.nav-btn:hover { + color: hwb(327 21% 3%) !important; +} + +.dropdown-menu { + background-color: #ffe5e5; + border: none; +} + +.dropdown-item { + /*color: black;*/ + font-family: var(--ff-philosopher); +} + +.dropdown-item:hover { + background-color: #f0c0a0; + color: #d2691e; +} + +/* Mobile Styles */ +@media (max-width: 768px) { + .navbar-brand { + margin-left: 10px; + } + + .navbar-nav { + text-align: center; + } + + .navbar-toggler { + border: none; + } + + .navbar-toggler-icon { + color: black; + } + + .nav-item { + margin-bottom: 1rem; + } +} \ No newline at end of file diff --git a/Html-files/about.html b/Html-files/about.html index 9e197a57..ce999071 100644 --- a/Html-files/about.html +++ b/Html-files/about.html @@ -8,7 +8,8 @@ - + + @@ -228,24 +229,52 @@
-
-
- -
- -
-

About Retro

+
+
+
+ + + +
+

About Retro

+
+
+ diff --git a/Html-files/cart.html b/Html-files/cart.html index b0f76487..5bbb2488 100644 --- a/Html-files/cart.html +++ b/Html-files/cart.html @@ -7,6 +7,7 @@ + @@ -257,7 +258,7 @@
-
+
@@ -318,18 +320,43 @@

C A R T

-
-
- -
+
+
+ +
+
+

C A R T

diff --git a/Html-files/contact.html b/Html-files/contact.html index b22941ec..140d29fd 100644 --- a/Html-files/contact.html +++ b/Html-files/contact.html @@ -5,6 +5,7 @@ Retro + - features-branch @@ -509,7 +509,7 @@ color: #181e20 !important; } - main + @@ -540,21 +540,45 @@
-
- - -
+
+
+ +
+
+ + - features-branch +


+


@@ -751,7 +776,7 @@

Feel Free placeholder=" Enter your Phone number" required="required" data-error=" Phone number is required."> - main +


diff --git a/Html-files/menu.html b/Html-files/menu.html index ba7e2623..4a359eba 100644 --- a/Html-files/menu.html +++ b/Html-files/menu.html @@ -5,6 +5,8 @@ Retro + + @@ -271,17 +273,53 @@
-
+
+

O U R   C O L L E C T I O N

diff --git a/Html-files/services.html b/Html-files/services.html index 0dcb4c38..33df61b4 100644 --- a/Html-files/services.html +++ b/Html-files/services.html @@ -9,7 +9,7 @@ href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" /> - + @@ -211,19 +211,44 @@
-
-
-