Animated Profile Card using HTML CSS & JavaScript

Hello, friends today in this blog you are going to learn how to create this profile card using HTML, CSS, and JavaScript.

In this blog post, we are also going to learn how to create Twitter heart animation.

An animated profile card is a profile card with animations in a profile card we can add animation to drag the viewer's attention. In this animated profile card as you can see in the image preview we have at the top of our image, at the bottom, we have a text containing our name and the Job Specification. At the bottom, we have two buttons, the message button and follow button.

As I mentioned earlier if we click the follow button, button texts instantly change from "Follow" to "Following" and Twitter heart animation pops up.

To understand furthermore on this project "Animated Profile Card" I would be linking the video to this project to understand the concept behind creating this project.

Video Tutorial of Animated Profile Card using JavaScript

with this video, I hope you have understood the concept behind creating this project and I believe you can make something of this and make it better like an idea for you, you can put this profile card in your portfolio as an owl carousel or another idea is to create a team section and put this profile card.

I also believe you can make better UI designs from this project. My job is to inspire you to create amazing projects on your own.

Now that you have watched the video and know how to create this we will be discussing how I got the animated heart icon like Twitter's, I actually got a link to that so think of it like you're creating a web app with API(Application Programming Interface), remember you would have to go to the API website and copy the API website link, also you would also need to copy your API key. think of it exactly like that I copied the link from the website just like an API then I added the CSS animation on that heart icon.

Animated Profile Card using JavaScript

[Source Code]

To create this Animated Profile Card. First, you need to create three Files: HTML, CSS & JavaScript File. After creating these files just paste the given codes into your file. You can also download the source code files of this Animated Profile Card from the given download button.

HTML CODE:

<!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">
    <title>Animated Profile Card using HTML CSS</title>
    <!-- Boxicons CSS -->
    <link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="wrapper">
        <div class="icons">
            <div class="fb">
                <i class='bx bxl-facebook' ></i>
            </div>
            <div class="inst">
                <i class='bx bxl-instagram' ></i>
            </div>
            <div class="yt">
                <i class='bx bxl-youtube' ></i>
            </div>
        </div>
        <!-- box code -->
        <div class="box">
            <div class="img">
                <img src="img/profile.jpg" alt="">
            </div>
        </div>
        <!-- card code -->
        <div class="card">
            <div class="dialogue-box">
                <div class="text">Treasure YouTuber</div>
                <div class="place">Nigeria, Lagos</div>
            </div>
            <div class="col">
                <p>Front-end Web Developer / User Interface Designer</p>
            </div>
            <div class="button-box">
                <button>Message</button>
                <button class="follow">Follow</button>
            </div>
        </div>
        <!-- card code end -->
    </div>
</body>
    <!-- wrapper ends -->
    <div class="heart"></div>
</html>

CSS CODE:

/* Poppins Google Font link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    background: #D4ECDD;
}
.wrapper{
    width: 100%;
    max-width: 400px;
    padding: 20px;
    background: linear-gradient(45deg, #7b00e0, #ae31d9);
    border-radius: 8px;
    box-shadow: 0 4px 4px rgba(0,0,0,0.2);
    text-align: center;
}
.wrapper .img{
    width: 250px;
    height: 250px;
}
.wrapper .img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    border: 5px solid #fff;
}
.wrapper .box{
    display: flex;
    align-items: center;
    justify-content: center;
}
.wrapper .card{
    margin-top: 10px;
}
.wrapper .card .dialogue-box .text{
    font-size: 30px;
    color: #fff;
}
.wrapper .card .dialogue-box .place{
    color: #fff;
    font-size: 17px;
}
.wrapper .card .col{
    margin-top: 10px;
}
.wrapper .card .col p{
    color: #fff;
}
.wrapper .card .button-box{
    margin-top: 20px;
    margin-bottom: 8px;
    display: flex;
}
.wrapper .card .button-box button{
    width: 100%;
    height: 45px;
    background: #fff;
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 400;
    border-radius: 5px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.2);
    cursor: pointer;
    border: 2px solid #fff;
    transition: .2s ease-in;
}
.wrapper .card .button-box button.follow{
    margin-left: 10px;
    background: none;
    border-color: #fff;
    color: #fff;
}
.wrapper .card .button-box button.follow:hover{
    background: #fff;
    border-color: transparent;
    color: black;
}
.heart{
    width: 100px;
    height: 100px;
    position: absolute;
    left: 50%;
    top: 47%;
    transform: translate(-50%, -50%);
    background: url(https://cssanimation.rocks/images/posts/steps/heart.png) no-repeat;
    background-position: 0 0;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    animation: fave-heart 1s steps(28);
}
/* JavaScript css Codes */
.heart.active{
    opacity: 1;
    pointer-events: auto;
    background-position: -2800px 0;
    transition: background 1s steps(28);
}
@keyframes fave-heart {
    0%{
        background-position: 0 0;
    }
    100%{
        background-position: -2800px 0;
    }
}
.icons{
    position: absolute;
    left: 39.5%;
    top: 35%;
    transform: translate(-50%, -50%);
    cursor: pointer;
}
.icons .fb{
    width: 40px;
    height: 40px;
    background: #fff;
    margin: 20px -50px;
    text-align: center;
    border-radius: 50%;
    opacity: 0;
    transition: .6s ease;
}
.icons .fb i{
    line-height: 40px;
    font-size: 28px;
    color: blueviolet;
}

