How To Create Responsive Our Team Section Using HTML And CSS

byPosted at
How To Create Responsive Our Team Section Using HTML And CSS

Our Team Section

Learn how to create a responsive team section using HTML and CSS.you can Easily make our team section using HTML and CSS and You also make this our team section by following my youtube tutorial which, I have given below. This Team section is fully responsive all browsers compatible. I also provide you source code of this website.

HostGator Web Hosting

How To Make Responsive Our Team Section Using HTML And CSS

  1. 0.0 - 0.45 min : Intro
  2. 1.0 - 19.0 min: Create Responsive Our Team Section Using HTML And CSS


Basic HTML Code

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">
<title>Personal Website</title>
	<!--style----->
	<style>
		body{
			font-family:poppins;
		}
	</style>
	
</head>

<body>
</body>
</html>

Our Team Section

You can easily make this Our Team Section on your website by watching my youtube video tutorial which I gave at the start of this post or by copy the HTML and CSS code that 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 the Our Team Section like that for your website. So I recommended you watch the Our Team Section video Tutorial on how can I make this Only using HTML and CSS. This Our Team Section is fully responsive and all browsers compatible. HTML and CSS code I have given below this code help you to better understand my Our Team Sectionvideo tutorial on how I make this Our Team Section. I also provide you the source code, you can download and use this on your website without any copyright.

Responsive Our Team Section Using HTML And CSS

➤ Our Team Section HTML Code have given below.


  <section id="team">
        <h1 class="heading">
            <!--icon---------------->
            <i class="fas fa-rocket"></i> Team Members
        </h1>
    <!--container---------------->
    <div class="container">
        <!--box-1----------->
        <div class="box">
            <!--top-bar---------------->
            <div class="top-bar"></div>
            <!--nav------------->
            <div class="nav">
                <!--verify-icon-------->
                <i class="verify fas fa-check-circle"></i>
                <!--heart-btn--------------->
                <input class="heart-btn" id="heart-btn" type="checkbox" />
                <label class="heart"></label>
            </div>
            <!--img and details---------------->
            <div class="details">
                <img alt="" src="images/t-1.png" />
                <strong>Emma Oliva</strong>
                <p>Emmaoliva@gmail.com</p>
            </div>
            <!--view-btns------------------->
            <div class="btn">
                <a href="#"><i class="fas fa-clipboard-list"></i>Assign</a>
                <a href="#"><i class="fas fa-eye"></i>View</a>
            </div>
        </div>
        <!--box-2----------->
        <div class="box">
            <!--top-bar---------------->
            <div class="top-bar"></div>
            <!--nav------------->
            <div class="nav">
                <!--verify-icon-------->
                <i class="verify fas fa-check-circle"></i>
                <!--heart-btn--------------->
                <input class="heart-btn" id="heart-btn2" type="checkbox" />
                <label class="heart"></label>
            </div>
            <!--img and details---------------->
            <div class="details">
                <img alt="" src="images/t-2.png" />
                <strong>Sofia Adward</strong>
                <p>Sofiaadward@gmail.com</p>
            </div>
            <!--view-btns------------------->
            <div class="btn">
                <a href="#"><i class="fas fa-clipboard-list"></i>Assign</a>
                <a href="#"><i class="fas fa-eye"></i>View</a>
            </div>
        </div>
        <!--box-3----------->
        <div class="box">
            <!--top-bar---------------->
            <div class="top-bar"></div>
            <!--nav------------->
            <div class="nav">
                <!--verify-icon-------->
                <i class="verify fas fa-check-circle"></i>
                <!--heart-btn--------------->
                <input class="heart-btn" id="heart-btn3" type="checkbox" />
                <label class="heart"></label>
            </div>
            <!--img and details---------------->
            <div class="details">
                <img alt="" src="images/t-3.png" />
                <strong>Touseeq Ijaz</strong>
                <p>Touseeqijaz@gmail.com</p>
            </div>
            <!--view-btns------------------->
            <div class="btn">
                <a href="#"><i class="fas fa-clipboard-list"></i>Assign</a>
                <a href="#"><i class="fas fa-eye"></i>View</a>
            </div>
        </div>
        <!--box-4----------->
        <div class="box">
            <!--top-bar---------------->
            <div class="top-bar"></div>
            <!--nav------------->
            <div class="nav">
                <!--verify-icon-------->
                <i class="verify fas fa-check-circle"></i>
                <!--heart-btn--------------->
                <input class="heart-btn" id="heart-btn4" type="checkbox" />
                <label class="heart"></label>
            </div>
            <!--img and details---------------->
            <div class="details">
                <img alt="" src="images/t-4.jpg" />
                <strong>Amelia Alex</strong>
                <p>Ameliaalex@gmail.com</p>
            </div>
            <!--view-btns------------------->
            <div class="btn">
                <a href="#"><i class="fas fa-clipboard-list"></i>Assign</a>
                <a href="#"><i class="fas fa-eye"></i>View</a>
            </div>
        </div>
    </div>
    </section>

