Css Style Our Team — стиль 14

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

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

Miranda joy

Заголовок

Это текст специально написан для демонстрации работы эффекта. Nam et tincidunt ligula. Duis justo arcu, tempor rutrum congue.

Williamson

Web Developer

Это текст специально написан для демонстрации работы эффекта. Nam et tincidunt ligula. Duis justo arcu, tempor rutrum congue.

Kristiana

Web Developer

Это текст специально написан для демонстрации работы эффекта. Nam et tincidunt ligula. Duis justo arcu, tempor rutrum congue.

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-14/img-1.jpg" alt=""/>

<div class="team-profile">
<h3 class="team-title"><a href="#">Miranda joy</a></h3>
<span class="post">Web Designer</span>
<p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam et tincidunt ligula. Duis justo arcu, tempor rutrum congue.</p>
<ul class="social-links">
<li><a href="#" class="fab fa-facebook"></a></li>
<li><a href="#" class="fab fa-twitter"></a></li>
<li><a href="#" class="fab fa-google-plus"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>

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

.our-team img{
width: 100%;
height: auto;
}
.our-team .team-profile{
padding-top: 25px;
}
.our-team .team-title{
margin: 0;
}
.our-team .team-title a{
font-size:16px;
font-weight:700;
color:#444;
transition:color 0.20s linear;
}
.our-team .team-title a:hover{
color:#3498db;
}
.our-team .post{
color:#3498db;
text-transform: uppercase;
font-size:11px;
display:block;
margin-bottom:10px;
}
.our-team .description{
color:#8a8a8a;
font-size:13px;
line-height: 20px;
margin-bottom:23px;
}
.our-team .social-links{
padding:0;
margin: 0;
list-style:none;
}
.our-team .social-links li{
display:inline-block;
margin-right:3px;
}
.our-team .social-links li a{
border: 2px solid #8a8a8a;
display:block;
width: 35px;
height: 35px;
border-radius: 50%;
line-height: 35px;
text-align: center;
color:#8a8a8a;
transition:color 0.20s linear,border 0.20s linear;
}
.our-team .social-links li a:hover{
color:#3498db;
border-color: #3498db;
}
@media only screen and (max-width: 990px){
.our-team{
margin-bottom:30px;
}
}



Теги:
0

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

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