Welcome to Code With Random blog. We learn how to create an Id Card Design Using Html and Css. in this Id Card we have an image and a caption text, social media icon, and have hover effect.
A profile card is a useful tool for web development, especially for newcomers. Here, you may find the user image, their name, a brief bio, their followers and followings, and lastly the follow button. HTML and CSS will be used to complete them.
Hope you enjoy our blog so let's start with a basic HTML structure for the Profile ID Card Design.
Html Code For ID Card
<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="./Profile-card.css" />
<script src="https://kit.fontawesome.com/66aa7c98b3.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="card">
<div class="img-bx">
<img src="https://i.postimg.cc/dQ7zWbS5/img-4.jpg" alt="img" />
</div>
<div class="content">
<div class="detail">
<h2>Emilia Roy<br /><span>Senior Designer</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>
Here We first create a div with class "card" which act as a container for our profile card. Then inside our container we will create an another div inside in which we will add an image to our profile card and we also create an another div which is for the content for our profile card. Using the h2 tag selector we will add the name of the user for we are creating the profile card.
We don't need anything else to develop the structure for our profile card. We'll style our profile card now that we've learned how to use CSS. But first, let's have a peek at our framework.
CSS Code For ID Card
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Times New Roman', Times, serif;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(#03a9f4, #03a9f4 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;
}
We'll now set the box-sizing to "border-box," the margin and padding to "zero," and the font family to "Times New Roman" as our new body fonts using the universal selector property.
By setting the background property to a mixture of white and blue, we will add a linear gradient backdrop to our body.
We will only adjust the image's location and the icons' height. Once you have a handle on the styling, I would advise you to read the code.
We have completed our CSS section, Here is our final updated output CSS.
We have completed our CSS section, Here is our updated output with CSS. Hope you like the Profile Id Card Design, you can see the output project screenshots. See our other blogs and gain knowledge in front-end development.
Thank you
This post teaches us to create a Profile Id Card Design using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.
Written by - Code With Random/Anki
code by - Sanket Bodake
Top comments (0)