Hello Guys I am back with another fantastic project using only HTML and CSS. This project is a 3D profile card. I also share a complete source code with my readers and followers it is free of cost, not any subscription to get the source code of this project.
Recently I shared a Simple profile card page design using HTML and CSS. I also share this source code in the blog post here you can check this Simple Profile Card.
What is a profile card?
In the context of a website, a profile card is a graphical element that displays information about a user or member of the website. It typically includes a profile picture or avatar, the user’s name, and some additional information such as their job title, location, and a brief bio.
Profile cards are commonly used on social networking sites, online communities, and other websites where users can create profiles and interact with others.
They provide a quick and easy way for users to learn more about each other and can be used to facilitate connections and engagement within the website’s community.
About This Project
This Project was created by the Coding Pakistan blog website it proposes to help students that are learning web development technology like HTML, CSS, JavaScript, React.js, and Next.js.
| Created by | Coding Pakistan |
| Languages | HTML and CSS |
| Source Code | Download GitHub |
| Preview | Take Preview |
In this profile card, you see only one profile image on the card of the web page, and the Name of the person with a professional name like in my case “Web Developer” is my profession.
After that, if any person takes the cursor in the profile card it will be true with a smooth transition and animation that provide a very beautiful user experience.
The back side is a very beautiful animated hand and the name of the person in a new line shows the number of Instagram profile Followers, Following, and also likes with one beautiful follow button.
I know it is very difficult to create this type of animated profile card using HTML and CSS only.
How To Create a 3D Profile Card Using HTML / CSS
There are some steps to create this type of animated profile card using HTML and CSS only that are given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create two files one for HTML and the other one for CSS.
- Make sure the HTML file extension is (.html) and the CSS file extension will be (.css)
- After creating files, you link a CSS file with an HTML file with the help of this line code. (<link rel=”stylesheet” href=”style.css”>)
- The last step is copying and pasting the given code into your files.
Source Code of Profile Card
HTML FILE
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Created by Codingpakistan.com -->
<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>3D Profile Card Using HTML and CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<style></style>
<body>
<div class="container">
<div class="card">
<div class="card-inner">
<div class="front">
<h2>Ahmed Developer</h2>
<p>Web-Developer, Pakistan</p>
<button>Hover me</button>
</div>
<div class="back">
<img src="waving-hand.png" >
<h1>Ahmed <span>Developer</span></h1>
<p>I am web developer currently woring <span> @microdft </span> to make websites</p>
<div class="row">
<div class="col">
<h2>12k</h2>
<p>Followers</p>
</div>
<div class="col">
<h2>250</h2>
<p>Following</p>
</div>
<div class="col">
<h2>5k</h2>
<p>Likes</p>
</div>
</div>
<div class="row">
<button>Follow</button>
<a href=""><img src="instagram.png" alt=""></a>
<a href=""><img src="pinterest.png" alt=""></a>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS FILE
*{
margin: 0;
padding: 0;
font-family: sans-serif;
box-sizing: border-box;
}
.container{
width: 100%;
min-height: 100vh;
background: linear-gradient(135deg, #e3dbf6, #a99bf9);
padding: 10px;
}
.card{
width: 350px;
height: 515px;
margin: 100px auto 0;
perspective: 1000px;
}
.card-inner{
width: 100%;
height: 100%;
position: relative;
transition: transform 1s;
transform-style: preserve-3d;
}
.front, .back{
width: 100%;
height: 100%;
border-radius: 15px;
position: absolute;
backface-visibility: hidden;
}
.front{
background: url(userpic.PNG);
background-size: cover;
background-position: center;
padding: 60px 40px;
display: flex;
flex-direction: column;
justify-content: flex-end;
color: black;
}
.front h2{
font-weight: 500;
font-weight: bold;
}
.front p{
color: black;
font-size: 13px;
font-weight: bold;
}
.front button{
width: 120px;
border: 1px solid black;
background: transparent;
border-radius: 50px;
padding: 8px 20px;
cursor: pointer;
margin-top: 20px;
color: black;
}
.back{
background: white;
color: #333;
padding: 20px 40px;
transform: rotateY(180deg)
}
.back h1{
font-size: 50px;
line-height: 55px;
margin-bottom: 10px;
}
.back h1 span {
font-weight: 400;
}
.back p{
font-size: 14px;
}
.back p span{
font-weight: 600;
}
.back img{
width: 120px;
}
.row{
display: flex;
align-items: center;
margin-top: 30px;
}
.col{
flex: 1;
text-align: center;
color: #555;
font-size: 12px;
position: relative;
}
.col h2{
font-size: 20px;
}
.col::after{
content: '';
width: 1.5px;
height: 20px;
background: #7800ad;
position: absolute;
top: 5px;
right: 0;
}
.col:last-child::after{
display: none;
}
.col p{
margin-top: 5px;
}
.back button{
background: #7800ad;
color: white;
border: 0;
outline: 0;
padding: 8px 25px;
border-radius: 30px;
font-size: 14px;
margin-right: 15px;
box-shadow: 0 8px 10px rgba(120,0,173,0.3);
}
.back a{
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 5px 10px rgba(0,0 ,0,0.2);
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
}
.back a img{
width: 50%;
}
.card:hover .card-inner{
transform: rotateY(180deg);
}
Video Tutorial – 3D Profile Card Design
If you don’t understand this code and you want to learn in deep so please watch this video and subscribe to this youtube channel for more videos like this.
Related Content
- Periodic Table using HTML and CSS
- Top 1o projects for a web developer
- Build a movie app using HTML, CSS, and JavaScript
Conclusion
The 3D flip profile card design using HTML and CSS is a stunning and innovative way to showcase user profiles on your website. With its sleek and modern design, it’s sure to capture the attention of your website visitors and provide an engaging user experience.
The use of HTML and CSS to create this effect allows for easy customization and integration with your website. By providing the source code, this blog post has given you the tools to create your own 3D flip profile cards and take your website to the next level.
So why not give it a try and impress your users with this beautiful and interactive design element?