Profile Card UI design using HTML and CSS




































Hello Developers, We present to you an innovative and visually appealing team members profile card design that displays your team’s expertise and creativity at a glance. This responsive profile card design snippet has been meticulously crafted using HTML and CSS. With HTML and CSS, you can create detailed and attractive profile cards that present each team member’s skills and background in an aesthetically pleasing and clear way. By utilizing HTML for structure and CSS for styling, you can enhance the visual appeal of the cards, incorporating features like hover effects and animations. Since this markup is responsive, your profile cards will be interactive and accessible on any device, be it a desktop, laptop, tablet, or smartphone. By adopting this HTML & CSS profile card snippet, you are not only showcasing your team’s information but also demonstrating your commitment to professionalism and modern web design principles. These cards allow you to highlight your team members in a dynamic and creative way, making it easy to communicate their roles and expertise to the world. Show off your team’s talent and dedication with this innovative and beautifully designed responsive profile card snippet.

How to make Profile card UI 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> <head> <title>Profile Card UI design - learningrobo</title> <meta name="description" content="Profile Card UI design - learningrobo"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="profile card,responsive,learningrobo.com,html & css projects,project"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="icon" type=image/x-icon href="#"> <link rel="stylesheet" href="style.css"> <meta charset="UTF-8"> <script src="https://kit.fontawesome.com/5d72166fb5.js" crossorigin="anonymous"></script> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@300&display=swap" rel="stylesheet"> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="container"> <div class="parent"> <div class="head1"> <h1>Profile Cards</h1> </div> <div class="head2"> <div class="box1"> <div class="pic"> <img src="https://cdn.pixabay.com/photo/2021/11/19/00/12/man-6807759_1280.jpg" alt="user image 1"> </div> <div class="content"> <span>Patrick Wood</span> <p class="desg">CEO / Co-Founder</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio commodi laborum deserunt reiciendis aspernatur perspiciatis beatae animi.</p> <div class="logo"> <div class="icon1"> <i class="fa-brands fa-twitter fa-xl" style="color: #ffffff;"></i> </div> <div class="icon2"> <i class="fa-brands fa-pinterest fa-xl" style="color: #ffffff;"></i> </div> <div class="icon3"> <i class="fa-solid fa-globe fa-xl" style="color: #ffffff;"></i> </div> </div> </div> </div> <div class="box2"> <div class="pic"> <img src="https://cdn.pixabay.com/photo/2021/11/19/00/12/man-6807759_1280.jpg" alt="user image 2"> </div> <div class="content"> <span>John Doe</span> <p class="desg">Software Tester</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio commodi laborum deserunt reiciendis aspernatur perspiciatis beatae animi.</p> <div class="logo"> <div class="icon1"> <i class="fa-brands fa-twitter fa-xl" style="color: #ffffff;"></i> </div> <div class="icon2"> <i class="fa-brands fa-pinterest fa-xl" style="color: #ffffff;"></i> </div> <div class="icon3"> <i class="fa-solid fa-globe fa-xl" style="color: #ffffff;"></i> </div> </div> </div> </div> <div class="box3"> <div class="pic"> <img src="https://cdn.pixabay.com/photo/2021/11/19/00/12/man-6807759_1280.jpg" alt="user image 3"> </div> <div class="content"> <span>Rose Jay</span> <p class="desg">Asistant Dev</p> <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio commodi laborum deserunt reiciendis aspernatur perspiciatis beatae animi.</p> <div class="logo"> <div class="icon1"> <i class="fa-brands fa-twitter fa-xl" style="color: #ffffff;"></i> </div> <div class="icon2"> <i class="fa-brands fa-pinterest fa-xl" style="color: #ffffff;"></i> </div> <div class="icon3"> <i class="fa-solid fa-globe fa-xl" style="color: #ffffff;"></i> </div> </div> </div> </div> </div> </div> <div class="credit">Made with <span>❤ </span>by <a href="https://www.learningrobo.com/"> learningrobo</a></div> </div> <!--Check our website Regularly For New Snippets Post--> </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
**/
*{
    box-sizing: border-box;
}
body{
    font-family: 'Roboto Slab', serif;
    margin: 0%;
}
.container{
    width: 100%;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content:end;
}
.parent{
    height: 80vh;
    display: flex;
    flex-direction: column;
}
.head1{
    height: 10vh;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
.head1 h1{
    margin: 0%;
    font-weight: bolder;
}
.head2{
    height: 70vh;
    background-color: #aaaaaa;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
    background: #C9CCD3;
    background-image: linear-gradient(-180deg, rgba(255,255,255,0.50) 0%, rgba(0,0,0,0.50) 100%);
    background-blend-mode: lighten;
}
.box1{
    width: 350px;
    height: 350px;
    background-color: white;
    display: flex;
    flex-direction: column;
    row-gap: 60px;
    border-radius: 10px;
    box-shadow: 5px 5px 20px grey;
    padding:10px;
}
.box2{
    width: 350px;
    height: 350px;
    background-color: white;
    display: flex;
    flex-direction: column;
    row-gap: 60px;
    border-radius: 10px;
    box-shadow: 5px 5px 20px grey;
    padding:10px;
}
.box3{
    width: 350px;
    height: 350px;
    background-color: white;
    display: flex;
    flex-direction: column;
    row-gap: 60px;
    border-radius: 10px;
    box-shadow: 5px 5px 20px grey;
    padding:10px;
}
.pic{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    margin: -50px auto;
    box-shadow: 5px 5px 20px grey;
}
img{
    width: 120px;
    height: 120px;
    border-radius: 50%;
    object-fit: cover;
}
.content{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    row-gap: 10px;
    margin-top: 15px;
}
span{
    margin: 0%;
    font-weight: bolder;
    font-size: 25px;
    letter-spacing: 1px;
}
p{
    margin: 0px 15px;
    font-size: 14px;
    font-weight: bold;
}
.desg{
    font-weight: bold;
    color: grey;
}
.logo{
    width: 50%;
    height: 60px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    margin-top: 15px;
}
.icon1{
    width: 50px;
    height: 50px;
    background-color: #1D9BF0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 5px 10px grey;
}
.icon2{
    width: 50px;
    height: 50px;
    background-color: #B7081B;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 5px 10px grey;
}
.icon3{
    width: 50px;
    height: 50px;
    background-color: tomato;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 5px 5px 10px grey;
}
@media screen and (max-width:1024px){
    .container{
        height: max-content;
    }
    .parent{
        height: fit-content;
    }
    .head1{
        height: 30vh;
    }
    .head2{
        justify-content: start;
        height: fit-content;
        flex-wrap: wrap;
        gap:60px;
        padding:60px 30px;
    }
    .box1{
        width:45%;
        height: max-content;
    }
    .box2{
        width:45%;
        height: max-content;
    }
    .box3{
        width:45%;
        height: max-content;
    }
    .logo{
        height: fit-content;
        width: fit-content;
        column-gap: 10px;
    }
    .icon1,.icon2,.icon3{
        width: 40px;
        height: 40px;
    }
}
@media screen and (max-width:630px){
    .container{
        height: fit-content;
    }
    .parent{
        height: fit-content;
    }
    .head2{
        flex-direction: column;
        row-gap: 70px;
        background-color: white;
    }
    .box1{
        height: 350px;
        width: fit-content;
    }
    .box2{
        height: 350px;
        width: fit-content;
    }
    .box3{
        height: 350px;
        width: fit-content;
    }
}
.credit a{
    text-decoration: none;
    color: black;
    font-weight: 800;
}
.credit{
    color: black;
    text-align: center;
    margin-top: 10px;
    font-family: Verdana,Geneva,Tahoma,sans-serif;
}
.credit span{
    color:tomato;
    font-size:20px;
}
We hope you would like this Profile card UI design using html and css.

Thank you for reading our blog. If you face any problem in Creating a Profile card UI 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.

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.



Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome