Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create a profile card with CSS?
A profile card is a common UI component used on team pages or author sections to display employee or author information. These cards typically include a profile image, name, designation, and location. A contact button can also be added to allow users to interact. Let us see how to create a professional-looking profile card with CSS.
Syntax
.profile-card {
max-width: value;
box-shadow: shadow-values;
text-align: alignment;
background-color: color;
}
HTML Structure
First, we create the HTML structure with a parent div containing the profile image, name, designation, location, and contact button −
<div class="profileCard"> <img src="profile-image.jpg" alt="Profile" /> <h1>Name</h1> <p class="designation">Job Title</p> <p>Location</p> <button>Contact</button> </div>
Styling the Profile Card
The card container is styled with a maximum width, box shadow for depth, centered text alignment, and a subtle background color −
.profileCard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: Arial, sans-serif;
background-color: #f9f9f9;
border-radius: 10px;
padding: 20px;
}
Example: Complete Profile Card
Here's a complete example demonstrating how to create an attractive profile card −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
background-color: #f0f0f0;
padding: 20px;
}
.profileCard {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
max-width: 300px;
margin: auto;
text-align: center;
font-family: Arial, sans-serif;
background-color: white;
border-radius: 10px;
padding: 20px;
transition: transform 0.3s ease;
}
.profileCard:hover {
transform: translateY(-5px);
}
.profileCard img {
width: 100%;
border-radius: 50%;
max-width: 150px;
margin-bottom: 15px;
}
.profileCard h1 {
margin: 10px 0;
color: #333;
font-size: 24px;
}
.designation {
color: #2c5aa0;
font-weight: bold;
font-size: 18px;
margin: 10px 0;
}
.location {
color: #666;
margin: 10px 0;
}
.contact-btn {
border: none;
outline: 0;
display: inline-block;
padding: 12px 24px;
color: white;
background-color: #2c5aa0;
text-align: center;
cursor: pointer;
width: 80%;
font-size: 16px;
border-radius: 25px;
transition: background-color 0.3s ease;
}
.contact-btn:hover {
background-color: #1e3f73;
}
</style>
</head>
<body>
<h2 style="text-align:center; color: #333;">User Profile Card</h2>
<div class="profileCard">
<img src="/css/images/profile-placeholder.jpg" alt="Profile" />
<h1>John Smith</h1>
<p class="designation">Senior Developer</p>
<p class="location">New York, USA</p>
<button class="contact-btn">Contact</button>
</div>
</body>
</html>
A centered profile card with a circular profile image, name "John Smith", designation "Senior Developer", location "New York, USA", and a blue "Contact" button. The card has a subtle shadow, rounded corners, and a hover effect that lifts the card slightly.
Key Styling Features
-
Box Shadow: Creates depth with
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2) -
Rounded Corners: Uses
border-radiusfor modern appearance -
Hover Effects: Adds interactivity with
transformandtransition -
Responsive Design:
max-widthensures the card adapts to different screen sizes - Typography: Different font weights and colors for hierarchy
Conclusion
Creating a profile card with CSS involves structuring HTML content within a container and applying styles for layout, typography, and visual effects. The key is using box shadows, proper spacing, and hover effects to create an engaging user interface component.
505 Views
