team members

This bootstrap snippet team members was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code
tags: users,list,team

This is the HTML code for this bootstrap snippet

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview tab

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row" id="team">
    <!-- TEAM MEMBER 1 - START -->
    <div class="col-xs-6 col-sm-3">
        <div class="team-member">
            <div class="overlay-wrapper2">
                <img src="https://bootdey.com/img/Content/avatar/avatar1.png" class="img-responsive" alt="">
                <span class="overlay" style="display: none;">
                    <a href=""><i class="fa fa-facebook"></i></a>
                    <a href=""><i class="fa fa-twitter"></i></a>
                    <a href=""><i class="fa fa-linkedin"></i></a>
                </span>
            </div>
            <h4>John Doe</h4>
            <span>CEO</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae.</p>
    	</div>
    </div>
    <!-- TEAM MEMBER 1 - END -->
    
    <!-- TEAM MEMBER 2 - START -->
    <div class="col-xs-6 col-sm-3">
    	<div class="team-member">
            <div class="overlay-wrapper2">
                <img src="https://bootdey.com/img/Content/avatar/avatar2.png" class="img-responsive" alt="">
                <span class="overlay" style="display: none;">
                    <a href=""><i class="fa fa-facebook"></i></a>
                    <a href=""><i class="fa fa-twitter"></i></a>
                    <a href=""><i class="fa fa-linkedin"></i></a>
                </span>
            </div>
            <h4>John Doe</h4>
            <span>Project Manager</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae.</p>
    	</div>
    </div>
    <!-- TEAM MEMBER 2 - END -->
    
    <!-- TEAM MEMBER 3 - START -->
    <div class="col-xs-6 col-sm-3">
    	<div class="team-member">
            <div class="overlay-wrapper2">
                <img src="https://bootdey.com/img/Content/avatar/avatar3.png" class="img-responsive" alt="">
                <span class="overlay" style="display: none;">
                    <a href=""><i class="fa fa-facebook"></i></a>
                    <a href=""><i class="fa fa-twitter"></i></a>
                    <a href=""><i class="fa fa-linkedin"></i></a>
                </span>
            </div>
            <h4>John Doe</h4>
            <span>Webdesigner</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae.</p>
    	</div>
    </div>
    <!-- TEAM MEMBER 3 - END -->
    
    <!-- TEAM MEMBER 4 - START -->
    <div class="col-xs-6 col-sm-3">
    	<div class="team-member">
            <div class="overlay-wrapper2">
                <img src="https://bootdey.com/img/Content/avatar/avatar4.png" class="img-responsive" alt="">
                <span class="overlay" style="display: none;">
                    <a href=""><i class="fa fa-facebook"></i></a>
                    <a href=""><i class="fa fa-twitter"></i></a>
                    <a href=""><i class="fa fa-linkedin"></i></a>
                </span>
            </div>
            <h4>John Doe</h4>
            <span>Photographer</span>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam nec nulla sagittis, scelerisque mi vitae.</p>
    	</div>
    </div>
    <!-- TEAM MEMBER 4 - END -->
</div>

This is the CSS code for this bootstrap snippet

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview

body{margin-top:20px;}


#team img {
    border:1px solid #EBEBEB;
	padding:10px;
	background-color:#F5F5F5;
}

#team h4 {
	color:#555555;
	font-size:20px;
	font-weight:300;
	margin:0 0 5px;
	font-family:'Open Sans', Verdana, Geneva, sans-serif;
	background-color:#EBEBEB;
	padding:15px;
}

#team span {
	font-size:12px;
	font-weight:bold;
	margin:10px 10px 5px;
	display:block;
}

#team p {
	color:#777777;
	font-size:13px;
	min-height:70px;
	padding:0 10px 10px;
}

#team .team-member {
	box-shadow:0 1px 5px 0 rgba(0,0,0,0.15);
}

#team .team-member .overlay-wrapper2 {
	position:relative;
	background-color:#F5F5F5;
}
	
#team .team-member .overlay-wrapper2 .overlay {
    background-color:rgba(0, 0, 0, 0.7);
	top:10px;
    left:0;
    display:none;
    position:absolute;
    right:0;
	height:15%;
	padding:0;
	margin:0 11px;
	text-align:center;
}

#team .team-member .overlay-wrapper2 .overlay i {
	font-size:18px;
	color:rgba(255, 255, 255, 0.8);
	display:inline-block;
	padding:10px 15px 0;
}

#team .team-member .overlay-wrapper2 .overlay i:hover {
	color:rgba(255, 255, 255, 1);
}
                                    

Information about this bootstrap snippet

Creator: Dey Dey

Bootstrap version: 3.3.6

Created: Mar 12th 2016, 21:17

Views: 3.2K