Skip to content

Commit

Permalink
added dark mode
Browse files Browse the repository at this point in the history
  • Loading branch information
@AftabMankapure
AftabMankapure committed Feb 13, 2024
1 parent c787bb0 commit dc08b23
Show file tree
Hide file tree
Showing 2 changed files with 90 additions and 12 deletions.
53 changes: 53 additions & 0 deletions css/mode.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
:root{
--title-color: black;

}
.title{
color: var(--title-color);
}
.dark-class {
color: white;
background-color: rgb(12, 10, 10);
--title-color: white;
}

.toggleButton {
width: 5rem;
height: 2rem;
position: relative;
display: inline-block;
}
.toggleButton input {
opacity: 0;
}
.roundButton {
background-color: black;
top: 0;
left: 0;
position: absolute;
right: 0;
bottom: 0;
cursor: pointer;
}
.roundButton:before {
left: 0;
bottom: 0;
position: absolute;
content: "";
background-color: grey;
transition: 1s;
height: 2rem;
width: 2rem;
}
input:checked+.roundButton {
background-color: white;
}
input:checked+.roundButton:before {
transform: translateX(3rem);
}
.roundButton.circle {
border-radius: 2rem;
}
.roundButton.circle:before {
border-radius: 50%;
}
49 changes: 37 additions & 12 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,11 @@
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Montserrat:400,500,600,700%7CPoppins:400%7CTeko:300,400" />
<link rel="stylesheet" href="css/bootstrap.css" />
<link rel="stylesheet" href="css/fonts.css" />
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js"
Integrity = "sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ=="
crossorigin = "anonymous" referrerpolicy = "no-referrer"> </script>

Check warning

Code scanning / CodeQL

Inclusion of functionality from an untrusted source Medium

