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=
<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(
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:
Article Tags :