Team Card UI design using HTML and CSS

0





































Hello Developers, We present you an innovative and visually appealing team members profile card design that showcases your team’s expertise and creativity at a glance. These responsive profile cards have been meticulously crafted using HTML and CSS, ensuring they are both functional and stylish. With HTML and CSS, you can create detailed and attractive profile cards that effectively present each team member’s skills and background. By utilizing HTML for structure and CSS for styling, you can enhance the visual appeal of the cards, incorporating features like hover effects, animations, and responsive design elements. This ensures that your profile cards are not only engaging but also accessible and interactive on any device, be it a desktop, laptop, tablet, or smartphone. By adopting this HTML & CSS profile card snippet, you demonstrate 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 these beautifully designed responsive profile cards.

How to make Team 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>Team Card UI design - learningrobo</title> <meta name="description" content="Team Card UI design - learningrobo"> <meta name="author" content="learningrobo.com"> <meta name="keywords" content="team 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> </head> <body> <!--Hello Future Developer Thanks for Using learningrobo.com, Share & Support us--> <div class="container"> <div class="p1"> <h2>Meet The Team</h2> <div class="team"> <div class="team-member"> <div class="img"><img src="https://cdn.pixabay.com/photo/2019/04/29/09/33/anonymous-4165613_1280.jpg" alt=""></div> <div class="right"> <div class="text"> <h3>MR. ABC</h3> <h5>Team leader</h5> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div> <div class="logo"> <span><a href="#"><ion-icon name="logo-facebook"></ion-icon></a></span> <span><a href="#"><ion-icon name="logo-instagram"></ion-icon></a></span> <span><a href="#"><ion-icon name="logo-linkedin"></ion-icon></a></span> </div> </div> </div> <div class="team-member"> <div class="img"><img src="https://cdn.pixabay.com/photo/2020/12/11/04/16/spy-5821903_1280.jpg" alt=""></div> <div class="right"> <div class="text"> <h3>MR. DEF</h3> <h5>Content Writer</h5> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="logo"> <span><a href="#"><ion-icon name="logo-facebook"></ion-icon></a></span> <span><a href="#"><ion-icon name="logo-instagram"></ion-icon></a></span> <span><a href="#"><ion-icon name="logo-linkedin"></ion-icon></a></span> </div> </div> </div> <div class="team-member"> <div class="img"><img src="https://cdn.pixabay.com/photo/2016/03/12/23/18/man-1253004_1280.jpg" alt=""></div> <div class="right"> <div class="text"> <h3>MR. GHI</h3> <h5>Snippet Developer</h5> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="logo"> <span><a href="#"><ion-icon name="logo-facebook"></ion-icon></a></span> <span><a href="#"><ion-icon name="logo-instagram"></ion-icon></a></span> <span><a href="#"><ion-icon name="logo-linkedin"></ion-icon></a></span> </div> </div> </div> <div class="team-member"> <div class="img"> <img src="https://cdn.pixabay.com/photo/2014/11/21/00/09/man-539993_1280.jpg" alt=""></div> <div class="right"> <div class="text"> <h3>MR. JKL</h3> <h5>Designer</h5> <br> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="logo"> <span><a href="#"><ion-icon name="logo-facebook"></ion-icon></a></span> <span><a href="#"><ion-icon name="logo-instagram"></ion-icon></a></span> <span><a href="#"><ion-icon name="logo-linkedin"></ion-icon></a></span> </div> </div> </div> </div> </div> <div class="credit">Made with <span>❤ </span>by <a href="https://www.learningrobo.com/">learningrobo</a></div> </div> <script type="module" src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.esm.js"></script> <script nomodule src="https://unpkg.com/ionicons@7.1.0/dist/ionicons/ionicons.js"></script> <!--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;
    margin: 0;
    padding: 0;
}
body{
    font-family: Arial, sans-serif;
    background-color:#0E0E0E;
    color: white;
}
.container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width:100%;
}
.p1{
    height: 550px;
    width: 900px;
    background-image: linear-gradient(180deg, #1A1A1A, #0E0E0E);
    margin:auto;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    border-radius: 20px;
}
.p1 h2{
    display: flex;
    margin: auto;
}
.team{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.team-member{
    height: 200px;
    width: 370px;
    background-color: #444; 
    margin: 10px;
    padding: 20px;
    border-radius: 10px;
    transition: transform 0.3s;
    display: flex;
    align-items: center;
    cursor: pointer;
}
.team-member:hover{
    transform: scale(1.05);
}
.img{
    height: 80%;
    width: 70%;
    background-color: aqua;
    border-radius: 50%;
    margin-right: 20px;
    border:2px solid white;
}
.right{
    display: flex;
    flex-direction: column;
}
.text{
    text-align: left;
    display: flex;
    flex-direction: column;
    height: 60%;
}
.logo{
    display: flex;
    width: auto;
    font-size: 30px;
    justify-content: space-evenly;
    margin: 10px ;
}
.logo ion-icon{
    color: white;
}
h3{
    font-size: 24px;
}
h4{
    font-size: 18px;
}
p{
    font-size: 14px;
}
.team-member img{
    height: 100%;
    width: 100%;
    border-radius: 50%;
    object-fit: cover;
}     
@media screen and (max-width: 780px){
    .container{
        width:100%;
        height:fit-content;
    }
    .p1{
        width:100%;
        height:fit-content;
        display: flex;
        flex-direction: column;
    }
    .team-member{
        width:100%;
    }
}
.credit a{
    text-decoration: none;
    color: white;
    font-weight: 800;
}
.credit{
    color: white;
    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 Team card UI design using html and css.

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

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.




Tags:

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