Animated Profile Card Design using HTML and CSS

Hello Developers, we are excited to introduce a sleek and versatile profile card snippet, meticulously designed with HTML and CSS. This profile card is perfect for showcasing individual profiles, whether for team members, clients, or personal use. Each card includes a photo, name, title, a brief bio, and contact information, providing a comprehensive snapshot of the individual. The profile card snippet is fully responsive, ensuring it looks stunning on any device, from desktops to smartphones. The layout is clean and modern, with well-organized sections that effectively highlight the profile details. Interactive elements, such as hover effects, enhance user engagement, making the cards more dynamic and captivating. Additionally, social media icons and links to professional profiles like GitHub and LinkedIn can be included, allowing users to connect with the individual across various platforms. Incorporating this HTML and CSS profile card snippet into your website not only enhances its visual appeal but also adds a professional touch. This snippet showcases your attention to detail and commitment to providing a rich user experience. Whether you are displaying your own profile, highlighting team members, or presenting clients, this stylish and functional card design will help you present individuals in an engaging and professional manner.

How to make Animated Profile Card Design using HTML and CSS.[Source Code]

To make this website, you would like to make two files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html lang="en"> <head> <title>Animated Profile card Using HTML & CSS</title> <meta name="description" content="Responsive Profile card Using HTML & CSSt. Made by learningrobo.com"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="form,responsive,learningrobo.com,html & css projects,project,profile card"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <meta charset="UTF-8"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> <link rel="stylesheet" href="style.css"> <link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'> </head> <body>  <div class="container"> <div class="main"> <div class="g" id="g1"> <div class="image"> <img src="https://cdn.pixabay.com/photo/2024/07/26/15/04/man-8923758_1280.png" alt="image"> </div> <span class="name">Jony Baistrow</span> <span class="post">Lead Writer</span> <span class="desc"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis optio, cumque repellendus inventore nam quae ratione soluta cum facere asperiores nulla nobis odio! Nobis officiis eligendi quam minus quos deleniti. </span> <div class="links"> <a href="#"><i class='bx bxl-facebook-circle' ></i></a> <a href="#"><i class='bx bxl-twitter' ></i></a> <a href="#"><i class='bx bxl-instagram-alt' ></i></a> </div> </div> <div class="g" id="g2"> <div class="image"> <img src="https://cdn.pixabay.com/photo/2024/07/26/15/04/man-8923758_1280.png" alt="image"> </div> <span class="name">Sam Curran</span> <span class="post">Co-Writer</span> <span class="desc"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis optio, cumque repellendus inventore nam quae ratione soluta cum facere asperiores nulla nobis odio! Nobis officiis eligendi quam minus quos deleniti. </span> <div class="links"> <a href="#"><i class='bx bxl-facebook-circle' ></i></a> <a href="#"><i class='bx bxl-twitter' ></i></a> <a href="#"><i class='bx bxl-instagram-alt' ></i></a> </div> </div> <div class="g" id="g3"> <div class="image"> <img src="https://cdn.pixabay.com/photo/2024/07/26/15/04/man-8923758_1280.png" alt="image"> </div> <span class="name">Ben Stokes</span> <span class="post">Editor</span> <span class="desc"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis optio, cumque repellendus inventore nam quae ratione soluta cum facere asperiores nulla nobis odio! Nobis officiis eligendi quam minus quos deleniti. </span> <div class="links"> <a href="#"><i class='bx bxl-facebook-circle' ></i></a> <a href="#"><i class='bx bxl-twitter' ></i></a> <a href="#"><i class='bx bxl-instagram-alt' ></i></a> </div> </div> <div class="g" id="g4"> <div class="image"> <img src="https://cdn.pixabay.com/photo/2024/07/26/15/04/man-8923758_1280.png" alt="image"> </div> <span class="name">Moein Ali</span> <span class="post">Designer</span> <span class="desc"> Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis optio, cumque repellendus inventore nam quae ratione soluta cum facere asperiores nulla nobis odio! Nobis officiis eligendi quam minus quos deleniti. </span> <div class="links"> <a href="#"><i class='bx bxl-facebook-circle' ></i></a> <a href="#"><i class='bx bxl-twitter' ></i></a> <a href="#"><i class='bx bxl-instagram-alt' ></i></a> </div> </div> </div> <div class="credit">Made with <span>❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> </div>  </body> </html>

CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension.


/** 
Hello Future Developer Thanks for Using learningrobo.com, 
Check our website Regularly For New Snippets Post.

Share & Support us
**/
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    margin: 0px;
}
.container{
    height: 100vh;
    width: 100vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: lightblue;
}
.container .main{
    height: 90vh;
    width: 90vw;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.container .main .g{
    height: 55vh;
    width: 20vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: lightskyblue;
    padding: 20px;
    gap: 5px;
    border-radius: 20px;
    border: 2px solid blue;
    box-shadow: 0px 0px 5px 5px cadetblue;
}
#g1{
    animation-name: move1;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    position: relative;
}
@keyframes move1 {
    0%{background-color: rgb(154, 214, 252); right: 0px;}
    50%{background-color: rgb(157, 157, 241); right:80px;}
    100%{background-color: rgb(154, 214, 252); right: 0px;}
}
#g2{
    animation-name: move2;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    position: relative;
}
@keyframes move2 {
    0%{background-color: rgb(154, 214, 252); bottom: 0px;}
    50%{background-color: rgb(157, 157, 241); bottom:120px;}
    100%{background-color: rgb(154, 214, 252); bottom: 0px;}
}
#g3{
    animation-name: move3;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    position: relative;
}
@keyframes move3 {
    0%{background-color: rgb(154, 214, 252); top: 0px;}
    50%{background-color: rgb(157, 157, 241); top:120px;}
    100%{background-color: rgb(154, 214, 252); top: 0px;}
}
#g4{
    animation-name: move4;
    animation-duration: 10s;
    animation-timing-function: ease-in-out;
    position: relative;
}
@keyframes move4 {
    0%{background-color: rgb(154, 214, 252); left: 0px;}
    50%{background-color: rgb(157, 157, 241); left:80px;}
    100%{background-color: rgb(154, 214, 252); left: 0px;}
}
.container .main .g .image{
    height: 14vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.container .main .g .image img{
    height: 120px;
    width: 100px;
    border-radius: 50%;
    border: 1px solid blue;
}
.container .main .g .name{
    padding-top: 10px;
    font-size: 18px;
}
.container .main .g .post{
    font-size: 15px;
}
.container .main .g .desc{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-top: 20px;
    font-size: 12px;
    padding-bottom: 20px;
    border-top: 1px solid blue;
    border-bottom: 1px solid blue;
}
.container .main .g .links{
    height: 5vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.container .main .g .links a{
    color: #000;
    font-size: 24px;
}
@media screen and (max-width:1024px) {
    .container{
        height: 280vh;
    }
    .container .main{
        height: 250vh;
        flex-direction: column;
    }
    #g1, #g2, #g3, #g4{
        animation: none;
        height: 100%;
        width: 100%;
        position: none;
    }
    .credit{
        height: 3vh;
    }
}
.credit a {
    text-decoration: none;
    color: #121212;
    font-weight: 800;
}
  
.credit {
    height: 3vh;
    color: #121212;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
    color:#000;
    font-size:20px;
}

We hope you would like this Animated Profile Card Design using HTML and CSS.

Thank you for reading our blog. If you face any problem in Creating a Animated Profile Card Design using HTML and CSS., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..

Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.

Animated Profile Card Design using HTML and CSS

Explore

Post a Comment

Learning robo

UI & UX Front-end Developement

Skills

Learning robo

tools grid

simple URL Shortener Using HTML CSS & JAVASCRIPT

Responsive Review Section using HTML & CSS

Responsive Birthday Card Design using HTML & CSS

Contact Form

Animated Profile Card Design using HTML and CSS

Explore

You might like

Post a Comment

tools grid

Contact Form