Script loaded from content delivery network with no integrity check.
<link rel="stylesheet" href="css/style.css" />
<link rel="stylesheet" href="css/mode.css">
<style>
.ie-panel {
display: none;
Expand All @@ -47,6 +51,11 @@
html.lt-ie-10 .ie-panel {
display: block;
}
body{
color: black;
background-color: rgb(241, 241, 241);
}

</style>
</head>

Expand Down Expand Up @@ -108,6 +117,12 @@
<li class="rd-nav-item">
<a class="rd-nav-link" href="./pages/blogs/blog.html">Blogs</a>
</li>
<li class="rd-nav-item">
<label class = "toggleButton">
<input type = "checkbox" id = "toggle">
<div class = "roundButton circle" ></div>
</label>
</li>

</ul>
</div>
Expand Down Expand Up @@ -210,7 +225,7 @@ <h2 class="oh font-weight-light" data-caption-animate="slideInUp" data-caption-d
<div class="swiper-pagination"></div>
</section>
<!-- Section Box Categories-->
<section class="section section-lg section-top-1 bg-gray-4">
<section class="section section-lg section-top-1 ">
<div class="container offset-negative-1">
<div class="box-categories cta-box-wrap">
<div class="box-categories-content">
Expand Down Expand Up @@ -248,21 +263,21 @@ <h5 class="box-categories-title">Beach Holidays</h5>
</div>
</div>
</div>
<a class="link-classic wow fadeInUp" href="./pages/Filter/filter.html">Other Tours<span></span
<a class=" title link-classic wow fadeInUp " href="./pages/Filter/filter.html">Other Tours<span></span
></a>
<!-- Owl Carousel-->
</div>
</section>
<!-- Discover New Horizons-->
<section class="section section-sm section-first bg-default text-md-left">
<sectbg-gray-4ion class="section section-sm section-first bg-default text-md-left">
<div class="container">
<div class="row row-50 align-items-center justify-content-center justify-content-xl-between">
<div class="col-lg-6 text-center wow fadeInUp">
<img src="images/r0iSDF.jpg" alt="" width="556" height="382" />
</div>
<div class="col-lg-6 wow fadeInRight" data-wow-delay=".1s">
<div class="box-width-lg-470">
<h3>Discover New Horizons</h3>
<h3 class="title">Discover New Horizons</h3>
<!-- Bootstrap tabs-->
<div class="tabs-custom tabs-horizontal tabs-line tabs-line-big tabs-line-style-2 text-center text-md-left" id="tabs-7">
<!-- Nav tabs-->
Expand All @@ -285,7 +300,7 @@ <h3>Discover New Horizons</h3>
<!-- Tab panes-->
<div class="tab-content">
<div class="tab-pane fade show active" id="tabs-7-1">
<p style="color: rgb(39, 39, 63);">
<p style="color: rgb(39, 39, 63);" class="title">
Welcome to FirstSpot, your premier travel companion dedicated to crafting unforgettable journeys. At FirstSpot, we are driven by the passion for transforming each travel experience into a seamless blend of discovery and joy. Our commitment lies in being your comprehensive travel planning hub, offering a range of services that cater to every facet of your travel needs.
</p>
<div class="group-md group-middle">
Expand All @@ -301,7 +316,7 @@ <h3>Discover New Horizons</h3>
</div>
</div>
<div class="tab-pane fade" id="tabs-7-2">
<p style="color: rgb(39, 39, 63)">
<p style="color: rgb(39, 39, 63)" class="title">
Choose FirstSpot for an unparalleled travel experience. Our innovative matching system ensures personalized tours tailored to your preferences. With a diverse selection of handpicked destinations, highly qualified tour managers, and 24/7 support, we guarantee a seamless and enjoyable journey. Enjoy premium accommodations and our commitment to the best price, promising value for your adventure. Trust FirstSpot as your go-to travel companion for a memorable and stress-free exploration of the world.
</p>
<div class="group-md group-middle">
Expand All @@ -317,7 +332,7 @@ <h3>Discover New Horizons</h3>
</div>
</div>
<div class="tab-pane fade" id="tabs-7-3">
<p style="color: rgb(39,39,63)">
<p style="color: rgb(39,39,63)" class="title">
At FirstSpot, our mission is to be your premier travel facilitator, providing you with curated journeys that align seamlessly with your desires. From meticulously handpicked destinations to expertly crafted itineraries, we're dedicated to delivering more than just a service; we're your gateway to hassle-free, tailored adventures. FirstSpot is committed to providing a comprehensive suite of travel solutions, making every trip a fulfilling and enjoyable exploration. Join us as we pave the way for unforgettable travel experiences tailored to your needs.
</p>
<div class="group-md group-middle">
Expand All @@ -342,7 +357,7 @@ <h3>Discover New Horizons</h3>
<!-- Our Services-->
<section class="section section-sm">
<div class="container">
<h3>Our Services</h3>
<h3 class="title">Our Services</h3>
<div class="row row-30">
<div class="col-sm-6 col-lg-4">
<article class="box-icon-classic">
Expand Down Expand Up @@ -454,9 +469,9 @@ <h5 class="box-icon-classic-title">
</div>
</section>
<!-- Hot tours-->
<section class="section section-sm bg-default">
<section class="section section-sm ">
<div class="container">
<h3 class="oh-desktop">
<h3 class="oh-desktop title">
<span class="d-inline-block wow slideInDown">Hot Tours</span>
</h3>
<div class="row row-sm row-40 row-md-50">
Expand Down Expand Up @@ -557,7 +572,7 @@ <h5 class="product-big-title">
<!-- Different People-->
<section class="section section-sm" id="ourTeam">
<div class="container">
<h3 class="title-block find-car oh">
<h3 class=" title find-car oh">
<span class="d-inline-block wow slideInUp"
>Our Team</span
>
Expand Down Expand Up @@ -620,7 +635,7 @@ <h2 class="heading-2 oh font-weight-normal wow slideInDown">
</section>
<!-- Instagrram wondertour-->
<section
class="section section-sm section-top-0 section-fluid section-relative bg-gray-4"
class="section section-sm section-top-0 section-fluid section-relative "
>
<div class="container-fluid" id="ourGallery">
<h6 class="gallery-title">Gallery</h6>
Expand Down Expand Up @@ -849,6 +864,16 @@ <h6 class="text-spacing-100 text-uppercase">Quick links</h6>
</footer>
</div>
<!-- Global Mailform Output-->
<script>
// If the input checkbox is checked, activate dark mode by adding dark-class to the body
$('#toggle').change(() => {
if ($('#toggle').is(":checked")) {
$("body").addClass("dark-class");
} else {
$("body").removeClass("dark-class")
}
})
</script>
<div class="snackbars" id="form-output-global"></div>
<!-- Javascript-->
<script src="js/core.min.js"></script>
Expand Down

0 comments on commit dc08b23

Please sign in to comment.