The article “Identity Card Design with HTML and CSS” provides a step-by-step guide to creating a visually appealing and professional identity card using HTML and CSS.
The HTML code creates a basic skeleton of the Identity card and CSS applied styles to the HTML code to make a complete card.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<title>Identity Card</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f9;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.id-card-container {
text-align: center;
}
.id-card-title {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
}
.id-card {
width: 300px;
height: 400px;
padding: 20px;
background-color: white;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.id-card img.profile {
width: 150px;
height: 150px;
border-radius: 50%;
background-color: #191919;
padding: 5px;
margin-bottom: 15px;
}
.id-card h2 {
font-size: 32px;
margin: 10px 0 5px;
}
.id-card p {
margin: 5px 0;
font-size: 18px;
}
.id-card .contact-info {
margin-top: 20px;
text-align: left;
}
.id-card .social-icons {
display: flex;
justify-content: center;
gap: 10px;
margin-top: 15px;
}
.id-card .social-icons a {
width: 50px;
height: 50px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 10%;
background-color: #1f1f1f;
color: white;
text-decoration: none;
font-size: 28px;
}
.id-card .social-icons a:hover {
background-color: #2b80ff;
}
</style>
</head>
<body>
<div class="id-card-container">
<div class="id-card-title">Identity Card</div>
<div class="id-card">
<img src="avatar.jpg" alt="Profile" class="profile">
<h2>Akash Singh</h2>
<p>Blogger & Content Writer</p>
<div class="contact-info">
<p>Contact: +91-XXXXXXXXXX</p>
<p>Email Id: support@webdevhubs.com</p>
</div>
<div class="social-icons">
<a href="#" title="Facebook"><i class="fa-brands fa-facebook-f"></i></a>
<a href="#" title="Instagram"><i class="fa-brands fa-instagram"></i></a>
<a href="#" title="LinkedIn"><i class="fa-brands fa-linkedin-in"></i></a>
<a href="#" title="Twitter"><i class="fa-brands fa-twitter"></i></a>
</div>
</div>
</div>
</body>
</html>
Output
