Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Create a Profile Card with CSS
Under the Team page, or authors page, you must have seen the profile card of employees or authors. Such profile cards include the profile image, name, and profile. A button can also be created to allow users to contact. In most cases, such buttons are optional. Let us see how to create a profile card with CSS.
Set a div for the profile card
A parent div is set for the card. First, set the profile image, then the name, designation and location. At the end, set a button using the <button> element −
<div class="profileCard"> <img src="https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg" alt="Amit" style="width:100%" /> <h1>Amit Diwan</h1> <p class="Designation">Entrepreneur</p> <p>Delhi, India</p> <p><button>Contact</button></p> </div>
Style the card
The maximum width of the profile card is set using the max-width property. The box shadow is also set. The text of the card is aligned to center −
profileCard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
background-color: rgb(190, 224, 224);
}
The Card Designation
The designation below the profile image should be styled differently to look appealing. The font style is set using the font-weight property −
.Designation {
color: rgb(26, 0, 51);
font-weight: bold;
font-size: 18px;
}
Display the button on the card
The display property is used with the inline-block value to display the button on the profile card. With that, the cursor is changed to pointer using the cursor property to make it look like a clickable link −
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: rgb(23, 31, 102);
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
Example
To create a profile card with CSS, the code is as follows −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.profileCard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: arial;
background-color: rgb(190, 224, 224);
}
.Designation {
color: rgb(26, 0, 51);
font-weight: bold;
font-size: 18px;
}
button {
border: none;
outline: 0;
display: inline-block;
padding: 8px;
color: white;
background-color: rgb(23, 31, 102);
text-align: center;
cursor: pointer;
width: 100%;
font-size: 18px;
}
button:hover, a:hover {
opacity: 0.7;
}
</style>
</head>
<body>
<h2 style="text-align:center">User Profile Card</h2>
<div class="profileCard">
<img src="https://www.tutorialspoint.com/assets/profiles/123055/profile/200_187394-1565938756.jpg" alt="Amit" style="width:100%" />
<h1>Amit Diwan</h1>
<p class="Designation">Entrepreneur</p>
<p>Delhi, India</p>
<p><button>Contact</button></p>
</div>
</body>
</html>
374 Views
