Hey there! I hope you’re doing well. Today, we’re going to dive into creating a Profile Card UI Design using only HTML and CSS. If you’ve been following along, you know we’ve already covered several card designs. This profile card will be simple yet practical, so let’s get started!
Profile cards are a type of design that presents key details about a person in a concise format. They typically include information like a person’s name, email, social media links, and other essential details. You’ll often find these profile cards on portfolio websites and various other types of sites.
Take a quick look at the image of our Profile Card Design. As you can see, the card includes a variety of details, such as a profile image, name, social media link buttons, as well as subscribe and message buttons. It also displays the number of likes, comments, and shares.
You can check out a demo of this Profile Card UI Design in the video provided below. The video will give you a complete walkthrough of how the design works. Plus, you’ll find all the HTML and CSS code used to create this beautiful profile card, so you can easily follow along and implement it yourself.
How to Create Profile Card in HTML & CSS | Video Tutorial
I’ve provided all the HTML and CSS code used to create this Profile Card UI Design. But before diving into the source code, let me briefly explain the video tutorial on the profile card.
As you saw in the video tutorial, the Profile Card UI Design features an image with a stylish border, along with buttons and social media links. This profile card was created entirely using HTML and CSS, starting from scratch.
I hope you now feel confident in creating this profile card with HTML and CSS. However, if you encounter any difficulties, I’ve provided all the source code below. You can copy or download the files to help you build this beautiful profile card.
<!DOCTYPE html>
<!-- Coding by TanzilTech | www.tutorialrays.in-->
<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" />
<title>Profile Card UI Design</title>
<!-- CSS -->
<link rel="stylesheet" href="style.css" />
<!-- Boxicons CSS -->
<link
href="https://unpkg.com/boxicons@2.1.2/css/boxicons.min.css"
rel="stylesheet"
/>
</head>
<body>
<div class="profile-card">
<div class="image">
<img src="profile.jpg" alt="" class="profile-img" />
</div>
<div class="text-data">
<span class="name">TanzilTech</span>
<span class="job">YouTuber & Blogger</span>
</div>
<div class="media-buttons">
<a href="#" style="background: #4267b2" class="link">
<i class="bx bxl-facebook"></i>
</a>
<a href="#" style="background: #1da1f2" class="link">
<i class="bx bxl-twitter"></i>
</a>
<a href="#" style="background: #e1306c" class="link">
<i class="bx bxl-instagram"></i>
</a>
<a href="#" style="background: #ff0000" class="link">
<i class="bx bxl-youtube"></i>
</a>
</div>
<div class="buttons">
<button class="button">Subscribe</button>
<button class="button">Message</button>
</div>
<div class="analytics">
<div class="data">
<i class="bx bx-heart"></i>
<span class="number">100k</span>
</div>
<div class="data">
<i class="bx bx-message-rounded"></i>
<span class="number">80k</span>
</div>
<div class="data">
<i class="bx bx-share"></i>
<span class="number">18k</span>
</div>
</div>
</div>
</body>
</html>
/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #d8eff7;
}
.profile-card {
display: flex;
flex-direction: column;
align-items: center;
max-width: 370px;
width: 100%;
background: #fff;
border-radius: 24px;
padding: 25px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
position: relative;
}
.profile-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 36%;
width: 100%;
border-radius: 24px 24px 0 0;
background-color: #1da1f2;
}
.image {
position: relative;
height: 150px;
width: 150px;
border-radius: 50%;
background-color: #4070f4;
padding: 3px;
margin-bottom: 10px;
}
.image .profile-img {
height: 100%;
width: 100%;
object-fit: cover;
border-radius: 50%;
border: 3px solid #fff;
}
.profile-card .text-data {
display: flex;
flex-direction: column;
align-items: center;
color: #333;
}
.text-data .name {
font-size: 22px;
font-weight: 500;
}
.text-data .job {
font-size: 15px;
font-weight: 400;
}
.profile-card .media-buttons {
display: flex;
align-items: center;
margin-top: 15px;
}
.media-buttons .link {
display: flex;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
height: 34px;
width: 34px;
border-radius: 50%;
margin: 0 8px;
background-color: #4070f4;
text-decoration: none;
}
.profile-card .buttons {
display: flex;
align-items: center;
margin-top: 25px;
}
.buttons .button {
color: #fff;
font-size: 14px;
font-weight: 400;
border: none;
border-radius: 24px;
margin: 0 10px;
padding: 8px 24px;
background-color: #e1306c;
cursor: pointer;
transition: all 0.3s ease;
}
.buttons .button:hover {
background-color: #0e4bf1;
}
.profile-card .analytics {
display: flex;
align-items: center;
margin-top: 25px;
}
.analytics .data {
display: flex;
align-items: center;
color: #333;
padding: 0 20px;
border-right: 2px solid #e7e7e7;
}
.data i {
font-size: 18px;
margin-right: 6px;
}
.data:last-child {
border-right: none;
}