Hello everyone, I’m here with another amazing project! I used HTML and CSS to make a profile card for this one.
I also give my readers and followers the full source code for this project at no cost; there is no need to subscribe. These code files are free to download and use.
What Is a Profile Card
A profile card typically refers to a visual representation of a person’s or entity’s information displayed in a condensed format. It commonly includes details such as a Profile Picture, name, job title, and brief bio.
Profile cards are commonly used in Websites, Applications, or platforms to provide a quick overview of individuals, members, or entities, allowing users to get essential information at a glance. They serve as a concise and visually appealing way to present key details about a person or profile.
Profile cards are widely used on social media platforms, professional networking sites, and various websites to enhance user experience by presenting relevant information in a visually appealing and easily digestible format.
They serve as a quick snapshot, enabling users to understand key aspects of a person or entity without requiring extensive exploration.
There are many types and many designs of profile cards available online but this is very easy and very simple you can create with in seconds.
This Profile Card is created by only HTML and CSS.
About This Project
This project was created by the Code Hunter team to help students simply learn coding and programming. If you want to join our team please follow us on Instagram.
| Created by | Code Hunter |
| Languages | HTML and CSS |
| Source Code | Available Below |
| Preview | Take Preview |
| GitHub Link | Code Link |
How to Create a Simple Profile Card
There are some steps to create this type of Profile Card Using HTML, and CSS, that are given below.
- The first step is to create one folder.
- Open this folder in Vs Code Editor and create two (2) files in HTML and CSS.
- Make sure the HTML file extension is (.html), the CSS file extension is (.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.
Video Tutorial
If you want to learn more about this project so please watch this video and also subscribe this youtube channel for more content like this. This video is provide by Sona Coder.
Simple Profile Card Using HTML and CSS – Source Code
HTML FILE
<!DOCTYPE html>
<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>Document</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="profile-card">
<div class="profile-content">
<div class="profile-picture">
<img src="profile.jpg" alt="">
</div>
<h2 class="profile-name">
Ahmed Developer
</h2>
<p class="profile-description">
working as fullstack web developer in many projects
</p>
<ul class="social-icons">
<li>
<a href="#">
<i class="fab fa-twitter"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-facebook"></i>
</a>
</li>
<li>
<a href="#">
<i class="fab fa-instagram"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="attribute">
Create by
<a href="https://codehunter.online/">
Code Hunter
</a >
</div>
</body>
</html>
CSS FILE
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&display=swap');
*{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
min-height: 100vh;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
background-color: rgba(0,213,255,1);
font-family: 'poppins';
position: relative;
}
.profile-card {
height: 350px;
width: 250px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: #f0f0f0;
border-radius: 20px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.profile-content {
padding-inline: 20px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
}
.profile-picture {
width: 120px;
height: 120px;
background-color: #aaa;
border-radius: 50%;
}
.profile-picture img{
max-width: 100%;
}
.profile-name {
margin-top: 10px;
font-size: 24px;
font-weight: bold;
}
.profile-description {
margin-top: 5px;
color: #777;
}
.social-icons {
margin-top: 20px;
list-style: none;
padding: 0;
}
.social-icons li {
display: inline-block;
margin: 0 10px;
}
.social-icons a {
color: #777;
font-size: 24px;
transition: color 0.3s ease;
}
.social-icons a:hover {
color: #25a1ff;
}
.attribute{
position: absolute;
bottom: 10px;
}
Conclusion
Mastering the art of creating a profile card using HTML and CSS opens up exciting possibilities for enhancing web design skills. This blog has provided a comprehensive guide, offering step-by-step insights into the creation process. By delving into the intricacies of HTML and CSS, readers have gained the knowledge to craft visually appealing and informative profile cards.
The inclusion of a complete source code, shared generously and without any cost, adds immense value to the learning experience. This not only facilitates the understanding of the concepts discussed but also empowers readers to implement their own profile card designs seamlessly.
As we conclude, remember that the journey of web development is a continuous learning curve. The proficiency gained in creating profile cards can serve as a solid foundation for broader endeavors in front-end development. Embrace the creative possibilities that HTML and CSS offer, and don’t hesitate to explore and innovate. Happy coding!