Our Team Section in HTML CSS

Our Team Section in HTML CSS

An “Our Team” section in HTML is a section of a website that showcases the members of a team or organization. It is typically used on the “About Us” or “Team” page of a website to introduce the team members to the visitors. This section may include the names, photos, job titles, and a brief description of the team members.

A website is a collection of publicly accessible, interlinked Web pages that share a single domain name. Websites can be created and maintained by an individual, group, business or organization to serve a variety of purposes.

Together, all publicly accessible websites constitute the World Wide Web.

Although it is sometimes called “web page,” this definition is wrong, since a website consists of several webpages. A website is also known as a “web presence” or simply “site”.

Websites come in a nearly endless variety, including educational sites, news sites, porn sites, forums, social media sites, e-commerce sites, and so on. The pages within a website are usually a mix of text and other media. That said, there are no rules dictating the form of a website.

A person could create a website of nothing but black and white photos of roses, or the word “cat” linked to another Web page with the word “mouse.” However, many sites follow a standard pattern of a homepage that links off to other categories and content within the website.

HTML Code

<div class="container">
        <div class="main">
            <h2>Kate Winslet</h2>
            <img src="a.jpg">
            <div class="icons">
                <ion-icon name="logo-facebook"></ion-icon>
                <ion-icon name="logo-twitter"></ion-icon>
                <ion-icon name="logo-instagram"></ion-icon>
            </div>
        </div>

        <div class="main">
            <h2>Jac Jacson</h2>
            <img src="b.jpg">
            <div class="icons">
                <ion-icon name="logo-facebook"></ion-icon>
                <ion-icon name="logo-twitter"></ion-icon>
                <ion-icon name="logo-instagram"></ion-icon>
            </div>
        </div>

        <div class="main">
            <h2>Doris Jordan</h2>
            <img src="c.jpg">
            <div class="icons">
                <ion-icon name="logo-facebook"></ion-icon>
                <ion-icon name="logo-twitter"></ion-icon>
                <ion-icon name="logo-instagram"></ion-icon>
            </div>
        </div>
    </div>

CSS Code

<style type="text/css">
.container
{
width: 100%;
height: 600px;
background: #f9f9f9;
font-family: sans-serif;
}
.main
{
width: 300px;
height: 550px;
border: 1px solid #355efc;
border-radius: 8px;
margin-top: 100px;
margin-left: 110px;
text-align: center;
transition: 0.5s;
float: left;
}
.main h2
{
text-align: center;
}
.main img
{
width: 400px;
position: relative;
left: -50px;
border-radius: 8px;
}
.icons ion-icon
{
padding: 10px;
border-radius: 50%;
font-size: 22px;
color: #355efc;
background: #dfe4fd;
margin-top: 15px;
margin-left: 5px;
margin-right: 5px;
transition: 0.5s;
}
.main:hover
{
background: #355efc;
color: #fff;
}
.icons ion-icon:hover
{
background: #355efc;
color: #fff;
}
</style>