Create Meet The Team Section In HTML & CSS:

A meet the team page helps potential customers and clients get to know the people they might be working with. It highlights the people working for your company and can help put a face to the name.

Requirements:

you can use any image that you want.

Link Of Font-Awesome:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Copy icon tags:

<i style="font-size:24px" class="fa">&#xf230;</i>
<i style="font-size:24px" class="fa">&#xf0d5;</i>
<i style="font-size:24px" class="fa">&#xf0e1;</i>

SOURCE – CODE:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Team</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<style>
    body{
        margin: 0;
        padding: 0;
        background-color: rgb(10, 142, 10);
        font-family: 'Montserrat', sans-serif;
    }

    *{
        box-sizing: border-box;
    }

    .team{
        margin-top: 5%;
        text-align: center;
    }

    .team .meet {
        color: #fff;
        font-weight: bold;
        text-align: center;
        text-transform: uppercase;
        line-height: 30px;
        font-size: 50px;
    }

    .team .member{
        display: inline-block;
        margin: 20px;
        width: 400px;
        height: 500px;
        background-color: #fff;
        color: black;
        padding: 10px 20px;
        border-radius: 10px;
    }

    .team .member img{
        margin: 20px;
        height: 200px;
        width: 200px;
        border-radius: 50%;
    }

    .member h3{
        color: rgb(10, 142, 10);
        font-weight: bold;
        letter-spacing: 5px;
        margin-top: 30px;
        text-transform: uppercase;
    }

    .member p{
        letter-spacing: 2px;
    }

    .member i{
        font-weight: bold;
        margin-top: 20px;
        margin: 10px;
        display: inline-block;
        cursor: pointer;
    }

    .member i:hover{
        opacity: 0.7;
    }
</style>
<body>
    <div class="team">
        <h1 class="meet">Meet Our Team</h1>
        <div class="member">
            <img src="assets/musk.jpeg">
            <h3>CEO OF Company</h3>
            <p>Hello, I am CEO Of this site. CEO is responsible for all action taken by the company.</p>
            <i style="font-size:24px" class="fa">&#xf230;</i>
            <i style="font-size:24px" class="fa">&#xf0d5;</i>
            <i style="font-size:24px" class="fa">&#xf0e1;</i>
        </div>
        <div class="member">
            <img src="assets/rdj.jpeg">
            <h3>Site Manager</h3>
            <p>Hello, I am CEO Of this site. CEO is responsible for all action taken by the company.</p>
            <i style="font-size:24px" class="fa">&#xf230;</i>
            <i style="font-size:24px" class="fa">&#xf0d5;</i>
            <i style="font-size:24px" class="fa">&#xf0e1;</i>
        </div>
        <div class="member">
            <img src="assets/tomS.jpeg">
            <h3>Company Partner</h3>
            <p>Hello, I am CEO Of this site. CEO is responsible for all action taken by the company.</p>
            <i style="font-size:24px" class="fa">&#xf230;</i>
            <i style="font-size:24px" class="fa">&#xf0d5;</i>
            <i style="font-size:24px" class="fa">&#xf0e1;</i>
        </div>
    </div>
</body>
</html>

Leave a Reply

For News Subscribe Us!

Can curiosity may end shameless explained. True high on said mr on come. An do mr design at little myself wholly entire though. Attended of on stronger or mr pleasure.

You have been successfully Subscribed! Ops! Something went wrong, please try again.

© 2022 Code With AM