Creating a profile card design using HTML and CSS is a great way to enhance your web design skills. Profile cards are commonly used in web applications and websites to display user information in a visually appealing manner. In this tutorial, we’ll walk through the process of creating a simple yet stylish profile card design.
Profile cards are an essential component in modern web design, used to present user information in a compact and aesthetically pleasing format. They typically include elements like a profile picture, user name, bio, and social media links. By mastering the creation of profile cards, you can significantly improve the user interface (UI) of your web projects. In this tutorial, we’ll guide you step-by-step to create a responsive profile card using HTML and CSS.
Watch Tutorial:
HTML Structure
We’ll start by creating the basic HTML structure for our profile card. This will include a container for the card and elements for the profile picture, user name, bio, and social media links.
<!DOCTYPE html>
<html lang="en">
<!-- The <head> section contains meta-information about the HTML document -->
<head>
<!-- The character encoding for the HTML document -->
<meta charset="UTF-8" />
<!-- This meta tag is used to ensure the document is displayed in IE=edge mode, which means it will be displayed using the latest rendering engine -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<!-- This meta tag is used to control the layout on mobile browsers -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Link to an external CSS file for styling the document -->
<link rel="stylesheet" href="style.css" />
<!-- Link to an external CSS file for Font Awesome icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<!-- A container for the profile card -->
<div class="profile-card">
<!-- A container for the profile image -->
<div class="image">
<!-- The profile image -->
<img src="pot.jpg" alt="" class="profile-img">
</div>
<!-- A container for the textual data of the profile -->
<div class="text-data">
<!-- The name of the profile -->
<span class="name">Jinnifer lopez</span>
<!-- The job title of the profile -->
<span class="job">musician</span>
</div>
<!-- A container for the social media buttons -->
<div class="media-buttons">
<!-- Social media button for Twitter -->
<a href="#" style="background: #1da1f2" class="link">
<i class="fa fa-twitter" aria-hidden="true"></i>
</a>
<!-- Social media button for Facebook -->
<a href="#" style="background: #4267b2" class="link">
<i class="fa fa-facebook" aria-hidden="true"></i>
</a>
<!-- Social media button for YouTube -->
<a href="#" style="background: #ff0000" class="link">
<i class="fa fa-youtube-play" aria-hidden="true"></i>
</a>
<!-- Social media button for Instagram -->
<a href="#" style="background: #e1306c" class="link">
<i class="fa fa-instagram" aria-hidden="true"></i>
</a>
</div>
<!-- A container for action buttons -->
<div class="buttons">
<!-- Subscribe button -->
<button class="button">Subscribe</button>
<!-- Message button -->
<button class="button">Message</button>
</div>
<!-- A container for the profile analytics data -->
<div class="analytics">
<!-- Data for likes -->
<div class="data">
<i class="fa fa-heart-o" aria-hidden="true"></i>
<span class="number">100k</span>
</div>
<!-- Data for comments -->
<div class="data">
<i class="fa fa-comment-o" aria-hidden="true"></i>
<span class="number">10k</span>
</div>
<!-- Data for shares -->
<div class="data">
<i class="fa fa-share" aria-hidden="true"></i>
<span class="number">15k</span>
</div>
</div>
</div>
</body>
</html>
CSS Styling
Next, we’ll add CSS to style our profile card. This includes setting dimensions, adding background colors, and positioning elements.
/* Apply to all elements: Remove default padding and margin, set box-sizing to border-box */
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* Apply to body: Center content, set height to 100vh, set background color */
body {
justify-content: center;
align-items: center;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #6ecbf9;
}
/* Apply to profile-card class: Flexbox column layout, center align, set max-width, background, padding, border radius, and box shadow */
.profile-card {
display: flex;
position: relative;
flex-direction: column;
align-items: center;
max-width: 370px;
width: 100%;
max-width: 370px;
background: #fff;
padding: 25px;
border-radius: 24px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
/* Before pseudo-element for profile-card: Positioned absolute, set height, width, border radius, top, left, background color */
.profile-card::before {
content: "";
position: absolute;
height: 36%;
width: 100%;
border-radius: 24px 24px 0 0;
top: 0;
left: 0;
border-radius: 24px 24px 0 0;
background-color: rgb(255, 71, 215);
}
/* Apply to image class: Positioned relative, set border radius, height, width, background color, margin-bottom, padding */
.image {
position: relative;
border-radius: 50%;
height: 150px;
width: 150px;
background-color: rgb(176, 28, 169);
margin-bottom: 10px;
padding: 3px;
}
/* Apply to profile-img class within image: Cover object fit, set height, width, border, border radius */
.image .profile-img {
object-fit: cover;
height: 100%;
width: 100%;
border: 3px solid #fff;
border-radius: 50%;
}
/* Apply to text-data class within profile-card: Flexbox column layout, center align, set color */
.profile-card .text-data {
display: flex;
align-items: center;
flex-direction: column;
color: #333;
}
/* Apply to name class within text-data: Set font weight and size */
.text-data .name {
font-weight: 500;
font-size: 22px;
}
/* Apply to job class within text-data: Set font weight and size */
.text-data .job {
font-weight: 400;
font-size: 15px;
}
/* Apply to media-buttons class within profile-card: Flexbox layout, margin-top, center align */
.profile-card .media-buttons {
display: flex;
margin-top: 15px;
align-items: center;
}
/* Apply to link class within media-buttons: Flexbox layout, set height, width, center align, set color, font size, margin, border radius, text decoration, background color */
.media-buttons .link {
display: flex;
height: 34px;
width: 34px;
align-items: center;
justify-content: center;
color: #fff;
font-size: 18px;
margin: 0 8px;
border-radius: 50%;
text-decoration: none;
background-color: rgb(252, 71, 255);
}
/* Apply to buttons class within profile-card: Flexbox layout, margin-top, center align */
.profile-card .buttons {
display: flex;
margin-top: 25px;
align-items: center;
}
/* Apply to button class within buttons: Set color, font weight, size, border, margin, border radius, padding, cursor, background color, transition */
.buttons .button {
color: #fff;
font-weight: 400;
font-size: 14px;
border: none;
margin: 0 10px;
border-radius: 24px;
padding: 8px 24px;
cursor: pointer;
background-color: rgb(255, 71, 252);
transition: all 0.3s ease;
}
/* Apply hover effect to button class: Change background color */
.buttons .button:hover {
background-color: rgb(255, 0, 204);
}
/* Apply to analytics class within profile-card: Flexbox layout, margin-top, center align */
.profile-card .analytics {
display: flex;
margin-top: 25px;
align-items: center;
}
/* Apply to data class within analytics: Flexbox layout, set color, center align, border-right, padding */
.analytics .data {
display: flex;
color: #333;
align-items: center;
border-right: 2px solid #e7e7e7;
padding: 0 20px;
}
/* Apply to i element within data: Set margin-right, font size */
.data i {
margin-right: 6px;
font-size: 18px;
}
/* Apply to last data element within analytics: Remove border-right */
.data:last-child {
border-right: none;
}
Conclusion
Creating a profile card using HTML and CSS is a fundamental skill for web developers and designers. This simple project helps you understand the basics of HTML structure and CSS styling, including responsiveness. By experimenting with different styles and layouts, you can create unique and professional profile cards for your web projects. Keep practicing and exploring more advanced CSS techniques to further enhance your design skills.
How to Create Profile Card Design Using HTML and CSS