Hey, developers welcome to Day 37 of our 90Days 90Projects challenge. And in Day 37 we are going to create Responsive Profile Cards HTML CSS.
Preview
So to run this code you just need to copy the HTML and CSS code and run it into your code Editor.
Image Resource - Download Now
HTML Code
index.html
<!DOCTYPE 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> Profile Cards Design </title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css"
integrity="sha512-MV7K8+y+gLIBoVD59lQIYicR65iaqukzvf/nwasF0nqhPay5w/9lJmVM2hMDcnK1OnMGCdVK+iQrJ7lzPJQd1w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
<section id="profile-cards">
<!-- Card Item Starts from Here -->
<div class="card-item">
<div class="description">
<h2> John Doe </h2>
<span class="role"> Frontend Developer </span>
<ul>
<li><a href=""><i class="fa-brands fa-github"></i></a></li>
<li><a href=""><i class="fa-brands fa-linkedin"></i></a></li>
<li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
</ul>
</div>
<div class="image">
<!-- Replace the src with user image (iamge ratio => 1:1) -->
<img src="./user.jpg" alt="">
</div>
</div>
<!-- Card Item Ends from Here -->
<!-- Card Item Starts from Here -->
<div class="card-item">
<div class="description">
<h2> John Doe </h2>
<span class="role"> Frontend Developer </span>
<ul>
<li><a href=""><i class="fa-brands fa-github"></i></a></li>
<li><a href=""><i class="fa-brands fa-linkedin"></i></a></li>
<li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
</ul>
</div>
<div class="image">
<!-- Replace the src with user image -->
<img src="./user2.jpg" alt="">
</div>
</div>
<!-- Card Item Ends from Here -->
<!-- Card Item Starts from Here -->
<div class="card-item">
<div class="description">
<h2> John Doe </h2>
<span class="role"> Frontend Developer </span>
<ul>
<li><a href=""><i class="fa-brands fa-github"></i></a></li>
<li><a href=""><i class="fa-brands fa-linkedin"></i></a></li>
<li><a href=""><i class="fa-brands fa-twitter"></i></a></li>
</ul>
</div>
<div class="image">
<!-- Replace the src with user image -->
<img src="./user.jpg" alt="">
</div>
</div>
<!-- Card Item Ends from Here -->
</section>
</body>
</html>
CSS Code
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#profile-cards {
width: 100%;
height: 100vh;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: rgb(123, 27, 123);
}
.card-item {
width: 300px;
padding: 15px;
margin: 1.5rem;
display: flex;
border-radius: 10px;
background-color: white;
justify-content: space-between;
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.5);
}
.image {
position: relative;
width: 100px;
bottom: 1.5rem;
cursor: pointer;
background-size: cover;
}
.image img {
position: absolute;
top: 0;
left: 0;
width: 100%;
border-radius: 8px;
background-size: cover;
transition: all 0.2s linear;
}
.image:hover img {
transform: translateY(-5px);
box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.7);
}
.description ul {
display: flex;
list-style: none;
}
.description h2 {
font-size: 24px;
}
.role {
color: #e65b00;
font-size: 12px;
}
.description ul li {
font-size: 1.2rem;
padding: 10px 17px 5px 0;
}
.description ul li a {
text-decoration: none;
color: purple;
}
