Hello readers, today in this blog I will create a Day-Night Mode On Card using only HTML & CSS. Earlier I have shared a How to Custom Radio Button using HTML & CSS now this I will build day-night mode.
In simple language, day mode means bright color like white color and night means dark color like black color. The main motive of day-night mode is to make user eyes healthier while they are using mobile or computer.
As you can see on the given image which is given on the webpage. This is the real image that I’m going to build in this program [Day Night Mode on Card], the left part of the image is “Day Mode” and the right part is the “Night Mode”. Basically, at first, there is only one profile card in day mode condition, when we clicked the toggle this image transform into night mode. As you can see that toggle is placed on the top right side of the image.
If you want to see the real concept of this program [CSS Day Night Mode], I have provided a full video tutorial below. You will get all the concepts of this program after watching the video.
Full Video Tutorial of Day Night Mode using only HTML & CSS
As you have seen on the video tutorial of this program [Custom Checkbox Day Night Mode Toggle], In first there is only one card on the screen with one beautiful image and her name, a job some other details, and one button on the left side. On the button side, there are some social media icons with hover animation.
The main part of this program’s toggle button is placed on the top left side of this profile card. When I clicked on that toggle button its changed into day to night mode, To make this program [Day Night Mode], I have used the HTML checkbox only and for all the animation I have used CSS.
For those Friends who are feeling difficulty creating this program [Day Night Mode with HTML & CSS], I have provided the full source code below.
You Might Like This:
Day-Night Mode [Source Code]
To copy-paste the given code, you need to file on is HTML file and another is a CSS file. After creating these two files you can copy-paste all the code which are given below. You can also download all source code from the given “Download Button”.
<!DOCTYPE html>
<!-- Designined by CodingLab | www.youtube.com/codinglabyt -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title> Day Night Toggle | CodingLab </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="container">
<input type="checkbox" id="switch">
<div class="outer">
<div class="content">
<label for="switch">
<span class="toggle">
<span class="circle"></span>
</span>
</label>
<div class="image-box">
<img src="img-1.jpg" alt="">
</div>
<div class="details">
<div class="name">Amelia Fern</div>
<div class="job">Full Stack Developer</div>
<div class="buttons">
<p>Lorem dolor sit amet, consectetur adipisicing elit. Ab officiis, harum minus aliquam atque aliquid enim commodi accusantium ut maiores dolorum nulla?</p>
<button>Read More</button>
</div>
</div>
<div class="media-icons">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-linkedin-in"></i>
</div>
</div>
</div>
</div>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
.outer{
height: 100vh;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background: #f2f2f2;
}
#switch:checked ~ .outer{
background: #092c3e;
}
.content{
display: flex;
width: 570px;
padding: 15px;
background: #fff;
border-radius: 12px;
position: relative;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
#switch:checked ~ .outer .content{
background: #092c3e;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
}
.outer .toggle{
position: absolute;
width: 40px;
height: 20px;
border-radius: 20px;
background: #092c3e;
right: 15px;
top: 13px;
display: flex;
align-items: center;
cursor: pointer;
}
#switch:checked ~ .outer .toggle{
background: #fff;
}
.outer .toggle .circle{
margin-left: 3px;
height: 16px;
width: 16px;
border-radius: 50%;
background: #fff;
transition: all 0.3s ease;
}
#switch:checked ~ .outer .circle{
margin-left: 22px;
background: #092c3e;
}
.image-box {
height: 232px;
width: 200px;
border-radius: 12px;
padding: 3px;
background: #092c3e;
}
.image-box img {
height: 100%;
width: 100%;
object-fit: cover;
border: 3px solid #fff;
border-radius: 12px;
}
#switch:checked ~ .outer .image-box{
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.15);
}
#switch:checked ~ .outer .image-box img{
border-color: transparent;
}
.content .details{
width: 58%;
margin: 10px 0 20px 20px;
color: #092c3e;
}
#switch:checked ~ .outer .details{
transition: 0.1s;
color: #fff;
}
.content .details .name{
font-size: 23px;
font-weight: 600;
}
.content .details .job{
font-size: 18px;
font-weight: 500;
}
.content .details p{
font-size: 15px;
margin-top: 6px;
}
.content button{
display: block;
margin-top: 16px;
outline: none;
border: none;
font-size: 17px;
padding: 6px 14px;
border-radius: 6px;
color: #fff;
cursor: pointer;
background: #092c3e;
transition: all 0.3s ease;
}
.content button:hover{
transform: scale(0.97);
}
#switch:checked ~ .outer button{
background: #fff;
color: #092c3e;
}
.media-icons{
position: absolute;
bottom: 16px;
right: 15px;
margin-top: 12px;
justify-content: flex-end;
}
.media-icons i{
display: inline-flex;
margin: 0 4px;
font-size: 16px;
color: #092c3e;
opacity: 0.7;
cursor: pointer;
}
.media-icons i:hover{
opacity: 1;
}
#switch:checked ~ .outer i{
color: #fff;
opacity: 1;
}
#switch{
display: none;
}
If you face any difficulties while creating your Profile Card with Day Night Mode or your code is not working as expected, you can download the source code files for this Profile Car with Dark Light Mode for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.
