Css Style Our Team — стиль 1

Подробное описание и демонстрация работы блока команда для сайта под номером №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.

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

<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;
}
}



Теги:
0

Оставить своё мнение

Ваш e-mail не будет опубликован. Обязательные поля помечены *