you want to make an amazing profile card to impress your visitor or maybe for a freelance mission, this is a simple but a beautiful animated card for your website or your portfolio.
Video tutorial
HTML CODE :
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style/style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<div class="center">
<div class="bio_card">
<div class="left">
<div class="btn">
<i class="fas fa-plus"></i>
</div>
<img class="cover" src="img/photo-1521185496955-15097b20c5fe.jpg">
<div class="box">
<img class="profile" src="img/photo-1529665253569-6d01c0eaf7b6.jpg">
</div>
<h1>Doctor code</h1>
<div class="info">
<div class="col">
<i class="fab fa-twitter"></i>
<h3>120.1K</h3>
</div>
<div class="col">
<i class="fab fa-facebook"></i>
<h3>54K</h3>
</div>
<div class="col">
<i class="fas fa-heart"></i>
<h3>12K</h3>
</div>
</div>
<h1>Subscribe</h1>
</div>
<div class="right">
<div class="text">
<h1>Doctor code</h1>
<h2>Medical student , web developer</h2>
<h3>BIO:</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce fermentum pellentesque scelerisque. Proin iaculis ante velit, sit amet mollis lacus blandit non. Aenean sed dolor sed nibh feugiat dapibus a id mauris. Proin in neque eget metus dapibus tempor ac eu leo. Nunc vestibulum ut felis ac blandit. Pellentesque faucibus quam quis orci tincidunt tempor. In hac habitasse platea dictumst. Aenean arcu sem, feugiat sed nisl in, tempus rutrum mi. Phasellus porta pulvinar ante, nec volutpat est egestas id. Sed interdum urna a enim sodales, in ornare urna pellentesque. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas feugiat mauris tristique eros finibus congue.
</p>
<h3>Location : </h3>
<p>Paris , France </p>
<button><i class="far fa-envelope"></i> send a message</button>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$(".btn").on("click",function(){
//$(".right").toggle("slide");
if($(".right").css("width") == "0px"){
$(".right").animate({ width: "500px" },400);
$(".btn i").removeClass();
$(".btn i").addClass("fas fa-minus");
}else{
$(".right").animate({ width: "0px" },400);
$(".btn i").removeClass();
$(".btn i").addClass("fas fa-plus");
}
// $(".right").hide("slide", { direction: "left" }, 1000);
//$(".right").show("slide", { direction: "left" }, 400);
// $(".btn").css({ 'transform' : 'rotate(180deg)' });
});
});
</script>
</body>
</html>
CSS CODE :
@import url('https://fonts.googleapis.com/css?family=Montserrat|Open+Sans|Roboto|Thasadith');
*{
margin: 0;
padding: 0;
outline: 0;
}
body{
background-color: #f2f2f2;
}
.center{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
.bio_card{
height: 500px;
display: flex;
flex-direction: row;
}
.left{
margin: 0;
position: relative;
width: 400px;
height: 100%;
border-radius: 25px 0 0 25px;
background: rgb(76,179,233);
background: -moz-linear-gradient(90deg, rgba(76,179,233,1) 0%, rgba(74,119,233,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(76,179,233,1) 0%, rgba(74,119,233,1) 100%);
background: linear-gradient(90deg, rgba(76,179,233,1) 0%, rgba(74,119,233,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4cb3e9",endColorstr="#4a77e9",GradientType=1);
color: #fafafa;
}
.left .box{
position: relative;
height: 50px;
}
.left .cover{
width: 100%;
height: 200px;
border-radius: 25px 0 0 0;
}
.left .profile {
position: absolute;
top:-100px;
width: 150px;
height: 150px;
left: 50%;
transform: translateX(-50%);
border-radius: 100%;
border: 4px solid #fafafa;
}
.left h1{
position: relative;
text-align: center;
font-family: 'Thasadith', sans-serif;
font-weight: 100;
text-transform: uppercase;
margin: 20px 0;
}
.left .info{
width: 100%;
text-align: center;
display: flex;
flex-direction: row;
}
.left .info i{
font-size: 2.6rem;
margin-bottom: 12px;
}
.left .info h3{
text-transform: uppercase;
font-family: 'Montserrat', sans-serif;
font-weight: 200;
font-size: 1.3rem;
}
.left .info .col{
width: 33.33%;
}
.left .btn{
z-index: 23;
background: rgb(76,179,233);
background: -moz-linear-gradient(90deg, rgba(76,179,233,1) 0%, rgba(74,119,233,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(76,179,233,1) 0%, rgba(74,119,233,1) 100%);
background: linear-gradient(90deg, rgba(76,179,233,1) 0%, rgba(74,119,233,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4cb3e9",endColorstr="#4a77e9",GradientType=1);
color: #fafafa;
text-align: center;
position: absolute;
right: calc(0% - 23px);
top: calc(200px - 23px);
width: 46px;
height: 46px;
border-radius: 100%;
}
.left .btn i{
position: relative;
top: 50%;
transform: translateY(-50%);
}
.right
{
background-color: #fff;
width: 0px;
overflow: hidden;
height: 100%;
/**/
}
.text{
height: 100%;
padding: 15px 30px;
width: 450px;
}
.right h1{
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
text-overflow: ellipsis;
}
.right h2{
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
margin: 5px 0;
font-size: 1rem;
}
.right h3{
font-family: 'Roboto', sans-serif;
text-transform: uppercase;
font-size: 1rem;
}
.right p{
font-family: 'Montserrat', sans-serif;
line-height: 1.5rem;
margin: 5px 0;
font-size: 0.8rem;
margin-bottom: 12px;
}
.right button{
width: 90%;
margin-top:5px;
text-align: center;
padding: 5px 10px;
position: relative;
left: 50%;
transform: translateX(-50%);
background: rgb(76,179,233);
background: -moz-linear-gradient(90deg, rgba(76,179,233,1) 0%, rgba(74,119,233,1) 100%);
background: -webkit-linear-gradient(90deg, rgba(76,179,233,1) 0%, rgba(74,119,233,1) 100%);
background: linear-gradient(90deg, rgba(76,179,233,1) 0%, rgba(74,119,233,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4cb3e9",endColorstr="#4a77e9",GradientType=1);
border-radius: 5px;
color: #fafafa;
border: none;
font-size: 1.2rem;
}
.right button i {
float: left;
font-size: 1.4rem;
}
after copying the code don't forget two important things :
- make sure to have the profile image and the background image
- make sure to name them as the same name on the code
HOW TO MAKE AN ANIMATED SLIDING PROFILE CARD USING HTML5 CSS3 AND JQUERY
Reviewed by Medics
on
March 09, 2019
Rating:
Reviewed by Medics
on
March 09, 2019
Rating:
No comments: