Hello developers, today in this blog, you'll learn to create an Animated Profile Card Design using HTML, CSS & JavaScript.
Cards are surfaces that display contents and actions on a particular topic. They should be easy to scan for appropriate and actionable information. Components, like text and images, should be placed on them.
In this blog(Animated Profile Card Design), there is a profile card at the center of the page with the photo, title, a plus icon, with some text. On clicking the plus icon, the card will expand and the photo content shrinks to show the social media icons. That is the backside of the card is made visible. This is made by using JavaScript.
The source code of this Animated Profile Card Design is given below, if you want the source code of this program, you can copy it. You can use this Animated Profile Card Design on your project.
Animated Profile Card Design [Source Code]
To make this website, you would like to make three files: an HTML file, a CSS file & a JavaScript file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.
body {
font-family: "Open Sans", sans-serif;
background-color: #f1f9fc;
box-sizing: content-box;
padding: 0;
margin: 0;
}
.pCard_card {
width: 400px;
height: 550px;
margin: 50px auto;
border-radius: 30px;
background-color: #f6fcfe;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: relative;
overflow: hidden;
}
.pCard_card .pCard_back {
text-align: center;
position: absolute;
left: 0;
right: 0;
top: 50%;
margin-top: -139px;
font-weight: 600;
z-index: 1;
}
.pCard_card .pCard_back a {
text-decoration: none;
}
.pCard_card .pCard_up {
position: absolute;
width: 100%;
height: 437px;
background-image: url(https://cdn.pixabay.com/photo/2019/06/06/16/02/technology-4256272__340.jpg);
background-position: 50%;
background-size: cover;
z-index: 3;
text-align: center;
border-top-left-radius: 30px;
border-top-right-radius: 30px;
transition: 0.5s ease-in-out;
}
.pCard_on .pCard_up {
height: 100px;
box-shadow: 0 0 30px #cfd8dc;
}
.pCard_card .pCard_up .pCard_text {
position: absolute;
top: 350px;
left: 0;
right: 0;
color: #000;
transition: 0.5s ease-in-out;
}
.pCard_on .pCard_up .pCard_text {
top: 20px;
}
.pCard_card .pCard_up .pCard_text h2 {
margin: 5px;
font-size: 25px;
font-weight: 600;
}
.pCard_card .pCard_up .pCard_text p {
margin: 0;
font-size: 16px;
color: #000;
}
.pCard_card .pCard_up .pCard_add {
border-radius: 50%;
background-color: #ed145b;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
position: absolute;
top: 410px;
left: 0;
right: 0;
margin: auto;
width: 50px;
height: 50px;
cursor: pointer;
transition: 0.5s ease-in-out;
}
.pCard_on .pCard_up .pCard_add {
transform: rotate(360deg) scale(0.8);
top: 425px;
}
.pCard_card .pCard_down {
background-color: #ccfef4;
position: absolute;
bottom: 0px;
width: 100%;
height: 150px;
z-index: 2;
border-bottom-left-radius: 30px;
border-bottom-right-radius: 30px;
transition: 0.5s ease-in-out;
}
.pCard_on .pCard_down {
height: 100px;
box-shadow: 0 0 30px #cfd8dc;
}
.pCard_card .pCard_down div {
width: 33.333%;
float: left;
text-align: center;
margin-top: 50px;
font-size: 18px;
transition: 0.5s ease-in-out;
}
.pCard_on .pCard_down div {
margin-top: 10px;
}
.pCard_card .pCard_down div p:first-of-type {
color: #68818c;
margin-bottom: 5px;
}
.pCard_card .pCard_down div p:last-of-type {
color: #334750;
font-weight: 700;
margin-top: 0;
}
.pCard_card .pCard_back a i {
margin: 10px;
padding: 15px;
border-radius: 15px;
transition: 0.3s ease-in-out;
}
.pCard_card .pCard_back a i:hover {
transform: scale(1.2);
}
.pCard_card .pCard_back a:nth-of-type(1) i {
color: #3b5998;
border: 2px solid #3b5998;
}
.pCard_card .pCard_back a:nth-of-type(2) i {
color: #0077b5;
border: 2px solid #0077b5;
}
.pCard_card .pCard_back a:nth-of-type(3) i {
color: #1769ff;
border: 2px solid #1769ff;
}
.pCard_card .pCard_back a:nth-of-type(4) i {
color: #000000;
border: 2px solid #000000;
}
.pCard_card .pCard_back a:nth-of-type(5) i {
color: #eb5e95;
border: 2px solid #eb5e95;
}
.pCard_card .pCard_back a:nth-of-type(6) i {
color: #3f729b;
border: 2px solid #3f729b;
}
.pCard_card .pCard_up .pCard_add i {
color: white;
font-size: 30px;
line-height: 50px;
}
.credit a {
text-decoration: none;
color: #000;
font-weight: 800;
}
.credit {
text-align: center;
font-family: Verdana,Geneva,Tahoma,sans-serif;
}
$(function(){
"use strict";
$(".pCard_add").click(function(){
$(".pCard_card").toggleClass("pCard_on");
$(".pCard_add i").toggleClass("fa-minus");
});
});
Thank you for reading our blog. If you face any problem creating this Animated Profile Card Design using HTML, CSS & JavaScript, then contact us or comment us. We'll try to provide a solution to your problem as soon as possible.
Post a Comment
Thank you
Learning robo team