Css Style Our Team — стиль 31

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

Демо блока наша команда — стиль 31

Williamson

заговолокer

Lorem 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 Developer

Lorem 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 Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid dolore ducimus enim eum nam reiciendis repellendus sapiente tempore. Distinctio omnis ratione reiciendis tempora tenetur.?

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

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



Теги:
0

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

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