Our Team Section Page

Our Team Section Page

Our Team Section Page normally used to occur at the server, after the client had entered all the necessary data and then pressed the Submit button. If the data entered by a client was incorrect or was simply missing, the server would have to send all the data back to the client and request that the form be resubmitted with correct information. This was really a lengthy process which used to put a lot of burden on the server.

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.

 
<h1>DEDICATER TEAM</h1>
<h2>Our Team</h2>
<div class="main_in_div">
<div class="team_div">
<div class="image">
<img src="bg.jpg">
</div>
<h2>Balvinder Kumar</h2>
<p>WEB DESIGINER</p>
<div class="icon_div">
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
</div>
</div>
<div class="team_div">
<div class="image">
<img
src="https://images.pexels.com/photos/415829/pexels-photo-415829.jpeg?auto=compress&cs=tinysrgb&w=600">
</div>
<h2>Jennifer Doe</h2>
<p>WEB DESIGINER</p>
<div class="icon_div">
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
</div>
</div>
<div class="team_div">
<div class="image">
<img
src="https://images.pexels.com/photos/769772/pexels-photo-769772.jpeg?auto=compress&cs=tinysrgb&w=600">
</div>
<h2>Raman</h2>
<p>WEB DESIGINER</p>
<div class="icon_div">
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
</div>
</div>
</div>
</div>

* {
    margin: 0;
    padding: 0;
    font-family: arial;
    transition: 2s;
}
.main {
    width: 100%;
    height: 700px;
    /*background-color: dimgray;*/
    text-align: center;
}
.main h1,
h2 {
    font-size: 35px;
    color: darkred;
    position: relative;
    top: 70px;
}
.main_in_div {
    width: 1300px;
    height: 480px;
    /*background-color: #EEEEEE;*/
    margin: auto;
    position: relative;
    top: 100px;
}
.team_div {
    width: 300px;
    height: 100%;
    background-color: #EEEEEE;
    float: left;
    margin-left: 100px;
    overflow: hidden;
    text-align: center;
    border-radius: 50px;
}
.team_div:hover {
    box-shadow: 5px 5px 20px 0px #888;
}
.image {
    width: 250px;
    height: 250px;
    background-color: white;
    border-radius: 50%;
    margin: auto;
    position: relative;
    top: 20px;
}
.image img {
    width: 95%;
    height: 95%;
    border-radius: 50%;
    padding: 7px;
}
.team_div:hover .image {
    background-color: black;
}
.team_div h2 {
    color: gray;
    position: relative;
    top: 25px;
    font-size: 25px;
}
.team_div p {
    color: gray;
    position: relative;
    top: 30px;
}
.icon_div {
    width: 105%;
    height: 70px;
    background-color: black;
    margin-top: 70px;
    position: relative;
    left: -350px;
    border-radius: 50px;
}
.team_div:hover .icon_div {
    left: -40px;
}
.icon_div ion-icon {
    color: white;
    font-size: 30px;
    padding: 20px;
}
.icon_div ion-icon:hover {
    background-color: white;
    color: black;
    border-radius: 50%;
}

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>