Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

improving the dark mode functionality on home page #871

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
+440 −93
Open

improving the dark mode functionality on home page #871

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1b15db7
improving the dark mode text visibility
Jan 13, 2025
ecbcb3e
dark-mode changes
Jan 13, 2025
28c526d
improving overall dark-mode functionality
Jan 13, 2025
599e19a
changed the background image for dark mode
Jan 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
145 changes: 109 additions & 36 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -432,7 +432,7 @@
<!--Navbar Start-->
<nav class="navbar navbar-expand-lg fixed-top" id="top">
<div class="container-fluid">
<a class="navbar-brand" href="#" style="font-family: var(--ff-philosopher); color: black;">
<a class="navbar-brand" href="#" style="font-family: var(--ff-philosopher);">
<b>Retro</b>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent"
Expand All @@ -443,32 +443,32 @@
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="#"
style="color: black; font-family: var(--ff-philosopher);">Home</a>
style=" font-family: var(--ff-philosopher);">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Html-files/about.html"
style="font-family: var(--ff-philosopher); color: black;">About Us</a>
style="font-family: var(--ff-philosopher); ">About Us</a>
</li>

<li class="nav-item">
<a class="nav-link" href="Html-files/menu.html"
style="font-family: var(--ff-philosopher);color: black;">Collections</a>
style="font-family: var(--ff-philosopher);">Collections</a>
</li>

<li class="nav-item">
<a class="nav-link" href="Html-files/services.html"
style="font-family: var(--ff-philosopher);color: black;">Services</a>
style="font-family: var(--ff-philosopher);">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="Html-files/blog.html" style="font-family: var(--ff-philosopher); color: black">Blog</a>
<a class="nav-link" href="Html-files/blog.html" style="font-family: var(--ff-philosopher);">Blog</a>
</li>

<li class="nav-item">
<a class="nav-link" href="Html-files/contact.html" style="font-family: var(--ff-philosopher); color: black">Contact Us</a>
<a class="nav-link" href="Html-files/contact.html" style="font-family: var(--ff-philosopher); ">Contact Us</a>
</li>

<li class="nav-item">
<a class="nav-link" href="#" style="font-family: var(--ff-philosopher); color: black;">More</a>
<a class="nav-link" href="#" style="font-family: var(--ff-philosopher); ">More</a>
</li>

</ul>
Expand All @@ -477,14 +477,14 @@
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" onclick="redirectLogin()"
style="color: black; font-family: var(--ff-philosopher);">Login</a>
style=" font-family: var(--ff-philosopher);">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" onclick="redirectSignup()"
style="color: black; font-family: var(--ff-philosopher);">Signup</a>
style=" font-family: var(--ff-philosopher);">Signup</a>
</li>
<li class="nav-item" style="list-style-type: none;">
<a class="nav-link" href="Html-files/cart.html" style="color: black;"><i
<a class="nav-link" href="Html-files/cart.html" ><i
class="fa-solid fa-cart-shopping"></i>Cart</a>
</li>
</ul>
Expand All @@ -510,8 +510,25 @@
.navbar .nav-link:hover {
color: #007bff;
}


.dark-mode .items{
background:linear-gradient(to bottom,rgb(165, 98, 109),rgba(238, 141, 157, 0.856));

}
.dark-mode .items h3{
color:white;
}
.items h3{
color: hsl(203, 30%, 26%);
}
.items p{
color: hsl(208, 7%,46%);
}
.dark-mode .items p{
color:white;
}
.dark-mode .box{
background:linear-gradient(to bottom,rgb(165, 98, 109),rgba(238, 141, 157, 0.856));
}
.dark-mode {
background-color: #343a40;
color: white;
Expand Down Expand Up @@ -554,14 +571,16 @@

.dark-mode #darkModeToggle:hover {
background-color: #6c757d;
;

}

.dark-mode #darkModeToggle .fas {
color: #f8f9fa;
}


.dark-mode #navbar a{
color:white;
}
.fas {
transition: color 0.3s;
}
Expand Down Expand Up @@ -717,7 +736,17 @@ <h2 class="h-secondary center" style="font-family: var(--ff-philosopher);">Whims
</div>

</section>

