How To Create A Team Section Using HTML CSS and JavaScript
How to Create A Team Section Using HTML, CSS, and JavaScript?
If you want to learn how to create a Team Section Using HTML CSS and JavaScript then you are in the right place.
I have more than Four years experience in Frontend(HTML, CSS, and JS). I promise you, I will try to provide you best way to create Team Section Using HTML, CSS, and JavaScript.
Create A Team Section Using HTML CSS and JavaScript
<!--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================--> <title>Team Section</title> <!--==CSS==================--> <link rel="stylesheet" href="css/style.css"/> <!--==poppins-font=========--> <link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link href="https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet"> <!--==Link Swiper's CSS====--> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css"/> <link rel="stylesheet" href="css/style.css"/> <!--==Using-Font-Awesome-for-Icons=========--> <script src="https://kit.fontawesome.com/6bd6c771de.js" crossorigin="anonymous"></script> </head> <body> <!--==Team-section===========================--> <section id="team"> <div class="team-heading"> <h3>The Team</h3> </div> <!--**slider*****************--> <div class="swiper mySwiper"> <div class="swiper-wrapper"> <!--==1==================--> <div class="swiper-slide"> <!--slider-box--> <div class="team-slider-box"> <!--==Img==================--> <div class="t-s-img"> <img alt="team" src="images/t-1.png"/> </div> <!--==Text=================--> <div class="t-s-text"> <strong>William Adward</strong> <span>Web Developer</span> <div class="team-social"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> </div> </div> <!--==2==================--> <div class="swiper-slide"> <!--slider-box--> <div class="team-slider-box"> <!--==Img==================--> <div class="t-s-img"> <img alt="team" src="images/t-2.png"/> </div> <!--==Text=================--> <div class="t-s-text"> <strong>James William</strong> <span>App Developer</span> <div class="team-social"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> </div> </div> <!--==3==================--> <div class="swiper-slide"> <!--slider-box--> <div class="team-slider-box"> <!--==Img==================--> <div class="t-s-img"> <img alt="team" src="images/t-3.png"/> </div> <!--==Text=================--> <div class="t-s-text"> <strong>Will John</strong> <span>Quality Assurance</span> <div class="team-social"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> </div> </div> <!--==4==================--> <div class="swiper-slide"> <!--slider-box--> <div class="team-slider-box"> <!--==Img==================--> <div class="t-s-img"> <img alt="team" src="images/t-4.png"/> </div> <!--==Text=================--> <div class="t-s-text"> <strong>Mary Adward</strong> <span>Marketer</span> <div class="team-social"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> </div> </div> <!--==5==================--> <div class="swiper-slide"> <!--slider-box--> <div class="team-slider-box"> <!--==Img==================--> <div class="t-s-img"> <img alt="team" src="images/t-5.png"/> </div> <!--==Text=================--> <div class="t-s-text"> <strong>Jennifer Graner</strong> <span>SEO Developer</span> <div class="team-social"> <a href="#"><i class="fab fa-facebook-f"></i></a> <a href="#"><i class="fab fa-twitter"></i></a> <a href="#"><i class="fab fa-instagram"></i></a> </div> </div> </div> </div> </div> </div> </section> <!-- Swiper JS --> <script src="https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper(".mySwiper", { effect: "coverflow", grabCursor: true, centeredSlides: true, slidesPerView: "auto", coverflowEffect: { rotate: 20, stretch: -20, depth: 120, modifier: 3, slideShadows: true, }, pagination: { el: ".swiper-pagination", }, }); </script> </body> </html>
*{
margin: 0px;
padding: 0px;
font-family: poppins;
box-sizing: border-box;
}
ul{
list-style: none;
}
a{
text-decoration: none;
}
body{
background-color: #000000;
}
/*==Team-section===========================*/
#team{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
max-width: 1200px;
min-height: 100vh;
margin: auto;
}
.team-slider-box{
width: 100%;
padding: 20px;
user-select: none;
}
.t-s-img{
position: relative;
height: 350px;
}
.t-s-img::after{
content: '';
position: absolute;
left: 0px;
bottom: 0px;
width: 100%;
height: 150px;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgb(0, 0, 0) 100%);
}
.t-s-img img{
filter: grayscale(1);
width: 100%;
height: 100%;
object-fit: contain;
object-position: bottom;
display: flex;
}
.t-s-text{
display: flex;
flex-direction: column;
align-items: center;
}
.t-s-text strong,
.t-s-text a{
color: #ffffff;
font-weight: 700;
font-size: 1.2rem;
}
.t-s-text span{
color: #919191;
font-size: 0.9rem;
}
.team-social{
display: flex;
justify-content: center;
align-items: center;
}
.team-social a{
margin: 0px 5px;
color: #ffffff;
transition: all ease 0.3s;
font-size: 0.9rem;
}
.team-social a:hover{
color: #0617ff;
}
.swiper {
max-width: 745px;
width: 100%;
}
.swiper-slide {
max-width: 300px !important;
width: 90%;
opacity: 0.2;
margin: 50px 0px;
margin-top: 0px;
}
.swiper-slide-active{
border: 10px solid #0617ff;
opacity: 1;
}
.team-heading{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 101; }
.team-heading h3{
color: #ffffff;
font-size: 3rem;
text-transform: lowercase;
}
@media(max-width:724px){
.team-heading h3{
font-size: 2.6rem;
}
}
@media(max-width:300px){
.t-s-img{
height: 280px;
}
}
Comments