.icons .inst{
    width: 40px;
    height: 40px;
    background: #fff;
    margin: 20px -50px;
    text-align: center;
    border-radius: 50%;
    opacity: 0;
    transition: .6s ease;
}
.icons .inst i{
    line-height: 40px;
    font-size: 28px;
    color: blueviolet;
}

.icons .yt{
    width: 40px;
    height: 40px;
    background: #fff;
    margin: 20px -50px;
    text-align: center;
    border-radius: 50%;
    opacity: 0;
    transition: .6s ease;
}
.icons .yt i{
    line-height: 40px;
    font-size: 28px;
    color: blueviolet;
}
.wrapper:hover > .icons .inst{
    opacity: 1;
    margin: 20px 20px;
}
.wrapper:hover > .icons .fb{
    opacity: 1;
    margin: 20px 20px;
}
.wrapper:hover > .icons .yt{
    opacity: 1;
    margin: 20px 20px;
}

JAVASCRIPT CODE:

const wrapper = document.querySelector(".wrapper"),
        follow_btn = document.querySelector(".button-box .follow"),
        heart = document.querySelector(".heart");

        follow_btn.addEventListener("click", (e)=>{
            heart.classList.add("active");
            follow_btn.innerHTML = "Following";

            setTimeout(()=>{
            heart.classList.remove("active");
            follow_btn.innerHTML = "Follow";
            }, 2600);
        });

That's all now you've successfully created this Animated Profile Card using HTML CSS & JavaScript, If you faced difficulty understanding or copying the source code you can just download the source code file from the given download button, extract the file, and use it.

2 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Dubai Website Design25 April 2022 at 08:25
Excellent blog.
Appreciate your thoughts.
Ecommerce web development dubai
Alex Rosas negras21 July 2022 at 16:42
.wrapper{
width: 100%;
max-width: 400px;
padding: 20px;

text-align: center;
border: 0px solid rgba(100, 100, 100, 1);
border-radius: 24px;
background:
radial-gradient(
110% 146% at 86% -17%,
rgba(22, 14, 113, 1) 0%,
rgba(19, 13, 92, 0.26) 55%,
rgba(90, 35, 248, 0) 90%
),
linear-gradient(
44deg,
rgba(37, 169, 249, 1) 2%,
rgba(106, 103, 227, 0) 87%
),
radial-gradient(
102% 103% at 21% 24%,
rgba(121, 54, 174, 1) 0%,
rgba(121, 54, 174, 0) 100%
),
radial-gradient(
94.51% 124.88% at 96% 94.43%,
rgba(65, 244, 255, 0.78) 0%,
rgba(131, 218, 255, 0.66) 32%,
rgba(99, 175, 240, 0.4) 64%,
rgba(43, 90, 211, 0) 100%
),
linear-gradient(
313.04deg,
rgba(52, 29, 101, 1) 1%,
rgba(96, 74, 234, 1) 100%
);
}

Animated Profile Card using HTML CSS & JavaScript

Creative Tutorials

2 Comments

Post a Comment

Contact Form