Profile cards are a great way to display user information in a clean and modern format. In this tutorial, we’ll build a responsive profile card featuring a profile image, user details, follower statistics, and interactive buttons like Follow and Message. This card adapts beautifully to different screen sizes and adds a polished look to any project.
Video Tutorial:
If you’d like to see this tutorial in action, check out the video below:
Step 1: HTML Structure
The HTML provides the card structure, including a profile picture, user name, role, statistics, and buttons.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Responsive Profile Card</title>
<!-- Google Font -->
<link
href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
rel="stylesheet"
/>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="card">
<img src="profile-pic-female.jpg" alt="profile-pic" />
<h4>Emily Fisher</h4>
<h5>Senior Web Developer</h5>
<div class="details">
<div class="column">
<h2>1.6K</h2>
<span>Followers</span>
</div>
<div class="column">
<h2>852</h2>
<span>Following</span>
</div>
</div>
<div class="buttons">
<button>Follow</button>
<button>Message</button>
</div>
</div>
</div>
</body>
</html>
Step 2: Styling the Card with CSS
The CSS styles the card with a beautiful gradient background, clean typography, and responsive design.
*,
*:before,
*:after {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-color: #fafafa;
}
.container {
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
}
.card {
height: 26.25em;
width: 20em;
background: linear-gradient(to bottom, #3d91f5 6.87em, #ffffff 6.87em);
padding: 3.12em 0;
box-shadow: 1em 1.5em 3em rgba(0, 0, 0, 0.1);
border-radius: 1em;
}
.card * {
font-family: "Poppins", sans-serif;
text-align: center;
letter-spacing: 0.031em;
font-weight: 600;
}
img {
display: block;
width: 6.25em;
height: 6.25em;
position: relative;
border-radius: 50%;
margin: 0 auto;
box-shadow: 0 0 0 0.5em #ffffff;
}
.card h4 {
color: #3d91f5;
font-size: 1em;
margin: 0.92em 0 0.3em 0;
}
.card h5 {
color: #454545;
font-weight: 400;
font-size: 0.87em;
}
.details {
width: 100%;
margin-top: 1.87em;
display: flex;
justify-content: space-around;
}
.details h2 {
font-weight: 400;
}
.details span {
color: #3d91f5;
}
.buttons {
width: 100%;
display: flex;
justify-content: space-around;
margin-top: 1.87em;
}
button {
padding: 0.5em 2em;
border: none;
border: 0.12em solid #3d91f5;
border-radius: 0.31em;
}
.buttons button:first-child {
background-color: #3d91f5;
color: #ffffff;
}
.buttons button:last-child {
background-color: transparent;
color: #3d91f5;
}
@media screen and (max-width: 501px) {
.container {
font-size: 0.8em;
}
}
Key Features of the Profile Card
- Gradient Background: The upper portion has a soft blue gradient, enhancing visual appeal.
- Profile Image: A circular image with a clean border-shadow for a standout effect.
- Responsive Layout: The card adjusts to smaller screens using media queries.
- Interactive Buttons: The Follow and Message buttons provide a clean call-to-action.
- Statistics Display: Highlights key numbers like followers and following.
Responsive Design
The media query ensures that the card scales down gracefully on smaller screens.
@media screen and (max-width: 501px) {
.container {
font-size: 0.8em;
}
}
Conclusion
You now have a stunning Responsive Profile Card that showcases user details elegantly. With clean code, responsive design, and interactive elements, this profile card is perfect for portfolios, social media apps, and dashboards.
