Get free HTML CSS code for team member website component you can simply use this component in your website it will help you boost your development and save time
You can use this User Card for Team Member web Component by simply copy and past the HTML code to the HTML File and copy Past the CSS to the CSS file. You also Download the Project Folder on the User Card for Team Member by Clicking the Download button at the bottom
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" >
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" />
<section id="teacher" class="team-member contaienr-fluid">
<div class="container">
<div class="session-title">
<h2>Our Teachers</h2>
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam.</p>
</div>
<div class="row teamro">
<div class="col-md-3 mb-5 col-sm-6">
<div class="our-team">
<div class="pic">
<img src="img/team-memb1.jpg">
</div>
<h3 class="title">Williamson</h3>
<span class="post">Web Developer</span>
</div>
</div>
<div class="col-md-3 mb-5 col-sm-6">
<div class="our-team">
<div class="pic">
<img src="img/team-memb2.jpg">
</div>
<h3 class="title">Kristiana</h3>
<span class="post">Softeare Developer</span>
</div>
</div>
<div class="col-md-3 mb-5 col-sm-6">
<div class="our-team">
<div class="pic">
<img src="img/team-memb3.jpg">
</div>
<h3 class="title">Anderson</h3>
<span class="post">Accountant</span>
</div>
</div>
<div class="col-md-3 mb-5 col-sm-6">
<div class="our-team">
<div class="pic">
<img src="img/team-memb8.jpg">
</div>
<h3 class="title">Deitry Mayani</h3>
<span class="post">Web Designer</span>
</div>
</div>
</div>
</div>
</section>
.team-member {
background-color: #f9f9f9;
padding: 80px 40px;
font-family: "Ubuntu", sans-serif;
}
.team-member .teamro .our-team {
padding: 0px;
background: #fff;
border-radius: 15px;
text-align: center;
box-shadow: 0 2px 3px 0 rgba(218, 218, 253, 0.35), 0 0px 3px 0 rgba(206, 206, 238, 0.35);
padding-bottom: 20px;
}
.team-member .teamro .our-team .pic {
display: inline-block;
width: 100%;
height: 100%;
background: #fff;
padding: 10px;
margin-bottom: 25px;
transition: all 0.5s ease 0s;
}
.team-member .teamro .our-team:hover .pic {
background: #f2184f;
border-radius: 5%;
}
.team-member .teamro .pic img {
width: 100%;
height: auto;
border-radius: 5%;
}
.team-member .teamro .our-team .title {
display: block;
font-size: 20px;
font-weight: 600;
color: #2e282a;
text-transform: uppercase;
margin: 0 0 7px 0;
}
.team-member .teamro .our-team .post {
display: block;
font-size: 15px;
color: #f2184f;
text-transform: capitalize;
margin-bottom: 15px;
}
.team-member .teamro .our-team .social {
padding: 0;
margin: 0;
list-style: none;
}
.team-member .teamro .our-team .social li {
display: inline-block;
margin-right: 5px;
}
.team-member .teamro .our-team .social li a {
display: block;
width: 30px;
height: 30px;
line-height: 30px;
border-radius: 50%;
font-size: 15px;
color: #17bebb;
border: 1px solid #17bebb;
transition: all 0.5s ease 0s;
}
.team-member .teamro .our-team:hover .social li a {
background: #17bebb;
color: #fff;
}
@media only screen and (max-width: 990px) {
.team-member .teamro .our-team {
margin-bottom: 30px;
}
}
.session-title {
padding: 30px;
margin: 0px;
}
.session-title h2 {
width: 100%;
text-align: center;
}
.session-title p {
width: 100%;
text-align: center;
}
Copyright © 2018 Smarteyeapps.com Design & Developed by Smarteye Technologies