🔴 Animated Profile Card UI Design using Html & CSS | devhubspot

UI design CSS Html profile card

Hey friends, today in this blog, you’ll learn how to create a complete Animated Profile Card UI Design using HTML & CSS. If you’re an absolute beginner, this Animated Profile Card UI will be a little bit difficult for you to create.

Steps For Creating Animated Profile Card UI

To create a To-Do using HTML, CSS, and vanilla JavaScript, follow the given steps line by line:

Create a folder. You can name this folder whatever you want, and inside this folder, create the mentioned files.
Create an index.html file. The file name must be index and its extension .html
Create a style.css file. The file name must be style and its extension .css

To start, add the following HTML codes to your index.html file to create a basic layout for the To-Do.

<!DOCTYPE html>
<html>
    <head>
        <title>
            Devhubspot Css Card
        </title>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div class="card">
            <div class="lines"></div>
            <div class="imgbox">
                <img src="profile.png" />
            </div>
            <div class="content">
                <div class="details">
                    <h2>DevhubSpot <br /> <span>Youtuber</span> </h2>
                    <div class="data">
                        <h3>100 <br> <span>Videos</span> </h3>
                        <h3>150K <br> <span>Likes</span> </h3>
                        <h3>15K <br> <span>Subscriber</span> </h3>
                    </div>
                    <div class="actionBtn">
                        <button>Subscribe</button>
                        <button>Like</button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

Next, add the following CSS codes to your style.css file to style the captcha generator and make it interactive and beautiful.

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins' sans-serif;
}

body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background: #999;
}
.card{
    position: relative;
    width: 350px;
    height: 190px;
    background: #111;
    transition: 0.5s;
    border-radius: 10px;
}
.card:hover{
    height: 460px;
    
}
.card .lines{
    position: absolute;
    inset: 0;
    background: #333;
    overflow: hidden;
    border-radius: 10px;
}

.card .lines::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 120px;
    background: linear-gradient(transparent, #45f3ff, #45f3ff, #45f3ff, transparent);
    animation: animate 4s linear infinite;
    border-radius: 10px;
}

@keyframes animate{
    0%{
        transform: translate(-50%, -50%) rotate(0deg);
    }
    100%{
        transform: translate(-50%, -50%) rotate(360deg);
    }
}

.card .lines::after{
    content: '';
    position: absolute;
    inset: 3px;
    background: #fff;
    border-radius: 10px;
}

.card .imgbox{
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 150px;
    background: #fff;
    transition: 0.5s;
    z-index: 10;
    overflow: hidden;
    border-radius: 10px;
}

.card:hover .imgbox{
    width: 250px;
    height: 250px;
    border-radius: 10px;
}

.card .imgbox::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 500px;
    height: 150px;
    transform: translate(-50%, -50%);
    background: linear-gradient(transparent, #ff3c7b, #ff3c7b, #ff3c7b, transparent);
    animation: animate1 4s linear infinite;
    border-radius: 10px;
}

@keyframes animate1{
    0%{
        transform: translate(-50%, -50%) rotate(360deg);
    }
    100%{
        transform: translate(-50%, -50%) rotate(0deg);
    }
}

.card .imgbox::after{
    content: '';
    position: absolute;
    background: #777;
    inset: 3px;
    border-radius: 10px;
}

.card .imgbox img{
    position: absolute;
    z-index: 1;
    top: 10px;
    left: 10px;
    width: calc(100% - 20px);
    height: calc(100% - 20px);
    filter: grayscale(1);
}

.card .content{
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center ;
    align-items: flex-end;
    overflow: hidden;
}

.card .content .details{
    padding: 40px;
    text-align: center;
    width: 100%;
    transition: 0.5s;
    transform: translateY(145px);
}

.card:hover .content .details{
    transform: translateY(0px);
}

.card .content .details h2{
    font-size: 1.25em;
    font-weight: 600;
    color: #ff3c7b;
    line-height: 1.2em;
}

.card .content .details h2 span{
    font-size: 0.75em;
    font-weight: 500;
    color: #111;
}

.card .content .details .data{
   display: flex;
   justify-content: space-between;
   margin: 30px 0;
}

.card .content .details .data h3{
    font-size: 1em;
    color: #ff3c7b;
    line-height: 1.2em;
    font-weight: 600;
}

.card .content .details .data h3 span{
    font-size: 0.85em;
    font-weight: 400;
    color: #111;
}
.card .content .details .actionBtn{
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.card .content .details .actionBtn button{
    padding: 10px 30px;
    border: none;
    outline: none;
    width: 150px;
    border-radius: 5px;
    font-size: 1em;
    font-weight: 500;
    background: #45f3ff;
    color: #111;
    cursor: pointer;
    opacity: 0.9;
}

.card .content .details .actionBtn button:nth-child(2){
    background: #ff3c7b;
}

.card .content .details .actionBtn button:hover{
    opacity: 1;
}

Conclusion

With HTML and CSS, I aim to show you how to create your own Animated Profile Card UI. You may modify your generator to suit your demands because the coding procedure is straightforward and simple to grasp.