➤ Font Awesome Link


  <!--using FontAwesome--------------->
<script crossorigin="anonymous" src="https://kit.fontawesome.com/c8e4d183c2.js"></script>

➤ Our Team Section CSS Code is have given below.

body{
    margin:0px;
    padding: 0px;
    font-family: poppins;
    background-color: #f8f8f8;
}
*{
    box-sizing: border-box;
}
a{
    text-decoration: none;
}
#team{
    width:100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.heading{
    font-size: 1.3rem;
    color: #2c2c2c;
    font-weight: 500;
    display: flex;
    align-items: center;
    margin: 20px;
}
.heading i{
    background-color: #507bfc;
    box-shadow: 2px 5px 30px rgba(80,123,252,0.4);
    color: #ffffff;
    width:40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    margin: 0px 20px;
}
.box{
    width:266px;
    height: 340px;
    background-color: #ffffff;
    box-shadow: 2px 2px 30px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    border-radius: 10px;
    margin: 20px;
    position: relative;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
.top-bar{
    width:50%;
    height: 4px;
    position: absolute;
    left: 50%;
    top: 0px;
    transform: translateX(-50%);
    background-color: #507bfc;
    border-radius: 0px 0px 10px 10px;
}
.verify{
    color:#17b667;
}
.nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}
.nav .heart{
    color: rgba(155,155,155);
}
.nav .heart:before{
    content: '\f004';
    font-family: fontAwesome;
    line-height: 30px;
    z-index: 1;
    cursor: pointer;
}
.nav .heart-btn:checked ~ .heart:before{
    color: #e41934;
}
.nav .heart-btn{
    display: none;
}
.details{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
.details img{
    width:100px;
    height: 100px;
    border-radius: 50%;
    overflow: hidden;
    object-fit: cover;
    object-position: center;
}
.details strong{
    font-weight: 500;
    color: #141414;
    letter-spacing: 1px;
    margin-top: 10px;
}
.details p{
    font-size: 0.8rem;
    color: #7a7a7a;
    margin: 5px 0px;
}
.btn{
    width:100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.btn a{
    color:#8b8b8b;
    padding: 8px 22px;
    border-radius: 20px;
    font-size: 0.9rem;
}
.btn a i{
    margin-right: 10px;
}
.btn a:hover{
    color: #fff;
    background-color: #507bfc;
    box-shadow: 2px 5px 15px rgba(80,123,252,0.5);
    transition: all ease 0.3s;
}
.box:hover{
    box-shadow: 2px 2px 30px rgba(4,15,49,0.1);
    transform: scale(1.01);
    transition: all ease 0.1s;
}
@media(max-width:612px){
    .box{
        flex-grow: 0.7;
    }
}




The Download Links Will Be Shown in 30 Seconds


How To Dowload Files
Share
1 comment Labels,

Comments

  1. kaitlynnjahnMarch 4, 2022 at 7:59 AM

    Casino Player Reviews - Jammyhub
    Top Casino Player Ratings · Top 강릉 출장안마 Casino Player Ranking · 1. Myspace · 2. Vegas 이천 출장안마 Slots · 3. Poker 태백 출장마사지 · 4. Ignition · 5. Spin 광주광역 출장마사지 and Win · 6. Jackpot 계룡 출장안마 Slots · 7. Slot

    ReplyDelete

Archive

Contact Form

Send