In this tutorial,  we will see how to create a responsive 'Our Team' section. The responsive design is built using HTML and Pure CSS. No framework or library is needed to implement this design. do it

Video Tutorial:



Project Folder Structure:

Let's begin our tutorial now. Let's create the project folder structure first. A project folder is created called - "Responsive Our Team Section". There are five files in this folder. Three of these are images. These images will be used as profile images.

Next, we have files called – ‘index.html’ and ‘style.css’. These are the HTML document and the stylesheet.



HTML:


<!DOCTYPE html>
<html lang="en">

<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Our Team Section</title>
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" />
    <!-- Google Font -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;500;600&display=swap" rel="stylesheet" />
    <!-- Stylesheet -->
    <link rel="stylesheet" href="style.css" />
</head>

<body>
    <section>
        <div class="row">
            <h1>Our Team</h1>
        </div>

        <div class="row">
            <!-- Column 1-->
            <div class="column">
                <div class="card">
                    <div class="img-container">
                        <img src="profile-img-1.png" />
                    </div>
                    <h3>Tisha arefin</h3>
                    <p>CEO</p>
                    <div class="icons">
                        <a href="#">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#">
                            <i class="fab fa-linkedin"></i>
                        </a>
                        <a href="#">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#">
                            <i class="fas fa-envelope"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Column 2-->
            <div class="column">
                <div class="card">
                    <div class="img-container">
                        <img src="profile-img-2.png" />
                    </div>
                    <h3>Tasin Khan</h3>
                    <p>Manager</p>
                    <div class="icons">
                        <a href="#">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#">
                            <i class="fab fa-linkedin"></i>
                        </a>
                        <a href="#">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#">
                            <i class="fas fa-envelope"></i>
                        </a>
                    </div>
                </div>
            </div>

            <!-- Column 3-->
            <div class="column">
                <div class="card">
                    <div class="img-container">
                        <img src="profile-img-3.png" />
                    </div>
                    <h3>Hope Pang</h3>
                    <p>Designer</p>
                    <div class="icons">
                        <a href="#">
                            <i class="fab fa-twitter"></i>
                        </a>
                        <a href="#">
                            <i class="fab fa-linkedin"></i>
                        </a>
                        <a href="#">
                            <i class="fab fa-github"></i>
                        </a>
                        <a href="#">
                            <i class="fas fa-envelope"></i>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </section>
</body>

</html>

CSS:

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

body {
    background-color: #f5f5f5;
}

.row {
    display: flex;
    flex-wrap: wrap;
    padding: 2em 1em;
    text-align: center;
}

.column {
    width: 100%;
    padding: 0.5em 0;
}

h1 {
    width: 100%;
    text-align: center;
    font-size: 3.5em;
    color: #1f003b;
}

.card {
    box-shadow: 0 0 2.4em rgba(25, 0, 58, 0.1);
    padding: 3.5em 1em;
    border-radius: 0.6em;
    color: #1f003b;
    cursor: pointer;
    transition: 0.3s;
    background-color: #ffffff;
}

.card .img-container {
    width: 8em;
    height: 8em;
    background-color: #a993ff;
    padding: 0.5em;
    border-radius: 50%;
    margin: 0 auto 2em auto;
}

.card img {
    width: 100%;
    border-radius: 50%;
}

.card h3 {
    font-weight: 500;
}

.card p {
    font-weight: 300;
    text-transform: uppercase;
    margin: 0.5em 0 2em 0;
    letter-spacing: 2px;
}

.icons {
    width: 50%;
    min-width: 180px;
    margin: auto;
    display: flex;
    justify-content: space-between;
}

.card a {
    text-decoration: none;
    color: inherit;
    font-size: 1.4em;
}

.card:hover {
    background: linear-gradient(#6045ea, #8567f7);
    color: #ffffff;
}

.card:hover .img-container {
    transform: scale(1.15);
}

@media screen and (min-width: 768px) {
    section {
        padding: 1em 7em;
    }
}

@media screen and (min-width: 992px) {
    section {
        padding: 1em;
    }
    .card {
        padding: 5em 1em;
    }
    .column {
        flex: 0 0 33.33%;
        max-width: 33.33%;
        padding: 0 1em;
    }
}

TAG : responsive our team section,card slider,responsive our team section using html css,our team section using html css,responsive our team html css,responsive our team section in html css,responsive our team section with html css,our team page using html css,profile card slider,profile cards slider,responsive slider,owl carousel,how to make a card slider,how to make slider card in css,owl carousel html css,card slider html css,card slider css,automatic card slider