Css Style Our Team — стиль 30

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

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

Williamson

Web Desginer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio exercitationem facilis laborum perferendis quasi, ratione.

Williamson

Web Desginer

Steve Thomas

Web Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio exercitationem facilis laborum perferendis quasi, ratione.

Steve Thomas

Web Developer

Miranda joy

Web Developer

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio exercitationem facilis laborum perferendis quasi, ratione.

Miranda joy

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

<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="our-team">
<img src="https://fokit.ru/demo/images/our-team/our-team-style-30/img-1.jpg" alt="">
<div class="team-content">
<h3 class="post-title">Williamson</h3>
<span class="post">Web Desginer</span>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio exercitationem facilis laborum perferendis quasi, ratione.
</p>
<ul class="team_social">
<li><a href="#"><i class="fab fa-linkedin"></i></a></li>
<li><a href="#"><i class="fab fa-twitter"></i></a></li>
<li><a href="#"><i class="fab fa-google-plus"></i></a></li>
<li><a href="#"><i class="fab fa-pinterest"></i></a></li>
</ul>
</div>
<div class="team-prof">
<h3 class="post-title">Williamson</h3>
<span class="post">Web Desginer</span>
</div>
</div>
</div>
</div>
</div>

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

.our-team{
border: 1px solid #d3d3d3;
position: relative;
overflow: hidden;
}
.our-team img{
width: 100%;
height: auto;
}
.our-team .team-content{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
padding: 45px 18px;
background: rgba(0,0,0,0.7);
transform: translateX(-100%);
transition: all 0.20s ease 0s;
}
.our-team:hover .team-content{
transform: translateX(0);
}
.our-team .team-content .post-title{
font-size: 18px;
color: #fff;
text-transform: uppercase;
}
.our-team .team-content .post{
font-size: 14px;
color: #cb95e1;
display: block;
margin-bottom: 20px;
}
.our-team .description{
font-size: 14px;
line-height: 25px;
color: #fff;
margin-bottom: 20px;
}
.our-team .team_social{
margin:0;
padding:0;
list-style: none;
}
.our-team .team_social li{
display: inline-block;
margin-right: 5px;
}
.our-team .team_social li a{
width: 40px;
height: 40px;
border-radius: 50%;
border: 2px solid #f5f5f5;
font-size: 17px;
color: #f5f5f5;
line-height: 40px;
text-align: center;
display: inline-block;
transition: border 0.3s ease 0s;
}
.our-team .team_social li a:hover{
border-color: transparent;
}
.our-team .team-prof{
width: 100%;
position: absolute;
bottom: 0;
text-align: right;
padding: 20px 16px;
background: rgba(0,0,0,0.7);
transform: translateX(0);
transition: all 0.20s ease 0s;
}
.our-team:hover .team-prof{
transform: translateX(100%);
}
.our-team .team-prof .post-title{
font-size: 18px;
color: #fff;
margin: 0 0 8px 0;
text-transform: uppercase;
}
.our-team .team-prof .post{
font-size: 14px;
color: #cb95e1;
margin-bottom: 0;
}
@media only screen and (max-width: 990px) {
.our-team{ margin-bottom: 20px; }
}



Теги:
0

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

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