Our Team Section in JavaScript
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.
<!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>Our Team Section in JavaScript</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<section class="team" id="team">
<div class="team_div" id="myContainer">
<div class="team_thumb" id="team_thumb1">
<img src="team_thumb2.jpg">
</div>
<div class="team_thumb" id="team_thumb2">
<img src="team_thumb3.jpg">
</div>
<div class="team_thumb" id="team_thumb3">
<img src="team_thumb4.jpg">
</div>
<div class="team_thumb" id="team_thumb4">
<img src="team_thumb5.jpg">
</div>
<div class="team_thumb" id="team_thumb5">
<img src="team_thumb6.jpg">
</div>
<div class="team_thumb" id="team_thumb6">
<img src="team_thumb7.jpg">
</div>
<div class="team_thumb" id="team_thumb7">
<img src="team_thumb8.jpg">
</div>
</div>
<!-- ======================================================== -->
<div class="team_content">
<div id="div1" class="box">
<h1 id="heading_a">Moria Petors</h1>
<h2 id="heading_a">Vice President</h2>
<p id="text">A wonderful serenity has taken possession of my entire soul, like these sweet mornings of<br>
spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in<br>
this spot, which was created for the bliss of souls like mine.
</p>
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-linkedin"></ion-icon>
<ion-icon name="mail-outline"></ion-icon>
</div>
<div id="div2" class="box">
<h1>Jenny Lieblich</h1>
<h2>CEO</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of<br>
spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in<br>
this spot, which was created for the bliss of souls like mine.
</p>
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-linkedin"></ion-icon>
<ion-icon name="mail-outline"></ion-icon>
</div>
<div id="div3" class="box">
<h1>Maria meyers</h1>
<h2>Graphic Designer</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of<br>
spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in<br>
this spot, which was created for the bliss of souls like mine.
</p>
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-linkedin"></ion-icon>
<ion-icon name="mail-outline"></ion-icon>
</div>
<div id="div4" class="box">
<h1>Lisa Jameson</h1>
<h2>Customer Support</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of<br>
spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in<br>
this spot, which was created for the bliss of souls like mine.
</p>
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-linkedin"></ion-icon>
<ion-icon name="mail-outline"></ion-icon>
</div>
<div id="div5" class="box">
<h1>Tom Miller</h1>
<h2>Conception</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of<br>
spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in<br>
this spot, which was created for the bliss of souls like mine.
</p>
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-linkedin"></ion-icon>
<ion-icon name="mail-outline"></ion-icon>
</div>
<div id="div6" class="box">
<h1>John Keller</h1>
<h2>Support Supervisor</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of<br>
spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in<br>
this spot, which was created for the bliss of souls like mine.
</p>
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-linkedin"></ion-icon>
<ion-icon name="mail-outline"></ion-icon>
</div>
<div id="div7" class="box">
<h1>Balvinder Kumar</h1>
<h2>Website Designer</h2>
<p>A wonderful serenity has taken possession of my entire soul, like these sweet mornings of<br>
spring which I enjoy with my whole heart. I am alone, and feel the charm of existence in<br>
this spot, which was created for the bliss of souls like mine.
</p>
<ion-icon name="logo-facebook"></ion-icon>
<ion-icon name="logo-instagram"></ion-icon>
<ion-icon name="logo-twitter"></ion-icon>
<ion-icon name="logo-linkedin"></ion-icon>
<ion-icon name="mail-outline"></ion-icon>
</div>
</div>
</section>
<script>
// Get a reference to the HTML element you want to add divs to
var container = document.getElementById('myContainer');
// Get a reference to the button that will trigger the addition of the div
var addButton1 = document.getElementById('team_thumb1');
var addButton2 = document.getElementById('team_thumb2');
var addButton3 = document.getElementById('team_thumb3');
var addButton4 = document.getElementById('team_thumb4');
var addButton5 = document.getElementById('team_thumb5');
var addButton6 = document.getElementById('team_thumb6');
var addButton7 = document.getElementById('team_thumb7');
// Set the maximum number of divs that can be added
var divNo1 = document.getElementById('div1');
var divNo2 = document.getElementById('div2');
var divNo3 = document.getElementById('div3');
var divNo4 = document.getElementById('div4');
var divNo5 = document.getElementById('div5');
var divNo6 = document.getElementById('div6');
var divNo7 = document.getElementById('div7');
var heading1 = document.getElementById('heading_a');
var heading2 = document.getElementById('heading_b');
// div no 1
addButton1.addEventListener('mouseover', function (event) {
divNo1.style.display = "block";
divNo2.style.display = "none";
divNo3.style.display = "none";
divNo4.style.display = "none";
divNo5.style.display = "none";
divNo6.style.display = "none";
divNo7.style.display = "none";
});
addButton1.addEventListener('mouseout', function (event) {
divNo1.style.display = "none";
divNo1.style.display = "block";
});
// div no 2
addButton2.addEventListener('mouseover', function (event) {
divNo2.style.display = "block";
divNo1.style.display = "none";
divNo7.style.display = "none";
divNo3.style.display = "none";
divNo4.style.display = "none";
divNo5.style.display = "none";
divNo6.style.display = "none";
})
addButton2.addEventListener('mouseout', function (event) {
divNo2.style.display = "none";
divNo2.style.display = "block";
});
// div no 3
addButton3.addEventListener('mouseover', function (event) {
divNo3.style.display = "block";
divNo2.style.display = "none";
divNo2.style.display = "none";
divNo7.style.display = "none";
divNo4.style.display = "none";
divNo5.style.display = "none";
divNo6.style.display = "none";
});
addButton3.addEventListener('mouseout', function (event) {
divNo3.style.display = "none";
divNo3.style.display = "block";
divNo2.style.display = "none";
});
// div no 4
addButton4.addEventListener('mouseover', function (event) {
divNo4.style.display = "block";
divNo3.style.display = "none";
divNo2.style.display = "none";
divNo3.style.display = "none";
divNo7.style.display = "none";
divNo5.style.display = "none";
divNo6.style.display = "none";
});
addButton4.addEventListener('mouseout', function (event) {
divNo4.style.display = "none";
divNo4.style.display = "block";
divNo3.style.display = "none";
});
// div no 5
addButton5.addEventListener('mouseover', function (event) {
divNo5.style.display = "block";
divNo4.style.display = "none";
divNo2.style.display = "none";
divNo3.style.display = "none";
divNo4.style.display = "none";
divNo6.style.display = "none";
divNo7.style.display = "none";
});
addButton5.addEventListener('mouseout', function (event) {
divNo5.style.display = "none";
divNo5.style.display = "block";
divNo4.style.display = "none";
});
// div no 6
addButton6.addEventListener('mouseover', function (event) {
divNo6.style.display = "block";
divNo5.style.display = "none";
divNo2.style.display = "none";
divNo3.style.display = "none";
divNo4.style.display = "none";
divNo5.style.display = "none";
divNo7.style.display = "none";
});
addButton6.addEventListener('mouseout', function (event) {
divNo6.style.display = "none";
divNo6.style.display = "block";
divNo5.style.display = "none";
});
// div no 7
addButton7.addEventListener('mouseover', function (event) {
divNo7.style.display = "block";
divNo6.style.display = "none";
divNo2.style.display = "none";
divNo3.style.display = "none";
divNo4.style.display = "none";
divNo5.style.display = "none";
divNo6.style.display = "none";
});
addButton7.addEventListener('mouseout', function (event) {
divNo7.style.display = "none";
divNo7.style.display = "block";
divNo6.style.display = "none";
});
</script>
<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>
</body>
</html>
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
/*font-family: 'Roboto', sans-serif;*/
* {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
outline: none;
border: none;
text-decoration: none;
transition: .3s linear;
/* transform: translateY(); */
}
html {
font-size: 62.5%;
overflow-x: hidden;
scroll-padding-top: 9rem;
scroll-behavior: smooth;
}
html::-webkit-scrollbar {
width: .8rem;
}
html::-webkit-scrollbar-track {
background: transparent;
}
html::-webkit-scrollbar-thumb {
background: var(--main-color);
border-radius: 4rem;
}
.team {
width: 100%;
height: 100vh;
}
.team_div {
width: 100%;
height: 20%;
padding: 0px 100px;
display: flex;
align-items: center;
justify-content: space-between;
}
.team_thumb {
width: 100px;
height: 100px;
/* background: gold; */
position: relative;
top: 50%;
z-index: 99999;
transition: 1s;
}
.team_thumb:hover {
transform: scale(2.1);
cursor: pointer;
z-index: 9999999;
}
.team_thumb img {
width: 100%;
height: 100%;
}
/* =================================team content */
.team_content {
width: 100%;
height: 80%;
}
.box {
width: 100%;
height: auto;
backdrop-filter: blur(5px);
z-index: -1;
display: none;
padding: 150px 100px;
}
#div1 {
background-image: url(team_1.jpg);
background-size: cover;
background-repeat: no-repeat;
-webkit-transition: display 2s;
transition: display 2s;
}
#div2 {
background-image: url(team_2.jpg);
background-size: cover;
background-repeat: no-repeat;
transition: 2s;
}
#div3 {
background-image: url(team_3.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#div4 {
background-image: url(team_4.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#div5 {
background-image: url(team_5.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#div6 {
background-image: url(team_7.jpg);
background-size: cover;
background-repeat: no-repeat;
}
#div7 {
background-image: url(team_8.jpg);
background-size: cover;
background-repeat: no-repeat;
}
.box h1 {
color: white;
font-size: 60px;
font-weight: 900;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.box h2 {
color: white;
font-size: 30px;
padding: 0px 0 20px 0;
font-family: Baskerville Old Face;
letter-spacing: 1px;
}
.box p {
font-size: 18px;
line-height: 30px;
color: white;
letter-spacing: 1px;
font-weight: 200;
}
.box ion-icon {
font-size: 30px;
color: white;
margin: 50px 0px 0 0;
position: relative;
padding: 10px;
cursor: pointer;
}
.box ion-icon::before{
content: "";
width: 0%;
height: 0%;
position: absolute;
top: 0;right: 0;
bottom: 0;left: 0;
background: white;
margin: auto;
transition: .5s;
border-radius: 10px;
z-index: -1;
}
.box ion-icon:hover::before{
width: 100%;
height: 100%;
}
.box ion-icon:hover{
color: black;
}