Create Our Team Section Using HTML CSS And jQuery
Learn How To Make Responsive Our Team Section Using HTML, CSS and jQuery. Easy Way To Make Our Team Section Using HTML, CSS and jQuery. Easy Way To Learn HTML For Beginners.
How to Make Responsive Our Team Section Using HTML CSS And jQuery
- 0:0 - 01:00 min : Intro
- 01:00 - 35:00 min: Create Our Team Section Using HTML CSS And jQuery
This is the basic HTML which is important for all HTML files. I import Poppins in this HTML file using Styling from google because most people do not have Poppins font on their devices.
<html> <head> <meta charset="utf-8"> <meta content="IE-edge" http-equiv="X-UA-Compatible"> <meta content="width=device-width, intial-scale=1.0" name="viewport"> <!--poppins-font-----------> <link rel="preconnect" href="https://fonts.gstatic.com"> <link href="https://fonts.googleapis.com/css2?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"> <!--using-font-awesome--------------> <script src="https://kit.fontawesome.com/c8e4d183c2.js" crossorigin="anonymous"></script> <title>Our Team</title> <!--style-----> <style> body{ font-family:poppins; } </style> </head> <body> </body> </html>
You can easily make this awesome team section for your website by just watching my youtube video tutorial or by copy HTML, CSS, and JS code which I give below. Paste this HTML and CSS code into your HTML and CSS file. On the youtube video tutorial, I tell you all the important points which help you to make a team section like that for your website. So I recommended you watch my team section video Tutorial that how can I make this team section using HTML, CSS, and jQuery. I use Jquery to show team members details and when to click on the cancel button "x" then remove member details. This team section is fully responsive and all browsers and devices compatible. I also provide you the source code of this project, you can download and use this on your website without any copyright.
Our Team HTML➤Our Team Section HTML Code have given below.
<!--team------------------------> <section id="team"> <!--heading----> <strong class="team-heading">Our Team</strong> <!--team-container----------> <div class="team-box-container"> <!--member-box-1---> <div class="member-box member-1"> <!--img----> <div class="member-img"> <!--front-img--> <img src="images/t1-1.jpg"> <!--hover-img--> <img class="hover-img" src="images/t1-2.jpg"> </div> <!--text-----> <div class="member-name"> <h3>Daniel Radcliffe</h3> <h5>Executive Director | Tech & Creative Lead</h5> </div> </div> <!--member-box-2---> <div class="member-box member-2"> <!--img----> <div class="member-img"> <!--front-img--> <img src="images/t2-a.jpg"> <!--hover-img--> <img class="hover-img" src="images/t2-b.jpg"> </div> <!--text-----> <div class="member-name"> <h3>Daniel Radcliffe</h3> <h5>Executive Director | Tech & Creative Lead</h5> </div> </div> <!--member-box-3---> <div class="member-box member-3"> <!--img----> <div class="member-img"> <!--front-img--> <img src="images/t3-a.jpg"> <!--hover-img--> <img class="hover-img" src="images/t3-b.jpg"> </div> <!--text-----> <div class="member-name"> <h3>Daniel Radcliffe</h3> <h5>Executive Director | Tech & Creative Lead</h5> </div> </div> <!--member-box-4---> <div class="member-box member-4"> <!--img----> <div class="member-img"> <!--front-img--> <img src="images/t4-a.jpg"> <!--hover-img--> <img class="hover-img" src="images/t4-b.jpg"> </div> <!--text-----> <div class="member-name"> <h3>Daniel Radcliffe</h3> <h5>Executive Director | Tech & Creative Lead</h5> </div> </div> <!--member-box-5---> <div class="member-box member-5"> <!--img----> <div class="member-img"> <!--front-img--> <img src="images/t5-a.jpg"> <!--hover-img--> <img class="hover-img" src="images/t5-b.jpg"> </div> <!--text-----> <div class="member-name"> <h3>Daniel Radcliffe</h3> <h5>Executive Director | Tech & Creative Lead</h5> </div> </div> <!--member-box-6---> <div class="member-box member-6"> <!--img----> <div class="member-img"> <!--front-img--> <img src="images/t6-a.jpg"> <!--hover-img--> <img class="hover-img" src="images/t6-b.jpg"> </div> <!--text-----> <div class="member-name"> <h3>Daniel Radcliffe</h3> <h5>Executive Director | Tech & Creative Lead</h5> </div> </div> <!--detail-box-1-----------------------------> <div class="detail-box-1"> <div class="member-detail-box"> <!--img----> <div class="detail-box-img"> <img src="images/t1-1.jpg"> </div> <!--text--> <div class="detail-box-text"> <!--cancel-btn----> <a href="javascript:void(0);" class="cancel"> <i class="fas fa-times"></i> </a> <!--name--> <a href="#" class="detail-name">Daniel Radcliffe</a> <!--social-links--> <div class="member-social-links"> <!--facebook--> <a href="#"><i class="fab fa-facebook-f"></i></a> <!--instagram--> <a href="#"><i class="fab fa-instagram"></i></a> </div> <!--position----> <h5 class="position">Position: Executive Director</h5> <!--details---> <p>The man who pulls all the strings in making all your ideas come to live! If he says, its possible - it's possible. He's very dependable, energetic, humourous and passionate. Loves leading projects with full stack development skills on the side. Share your ideas with him and he will make it happen.</p> <!--view-btn----> <a href="#" class="view-work-btn">View Work</a> </div> </div> </div> <!--detail-box-2----------------------------> <div class="detail-box-2"> <div class="member-detail-box"> <!--img----> <div class="detail-box-img"> <img src="images/t2-b.jpg"> </div> <!--text--> <div class="detail-box-text"> <!--cancel-btn----> <a href="javascript:void(0);" class="cancel"> <i class="fas fa-times"></i> </a> <!--name--> <a href="#" class="detail-name">Daniel Radcliffe</a> <!--social-links--> <div class="member-social-links"> <!--facebook--> <a href="#"><i class="fab fa-facebook-f"></i></a> <!--instagram--> <a href="#"><i class="fab fa-instagram"></i></a> </div> <!--position----> <h5 class="position">Position: Executive Director</h5> <!--details---> <p>The man who pulls all the strings in making all your ideas come to live! If he says, its possible - it's possible. He's very dependable, energetic, humourous and passionate. Loves leading projects with full stack development skills on the side. Share your ideas with him and he will make it happen.</p> <!--view-btn----> <a href="#" class="view-work-btn">View Work</a> </div> </div> </div> <!--detail-box-3-----------------------------> <div class="detail-box-3"> <div class="member-detail-box"> <!--img----> <div class="detail-box-img"> <img src="images/t3-b.jpg"> </div> <!--text--> <div class="detail-box-text"> <!--cancel-btn----> <a href="javascript:void(0);" class="cancel"> <i class="fas fa-times"></i> </a> <!--name--> <a href="#" class="detail-name">Daniel Radcliffe</a> <!--social-links--> <div class="member-social-links"> <!--facebook--> <a href="#"><i class="fab fa-facebook-f"></i></a> <!--instagram--> <a href="#"><i class="fab fa-instagram"></i></a> </div> <!--position----> <h5 class="position">Position: Executive Director</h5> <!--details---> <p>The man who pulls all the strings in making all your ideas come to live! If he says, its possible - it's possible. He's very dependable, energetic, humourous and passionate. Loves leading projects with full stack development skills on the side. Share your ideas with him and he will make it happen.</p> <!--view-btn----> <a href="#" class="view-work-btn">View Work</a> </div> </div> </div> <!--detail-box-4-----------------------------> <div class="detail-box-4"> <div class="member-detail-box"> <!--img----> <div class="detail-box-img"> <img src="images/t4-b.jpg"> </div> <!--text--> <div class="detail-box-text"> <!--cancel-btn----> <a href="javascript:void(0);" class="cancel"> <i class="fas fa-times"></i> </a> <!--name--> <a href="#" class="detail-name">Daniel Radcliffe</a> <!--social-links--> <div class="member-social-links"> <!--facebook--> <a href="#"><i class="fab fa-facebook-f"></i></a> <!--instagram--> <a href="#"><i class="fab fa-instagram"></i></a> </div> <!--position----> <h5 class="position">Position: Executive Director</h5> <!--details---> <p>The man who pulls all the strings in making all your ideas come to live! If he says, its possible - it's possible. He's very dependable, energetic, humourous and passionate. Loves leading projects with full stack development skills on the side. Share your ideas with him and he will make it happen.</p> <!--view-btn----> <a href="#" class="view-work-btn">View Work</a> </div> </div> </div> <!--detail-box-5-----------------------------> <div class="detail-box-5"> <div class="member-detail-box"> <!--img----> <div class="detail-box-img"> <img src="images/t5-b.jpg"> </div> <!--text--> <div class="detail-box-text"> <!--cancel-btn----> <a href="javascript:void(0);" class="cancel"> <i class="fas fa-times"></i> </a> <!--name--> <a href="#" class="detail-name">Daniel Radcliffe</a> <!--social-links--> <div class="member-social-links"> <!--facebook--> <a href="#"><i class="fab fa-facebook-f"></i></a> <!--instagram--> <a href="#"><i class="fab fa-instagram"></i></a> </div> <!--position----> <h5 class="position">Position: Executive Director</h5> <!--details---> <p>The man who pulls all the strings in making all your ideas come to live! If he says, its possible - it's possible. He's very dependable, energetic, humourous and passionate. Loves leading projects with full stack development skills on the side. Share your ideas with him and he will make it happen.</p> <!--view-btn----> <a href="#" class="view-work-btn">View Work</a> </div> </div> </div> <!--detail-box-6-----------------------------> <div class="detail-box-6"> <div class="member-detail-box"> <!--img----> <div class="detail-box-img"> <img src="images/t6-b.jpg"> </div> <!--text--> <div class="detail-box-text"> <!--cancel-btn----> <a href="javascript:void(0);" class="cancel"> <i class="fas fa-times"></i> </a> <!--name--> <a href="#" class="detail-name">Daniel Radcliffe</a> <!--social-links--> <div class="member-social-links"> <!--facebook--> <a href="#"><i class="fab fa-facebook-f"></i></a> <!--instagram--> <a href="#"><i class="fab fa-instagram"></i></a> </div> <!--position----> <h5 class="position">Position: Executive Director</h5> <!--details---> <p>The man who pulls all the strings in making all your ideas come to live! If he says, its possible - it's possible. He's very dependable, energetic, humourous and passionate. Loves leading projects with full stack development skills on the side. Share your ideas with him and he will make it happen.</p> <!--view-btn----> <a href="#" class="view-work-btn">View Work</a> </div> </div> </div> </div> </section>
➤Our Team Section CSS Code is have given below.
body{
margin:0px;
padding: 0px;
font-family: poppins;
}
*{
box-sizing: border-box;
}
a{
text-decoration: none;
}
#team{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width:100%;
padding: 20px;
}
.team-heading{
font-size: 2.2rem;
padding: 10px 20px;
margin: 20px;
color: #303030;
text-transform: uppercase;
font-weight: 800;
border-top: 1px solid #535353;
border-bottom: 1px solid #535353;
text-align: center;
}
.member-box{
box-shadow: 2px 2px 30px rgba(0,0,0,0.2);
background-color: #ffffff;
position: relative;
cursor: pointer;
}
.member-img{
width:362px;
height: 542px;
position: relative;
}
.member-img img{
width:100%;
height: 100%;
object-position: center;
object-fit: cover;
}
.hover-img{
position: absolute;
left: 0px;
top: 0px;
width:100%;
height: 100%;
z-index: 1;
display: none;
}
.member-box:hover .hover-img{
display: block;
animation: fade 0.3s;
}
@keyframes fade{
0%{
opacity: 0;
}
100%{
opacity: 1;
}
}
.member-name{
width:100%;
padding: 20px 10px;
background-color: #ffffff;
z-index: 2;
}
.member-name h3,
.member-name h5{
color: #1b1b1b;
margin: 0px;
letter-spacing: 0.3px;
}
.member-name h5{
font-weight: 500;
}
.member-name h3{
text-transform: uppercase;
font-weight: 800;
}
.team-box-container{
display: grid;
grid-template-columns: 362px 362px 362px;
grid-template-rows: auto auto auto;
grid-auto-columns: auto;
grid-auto-rows: auto;
grid-gap: 20px;
}
.member-detail-box{
display: grid;
grid-template-columns: 0.5fr 1.5fr;
grid-template-rows: auto;
grid-gap: 20px;
box-shadow: 2px 2px 30px rgba(0,0,0,0.2);
}
.detail-box-1,
.detail-box-2,
.detail-box-3,
.detail-box-4,
.detail-box-5,
.detail-box-6{
grid-column: 1/4;
display: none;
}
.detail-box-img{
width:300px;
height: auto;
}
.detail-box-img img{
width:100%;
height: 100%;
object-position: center;
object-fit: cover;
}
.detail-box-text{
padding: 20px 20px 20px 0px;
position: relative;
}
.detail-name{
font-size: 2rem;
color: #181818;
font-weight: 700;
}
.member-social-links{
display: flex;
align-items: center;
}
.member-social-links a{
width:30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,0.1);
margin: 5px;
border-radius: 50%;
font-size: 0.9rem;
color: #000000;
}
.member-social-links a:hover{
color: #fff;
background-color: #181818;
transition: all ease 0.3s;
}
.detail-box-text .position{
color: #000000;
border-bottom: 1px solid #414141;
margin: 0px;
padding: 10px 0px;
width:97%;
}
.detail-box-text p{
color: #202020;
font-weight: 500;
font-size: 0.9rem;
}
.view-work-btn{
width:150px;
height: 45px;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
background-color: #202020;
}
.view-work-btn:hover,
.cancel:hover{
color: #fff;
background-color: #0e0e0e;
transition: all ease 0.3s;
}
.cancel{
position: absolute;
right: 30px;
top: 20px;
width:40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
background-color: #202020;
}
.show-details-1,
.show-details-2,
.show-details-3{
display: grid;
grid-row: 2/3;
animation: fade 0.3s;
}
.show-details-4,
.show-details-5,
.show-details-6{
display: grid;
grid-row: 3/4;
animation: fade 0.3s;
}
➤JQuery Link
<!--using JQuery---------------> <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>
➤JavaScript
/*-1-----------------------------------*/
$(document).on('click','.member-1',function(){
$('.detail-box-1').toggleClass('show-details-1')
$('.detail-box-2').removeClass('show-details-2')
$('.detail-box-3').removeClass('show-details-3')
$('.detail-box-4').removeClass('show-details-4')
$('.detail-box-5').removeClass('show-details-5')
$('.detail-box-6').removeClass('show-details-6')
});
/*-2-----------------------------------*/
$(document).on('click','.member-2',function(){
$('.detail-box-2').toggleClass('show-details-2')
$('.detail-box-1').removeClass('show-details-1')
$('.detail-box-3').removeClass('show-details-3')
$('.detail-box-4').removeClass('show-details-4')
$('.detail-box-5').removeClass('show-details-5')
$('.detail-box-6').removeClass('show-details-6')
});
/*-3-----------------------------------*/
$(document).on('click','.member-3',function(){
$('.detail-box-3').toggleClass('show-details-3')
$('.detail-box-2').removeClass('show-details-2')
$('.detail-box-1').removeClass('show-details-1')
$('.detail-box-4').removeClass('show-details-4')
$('.detail-box-5').removeClass('show-details-5')
$('.detail-box-6').removeClass('show-details-6')
});
/*-4-----------------------------------*/
$(document).on('click','.member-4',function(){
$('.detail-box-4').toggleClass('show-details-4')
$('.detail-box-2').removeClass('show-details-2')
$('.detail-box-3').removeClass('show-details-3')
$('.detail-box-1').removeClass('show-details-1')
$('.detail-box-5').removeClass('show-details-5')
$('.detail-box-6').removeClass('show-details-6')
});
/*-5-----------------------------------*/
$(document).on('click','.member-5',function(){
$('.detail-box-5').toggleClass('show-details-5')
$('.detail-box-2').removeClass('show-details-2')
$('.detail-box-3').removeClass('show-details-3')
$('.detail-box-4').removeClass('show-details-4')
$('.detail-box-1').removeClass('show-details-1')
$('.detail-box-6').removeClass('show-details-6')
});
/*-6-----------------------------------*/
$(document).on('click','.member-6',function(){
$('.detail-box-6').toggleClass('show-details-6')
$('.detail-box-2').removeClass('show-details-2')
$('.detail-box-3').removeClass('show-details-3')
$('.detail-box-4').removeClass('show-details-4')
$('.detail-box-5').removeClass('show-details-5')
$('.detail-box-1').removeClass('show-details-1')
});
/*-cancel------------------*/
$(document).on('click','.cancel',function(){
$('.detail-box-1').removeClass('show-details-1')
$('.detail-box-2').removeClass('show-details-2')
$('.detail-box-3').removeClass('show-details-3')
$('.detail-box-4').removeClass('show-details-4')
$('.detail-box-5').removeClass('show-details-5')
$('.detail-box-6').removeClass('show-details-6')
});
Making Responsive
Now I make this team section responsive for Mobile phones and Tab. I use the "@media" query to make the team section responsive. The CSS code is given below, just copy and paste in your CSS file to make your team section responsive.
@media(max-width:1200px){
.team-box-container{
grid-template-columns: 303px 303px 303px;
}
.member-img{
width:303px;
height: 450px;
}
}
@media(max-width:990px){
.team-box-container{
grid-template-columns: 232px 232px 232px;
grid-gap: 10px;
}
.member-img{
width:232px;
height: 335px;
}
.member-detail-box{
grid-gap: 10px;
}
.detail-box-text{
padding: 10px;
}
.cancel{
top:10px;
right: 10px;
}
}
@media(max-width:800px){
.team-box-container{
grid-template-columns: 340px 340px;
}
.member-img{
width:340px;
height: 510px;
}
.show-details-1,
.show-details-2{
display: grid;
grid-row: 2/3;
grid-column: 1/3;
}
.show-details-3,
.show-details-4{
display: grid;
grid-row: 3/4;
grid-column: 1/3;
}
.show-details-5,
.show-details-6{
display: grid;
grid-row: 4/5;
grid-column: 1/3;
}
}
@media(max-width:745px){
.team-box-container{
grid-template-columns: 250px 250px;
}
.member-img{
width:250px;
height: 375px;
}
.member-detail-box{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px 0px;
position: relative;
}
.detail-box-text{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
position: static;
}
}
@media(max-width:575px){
.team-box-container{
grid-template-columns: 1fr 1fr;
grid-gap: 10px;
}
.member-img{
width:100%;
height: 355px;
}
#team{
padding: 10px;
}
.team-heading{
font-size: 1.7rem;
}
}
@media(max-width:450px){
.team-box-container{
grid-template-columns: 1fr;
}
.member-img{
height: 500px;
}
.show-details-1,
.show-details-2,
.show-details-3,
.show-details-4,
.show-details-5,
.show-details-6{
grid-column: 1/2;
}
.show-details-1{
grid-row: 2/3;
}
.show-details-2{
grid-row: 3/4;
}
.show-details-3{
grid-row: 4/5;
}
.show-details-4{
grid-row: 5/6;
}
.show-details-5{
grid-row: 6/7;
}
.show-details-6{
grid-row: 7/8;
}
}
The Download Links Will Be Shown in 30 Seconds
Wao thank you for this tutorial
ReplyDelete