From eff3339cea85ac15ffbeaa25cb92fb33800c5d4f Mon Sep 17 00:00:00 2001 From: sanikaaher-19 Date: Wed, 2 Oct 2024 13:09:48 +0530 Subject: [PATCH 1/7] Redesign navbar of website to visible it clear --- .vscode/settings.json | 2 ++ style.css | 28 ++++++++++++++++------------ 2 files changed, 18 insertions(+), 12 deletions(-) create mode 100644 .vscode/settings.json diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..7a73a41b --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,2 @@ +{ +} \ No newline at end of file diff --git a/style.css b/style.css index 148eadd4..cdbb742f 100644 --- a/style.css +++ b/style.css @@ -15,25 +15,29 @@ body { } .navbar { - padding: 8px 0px; - height: 60px; - transition: background-color 0.3s, backdrop-filter 0.3s, color 0.3s; /* Added transitions for smooth color change */ - backdrop-filter: blur(0); /* Initially no blur */ + padding: fixed; + top: 0; + width: 100%; + z-index: 1030; + padding: 15px 0; + background-color: rgba(245, 190, 190, 0.7); + backdrop-filter: blur(8px); + transition: background-color 0.5s ease, backdrop-filter 0.5s ease; } .navbar a { text-decoration: none; - color: white; + color: #333; font-size: 1.3rem; + transition: color 0.3s ease,border-bottom 0.3s ease; } /* Navbar link hover effect */ -.navbar a:hover, -.navbar.scrolled a:hover { - color :#fff; - border-bottom: 1px solid #fff; /* Add bottom border on hover */ - border-top: 1px solid #fff; /* Add top border on hover */ +.navbar a:hover{ + color: #fff; + border-bottom: 1px solid #fff; } -s + + .navbar.fixed-top { position: fixed; top: 0; @@ -42,7 +46,7 @@ s } .navbar.scrolled { background-color: rgb(176, 63, 63); - backdrop-filter: blur(10px); + backdrop-filter: blur(15px); color: #fff; } .intro_container { From 10e5f50c35bdcd0633a7968cd459cc144729d322 Mon Sep 17 00:00:00 2001 From: rahul-metromax Date: Wed, 2 Oct 2024 18:21:59 +0530 Subject: [PATCH 2/7] Fixed Icon Overlap and Alphabet Input Allowed in Phone Number Field --- Css-files/content.css | 4 ++++ Html-files/contact.html | 20 ++++++++++---------- 2 files changed, 14 insertions(+), 10 deletions(-) diff --git a/Css-files/content.css b/Css-files/content.css index 34109389..5f5bde27 100644 --- a/Css-files/content.css +++ b/Css-files/content.css @@ -499,6 +499,10 @@ textarea { transform: translateY(-50%); /* Center the icon vertically */ color: gray; /* Icon color */ } +.input-icon input, +.input-icon textarea { + padding-left: 30px; /* Adjust padding to create space for the icon */ +} #contactForm { display: flex; diff --git a/Html-files/contact.html b/Html-files/contact.html index 6fbb4296..1bef037d 100644 --- a/Html-files/contact.html +++ b/Html-files/contact.html @@ -320,23 +320,23 @@

Feel Free
- +
- +
- +
- +
@@ -347,8 +347,8 @@

Feel Free
-

From 786353a6841e2a9dcc46438220e45d168250f45a Mon Sep 17 00:00:00 2001 From: laxmi47 Date: Wed, 2 Oct 2024 18:34:50 +0530 Subject: [PATCH 3/7] enhanced footer icons color and size --- style.css | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/style.css b/style.css index 9d984726..00fa1bf6 100644 --- a/style.css +++ b/style.css @@ -571,17 +571,19 @@ textarea { color: brown; background-color: hsl(20, 43%, 93%); border-radius: 50px; + transform: scale(1.5); /* Increase size */ + transition: transform 0.3s ease; /* Smooth transition effect */ } -.fa-facebook:hover { - color:#3B5998; +.fa-brands.fa-facebook:hover { + color: #3B5998 !important; } -.fa-instagram:hover { - color:#D62976; +.fa-brands.fa-instagram:hover { + color: #D62976 !important; } -.fa-twitter:hover { - color:#00B6F1; +.fa-brands.fa-x-twitter:hover { + color: #181e20 !important; } #author { From 8cd9e1602c5ef118f648ce3d7642b620d61c6ab7 Mon Sep 17 00:00:00 2001 From: Raj Shekhar Date: Wed, 2 Oct 2024 19:33:53 +0530 Subject: [PATCH 4/7] Enhance Footer Social Icons with Hover Effects --- index.html | 10 +++++----- style.css | 29 ++++++++++++++++++++++++----- 2 files changed, 29 insertions(+), 10 deletions(-) diff --git a/index.html b/index.html index 96ef5fc9..601646a9 100644 --- a/index.html +++ b/index.html @@ -27,7 +27,7 @@ - + @@ -295,15 +323,19 @@

Contact Us!

-

Follow Us

+

Follow Us

-

Stay connected with us on social media for the latest updates, latest collection, and vintage adventures. + + + + + + +

+ +

Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.

-
+
© 2024 Retro . All Rights Reserved. | Retro Team

diff --git a/Html-files/contact.html b/Html-files/contact.html index 6fbb4296..de9b2275 100644 --- a/Html-files/contact.html +++ b/Html-files/contact.html @@ -178,6 +178,32 @@ 100% { transform: rotate(360deg); } +} +.social-icons a { + font-size: 1.2rem; + padding: 8px; + margin: 15px; + text-decoration: none; + color: rgb(18, 16, 16); +} + +.social-icons a:hover { + color: brown; + background-color: hsl(22, 76%, 85%); + border-radius: 10px; + transform: scale(1.5); /* Increase size */ + transition: transform 0.3s ease; /* Smooth transition effect */ +} +.fa-brands.fa-facebook:hover { + color: #3B5998 !important; +} + +.fa-brands.fa-instagram:hover { + color: #D62976 !important; +} + +.fa-brands.fa-x-twitter:hover { + color: #181e20 !important; } @@ -460,12 +486,12 @@

Contact Us!

-

Follow Us

+

Follow Us

Stay connected with us on social media for the latest updates, recipes, and foodie adventures.

diff --git a/Html-files/menu.html b/Html-files/menu.html index 59189197..1a94abb0 100644 --- a/Html-files/menu.html +++ b/Html-files/menu.html @@ -202,6 +202,33 @@ transform: rotate(360deg); } } + +.social-icons a { + font-size: 1.2rem; + padding: 8px; + margin: 15px; + text-decoration: none; + color: rgb(18, 16, 16); +} + +.social-icons a:hover { + color: brown; + background-color: hsl(22, 76%, 85%); + border-radius: 10px; + transform: scale(1.5); /* Increase size */ + transition: transform 0.3s ease; /* Smooth transition effect */ +} +.fa-brands.fa-facebook:hover { + color: #3B5998 !important; +} + +.fa-brands.fa-instagram:hover { + color: #D62976 !important; +} + +.fa-brands.fa-x-twitter:hover { + color: #181e20 !important; +} @@ -568,9 +595,12 @@

Follow Us

Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.

diff --git a/Html-files/services.html b/Html-files/services.html index 5039f699..58da5ae9 100644 --- a/Html-files/services.html +++ b/Html-files/services.html @@ -170,6 +170,32 @@ 100% { transform: rotate(360deg); } +} +.social-icons a { + font-size: 1.2rem; + padding: 8px; + margin: 15px; + text-decoration: none; + color: rgb(18, 16, 16); +} + +.social-icons a:hover { + color: brown; + background-color: hsl(22, 76%, 85%); + border-radius: 10px; + transform: scale(1.5); /* Increase size */ + transition: transform 0.3s ease; /* Smooth transition effect */ +} +.fa-brands.fa-facebook:hover { + color: #3B5998 !important; +} + +.fa-brands.fa-instagram:hover { + color: #D62976 !important; +} + +.fa-brands.fa-x-twitter:hover { + color: #181e20 !important; } @@ -397,9 +423,12 @@

Follow

Stay connected with us on social media for the latest updates, latest collection, and vintage adventures. diff --git a/style.css b/style.css index 00fa1bf6..ab53a790 100644 --- a/style.css +++ b/style.css @@ -564,13 +564,13 @@ textarea { padding: 8px; margin: 15px; text-decoration: none; - color: white; + color: rgb(18, 16, 16); } .social-icons a:hover { color: brown; - background-color: hsl(20, 43%, 93%); - border-radius: 50px; + background-color: hsl(22, 76%, 85%); + border-radius: 10px; transform: scale(1.5); /* Increase size */ transition: transform 0.3s ease; /* Smooth transition effect */ }