Hello Coders! Welcome to CSS Animation Blog. In this, we're going to see how to create a custom Profile Card which you can add in your Portfolio Website. Every Coders must have a profile card to showcase their milestones and achivements. This is my version of profile card which is unique and elegant along with some beautiful animations.
Here's a preview-
That being said, let us get started.
Step - 1: Like always, create 2 files - index.html and style.css.
Step - 2: Copy the below HTML code and paste it into your code editor.
HTML
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Custom Profile Card</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="frame">
<div class="center">
<div class="card">
<div class="left">
<div class="avatar">
<div class="circle"></div>
<div class="circle"></div>
<img src="https://pensive-swartz-a18c55.netlify.app/static/media/shikhar.d476faef.jpg" />
</div>
<div class="info">
<span class="big">John Doe</span><span class="small">Front End Developer</span>
</div>
<div class="buttons">
<button class="flw">follow</button><button class="msg">message</button>
</div>
</div>
<div class="right">
<div class="stats posts">
<span class="big">128</span><span class="small">posts</span>
</div>
<div class="stats likes">
<span class="big">1387</span><span class="small">likes</span>
</div>
<div class="stats flwrs">
<span class="big">2220</span><span class="small">followers</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Step - 3: Below is the CSS code for styling.
CSS
@import url("https://fonts.googleapis.com/css?family=Open+Sans:700,600,300");
body{
background: #f6f7fc;
}
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
box-shadow: 4px 8px 16px 0 rgba(0, 0, 0, 0.1);
overflow: hidden;
background: linear-gradient(225deg, #b74096 , #f2f2f2);
background-size: 125% 125%;
color: #b74096;
font-family: "Open Sans", Helvetica, sans-serif;
border-radius: 50px;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.card {
width: 320px;
height: 300px;
background: white;
border-radius: 30px;
box-shadow: 4px 8px 16px 0 #1b3b14;
}
.card .left {
position: absolute;
left: 0;
width: 190px;
height: 300px;
overflow: hidden;
}
.card .left .avatar {
position: absolute;
left: 60px;
top: 32px;
width: 70px;
height: 70px;
border-radius: 50%;
cursor: pointer;
background: #f0b5df;
}
.card .left .avatar .circle {
box-sizing: border-box;
position: absolute;
border-radius: 50%;
transition: all 1.5s ease-in-out;
border: 1px solid;
}
.card .left .avatar .circle:first-child {
left: -3px;
top: -3px;
width: 76px;
height: 76px;
border-color: #b74096 #b74096 #b74096 transparent;
}
.card .left .avatar .circle:nth-child(2) {
left: -6px;
top: -6px;
width: 82px;
height: 82px;
border-color: #b74096 transparent #b74096 #b74096;
}
.card .left .avatar:hover .circle:first-child {
transform: rotate(360deg);
}
.card .left .avatar:hover .circle:nth-child(2) {
transform: rotate(-360deg);
}
.card .left .avatar img {
width: inherit;
height: inherit;
display: block;
border-radius: inherit;
}
.card .left .info {
position: absolute;
text-align: center;
top: 122px;
width: 100%;
}
.card .left .info span {
display: block;
}
.card .left .info span.small {
top: 22px;
}
.card .left .buttons {
position: absolute;
text-align: center;
bottom: 32px;
width: 100%;
height: 80px;
}
.card .left .buttons button {
padding-top: 2px;
text-transform: capitalize;
text-align: center;
font-size: 12px;
font-weight: 600;
color: #b74096;
width: 120px;
height: 26px;
margin: 8px 0;
background: white;
border-radius: 15px;
border: none;
box-shadow: 0 0 0 1px #b74096;
cursor: pointer;
}
.card .left .buttons button:hover {
background: #b74096;
color: white;
}
.card .right {
position: absolute;
right: 0;
width: 130px;
height: 300px;
}
.card .right .stats {
position: relative;
height: 100px;
background: #cac7c7;
box-shadow: 0 -1px white;
cursor: pointer;
}
.card .right .stats:nth-child(1){
border-radius: 0 20px 0 0;
}
.card .right .stats:nth-child(3){
border-radius: 0 0 20px 0;
}
.card .right .stats:first-child {
box-shadow: none;
}
.card .right .stats:hover {
background: #f0b5df;
}
.card .right .stats span.big {
top: 30px;
}
.card .right .stats span.small {
top: 50px;
}
span {
position: absolute;
left: 0;
width: 100%;
text-transform: capitalize;
text-align: center;
}
span.big {
font-size: 18px;
font-weight: 600;
}
span.small {
font-size: 12px;
font-weight: 300;
}
And that's it. You're done.
Let me know in the comments if you have any doubt related to this.
Follow @creocodigo for more projects and web related content.
If you find this useful, below are some other posts that I am sure you'll love