Animated Profile Card UI Design using Html & CSS
Hello Friends, Today in this blog you’ll learn how to create a Animated Profile Card UI Design using Html & CSS.Creating an animated profile is a fun and creative way to showcase your skills and personality on your website. An animated profile can include a variety of elements such as an image, background, text, and animations. In this blog post, we will guide you through the process of creating an animated profile using HTML and CSS.
Step 1: Setting up the HTML Markup
The first step in creating an animated profile is to set up the HTML markup. The HTML code for the profile is as follows:
<!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">
<link rel="stylesheet" href="/style.css">
<title>Profile</title>
</head>
<body>
<div class="card">
<div class="imgBox">
<img src="/img.png" alt="">
</div>
<div class="content">
<div class="details">
<h2>John Cena <br><span>American Actor/Wrestler</span></h2>
<div class="data">
<h3>546<br><span>Posts</span></h3>
<h3>908k<br><span>Followers</span></h3>
<h3>258<br><span>Following</span></h3>
</div>
<div class="buttonGrp">
<button>Follow</button>
<button>Message</button>
</div>
</div>
</div>
</div>
</body>
</html>
Step 2: Styling the Profile
The next step is to style the profile using CSS. We will start by adding some basic styles to the profile. The CSS code for styling the profile is as follows:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: rgb(230, 0, 255);
}
.card{
position: relative;
width: 350px;
height: 190px;
background: white;
border-radius: 20px;
box-shadow: 0 35px 80px rgba(0, 0, 0, 0.15);
transition: 0.5s;
}
.card:hover{
height: 450px;
}
.imgBox{
position: absolute;
left: 50%;
top: -50px;
transform: translateX(-50%);
width: 150px;
height: 150px;
background: white;
border-radius: 20px;
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.35);
transition: 0.5s;
}
.imgBox img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 10px;
}
.card:hover .imgBox{
width: 250px;
height: 250px;
}
.card .content{
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
overflow: hidden;
}
.card .content .details{
padding: 40px;
text-align: center;
width: 100%;
transition: 0.5s;
transform: translateY(150px);
}
.card:hover .content .details{
transform: translateY(0px);
}
.card .content .details h2{
font-size: 1.25em;
font-weight: 600;
color: #555;
line-height: 1.2em;
}
.card .content .details h2 span{
font-size: 0.75em;
font-weight: 500;
opacity: 0.5;
}
.card .content .details .data{
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.card .content .details .data h3{
font-size: 1em;
color: #555;
line-height: 1.2em;
font-weight: 600;
}
.card .content .details .data h3 span{
font-size: 0.85em;
font-weight: 400;
opacity: 0.5;
}
.card .content .details .buttonGrp{
display: flex;
justify-content: space-between;
}
.card .content .details .buttonGrp button{
padding: 10px 30px;
border-radius: 5px;
border: none;
outline: none;
font-size: 1em;
font-weight: 500;
background: #ff7f67;
color: white;
cursor: pointer;
}
.card .content .details .buttonGrp button:nth-child(2){
border: 1px solid #9999;
color: #9999;
background: white;
}
Tags:
Cards