ID Card Design Using HTML and CSS
Designing an ID card using HTML and CSS involves creating a visual representation of an identification card that typically includes information about an individual, such as their name, photo, job title, department, and other relevant details. Here’s a detailed description of how to create an ID card using HTML and CSS:
Ensure that you have your image file (e.g., the photo) in the correct path and specify it accordingly. To view your ID card, save the HTML and CSS code in separate files (e.g., index.html and style.css) and open the HTML file in a web browser. You can further enhance the design with additional CSS styles and layout adjustments as needed.
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>card</title>
<link rel="stylesheet" href="style.css"/>
<script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="card">
<div class="img-bx">
<img src="id.jpg" alt="img" />
</div>
<div class="content">
<div class="detail">
<h2>Krishtina Smita<br /><span>Web Developer</span></h2>
<ul class="sci">
<li>
<a href="#"><i class="fab fa-facebook-f"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-twitter"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</li>
<li>
<a href="#"><i class="fab fa-instagram"></i></a>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, Helvetica, sans-serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(#03a9f4, #58b9e6 45%, #fff 45%, #fff 100%);
}
.card {
position: relative;
width: 300px;
height: 400px;
background: #fff;
border-radius: 10px;
background: rgba(255, 255, 255, 0.1);
border-top: 1px solid rgba(255, 255, 255, 0.5);
backdrop-filter: blur(15px);
box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
}
.img-bx {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 10px;
overflow: hidden;
transform: translateY(30px) scale(0.5);
transform-origin: top;
}
.img-bx img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.content {
position: absolute;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: flex-end;
padding-bottom: 30px;
}
.content .detail {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
text-align: center;
}
.content .detail h2 {
color: #444;
font-size: 1.6em;
font-weight: bolder;
}
.content .detail h2 span {
font-size: 0.7em;
color: #03a9f4;
font-weight: bold;
}
.sci {
position: relative;
display: flex;
margin-top: 5px;
}
.sci li {
list-style: none;
margin: 4px;
}
.sci li a {
width: 45px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 50%;
background: transparent;
font-size: 1.5em;
color: #444;
text-decoration: none;
box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
transition: 0.5s;
}
.sci li a:hover {
background: #03a9f4;
color: #fff;
}
For More Tutorials Please Click Here
