Light/Dark Mode User Profile Card using HTML CSS and JavaScript

Last Updated : 17 Nov, 2023

This article will show how to make an Animated User Profile Card using HTML, CSS, and JavaScript. We generally see these effects in portfolios of professionals. In this, we have created a code that generates a personalized card with the user’s name, image, and description. Additionally, we’ve implemented a hover function that resizes the card when the user hovers over it, as well as a tab for switching between dark and light modes.

Preview

Approach:

Create a basic card structure using HTML style, with every element like color, and background.
To give the Animation effect we have used transition and transform properties whenever the user hovers the Card.
The toggle effect for light mode and dark mode is done using Javascript.
Select a particular element button in a variable. Make another variable and initialize it with false.
Now add event listener of type “click” and when the user clicks on button toggle the light and dark mode by using the if else condition.

Example: This example illustrates how to implement a card with an image of the user, including card resizing and dark mode switching feature, using HTML, CSS, and JavaScript.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width,initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> 
    <title> 
        Design a Light/Dark Mode User Profile 
        Card using HTML CSS and JavaScript 
    </title> 
  
    <style> 
        body { 
            background-color: rgb(172, 178, 178); 
            justify-content: center; 
            align-items: center; 
            height: 100vh; 
            display: flex; 
            color: antiquewhite; 
        } 
  
        .photo-container { 
            height: 180px; 
            width: 180px; 
            display: block; 
            border-radius: 100%; 
            background-image: url( 
"https://media.geeksforgeeks.org/wp-content/uploads/20231006161740/4321876.png"); 
            background-color: aliceblue; 
            background-repeat: no-repeat; 
            background-size: cover; 
            margin: 2px; 
            border: 10px solid wheat; 
        } 
  
        .container { 
            height: 514px; 
            width: 368px; 
            background-color: rgb(32, 31, 31); 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center; 
            border-radius: 15px; 
            box-shadow: rgba(41, 40, 40, 0.2); 
            gap: 10px; 
            transition: transform 0.2s ease-in-out; 
        } 
  
        .container:hover { 
            transform: scale(1.2); 
        } 
  
        .cardutility { 
            height: 100px; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center; 
            padding: 10px; 
  
            border-radius: 10px; 
        } 
  
        .des { 
            text-align: center; 
            padding: 10px; 
            margin: 5px; 
            border-radius: 10px; 
            text-justify: auto; 
        } 
  
        .spaceicon { 
            gap: 10px; 
        } 
  
        #btnid { 
            border-radius: 100%; 
            height: 50px; 
            width: 50px; 
            position: relative; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container" id="idcontainer"> 
        <div class="photo"> 
            <div class="photo-container"></div> 
        </div> 
        <div class="cardcontainer"> 
            <div class="info front cardutility"> 
                <div class="myname"> 
                    Shivangi Joshi 
                </div> 
                <div class="mycontact spaceicon"> 
                    <i class="fa-regular fa-phone  
                    fa fa-sm light-icon dark-icon"></i> 
                    9393939393 
                </div> 
                <div class="myemail spaceicon"> 
                    <i class="fa-regular fa-envelope  
                    fa fa-sm light-icon dark-icon"> 
                    </i> 
                    shivangi@123.com 
                </div> 
                <div><span>Hobbies : </span> 
                    <i class="fa-sharp fa-light fa  
                    fa-music fa-sm light-icon dark-icon"> 
                    </i> 
                    <i class="fa-regular fa fa-code  
                    fa-sm light-icon dark-icon"></i> 
                </div> 
            </div> 
            <div class="des back cardutility"> 
                <div class="aboutme"> 
                    Hi, i am Shivangi Joshi. I am a 
                    computer science student. My skills 
                    are: HTML, CSS, JavaScript, React.js, 
                    Node.js, Mongodb, C++, Data 
                    Structures and Algorithms 
                </div> 
            </div> 
            <button class="btn" id="btnid">Light</button> 
        </div> 
    </div> 
  
    <script> 
        let button = document.querySelector("#btnid"); 
        let boltogglebtn = false; 
        let container = document.querySelector("#idcontainer") 
  
        button.addEventListener("click", function () { 
            if (boltogglebtn) { 
                button.innerHTML = "Light"; 
                button.style.cssText = 
                    "background-color:white; color:black"; 
                container.style.cssText = 
                    "background-color:black; color:white" 
  
            } 
            else { 
                button.innerHTML = "Dark"; 
                button.style.cssText = 
                    "background-color:black; color:white"; 
                container.style.cssText = 
                    "background-color:white; color:black" 
            } 
            boltogglebtn = !boltogglebtn; 
        }) 
    </script> 
</body> 
  
</html>