PUBLISHED ON: AUGUST 5, 2021
How to create a profile card with CSS?
A profile card is used to store the key values gathered in one card. For example, store all social media accounts in one place. The elements in the profile card are added using HTML and styled with CSS.
In this tutorial, we will be learning to create a basic profile card with a profile pic and the social media buttons along with a message button.
Creating a profile card
First of all, take a div container where you will wrap all the elements of the profile card then add CSS box-shadow property for the borders to the card and add max-width , text-alignment property and some margin as well.
Now add a <image> tag which can be added with rounded borders using border-radius: 50%. Add social media links using <a> element.
To add icons to the links use Font Awesome icon library and customize the <a> element with padding and font-size and other CSS properties. Also, add a message button and customize it with CSS property.
Example: Creating a profile card with CSS
In this example, we have created a basic profile card. We have added links, images, and buttons to it.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.profile-card {
box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
}
a {
font-size: 50px;
text-decoration: none;
}
button {
width: 100px;
background-color: green;
color: white;
margin-bottom: 8px;
font-size: 16px;
padding: 10px;
}
</style>
</head>
<body>
<div class="profile-card">
<h2> Profile card </h2>
<img src="https://s3.ap-south-1.amazonaws.com/s3.studytonight.com/tutorials/uploads/pictures/1628080137-.png" alt="image">
<div>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-facebook"></i></a>
</div>
<p><button>message</button></p>
</div>
</body>
</html>
Output
Here is the output of the above code.
Example: Creating a profile card with CSS
In this example, we have added background-color to the profile card.
Conclusion
In this tutorial, we have created a profile card with CSS. We can add a div container and shadow-box effect to create a card where we can add elements like images, links, and buttons.
