Подробное описание и демонстрация работы блока команда для сайта под номером №31 для библиотеки Bootstrap. Html и CSS код для реализации блока our team’a на сайте как на изображении.
Демо блока наша команда — стиль 31
Williamson
заговолокerLorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolore ducimus enim eum nam reiciendis repellendus sapiente tempore. Distinctio omnis ratione reiciendis tempora tenetur.?
Kristiana
Web DeveloperLorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolore ducimus enim eum nam reiciendis repellendus sapiente tempore. Distinctio omnis ratione reiciendis tempora tenetur.?
Steve Thomas
Web DeveloperLorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolore ducimus enim eum nam reiciendis repellendus sapiente tempore. Distinctio omnis ratione reiciendis tempora tenetur.?
<div class="container"> <div class="row"> <div class="col-md-4 col-sm-6"> <div class="our-team"> <div class="pic"> <img src="https://fokit.ru/demo/images/our-team/our-team-style-31/img-1.jpg" alt=""/> </div> <div class="team-content"> <h3 class="team-title">Williamson</h3> <span class="post">Web Designer</span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolore ducimus enim eum nam reiciendis repellendus sapiente tempore. Distinctio omnis ratione reiciendis tempora tenetur.? </p> <ul class="social-links"> <li><a href="#" class="fab fa-linkedin"></a></li> <li><a href="#" class="fab fa-skype"></a></li> <li><a href="#" class="fab fa-instagram"></a></li> </ul> </div> </div> </div> </div> </div>css разметка для реализации блока
.our-team{ border-top: 1px solid #fff; background: #fff; border-radius: 5px; margin-top: 72px; } .our-team .pic{ width: 40%; border: 3px solid #fff; border-radius: 60px 0; margin: -72px auto 0; overflow: hidden; transition: all 0.20s ease 0s; } .our-team:hover .pic{ border-radius: 50%; border-color: #6e9ecf; } .our-team .pic img{ width: 100%; height: auto; } .our-team .team-content{ text-align: center; position: relative; overflow: hidden; } .our-team .team-title{ font-size: 24px; color: #333; margin: 20px 0 0; text-transform: uppercase; } .our-team .post{ font-size: 16px; color: #333; display: block; margin-bottom: 15px; } .our-team .description{ font-size: 16px; font-weight: 300; color: #333; padding: 0 35px; line-height: 22px; margin-bottom: 60px; } .our-team .social-links{ width: 100%; height: 20%; position: absolute; bottom: -17%; left: 0; margin: 0; padding: 9px 0; list-style: none; background: #6e9ecf; transition: all 0.20s linear 0s; } .our-team:hover .social-links{ bottom: 0; } .our-team .social-links li{ display: inline-block; margin: 0 5px; } .our-team .social-links li a{ width: 35px; height: 35px; line-height: 35px; border-radius: 50%; font-size: 20px; color: #fff; border: 1px solid #fff; } .our-team .social-links li a:hover{ text-decoration: none; } @media only screen and (max-width: 990px) { .our-team { margin-top: 80px; } }