Here we are going to make an hover animated profile card using HTML and CSS only.
Copy this HTML code and save it as "index.html" on your device.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover animated profile card</title>
</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<div class="profile-card">
<div class="profile-image">
<img src="1.jpg" class="prof-img">
</div>
<div class="profile-info">
<h2>John Doe</h2>
<p>Web Developer</p>
<div class="social-icons">
<a href="#" class="social-ico"><i class="fab fa-facebook"></i></a>
<a href="#" class="social-ico"><i class="fab fa-twitter"></i></a>
<a href="#" class="social-ico"><i class="fab fa-instagram"></i></a>
</div>
<a href="#" class="contact-button"><i class="fa fa-address-book" aria-hidden="true"></i>Contact</a>
</div>
</div>
</body>
</html>
Copy this CSS code and save it as "style.css" on your device.
CSS:
body{
background-color: #666;
font-family: sans-serif;
}
.profile-card {
width: 300px;
text-align: center;
background-color: #fff;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
overflow: hidden;
transition: transform 0.3s ease;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: fff;
}
.profile-image {
height: 200px;
background-color: #4071F4;
border-radius: 5px;
}
.prof-img{
width: 60%;
height: auto;
aspect-ratio: 1/1;
object-fit: contain;
background-color: #fff;
transition: border-radius 1s ease;
border-radius: 50%;
margin-top: 10px;
}
.prof-img:hover{
border-radius: 1px;
}
.profile-info {
padding: 20px;
}
.profile-info h2 {
margin: 0;
font-size: 24px;
color: #333;
}
.profile-info p {
margin: 5px 0;
font-size: 16px;
color: #666;
}
.social-icons {
margin-top: 20px;
display: flex;
justify-content: center; /* Align items horizontally at the center */
}
.social-ico {
display: inline-flex; /* Use flexbox for positioning */
justify-content: center; /* Center horizontally */
align-items: center; /* Center vertically */
width: 40px;
height: 40px;
background-color: #04aa6d;
border-radius: 50%;
margin-right: 10px;
color: #fff;
font-size: 26px;
transition: background-color 0.8s ease;
position: relative; /* Set position to relative */
}
.social-ico i {
position: absolute; /* Set position to absolute */
top: 50%; /* Move to 50% from top */
left: 50%; /* Move to 50% from left */
transform: translate(-50%, -50%); /* Adjust to center */
}
.social-icons a:hover {
background-color: #555;
color: #04aa6d;
}
.contact-button {
display: inline-block;
padding: 10px 20px;
background-color: #04aa6d;
color: #fff;
border: none;
border-radius: 5px;
font-size: 16px;
margin-top: 10px;
text-decoration: none;
transition: background-color 0.8s ease;
}
.contact-button i{
margin-right: 10px;
}
.contact-button:hover {
background-color: #007bff;
}
Output of the given Codes:
Conclusion:
This code shows how to make a nice and beautiful profile card using HTML and CSS. The layout of the profile card is very simple. It uses cool effects like when you hover over things, and it includes Font Awesome icons for social media. All the very smooth.
0 Comments