Hello Guys I am back with another fantastic project using only HTML and CSS. This project is a 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 an Animated Login page design using HTML and CSS. I also share this source code in the blog post here you can check this Animated Login Page Desing.
What is Profile Card?
An individual’s identification and information are represented digitally through a profile card. The person’s Name, Picture, Position, and Social media links are often included.
On websites, social media platforms, and professional networking sites, profile cards are frequently used to give a brief overview of a person’s background and hobbies.
Additional details, such as qualifications, accomplishments, and contact information, can be added to make them more unique. Making a good first impression and creating an online presence is easy with profile cards.
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 in the center 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 number of posts that I share on Instagram, followers and following and in the last two call-to-action buttons one for follow and the other one for contact me in the message.
I know it is a very simple card I making but it is good enough for showing your basic information to the audience.
How To Create Profile Card Using HTML / CSS
There are some steps to create this type of 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 www.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>Profile Card USing HTML and CSS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="profile">
<div class="profile-card">
<div class="img-box">
<img src="Profile pic.png" alt="">
</div>
<div class="info">
<h1>Ahmed Khan</h1>
<p>Web Developer</p>
</div>
<div class="number">
<div class="number-item">
<h2>130</h2>
<p>post</p>
</div>
<div class="number-item">
<h2>105k</h2>
<p>Followers</p>
</div>
<div class="number-item">
<h2>15</h2>
<p>Following</p>
</div>
</div>
<div class="btns">
<a href="#" class="btn btn-1">Follow</a>
<a href="#" class="btn btn-2">Message</a>
</div>
</div>
</div>
</body>
</html>
CSS FILE
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
line-height: 1.5;
font-size: 16px;
font-family: sans-serif;
font-weight: 300;
color: hsl(0, 0%, 85%);
}
.profile{
padding: 80px 15px;
min-height: 100vh;
background-image: url(background.jpg);
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
}
.profile-card{
max-width: 400px;
width: 100%;
background-color: hsl(0, 0%, 0%);
border-radius: 20px;
padding: 40px;
text-align: center;
}
.profile-card .img-box{
max-width: 150px;
margin: auto;
}
.profile-card .img-box img{
border-radius: 50%;
width: 100%;
vertical-align: middle;
}
.profile-card .info{
margin-top: 20px;
}
.profile-card .info h1{
color: hsl(0, 0%, 100%);
text-transform: capitalize;
font-weight: 600;
font-size: 26px;
}
.profile-card p{
text-transform: capitalize;
}
.profile-card .number{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 15px;
margin-top: 30px;
}
.profile-card .number h2{
color: hsl(0, 0%, 100%);
font-size: 22px;
}
.profile-card .number p{
text-transform: capitalize;
}
.profile-card .btns{
margin-top: 20px;
}
.profile-card .btns .btn{
margin: 10px;
}
@media(max-width:400px){
.profile-card{
padding: 30px 20px;
}
}
/* Buttns CSS */
.btn{
display: inline-block;
padding: 10px 25px;
font-weight: 500;
font-size: 16px;
color: hsl(0,0%,100%);
vertical-align: middle;
user-select: none;
text-transform: capitalize;
text-decoration: none;
border: 1px solid transparent;
}
.btn-1{
background-color: hsl(0,70%, 60%);
}
.btn-1:hover{
background-color: rgb(242, 57, 57);
}
.btn-2{
border-color: hsl(0,0%,100%)
}
.btn-2:hover{
color: yellow;
}
Video Tutorial – 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
Creating a responsive profile card using HTML and CSS is a simple and effective way to showcase your identity and information online.
By following the step-by-step instructions in this blog, you can create a visually appealing profile card that will leave a lasting impression on your audience.
The source code provided also makes it easy for you to customize and integrate the profile card into your website or social media profiles.
Whether you are building a personal brand or looking to improve your professional networking, a profile card is an essential tool that can help you achieve your goals. So, start creating your profile card today and elevate your online presence!
