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

Last Updated : 29 Jul, 2024
Comments
Improve
Suggest changes
Like Article
Like
Report

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.

Screenshot-2023-11-17-160808
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>

Output:



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

S
shivanigupta18rk
Improve
Article Tags :

Similar Reads