Responsive Team Profile Cards using Flexbox

In this article, we are going to learn how to implement responsive team profile cards using flexbox.

In the below image you can see that what are we going to build.

Hope so you are interested to know how to make the above responsive team profile cards using flexbox, so now without wasting much time let’s start.

So let’s start with this tutorial :

Responsive Team Profile Cards using Flexbox

HTML Code :-

HTML Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="container">
        <div class="team_container">
            <div class="text">Meet Our Team</div>
        </div>
        <div class="row">
            <!--First User design starts here-->
            <div class="profile-card">
                <div class="profile-content">
                    <div class="profile-image">
                        <img src="images/girl2.jpg" alt="first user">
                    </div>
                    <div class="desc">
                        <h2>Sunmetecha</h2>
                        <p>Lorem ipsum dolor sit amet adipisicing elit. </p>
                    </div>
                    <div class="btn-div">
                        <button class="btn"><i class="fa fa-facebook" style="padding-right: 10px;"></i>Follow</button>
                    </div>
                </div>
            </div>
            <!--First user design ends here-->
             <!--second User design starts here-->
             <div class="profile-card">
                <div class="profile-content">
                    <div class="profile-image">
                        <img src="images/girl3.jpg" alt="first user">
                    </div>
                    <div class="desc">
                        <h2>Sunmetecha</h2>
                        <p>Lorem ipsum dolor sit amet adipisicing elit. </p>
                    </div>
                    <div class="btn-div">
                        <button class="btn"><i class="fa fa-facebook" style="padding-right: 10px;"></i>Follow</button>
                    </div>
                </div>
            </div>
            <!--second user design ends here-->
             <!--third User design starts here-->
             <div class="profile-card">
                <div class="profile-content">
                    <div class="profile-image">
                        <img src="images/girl4.jpg" alt="first user">
                    </div>
                    <div class="desc">
                        <h2>Sunmetecha</h2>
                        <p>Lorem ipsum dolor sit amet adipisicing elit. </p>
                    </div>
                    <div class="btn-div">
                        <button class="btn"><i class="fa fa-facebook" style="padding-right: 10px;"></i>Follow</button>
                    </div>
                </div>
            </div>
            <!--third user design ends here-->
             <!--fourth User design starts here-->
             <div class="profile-card">
                <div class="profile-content">
                    <div class="profile-image">
                        <img src="images/girl5.PNG" alt="first user">
                    </div>
                    <div class="desc">
                        <h2>Sunmetecha</h2>
                        <p>Lorem ipsum dolor sit amet adipisicing elit. </p>
                    </div>
                    <div class="btn-div">
                        <button class="btn"><i class="fa fa-facebook" style="padding-right: 10px;"></i>Follow</button>
                    </div>
                </div>
            </div>
            <!--fourth user design ends here-->
             <!--Fifth User design starts here-->
             <div class="profile-card">
                <div class="profile-content">
                    <div class="profile-image">
                        <img src="images/girl6.jpg" alt="first user">
                    </div>
                    <div class="desc">
                        <h2>Sunmetecha</h2>
                        <p>Lorem ipsum dolor sit amet adipisicing elit. </p>
                    </div>
                    <div class="btn-div">
                        <button class="btn"><i class="fa fa-facebook" style="padding-right: 10px;"></i>Follow</button>
                    </div>
                </div>
            </div>
            <!--Fifth user design ends here-->
             <!--six User design starts here-->
             <div class="profile-card">
                <div class="profile-content">
                    <div class="profile-image">
                        <img src="images/girl1.jpg" alt="first user">
                    </div>
                    <div class="desc">
                        <h2>Sunmetecha</h2>
                        <p>Lorem ipsum dolor sit amet adipisicing elit. </p>
                    </div>
                    <div class="btn-div">
                        <button class="btn"><i class="fa fa-facebook" style="padding-right: 10px;"></i>Follow</button>
                    </div>
                </div>
            </div>
            <!--six user design ends here-->
        </div>
    </div>
</body>
</html>
CSS Code
body{
    margin:0;
    padding:0;
    background-color: #dad9d9ea;
    font-family: sans-serif;
}
.team-container
{
    width:100%;
    height: auto;

}
.text
{
    color:#097e8dfa;
    font-size: 25px;
    margin-top: 40px;
    font-weight: 600;
    text-transform: uppercase;
    text-align: center;

}
.row
{
    width: 60%;
    margin:auto;
    margin-bottom: 40px;
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-items: center;
    justify-content: center;
}
@media(max-width: 768px)
{
    .row{
        width: 100%;
    }
}
.profile-card
{
    background-color: #ffffff;
    width: 270px;
    height: 250px;
    margin: 20px 10px 10px 10px;
}
@media(max-width: 468px)
{
    .profile-card
    {
        width: 290px;
        height: 250px;
    }
}
.profile-content
{
    padding:15px;
}
img{
    width: 80px;
    height: 80px;
    border-radius: 50px;
}
.profile-image
{
    text-align: center;
}
.desc
{
    text-align: center;
}
.desc h2
{
    color: rgb(12,172,150);
    font-size: 20px;
}
.desc p{
    font-size: 13px;
    line-height: 1.3em;
    margin-top: -10px;
    color: #000000;
    
}
.btn-div
{
    text-align: center;
}
.btn
{
    background-color: rgb(12,138,121);
    color: #ffffff;
    width: 150px;
    cursor: pointer;
    height: 38px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 3px 3px 3px 3px #e6e6e6;
    border-radius: 3px;
    outline:none;
    border:none;
    text-transform: uppercase;
}

If you found this post useful, don’t forget to share this with your friends, and if you have any query feel free to comment it in the comment section.

Thank you 🙂 Keep Learning !

Leave a Comment

Your email address will not be published. Required fields are marked *