Day Night Toggle Profile Card Using HTML & CSS Without JavaScript
Hello Reader!, we have an HTML file that creates a toggle profile card. The card features a background that changes from day to night when the toggle switch is active. The toggle switch is a checkbox input with the id “switchBx” that is hidden from view.
The CSS styles the elements in the HTML document, it resets all margins, padding, and box-sizing for consistency across browsers. It centers the body element with a minimum height of 100vh and sets the background color to #f2f2f2.
The container div is given a width and height of 600px and 350px respectively. It is given a white background color, a border radius of 10px, and a box-shadow to give it a 3D look. The container also has a flex layout and is center on the page.
When the toggle switch is active, the background color of the card changes to a dark purple color with a subtle animation effect. The card also gets a box-shadow effect to make it look like it is popping out of the screen. The card has a padding of 25px and a border radius of 10px to make it look like a card.
In this card has two sections: an image on the left and text/button on the right. The left section appears as an image box, while the right is styled as a detail section with a heading-like text and a customizable button.
The last section of the card is the icon box, which contains three social media icons that are links to different social media platforms. The icons are style using Font Awesome and have a square shape. The icons are also given a hover effect that changes their color when the cursor is hovering over them.
Video Tutorial of Day Night Toggle Profile Card
To see a live demonstration of the Day Night Toggle Profile Card, Click Here. For a complete video guide on how the generator works, check out the accompanying YouTube video.
Day Night Toggle Profile Card
HTML:
Create a new file with the name “index.html
” and add the provide code to it. Ensure the file has a “.html
” extension.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Day Night Toggle Profile Card</title> <link rel="stylesheet" href="./style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.2/css/all.min.css" integrity="sha512-1sCRPdkRXhBV2PBLUdRb4tMg1w2YPf37qatUFeS7zlBy7jJI8Lf4VHwWfZZfpXtYSLy85pkm9GaYVYMfw5BC1A==" crossorigin="anonymous" referrerpolicy="no-referrer" /> </head> <body> <div class="container"> <input type="checkbox" id="switchBx"> <div class="bg"></div> <div class="card"> <div class="content"> <label for="switchBx"> <span class="toggle"></span> </label> <div class="imgBx"> <img src="./img.jpg" alt="img"> </div> <div class="detail"> <h2>code hack<br/><span>creative design</span></h2> <div class="buttons"> <p>Creative CSS animation and Hover Effects, Amazing Vanilla JavaScript and jQuery projects, creative UX and UI Design using Html and CSS and much more... Html5, CSS3, JavaScript, Website Design.</p> <button>Read More</button> </div> </div> </div> <div class="iconBx"> <a href="#"> <i class="fa-brands fa-square-facebook"></i> </a> <a href="#"> <i class="fa-brands fa-square-instagram"></i> </a> <a href="#"> <i class="fa-brands fa-square-twitter"></i> </a> </div> </div> </div> </body> </html>
This code is an HTML file that creates a profile card with a day and night toggle feature. When the toggle switch is turn on, the background color changes from white to black and the text color changes from black to white. The profile card also includes a profile picture, a name and title, and a brief description. Additionally, it includes social media icons for Facebook, Instagram, and Twitter.
The code starts by defining the document type and language. It then includes meta information and a link to a CSS file for styling. The CSS file is also link to a font library for the social media icons.
The body of the HTML document contains a container div that holds the toggle switch and the profile card. The toggle switch is create using an input checkbox with an id of “switchBx” and is associate with a label. The background color is controlled by a div with a class of “bg” and the profile card itself is contained within a div with a class of “card”.
The profile card is divide into two sections: “content” and “iconBx”. The “content” section contains the profile picture, name and title, and brief description, while the “iconBx” section contains the social media icons. The profile picture is an img element with a source link to an image file. The name and title are containe in an h2 element and the brief description is containe in a p element.
The social media icons are create using the font library and are containe within anchor elements with href attributes use to “#”. The icons are style using CSS to change their color depending on the state of the toggle switch.
CSS:
Create a new CSS file name “style.css
” and copy the provide code into it. Ensure that the file has a “.css
” extension.
*{ margin: 0; padding: 0; box-sizing: border-box; font-family: Poppins; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #f2f2f2; overflow: hidden; } .container{ position: relative; width: 600px; height: 350px; background: #fff; border-radius: 10px; display: flex; justify-content: center; align-items: center; box-shadow: 0 50px 100px -20px rgba(50, 50, 93, .25), 0 30px 60px -30px rgba(0, 0, 0, .3), inset 0 -2px 6px 0 rgba(10, 37, 64, .35); } .container #switchBx{ display: none; } .container .bg{ position: absolute; width: 100vw; height: 100vh; background: rgba(107, 6, 196, 0.8); transform: scale(0); z-index: -1; transition: all 1.5s ease; transition-delay: .3s; } #switchBx:checked ~ .bg{ transform: scale(1); } .container .card{ position: relative; width: 100%; height: 100%; padding: 25px; border-radius: 10px; z-index: 10; transition: all .3s ease; } #switchBx:checked ~ .card{ background: rgba(107, 6, 196, 0.8); box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 7px 13px -3px rgba(0, 0, 0, .3), inset 0 -5px 0 rgba(0, 0, 0, .3); } .container .card .content{ position: relative; width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; } .container .card .content label{ position: absolute; top: 0; right: 0; width: 60px; height: 30px; background: #6b06c4; border-radius: 50px; box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 50px 100px -20px rgba(50, 50, 93, .25), 0 30px 60px -30px rgba(0, 0, 0, .3), inset 0 -2px 6px 0 rgba(10, 37, 64, .35); overflow: hidden; cursor: pointer; z-index: 100; transition: all .3s ease; } #switchBx:checked ~ .card .content label{ background: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 7px 13px -3px rgba(0, 0, 0, .3), inset 0 -2px 0 rgba(0, 0, 0, .3); } .container .card .content label .toggle{ position: absolute; top: 50%; left: 12px; width: 20px; height: 20px; background: #fff; transform: translate(-50%, -50%); border-radius: 50%; margin-left: 3px; box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 50px 100px -20px rgba(50, 50, 93, .25), 0 30px 60px -30px rgba(0, 0, 0, .3), inset 0 -2px 6px 0 rgba(10, 37, 64, .35); transition: all .3s ease; } #switchBx:checked ~ .card .content label .toggle{ left: 42px; background: #6b06c4; box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 7px 13px -3px rgba(0, 0, 0, .3), inset 0 -2px 0 rgba(0, 0, 0, .3); } .container .card .content .imgBx{ position: relative; width: 250px; height: 100%; background: #fff; margin-right: 10px; overflow: hidden; box-shadow: 0 0 10px rgba(0, 0, 0, .5); border-radius: 15px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all .3s ease; border: 5px solid #6b06c4; } #switchBx:checked ~ .card .content .imgBx{ border: 5px solid #fff; background: #6b06c4; } .container .card .content .imgBx img{ position: absolute; width: 97%; height: 97%; object-fit: cover; border-radius: 10px; } .container .card .content .detail{ position: relative; width: calc(100% - 250px); height: 100%; } .container .card .content .detail h2{ text-transform: capitalize; color: #6b06c4; font-weight: 600; font-size: 30px; letter-spacing: 1px; line-height: 20px; margin-bottom: 10px; cursor: pointer; transition: all .3s ease; } #switchBx:checked ~ .card .content .detail h2{ color: #fff; } .container .card .content .detail h2 span{ font-weight: 400; font-size: 22px; letter-spacing: 0; transition: all .3s ease; } #switchBx:checked ~ .card .content .detail h2 span{ color: #fff; } .container .card .content .detail .buttons{ position: relative; } .container .card .content .detail .buttons p{ color: rgba(107, 6, 196, 0.8); font-size: 17px; transition: all .3s ease; } #switchBx:checked ~ .card .content .detail .buttons p{ color: #f2f2f2; } .container .card .content .detail .buttons button{ position: relative; padding: 10px 15px; outline: none; border: none; background: #6b06c4; color: #fff; font-size: 25px; font-weight: 600; margin-top: 18px; border-radius: 10px; cursor: pointer; transition: all .3s ease; box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 50px 100px -20px rgba(50, 50, 93, .25), 0 30px 60px -30px rgba(0, 0, 0, .3), inset 0 -2px 6px 0 rgba(10, 37, 64, .35); } #switchBx:checked ~ .card .content .detail .buttons button{ background: #fff; color: #6b06c4; box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 7px 13px -3px rgba(0, 0, 0, .3), inset 0 -5px 0 rgba(0, 0, 0, .3); } .container .card .content .detail .buttons button:hover{ transform: scale(0.9); } .container .card .content .detail .buttons button:active{ transform: scale(1); } .container .card .iconBx{ position: absolute; bottom: 0; right: 0; padding: 25px; display: flex; justify-content: flex-end; align-items: flex-end; } .container .card .iconBx a{ position: relative; text-decoration: none; width: 30px; height: 30px; color: #6b06c4; margin-left: 5px; border-radius: 5px; text-align: center; line-height: 50px; font-size: 35px; box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 50px 100px -20px rgba(50, 50, 93, .25), 0 30px 60px -30px rgba(0, 0, 0, .3), inset 0 -2px 6px 0 rgba(10, 37, 64, .35); display: flex; justify-content: center; align-items: center; transition: all .3s ease; } .container .card .iconBx a:hover{ transform: scale(0.9); } .container .card .iconBx a:active{ transform: scale(1); } #switchBx:checked ~ .card .iconBx a{ color: #fff; box-shadow: 0 2px 4px rgba(0, 0, 0, .4), 0 7px 13px -3px rgba(0, 0, 0, .3), inset 0 -5px 0 rgba(0, 0, 0, .3); }
This code is creating a simple toggle switch effect using CSS. The switch is embedd in a container with a white background and a border radius of 10px. The container also has a box shadow effect to give it a 3D look. The switch is hidden by default, but when it is check, it triggers a change in the background color of the container and the card inside.
When switch is check, container and card change to purple with 25px padding and 10px border radius. Card also has transition for smooth color change.
In addition, there is a label for the switch with a toggle button inside. The label and toggle button also change their background color and box shadow when the switch is check. The label is position at the top right corner of the container, and the toggle button is center inside the label.
Summary:
This code is a HTML and CSS code for a Day Night Toggle Profile Card. It includes a container div with a checkbox input and two other divs, one for the background and one for the card. The background div has a transition effect to scale it in and out when the checkbox is check or uncheck, and the card div also has a transition effect to change its background color and shadow when the checkbox is check. The card div also includes a content div with a label for the checkbox, an image div, and a detail div with text and a button. The container div also has an icon div with links to social media icons using Font Awesome. Additionally, there are CSS styles for the body, container, and all elements to set margins, padding, font, and other properties.