Подробное описание и демонстрация работы блока команда для сайта под номером №1 для библиотеки Bootstrap. Html и CSS код для реализации блока our team’a на сайте как на изображении.
Демо блока наша команда — стиль 1
kristiana
Web DeveloperЭто текст специально написан для демонстрации работы эффекта. Donec nec fermentum ipsum. Morbi ac arcu.
williamson
Web DesginerЭто текст специально написан для демонстрации работы эффекта. Donec nec fermentum ipsum. Morbi ac arcu.
steve thomas
Web DeveloperЭто текст специально написан для демонстрации работы эффекта. Donec nec fermentum ipsum. Morbi ac arcu.
<div class="container"> <div class="row"> <div class="col-sm-4"> <div class="our-team"> <div class="pic"> <img src="https://fokit.ru/demo/images/our-team/our-team-style-1/img-1.jpg" alt=""/> </div> <div class="team-prof"> <h3 class="post-title">kristiana</h3> <span class="post">Web Developer</span> <hr> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec fermentum ipsum. Morbi ac arcu. </p> <ul class="social_media_team"> <li><a href="#"><i class="fab fa-facebook"></i></a></li> <li><a href="#"><i class="fab fa-twitter"></i></a></li> <li><a href="#"><i class="fab fa-dribbble"></i></a></li> <li><a href="#"><i class="fab fa-pinterest"></i></a></li> </ul> </div> </div> </div> </div> </div>css разметка для реализации блока
.our-team{ border:1px solid #ededed; padding: 20px; } .our-team .pic > img{ width: 100%; height: auto; } .team-prof .post-title{ text-transform: capitalize; color:#e67e22; font-size: 22px; font-weight: 700; line-height: 1em; margin-top: 30px; } .team-prof .post{ color:#3c3c3c; font-size: 13px; font-weight: 300; line-height: 1em; text-transform: capitalize; } .team-prof .description{ color:#4d4d4d; font-size: 16px; font-weight: normal; line-height: 1.7em; } .team-prof .social_media_team{ padding: 0; list-style: none; margin-top: 10px; } .social_media_team > li{ display: inline-block; margin-left: 5px; } .social_media_team > li > a{ width: 30px; height: 30px; border-radius: 50%; background: #e0e0e0; display: block; text-align: center; line-height: 30px; color:#000; transition:all 0.2s linear 0s; } .social_media_team > li > a:hover{ background: #e67e22; color:#fff; } @media screen and (max-width: 767px){ .our-team{ margin-bottom: 30px; } }