Create Meet The Team Section In HTML & CSS:

Create Meet The Team Section In HTML & CSS:

Share It With Your Firends:

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>

Share It With Your Friends

Leave a Reply

Recent Posts

  • All Post
  • A.I.
  • AI
  • c
  • c++
  • computer
  • cryptocurrency
  • database
  • digital marketing
  • finance
  • hacking
  • HTML
  • java
  • Marketing
  • network
  • other
  • programming
  • python
  • react
  • social
  • Tools
  • Uncategorized
  • web devlopment
    •   Back
    • drawing In Python
DIY AI Voice Assistant In Python

September 8, 2023

Build your own AI assistant with Python! Learn to recognize voice commands, generate responses, and more. Create your virtual companion…

share it

Recent Posts

  • All Post
  • A.I.
  • AI
  • c
  • c++
  • computer
  • cryptocurrency
  • database
  • digital marketing
  • finance
  • hacking
  • HTML
  • java
  • Marketing
  • network
  • other
  • programming
  • python
  • react
  • social
  • Tools
  • Uncategorized
  • web devlopment
    •   Back
    • drawing In Python

Additional Content

CodeWithAM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus luctus.

Products

Automated Chatbot

Data Security

Virtual Reality

Communication

Support

Services

FAQ's

Privacy Policy

Terms & Condition

Team

Contact Us

Company

About Us

Services

Features

Our Pricing

Latest News

© 2023 Codewitham