.png)
Day Night Mode using only HTML & CSS
In this tutorial we will build Day Night Mode using only HTML & CSS. You will learn about modern CSS including CSS grid, flexbox and responsive media queries.
Hello Viewers, today in this tutorial, you’ll learn How To Make Day Night Mode using only HTML & CSS.
This Post is about making a Day Night Mode using only HTML & CSS.
To create this project (Day Night Mode using only HTML & CSS.). First, you need to create two Files one HTML File and one is CSS File.
First, create an HTML file with the name of index.html
and paste the code given in HTML file.
<!DOCTYPE html>
<!-- Website - www.amittutorial.com.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8" />
<title>Profile Card Day Night Toggle HTML CSS | Amit Tutorial</title>
<link rel="stylesheet" href="style.css" />
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
<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="faculty2.jpg" alt="" />
</div>
<div class="details">
<div class="name">Arti Rajput</div>
<div class="job">Front End 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;
max-width: 670px;
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;
}
.outer .toggle {
position: absolute;
width: 50px;
height: 25px;
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: 5px;
height: 16px;
width: 16px;
border-radius: 50%;
background: #fff;
transition: all 0.3s ease;
}
#switch:checked ~ .outer .circle {
margin-left: 26px;
background: #092c3e;
}
.image-box {
height: 270px;
width: 250px;
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 40px;
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: 17px;
margin-top: 6px;
}
.content button {
display: block;
margin-top: 16px;
outline: none;
border: none;
font-size: 17px;
padding: 7px 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: 18px;
color: #092c3e;
opacity: 0.7;
cursor: pointer;
}
.media-icons i:hover {
opacity: 1;
}
#switch:checked ~ .outer i {
color: #fff;
opacity: 1;
}
#switch {
display: none;
}
That’s all in this post, you’ve successfully created Day Night Mode using only HTML & CSS.
If your code does not work or you’ve faced any problem then comment down your problem.
If you’re feeling difficult to understand what I am saying in this post.You can watch a full video tutorial on this project(Day Night Mode using only HTML & CSS).
Download Source Code:
