When I was learning HTML and CSS for the first time Profile cards were one of my favorite small projects. They look simple, but they teach many important things like layout, colors, hover effects, and alignment. Most beginners get confused at first but trust me, once you build one profile card your confidence goes up a lot.
In this blog, I’ll guide you step by step on how to build a simple and attractive profile card using HTML and CSS. I’ll keep everything easy to understand, with no confusing words or boring theory only practical steps that beginners can follow comfortably.
Why Learn to Create a Profile Card with HTML and CSS?
Learning profile cards is very useful for beginners.
A profile card is a small box that shows a person’s photo, name, role, and some details. You can use it in portfolios, team pages, dashboards, and even resumes.
When you build a profile card:
- You practice HTML structure .
- You understand CSS layout .
- You learn borders, shadows, and hover effects .
- You improve your design sense.
In my experience, practicing small UI parts like cards helps more than reading long theory pages. It feels like building something real.
What Is a Profile Card?
A profile card is a small design block that shows a personal or a professional details of a person.
It usually includes an image, name, job title, short text, and social links.
You can think of it like a digital visiting card, but more stylish and modern.
Tools You Need
You only need two things:
- HTML
- CSS
No JavaScript is required for this project. That is why it is perfect for beginners.
Basic Structure of Our Profile Card
We will create:
- A container
- Multiple cards inside it
- Each card with image, name, role, description, and social icons
The design will look modern, smooth, and animated.
Full HTML and CSS Code
You can copy this code and run it directly in your browser. When I first tried this, I was honestly surprised how good it looked with only HTML and CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Profile Cards</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600&display=swap" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="card">
<img class="profile-img" src="https://i.pravatar.cc/300?img=12" alt="">
<h2>Ankit Kumar</h2>
<p class="role">Full Stack Java Developer</p>
<p class="desc">Passionate about building modern web applications with React, Spring Boot and clean UI designs.</p>
<div class="socials">
<a href="#">🐱</a>
<a href="#">💼</a>
<a href="#">🌐</a>
</div>
</div>
<div class="card">
<img class="profile-img" src="https://i.pravatar.cc/300?img=32" alt="">
<h2>Anu Sharma</h2>
<p class="role">UI/UX Designer</p>
<p class="desc">Creative designer focusing on user experience, animations, and aesthetic interfaces.</p>
<div class="socials">
<a href="#">🎨</a>
<a href="#">💼</a>
<a href="#">📸</a>
</div>
</div>
<div class="card">
<img class="profile-img" src="https://i.pravatar.cc/300?img=45" alt="">
<h2>Priya Singh</h2>
<p class="role">Frontend Developer</p>
<p class="desc">Loves working with HTML, CSS, JavaScript and building responsive layouts.</p>
<div class="socials">
<a href="#">⚛️</a>
<a href="#">💼</a>
<a href="#">📘</a>
</div>
</div>
</div>
</body>
</html>
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}
body{
min-height:100vh;
display:flex;
justify-content:center;
align-items:center;
background:linear-gradient(135deg,#667eea,#764ba2);
}
.container{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:30px;
width:90%;
max-width:1000px;
}
.card{
position:relative;
background:rgba(255,255,255,0.15);
backdrop-filter:blur(12px);
border-radius:20px;
padding:25px;
text-align:center;
color:#fff;
box-shadow:0 20px 40px rgba(0,0,0,0.25);
transition:0.4s ease;
overflow:hidden;
}
.card::before{
content:"";
position:absolute;
inset:-2px;
background:linear-gradient(45deg,#ff9a9e,#fad0c4,#a1c4fd,#c2e9fb);
z-index:-1;
filter:blur(20px);
}
.card:hover{
transform:translateY(-15px) scale(1.03);
}
.profile-img{
width:120px;
height:120px;
border-radius:50%;
border:4px solid #fff;
object-fit:cover;
margin-bottom:15px;
animation:float 4s ease-in-out infinite;
}
@keyframes float{
0%,100%{transform:translateY(0)}
50%{transform:translateY(-10px)}
}
h2{
font-size:22px;
margin-bottom:5px;
}
p.role{
font-size:14px;
opacity:0.9;
margin-bottom:15px;
}
p.desc{
font-size:13px;
line-height:1.6;
opacity:0.85;
}
.socials{
margin-top:20px;
display:flex;
justify-content:center;
gap:15px;
}
.socials a{
width:36px;
height:36px;
display:flex;
justify-content:center;
align-items:center;
border-radius:50%;
background:rgba(255,255,255,0.25);
color:#fff;
text-decoration:none;
font-size:16px;
transition:0.3s;
}
.socials a:hover{
background:#fff;
color:#764ba2;
transform:scale(1.2);
}
Explanation in Simple Words
Let me explain this like a friend would explain.
HTML
HTML creates the structure.
We used:
- div.container for all cards
- div.card for each profile
- img for photo
- h2 for name
- p for role and description
HTML is like the skeleton of the body.
CSS
CSS makes it beautiful.
We used:
- Gradient background for page
- Grid layout for cards
- Rounded borders
- Shadow effect
- Hover animation
- Floating image animation
CSS is like clothes and style for the body.
Why This Design Looks Modern
Because we used:
- Glass effect using rgba and blur
- Gradient background
- Smooth hover movement
- Rounded shapes
- Soft shadows
These small things make a big difference. Many beginners ignore them, but they are very important.
Tiny Tip from My Side
When I was learning, I used to copy code without changing anything. That slowed my learning.
Try this instead:
- Change colors
- Change font size
- Change card width
- Change text
Small changes teach you more than reading.
Common Beginner Mistakes
Most beginners:
- Forget box-sizing:border-box
- Use fixed width instead of responsive grid
- Do not use hover effects
- Skip animations
If you avoid these, your UI will look much better.
Where Can You Use Profile Cards?
You can use profile cards in:
- Portfolio website
- Team member section
- About us page
- Student project
- Resume website
It is a very useful component.
Practice Idea for You
Try to build:
- A teacher profile card
- A friend profile card
- Your own profile card
In my experience, practicing with real names makes learning more fun.
Final Thoughts
Creating a profile card with HTML and CSS is one of the best beginner projects. It is small, fun, and very useful.
You do not need to be perfect. You just need to start.
I still remember my first ugly card design. But I kept practicing. Now cards feel easy.
👉 Now it’s your turn. Copy the code, run it, and customize it.
👉 If you want, tell me and I will help you create
a portfolio page using this card design.
👉 Keep practicing, because in web development, practice
is everything.
If you found this blog helpful, save it, share it, and come back again for more beginner friendly HTML and CSS tutorials. 💙
Read Also : Top 30 CSS Interview Questions and Answers 2026
