Hey friends, today in this blog you’ll learn How To Create Responsive Our Team Section Using Html Css | Our Team Page Using Html Css . We’ll use Html & Css to create this Our Team Section . Earlier I’ve shared a blog on Login Form Using Html Css Js | Password Show and Hide Using Javascript .
This Our Team Page ( Our Team Section ) Is Completely responsive For All Devices Like Mobile , Laptop , Tablets etc. In This Login Form Us will Show And Hide Password with the help oh javascript.
If You have any Problem so, I Also Created a full video tutorial on this Responsive Our Team Section you can see this tutorial .
Video Tutorial of ” Responsive Our Team Section “
You might like this:
- Responsive Image Slider
- Neumorphism Login Form In HTML & CSS | CSS Neumorphism Login Form
- How to Create a Social Media Login Form Using Html & Css
- How To Create Responsive Login Form Using Html Css Only
- How to Create Resume CV Website Using HTML CSS Bootstrap4
Our Team Page Using Html Css [Source Codes]
To create this Our Team Page ( Our Team Section ) First, you need to create Twoe files, HTML File And CSS File. After creating these files Just copy the given source code and paste into your text editor and edit it according to your requirement. You can also download the source code files of this Responsive Our Team Section Using Html Css from the given download button.
# HTML CODE
First, create a Html file (index.html) and paste the given codes in your CSS file.
<div class="container">
<div class="section-title">
<h1>Our Team Page</h1>
</div>
<div class="row">
<div class="column">
<div class="team">
<div class="team-img">
<img src="img/team-1.jpg" alt="Team Image">
</div>
<div class="team-content">
<h2>Steven</h2>
<h3>CEO & Founder</h3>
<p>Some text goes here that describes about team members</p>
<h4>abc@gmail.com</h4>
</div>
<div class="team-social">
<a href="#" class="social-tw"> <i class="fab fa-twitter"></i></a>
<a href="#" class="social-fb"> <i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-li"> <i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-in"> <i class="fab fa-instagram"></i></a>
<a href="#" class="social-yt"> <i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
<div class="column">
<div class="team">
<div class="team-img">
<img src="img/team-2.jpg" alt="Team Image">
</div>
<div class="team-content">
<h2>Mayra</h2>
<h3>Art Director</h3>
<p>Some text goes here that describes about team members</p>
<h4>abc@gmail.com</h4>
</div>
<div class="team-social">
<a href="#" class="social-tw"> <i class="fab fa-twitter"></i></a>
<a href="#" class="social-fb"> <i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-li"> <i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-in"> <i class="fab fa-instagram"></i></a>
<a href="#" class="social-yt"> <i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
<div class="column">
<div class="team">
<div class="team-img">
<img src="img/team-3.jpg" alt="Team Image">
</div>
<div class="team-content">
<h2>John</h2>
<h3>Developer</h3>
<p>Some text goes here that describes about team members</p>
<h4>abc@gmail.com</h4>
</div>
<div class="team-social">
<a href="#" class="social-tw"> <i class="fab fa-twitter"></i></a>
<a href="#" class="social-fb"> <i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-li"> <i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-in"> <i class="fab fa-instagram"></i></a>
<a href="#" class="social-yt"> <i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
<div class="column">
<div class="team">
<div class="team-img">
<img src="img/team-4.jpg" alt="Team Image">
</div>
<div class="team-content">
<h2>Jennifer</h2>
<h3>Designer</h3>
<p>Some text goes here that describes about team members</p>
<h4>abc@gmail.com</h4>
</div>
<div class="team-social">
<a href="#" class="social-tw"> <i class="fab fa-twitter"></i></a>
<a href="#" class="social-fb"> <i class="fab fa-facebook-f"></i></a>
<a href="#" class="social-li"> <i class="fab fa-linkedin-in"></i></a>
<a href="#" class="social-in"> <i class="fab fa-instagram"></i></a>
<a href="#" class="social-yt"> <i class="fab fa-youtube"></i></a>
</div>
</div>
</div>
</div>
</div># CSS CODE
Second, you create anCSS file(style.css) and paste the given codes in your CSS file.
/* Coding With Nick */
/* GEneral stuff */
*,
*::before,
*::after{
box-sizing: border-box;
}
html{
font-family: sans-serif;
line-height: 1.15;
}
body{
font-family: 'lato', sans-serif;
color: #454545;
font-weight: 300;
background: #ffffff;
}
a{
color: #333333;
font-weight: 400;
outline: none;
text-decoration: none;
transition: 0.5s;
}
a:hover,
a:focus{
outline: none;
text-decoration: none;
}
p{
padding: 0;
margin: 0 0 15px 0;
color: #454545;
font-weight: 300;
}
h1,
h2,
h3,
h4,
h5,
h6{
padding: 0;
margin: 0 0 15px 0;
color: #333333;
font-weight: 700;
}
img{
width: 100%;
height: auto;
}
.container{
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.section-title{
flex: 0 0 100%;
max-width: 100%;
margin-bottom: 80px;
margin-top: 40px;
text-align: center;
}
.section-title h1{
display: inline-block;
font-size: 35px;
text-transform: uppercase;
font-weight: 700;
color: #000000;
margin: 0 0 5px;
position: relative;
}
.section-title h1::before{
content: '';
left: 0;
position: absolute;
height: 3px;
right: 32%;
background-color: #50c5fc;
bottom: -5px;
}
.container .section-title h1::before{
left: 30%;
}
.row{
display: flex;
flex-wrap: wrap;
margin-right: -15px;
margin-left: -15px;
}
.column{
position: relative;
width: 100%;
padding-right: 15px;
padding-left: 15px;
flex: 0 0 100%;
max-width: 100%;
}
.team{
margin-bottom:30px ;
}
.team .team-img{
position: relative;
font-size: 0;
text-align: center;
}
.team .team-img img{
width: 160px;
height: auto;
border-radius: 100%;
border: 20px solid #f3f4fa;
}
.team .team-content{
padding: 80px 20px 20px 20px;
margin-top: -80px;
text-align: center;
background: #f3f4fa;
border-radius: 10px;
}
.team .team-content h2{
font-size: 25px;
font-weight: 400;
letter-spacing: 2px;
}
.team .team-content h3{
font-size: 16px;
font-weight: 300;
}
.team .team-content h4{
font-size: 16px;
font-weight: 300;
letter-spacing: 1px;
font-style: italic;
margin-bottom: 0;
}
.team .team-content p{
font-size: 16px;
font-weight: 400;
line-height: 22px;
}
.team .team-social{
position: absolute;
width: 100%;
height: 100%;
padding: 35px;
top: 0;
left:0;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, .6);
transition: all .3s;
font-size: 0;
z-index: 1;
opacity: 0;
}
.team:hover .team-social{
opacity: 1;
}
.team .team-social a{
display: inline-block;
width: 40px;
height: 40px;
margin-right:5px ;
padding: 11px 0 10px 0;
font-size: 16px;
font-weight: 300;
line-height: 16px;
text-align: center;
color: #ffffff;
border-radius: 10px;
transition: all .3s;
margin-top: 50px;
}
.team .team-social a.social-tw{
background: #00acee;
}
.team .team-social a.social-fb{
background: #3b5998;
}
.team .team-social a.social-li{
background: #0e76a8;
}
.team .team-social a.social-in{
background: #3f729b;
}
.team .team-social a.social-yt{
background: #c4302b;
}
.team .team-social a:last-child{
margin-right: 0;
}
.team:hover .team-social a{
margin-top: 0;
}
.team .team-social a:hover{
background: #222222;
}
/* Mobile Responsive */
@media (min-width: 576px){
.container{
max-width: 540px;
}
.column{
max-width: 50%;
}
}
@media (min-width: 768px){
.container{
max-width: 720px;
}
.column{
max-width: 33.333333%;
}
}
@media (min-width: 992px){
.container{
max-width: 960px;
}
.column{
max-width: 25%;
}
}
@media (min-width: 1200px){
.container{
max-width: 1140px;
}
}That’s all, now you’ve successfully created a Responsive Our Team Section Using Html Css . If your code doesn’t work or you’ve faced any error And problem’s , please download the source code from the given download button. It’s free and a .zip file will be downloaded then you’ve extract it.
Read More –
