In the world of web development, adding engaging and visually appealing elements to your website can make a significant difference in capturing your visitors’ attention. One such element is an animated profile card that not only displays essential information but also provides a dynamic and interactive user experience.
In this step-by-step tutorial, we will guide you through the process of building an animated profile card using only HTML and CSS. By the end of this tutorial, you’ll have the knowledge and skills to create captivating profile cards that bring your website to life.
Portfolio card should contain information about a personal so that the user(client) can get to know what he/she does or skilled in. The portfolio card helps the user to get more information a person that they may want to hire.
Steps:
- Setting Up the HTML Structure: Provide a step-by-step guide for creating the HTML structure, including necessary elements.
- Designing with CSS: Explain how to style the card, covering layout, fonts, colors, and animations.
- Creating Hover Effects: Demonstrate the implementation of interactive hover effects.
- Animating the Card: Show how to add animations for a dynamic and visually appealing card.
- Making It Responsive: Ensure the card looks good on different screen sizes.
- Advanced Styling Tips: Adding some other advanced CSS techniques to further enhance the card’s appearance.
A personal portfolio card should be well designed. To make this personal card, we are going to start by.
Creating a HTML File and add the following codes.
HTML Codes
<!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">
<link rel="stylesheet" href="feather/feather.css">
<link rel="stylesheet" href="style.css">
<title>Profile card</title>
</head>
<body>
<div class="container">
<!------------------------------ First card container --------------------------------------->
<div class="card-container">
<div class="top-box">
<div class="top-menu">
<!------------------------------- First dropdown --------------------------------------->
<div class="dropdown">
<button class="dropbtn">
<i class="fe fe-align-left"></i>
</button>
<div class="dropdown-content menu">
<div class="menu-list">
<a href="#">About</a>
<a href="#">Portfolio</a>
<a href="#">Activities</a>
</div>
</div>
</div>
<!------------------------------- Second dropdown --------------------------------------->
<div class="dropdown">
<button class="dropbtn">
<i class="fe fe-more-vertical"></i>
</button>
<div class="dropdown-content more">
<span class="skills-title">Skills</span>
<div class="skills-list">
<label>HTML</label>
<label>JavaScript</label>
<label>CSS</label>
<label>Sass</label>
<label>Raact</label>
<label>Bootstrap</label>
<label>WordPress</label>
</div>
</div>
</div>
</div>
</div>
<!-------------------------- End of top Box(Menu) ---------------------------------->
<div class="image-box">
<img src="images/avatar.jpg" alt="user-profile">
</div>
<!-------------------------- End of Image Box ---------------------------------->
<div class="main-box">
<div class="user-info">
<span class="name">Mark Rash</span>
<span class="job">- Web Designer -</span>
</div>
<!-------------------------- End of user information ---------------------------------->
<div class="social-icons">
<div class="social-icon-box">
<span><i class="fe fe-facebook"></i></span>
<p class="social-icon-name">Facebook</p>
</div>
<div class="social-icon-box">
<span><i class="fe fe-github"></i></span>
<p class="social-icon-name">Github</p>
</div>
<div class="social-icon-box">
<span><i class="fe fe-instagram"></i></span>
<p class="social-icon-name">Instagram</p>
</div>
<div class="social-icon-box">
<span><i class="fe fe-gitlab"></i></span>
<p class="social-icon-name">Gitlab</p>
</div>
</div>
<!---------------------------- End of Social icons ------------------------------>
<div class="btn-box">
<button class="btn">Hire</button>
</div>
<!---------------------------- End of button box ------------------------------>
</div>
<!---------------------------- Animated circles ------------------------------>
<div class="circle-1"></div>
<div class="circle-2"></div>
<!---------------------------- End of Animated circles ------------------------------>
</div>
<!------------------------------ Second card container --------------------------------------->
<div class="card-container">
<div class="top-box">
<div class="top-menu">
<!------------------------------- First dropdown --------------------------------------->
<div class="dropdown">
<button class="dropbtn">
<i class="fe fe-align-left"></i>
</button>
<div class="dropdown-content menu">
<div class="menu-list">
<a href="#">About</a>
<a href="#">Portfolio</a>
<a href="#">Activities</a>
</div>
</div>
</div>
<!------------------------------- Second dropdown --------------------------------------->
<div class="dropdown">
<button class="dropbtn">
<i class="fe fe-more-vertical"></i>
</button>
<div class="dropdown-content more">
<span class="skills-title">Skills</span>
<div class="skills-list">
<label>HTML</label>
<label>JavaScript</label>
<label>CSS</label>
<label>Sass</label>
<label>Raact</label>
<label>Bootstrap</label>
<label>WordPress</label>
</div>
</div>
</div>
</div>
</div>
<!-------------------------- End of top Box(Menu) ---------------------------------->
<div class="image-box">
<img src="images/avatar-2.jpg" alt="user-profile">
</div>
<!-------------------------- End of Image Box ---------------------------------->
<div class="main-box">
<div class="user-info">
<span class="name">John Doe</span>
<span class="job">- Web Designer -</span>
</div>
<!-------------------------- End of user information ---------------------------------->
<div class="social-icons">
<div class="social-icon-box">
<span><i class="fe fe-facebook"></i></span>
<p class="social-icon-name">Facebook</p>
</div>
<div class="social-icon-box">
<span><i class="fe fe-github"></i></span>
<p class="social-icon-name">Github</p>
</div>
<div class="social-icon-box">
<span><i class="fe fe-instagram"></i></span>
<p class="social-icon-name">Instagram</p>
</div>
<div class="social-icon-box">
<span><i class="fe fe-gitlab"></i></span>
<p class="social-icon-name">Gitlab</p>
</div>
</div>
<!---------------------------- End of Social icons ------------------------------>
<div class="btn-box">
<button class="btn">Hire</button>
</div>
<!---------------------------- End of button box ------------------------------>
</div>
<!---------------------------- Animated circles ------------------------------>
<div class="circle-1"></div>
<div class="circle-2"></div>
<!---------------------------- End of Animated circles ------------------------------>
</div>
<!------------------------------ Third card container --------------------------------------->
<div class="card-container">
<div class="top-box">
<div class="top-menu">
<!------------------------------- First dropdown --------------------------------------->
<div class="dropdown">
<button class="dropbtn">
<i class="fe fe-align-left"></i>
</button>
<div class="dropdown-content menu">
<div class="menu-list">
<a href="#">About</a>
<a href="#">Portfolio</a>
<a href="#">Activities</a>
</div>
</div>
</div>
<!------------------------------- Second dropdown --------------------------------------->
<div class="dropdown">
<button class="dropbtn">
<i class="fe fe-more-vertical"></i>
</button>
<div class="dropdown-content more">
<span class="skills-title">Skills</span>
<div class="skills-list">
<label>HTML</label>
<label>JavaScript</label>
<label>CSS</label>
<label>Sass</label>
<label>Raact</label>
<label>Bootstrap</label>
<label>WordPress</label>
</div>
</div>
</div>
</div>
</div>
<!-------------------------- End of top Box(Menu) ---------------------------------->
<div class="image-box">
<img src="images/avatar.png" alt="user-profile">
</div>
<!-------------------------- End of Image Box ---------------------------------->
<div class="main-box">
<div class="user-info">
<span class="name">Mark Doe</span>
<span class="job">- Programmer-</span>
</div>
<!-------------------------- End of user information ---------------------------------->
<div class="social-icons">
<div class="social-icon-box">
<span><i class="fe fe-facebook"></i></span>
<p class="social-icon-name">Facebook</p>
</div>
<div class="social-icon-box">
<span><i class="fe fe-github"></i></span>
<p class="social-icon-name">Github</p>
</div>
<div class="social-icon-box">
<span><i class="fe fe-instagram"></i></span>
<p class="social-icon-name">Instagram</p>
</div>
<div class="social-icon-box">
<span><i class="fe fe-gitlab"></i></span>
<p class="social-icon-name">Gitlab</p>
</div>
</div>
<!---------------------------- End of Social icons ------------------------------>
<div class="btn-box">
<button class="btn">Hire</button>
</div>
<!---------------------------- End of button box ------------------------------>
</div>
<!---------------------------- Animated circles ------------------------------>
<div class="circle-1"></div>
<div class="circle-2"></div>
<!---------------------------- End of Animated circles ------------------------------>
</div>
</div>
</body>
</html>
CSS Codes
/* POPPINS FONT */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');
*{
box-sizing: border-box;
font-family: 'Poppins',sans-serif;
}
body{
background: linear-gradient(330deg,#10c7df,aqua);
background-repeat: no-repeat;
}
.container{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
flex-wrap: wrap;
}
.card-container{
position: relative;
width: 300px;
height: 420px;
background: #fff;
margin: 10px 20px;
border-radius: 30px;
box-shadow: 1px 5px 10px 10px rgba(0,0,0,0.05);
overflow: hidden;
}
.top-box{
background: #593ceb;
height: 120px;
border-radius: 30px;
padding: 20px 30px;
}
.top-menu{
display: flex;
justify-content: space-between;
}
.top-box i{
font-size: 22px;
}
.dropdown{
position: relative;
display: inline-block;
}
.dropbtn{
display: flex;
align-items: center;
justify-content: center;
height: 40px;
width: 40px;
background: transparent;
border: none;
border-radius: 10px;
color: #fff;
cursor: pointer;
transition: .3s ease-in-out;
}
.dropdown-content{
display: none;
position: absolute;
width: 180px;
background: #fff;
border-radius: 5px;
box-shadow: 0px 5px 10px 1px rgba(0,0,0,0.2);
overflow: hidden;
z-index: 10;
}
/* Show the dropdown on hover */
.dropdown:hover .dropdown-content{
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown*/
.dropdown:hover .dropbtn{
box-shadow: inset 0px 0px 2px 1px #3845a1;
}
.menu-list{
display: flex;
flex-direction: column;
}
.menu-list a{
text-decoration: none;
font-size: 15px;
color: #000;
padding: 10px 20px;
}
.menu-list a:hover{
background: #ffc9e2;
}
.more{
right: 0;
padding: 10px;
}
.skills-title{
font-size: 15px;
color: #ee2482;
}
.skills-list{
display: flex;
flex-wrap: wrap;
gap: 5px;
margin: 5px;
}
.skills-list label{
font-size: 13px;
background: #7760e6;
color: #fff;
padding: 1px 8px;
border-radius: 3px;
}
/* Image Box*/
.image-box{
display: flex;
align-items: center;
justify-content: center;
margin: -75px auto 10px auto;
height: 160px;
width: 160px;
background: #fff;
border-radius: 50%;
}
.image-box img{
width: 150px;
border-radius: 50%;
box-shadow: 0px 3px 2px 1px rgba(0,0,0,0.3);
}
/* User Infomation */
.user-info .name{
display: flex;
justify-content: center;
}
.user-info .job{
display: flex;
justify-content: center;
font-size: 13px;
color: #ee2482;
}
/* Social icons */
.social-icons{
display: flex;
justify-content: center;
margin: 10px 0 20px 0;
}
.social-icon-box{
position: relative;
display: flex;
align-items: center;
flex-direction: column;
}
.social-icon-box span{
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
border: 1px solid #593ceb;
margin: 5px;
border-radius: 50%;
cursor: pointer;
transition: .4s;
z-index: 2;
}
.social-icon-box span:hover{
color: #fff;
box-shadow: inset 0 0 0 20px #8c78f0;
transform: translateY(-5px);
}
.social-icon-box .social-icon-name{
position: absolute;
top: 0;
opacity: 0;
padding: 5px 20px;
font-size: 13px;
background: #8c78f0;
color: #fff;
border-radius: 30px;
transition: all .3s cubic-bezier(0.07, -0.55, 0.265, 1.55);
}
.social-icon-box span:hover ~ .social-icon-name{
top: -45px;
opacity: 1;
}
/* Hire Button*/
.btn-box{
display: flex;
justify-content: center;
}
.btn-box .btn{
width: 80px;
height: 35px;
background: linear-gradient(to right,#9823db,#fb4aef);
color: #fff;
border: none;
border-radius: 30px;
cursor: pointer;
}
.btn-box .btn:hover{
background: linear-gradient(to right,#fb4aef,#9823db);
}
/* Animated circles */
.circle-1{
position: absolute;
left: -20px;
top: 35%;
height: 50px;
width: 50px;
border: 2px dashed #c975fb;
border-radius: 50%;
animation: circle-1 5s ease-in-out infinite;
}
.circle-2{
position: absolute;
right: -20px;
bottom: -30px;
height: 100px;
width: 100px;
border: 2px dashed #c975fb;
border-radius: 50%;
animation: circle-2 15s ease-in-out infinite;
}
/* Circle-1 animation */
@keyframes circle-1 {
50%{
left: -20px;
top: 40%;
}
}
/* Circle-1 animation */
@keyframes circle-2 {
from{
transform: rotate(0deg);
}
to{
transform: rotate(360deg);
}
}
Think it was understandable. If you have any problem, leave a comment.
I will be pleased to help.
