Css Style Our Team — стиль 18

Подробное описание и демонстрация работы блока команда для сайта под номером №18 для библиотеки Bootstrap. Html и CSS код для реализации блока our team’a на сайте как на изображении.

html разметка для реализации блока

<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="https://fokit.ru/demo/images/our-team/our-team-style-18/img-1.jpg" alt=""/>
<div class="team-prof">
<h3><a href="#">Williamson</a></h3>
<span>Web designer</span>
<span>+1 (123) 1234567</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ligula orci, convallis in lectus a.
</p>
</div>
<ul class="social-links">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
<li><a href="#" class="fab fa-google-plus"></a></li>
<li><a href="#" class="fab fa-dribbble"></a></li>
<li><a href="#" class="fab fa-pinterest-p"></a></li>
</ul>
</div>
</div>
</div>
</div>

css разметка для реализации блока

.our-team img{
width: 100%;
height: auto;
margin-bottom: 25px;
}
.our-team .team-prof h3{
margin: 0;
}
.our-team .team-prof h3 a {
color: #ea6153;
font-size: 24px;
font-weight: normal;
transition: all 0.2s linear 0s;
}
.our-team .team-prof h3 a:hover{
color:#a4a7aa;
}
.our-team .team-prof span{
color:#a4a7aa;
display:block;
margin-bottom:10px;
text-transform: uppercase;
font-size:12px;
}
.our-team .team-prof .description{
color:#8a8a8a;
margin-bottom:23px;
font-size:13px;
line-height: 20px;
}
.our-team .social-links{
list-style:none;
padding:0;
margin:0;
}
.our-team .social-links li{
display:inline-block;
}
.our-team .social-links li a{
padding: 0 5px;
display:block;
transition:all 0.2s linear 0s;
}
.our-team .social-links li a:hover{
color: #6b7a87;
}
.our-team .social-links li .fa-facebook{
color:#5567a9;
}
.our-team .social-links li .fa-twitter{
color:#08c1f3;
}
.our-team .social-links li .fa-google-plus{
color:#cb2027;
}
.our-team .social-links li .fa-dribbble{
color:#f26798;
}
.our-team  .social-links li .fa-pinterest-p{
color:#cb2027;
}
@media only screen  and (max-width: 990px){
.our-team{
margin-bottom:20px;
}
}

Теги: