"A Team Section Using HTML, CSS, and JavaScript" is a dynamic and interactive component commonly incorporated into websites to showcase team members or staff profiles. This implementation leverages the combined power of HTML, CSS, and JavaScript to create a visually appealing and functional team section.
HTML is used to structure the team section, providing a semantic layout for the team member profiles. Each team member is typically represented by a container element, such as a <div>, which encapsulates their photo, name, job title, and any additional information. This structure allows for easy organization and customization of the team section.
CSS is employed to style the team member profiles, applying visual enhancements and defining the overall layout. CSS properties and selectors are utilized to set the size, color, font, and spacing of the elements within the team section. Styling can be used to create a cohesive and professional appearance that aligns with the overall website design.
JavaScript is utilized to add interactivity and dynamic behavior to the team section. With JavaScript, you can implement various features, such as filtering or sorting team members based on different criteria. This allows users to easily navigate and explore the team section based on their preferences.
JavaScript can also enable additional functionality, such as creating a modal or popup window that displays more detailed information about a team member when clicked or hovered over. This functionality enhances the user experience by providing a seamless way to access comprehensive details about each team member without cluttering the main team section.
Additionally, JavaScript can be utilized to implement other interactive elements, such as tooltips, animated transitions, or carousel-like effects for navigating through different team member profiles. These dynamic features add a touch of creativity and engagement to the team section, capturing the attention of users and encouraging exploration.
By combining HTML, CSS, and JavaScript, an impressive and versatile team section can be created that effectively showcases team members and provides an interactive user experience. The result is a visually appealing and informative component that allows visitors to learn more about the team behind the website or organization.
In summary, "A Team Section Using HTML, CSS, and JavaScript" utilizes the strengths of each language to create an engaging and interactive team showcase. HTML structures the content, CSS enhances the visual presentation, and JavaScript adds interactivity and dynamic functionality. This combination of technologies enables the creation of a dynamic team section that elevates the overall user experience on the website.
HTML CODE
<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');
// 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/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
CSS CODE
@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;
}
Comments
Post a Comment