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

Williamson
Web Developer
Kristiana
заголовок
Miranda joy
заголовок<div class="container"> <div class="row"> <div class="col-md-3 col-sm-6"> <div class="our-team"> <div class="pic"> <img src="https://fokit.ru/demo/images/our-team/our-team-style-60/img-1.jpg"> </div> <h3 class="title">Williamson</h3> <Span class="post">Web Developer</Span> <ul class="social"> <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-linkedin"></a></li> </ul> </div> </div> <div class="col-md-3 col-sm-6"> <div class="our-team"> <div class="pic"> <img src="https://fokit.ru/demo/images/our-team/our-team-style-60/img-2.jpg"> </div> <h3 class="title">Kristiana</h3> <Span class="post">Web Designer</Span> <ul class="social"> <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-linkedin"></a></li> </ul> </div> </div> </div> </div>css разметка для реализации блока
.demo{ background: #262526; } .our-team{ padding: 20px 15px 30px; background: #fff; border-radius: 15px; text-align: center; } .our-team .pic{ display: inline-block; width: 100%; height: 100%; background: #fff; padding: 10px; margin-bottom: 25px; transition: all 0.5s ease 0s; } .our-team:hover .pic{ background: #17bebb; border-radius: 50%; } .pic img{ width: 100%; height: auto; border-radius: 50%; } .our-team .title{ display: block; font-size: 20px; font-weight: 600; color: #2e282a; text-transform: uppercase; margin: 0 0 7px 0; } .our-team .post{ display: block; font-size: 15px; color: #17bebb; text-transform: capitalize; margin-bottom: 15px; } .our-team .social{ padding: 0; margin: 0; list-style: none; } .our-team .social li{ display: inline-block; margin-right: 5px; } .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; } .our-team:hover .social li a{ background: #17bebb; color: #fff; } @media only screen and (max-width: 990px){ .our-team{ margin-bottom: 30px; } }