<style>
.dark-mode .service_container{
background: linear-gradient(to right,rgb(151, 66, 91),rgb(231, 154, 167),rgb(151, 69, 100));
}
.dark-mode .service p{
color:black;
}
.dark-mode .menu_container {
background: linear-gradient(to right,rgb(151, 66, 91),rgb(231, 154, 167),rgb(151, 69, 100));;
}
</style>
<section class="service_container">
<div class="service">
<!-- Text Column - 60% Width -->
Expand Down Expand Up @@ -757,43 +786,43 @@ <h1 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">"Get r
<div class="menu_items" style="overflow-x: auto;">
<div class="items" data-aos="zoom-in">
<img src="https://www.mumbailive.com/images/media/images/thali_1635502261446jpeg?bg=08394e&crop=5328%2C2991.157894736842%2C0%2C504.42105263157896&fit=crop&fm=webp&h=432.2807017543859&height=4000&w=770&width=5328">
<h3 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Indian Cuisine</h3>
<p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Enjoy a thali full of traditional flavours and memories</p>
<h3 style="font-family: var(--ff-philosopher);">Indian Cuisine</h3>
<p style="font-family: var(--ff-poppins);">Enjoy a thali full of traditional flavours and memories</p>
</div>
<div class="items" data-aos="zoom-in">
<img src="https://imgmediagumlet.lbb.in/media/2018/04/5acf822418a23c0efc21496b_1523548708582.jpg?fm=webp&w=750&h=500&dpr=1">
<h3 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Dessert</h3>
<p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Complete your meal with mouth watering delicacies</p>
<h3 style="font-family: var(--ff-philosopher);">Dessert</h3>
<p style="font-family: var(--ff-poppins);">Complete your meal with mouth watering delicacies</p>
</div>
<div class="items" data-aos="zoom-in">
<img src="https://imgmediagumlet.lbb.in/media/2019/07/5d27585dc18a2b0ed5739eb5_1562859613517.jpg?fm=webp&w=750&h=500&dpr=1">
<h3 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Snacks</h3>
<p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Have a lighter version with delicious flavours</p>
<h3 style="font-family: var(--ff-philosopher);">Snacks</h3>
<p style="font-family: var(--ff-poppins);">Have a lighter version with delicious flavours</p>
</div>
<div class="items" data-aos="zoom-in">
<img src="https://static.india.com/wp-content/uploads/2017/04/Juices-Delhi.jpg">
<h3 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Juices</h3>
<p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Boost yourself up with fruit extracts</p>
<h3 style="font-family: var(--ff-philosopher);">Juices</h3>
<p style="font-family: var(--ff-poppins);">Boost yourself up with fruit extracts</p>
</div>
<div class="items" data-aos="zoom-in">
<img src="https://media.istockphoto.com/id/1133151212/photo/japanese-dumplings-gyoza-with-pork-meat-and-vegetables.jpg?s=612x612&w=0&k=20&c=vC6GTUDGK6dD5_QHvY1V7fVUdPx-z4TG73DUACR_L5s=">
<h3 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Chinese Cuisine</h3>
<p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Indulge in the flavours of the Chinese Delights</p>
<h3 style="font-family: var(--ff-philosopher);">Chinese Cuisine</h3>
<p style="font-family: var(--ff-poppins);">Indulge in the flavours of the Chinese Delights</p>
</div>
<div class="items" data-aos="zoom-in">
<img src="https://i.pinimg.com/236x/80/73/9f/80739fa37818b4739f6667358517176c.jpg">
<h3 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Mocktails</h3>
<p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Enjoy refreshing mocktails with a subtle kick of booze</p>
<h3 style="font-family: var(--ff-philosopher);">Mocktails</h3>
<p style="font-family: var(--ff-poppins);">Enjoy refreshing mocktails with a subtle kick of booze</p>
</div>
<div class="items"data-aos="zoom-in">
<img src="https://pbs.twimg.com/media/E_g-7ziWQAU685E.jpg">
<h3 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Italian Cuisine</h3>
<p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Taste some Authentic Italian Culinary Excellence</p>
<h3 style="font-family: var(--ff-philosopher);">Italian Cuisine</h3>
<p style="font-family: var(--ff-poppins);">Taste some Authentic Italian Culinary Excellence</p>
</div>
<div class="items"data-aos="zoom-in">
<img src="https://media.licdn.com/dms/image/D4D12AQE64GYpirojgA/article-cover_image-shrink_720_1280/0/1678769835024?e=2147483647&v=beta&t=U2YS-nsn9CnwpcglWkS77XgbxIir0FTtBcpSthp9h8g">
<h3 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Beverages</h3>
<p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);">Grab the cup of joy in a world of chaos</p>
<h3 style="font-family: var(--ff-philosopher);">Beverages</h3>
<p style="font-family: var(--ff-poppins);">Grab the cup of joy in a world of chaos</p>
</div>
</div>
</section>
Expand Down Expand Up @@ -1013,9 +1042,21 @@ <h2 class="accordion-header" id="headingSix">
--ff-philosopher: "Philosopher", sans-serif;
--ff-poppins: "Poppins", sans-serif;
}
.dark-mode .hello{
color:rgb(86, 21, 21);
}
.dark-mode .faq-container{
background: linear-gradient(to bottom,rgb(125, 62, 73),rgb(240, 142, 158));
}
.dark-mode .faq-question{
color:rgb(86, 21, 21);
}
.dark-mode .faq-answer{
color:rgb(86, 21, 21);
}
</style>

<h2 style="display: flex; justify-content: center; align-items: center; margin-top: 50px; font-weight: 500;">Frequently Asked Questions</h2>
<h2 class ="hello" style="display: flex; justify-content: center; align-items: center; margin-top: 50px; font-weight: 500;">Frequently Asked Questions</h2>
<div class="faq-container" style="padding: 50px;margin-top: 50px;">
<div class="faq-item" style="background-color: #f5dddb;">
<div class="faq-question">
Expand Down Expand Up @@ -1111,12 +1152,28 @@ <h2 style="display: flex; justify-content: center; align-items: center; margin-t
<!-- -------------------------------------------FAQ ENDED -->

</section>

<style>
.dark-mode .app_download{
background: linear-gradient(to left,rgb(156, 77, 90),rgb(248, 141, 159));
}
.app_download p{
color: hsl(208, 7%,46%);
}
.dark-mode .app_download p{
color:rgba(30, 15, 15, 0.868);
}
.dark-mode .footer {
background:linear-gradient(to left,rgb(156, 77, 90),rgb(248, 141, 159));
}
.dark-mode .foot-panel2{
background: linear-gradient(to left,rgb(156, 77, 90),rgb(248, 141, 159));;
}
</style>
<div class="app_download" style="background-color: hsl(20, 43%, 93%);">
<h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Free Delivery!</h4>
<h2 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Download the App now!</h2>
<br>
<p style="font-family: var(--ff-poppins);color: hsl(208, 7%,46%);text-align:left;">For best discounts and free delivery download the app now from your Google Play Store or App Store.</p>
<p style="font-family: var(--ff-poppins);text-align:left;">For best discounts and free delivery download the app now from your Google Play Store or App Store.</p>
<a href="https://play.google.com/store/games?device=windows"><img src="./Images/get_it_on_google_play_store.png" class="app-download-img"
alt="Get it on Google Play Store"></a>
<a href="https://www.apple.com/in/app-store/"><img src="./Images/download-on-the-app-store.png" class="app-download-img"
Expand Down Expand Up @@ -1198,7 +1255,23 @@ <h4 style="font-family: var(--ff-philosopher);color: hsl(203, 30%, 26%);">Follow
<a class="fa-brands fa-snapchat" href="https://www.snapchat.com" ></a>

</div>
<p style="font-family: var(--ff-philosopher);background-color: hsl(20, 43%, 93%);color: hsl(203, 30%, 26%);margin-bottom:0;">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
<style>
.para{
color: hsl(203, 30%, 26%);
}
.dark-mode .para
{
background: linear-gradient(to left,rgb(156, 77, 90),rgb(248, 141, 159));
color:black;
}
.copyright a{
color:black;
}
.dark-mode .copyright{
background:linear-gradient(to left,rgb(156, 77, 90),rgb(248, 141, 159));
}
</style>
<p class="para"style="font-family: var(--ff-philosopher);background-color: hsl(20, 43%, 93%);margin-bottom:0;">Stay connected with us on social media for the latest updates, latest collection, and vintage adventures.
</p>
<div class="copyright" style="font-family: var(--ff-philosopher);background-color: hsl(20, 43%, 93%);color: black;">

Expand Down
Loading