Подробное описание и демонстрация работы блока команда для сайта под номером №16 для библиотеки Bootstrap. Html и CSS код для реализации блока our team’a на сайте как на изображении.
Демо блока наша команда — стиль 16
Williamson
Web DeveloperЭто текст специально написан для демонстрации работы эффекта. Maecenas consectetur diam at mi consectetur, et pulvinar leo gravida. Nullam interdum.
Kristiana
Web DeveloperЭто текст специально написан для демонстрации работы эффекта. Maecenas consectetur diam at mi consectetur, et pulvinar leo gravida. Nullam interdum.
Steve thomas
Web DeveloperЭто текст специально написан для демонстрации работы эффекта. Maecenas consectetur diam at mi consectetur, et pulvinar leo gravida. Nullam interdum.
<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-16/img-1.jpg" alt=""/> </div> <div class="team-prof"> <h3 class="post-title">Williamson</h3> <span class="post">Web Developer</span> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas consectetur diam at mi consectetur, et pulvinar leo gravida. Nullam interdum. </p> </div> </div> </div> </div> </div>css разметка для реализации блока
.our-team{ background: #222; padding:15px; border:1px solid #333; transition: all 0.30s linear 0s; } .our-team:hover{ background:#262626; } .our-team .pic img{ width: 100%; height: auto; } .our-team .team-prof{ padding:20px 10px 0; } .our-team .post-title{ color: #e67e22; font-size:22px; text-transform:capitalize; font-weight: 700; margin-bottom: 5px; } .our-team .post{ font-size: 13px; color:#bbb; display: block; margin: 5px 0 22px 0; text-transform: capitalize; } .our-team .description{ color:#808080; padding:28px 0 15px; border-top: 1px solid #333; margin:0; font-size:15px; } @media screen and (max-width: 990px){ .our-team{ margin-bottom: 30px; } }