Три блока Social Profile Bootstrap 3 / Блоки / Сниппеты Bootstrap

Версия: v1.0.1

Каталог: Сниппеты Bootstrap

Категория: Блоки

Bootstrap: 3

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop

Язык: Английский

Уникальный ID: 583

Количество символов:

Посмотрели: 2460 раз

Помощь: установка & настройка

Прокомментировали: 0 раз

Рейтинг: 4.7 / 5 - 3 голосов

Тип лицензии: CC BY 4.0

Авторство: bootstraptema.ru

Информация: Пользователям

Информация: Правообладателям

Теги: Snippet, html, блок, Block, сниппет, Bootstrap

Поделился: BootstrapТема

Добавлено: 2016-02-17 в 22:08

Метка: 1581667762

⇄ ⇅

<!DOCTYPE html>

-webkit-transform:rotate(45deg);
 -moz-transform:rotate(45deg);
 -ms-transform:rotate(45deg);
 -o-transform:rotate(45deg);
 transform:rotate(45deg);

border:1px solid #fff;

-webkit-border-radius:5px;
 -moz-border-radius:5px;
 -ms-border-radius:5px;
 -o-border-radius:5px;
 border-radius:5px;

margin:15px;
 position:relative;
 overflow:hidden;
}
.social-btn-container .social-btn-box a{
 color:#fff;
 font-size:26px;
 line-height:80px;
 display:inline-block;
 width:80px;
 height:80px;
 position:absolute;
 top:-10px;
 left:-10px;

-webkit-transform:rotate(-45deg);
 -moz-transform:rotate(-45deg);
 -ms-transform:rotate(-45deg);
 -o-transform:rotate(-45deg);
 transform:rotate(-45deg);
}
.social-btn-box,
.social-btn-box a{
 
 -webkit-transition:all .25s;
 -moz-transition:all .25s;
 -ms-transition:all .25s;
 -o-transition:all .25s;
 transition:all .25s;
}
.social-btn-box:hover{
 border-color:transparent;
}
.social-btn-box .facebook-btn:hover{
 background:#3B5998;
 color: #fff;
}
.social-btn-box .twitter-btn:hover{
 background:#55ACEE;
 color: #fff;
}
.social-btn-box .linkedin-btn:hover{
 background:#0077b5;
 color: #fff;
}
.social-btn-box .google-plus-btn:hover{
 background:#db514f;
 color: #fff;
}
.social-btn-box .youtube-btn:hover{
 background:#cc181e;
 color: #fff;
}
.social-btn-box .github-btn:hover{
 background:#2b2e30;
 color: #fff;
}
.social-btn-box .a:hover{
 background:#3498db;
 color: #fff;
}

.team-container .col-sm-4{
 padding:60px 15px 60px 15px;
 background:rgb(165,132,202); 
}
.team-container .team-member{
 max-width:245px;
 margin:auto;
 position:relative;
 overflow:hidden;
}
.team-container figcaption{
 text-align:center;
 text-transform:uppercase;
 width:100%;
 height:110px;
 border:1px solid #fff;
 border-top-color:transparent;
 margin:0;
}
.team-container figcaption h4{
 font-size:22px;
 font-weight:700;
 padding-top:20px;
}
.team-container .member-name {
 font-size: 1.5em;
 font-weight: 700;
 margin: 0;
 padding: 26px 10px 5px 10px;
}
.team-container figcaption p{
 font-size: 1.125em;
}
.team-container .social-buttons{
 display:inline-block;
 margin:auto;
 text-align:center;
 width:100%;
}

.team-member .social-btn-container,
.team-member .social-btn-container .social-btn-box{
 -webkit-transition:all .25s;
 -moz-transition:all .25s;
 -ms-transition:all .25s;
 -o-transition:all .25s;
 transition:all .25s;
}

.team-member .social-btn-container {
 position: absolute;
 top: 0px;
 margin: 0 auto;
 left: 0;
}
.team-member:hover .social-btn-container{
 background: rgba(0,0,0,.5);
}
.team-member .social-btn-container .team-socail-btn{
 overflow: hidden;
 position: relative;
 width:245px;
 height: 230px;
}
.team-member .social-btn-container .social-btn-box{
 position: absolute;

}
.team-member .social-btn-container .facebook-btn-container{
 bottom: 220px;
 right: 230px;
}
.team-member .social-btn-container .twitter-btn-container{
 bottom: 220px;
 left: 230px;
}
.team-member .social-btn-container .linkedin-btn-container{
 top: 220px;
 right: 230px;
}
.team-member .social-btn-container .github-btn-container{
 top: 220px;
 left: 230px;
}

.team-member:hover .social-btn-container .facebook-btn-container{
 bottom: 115px;
 right: 122px;
}
.team-member:hover .social-btn-container .twitter-btn-container{
 bottom: 115px;
 left: 122px;
}
.team-member:hover .social-btn-container .linkedin-btn-container{
 top: 115px;
 right: 122px;
}
.team-member:hover .social-btn-container .github-btn-container{
 top: 115px;
 left: 122px;
}
.team-container .social-buttons a{
 color:#fff;
 width:24px;
 height:24px;
 display:inline-block;
 font-size:24px;
 text-align:center;
}
.team-container .team-member figure,
.team-container .team-member figcaption,
.team-container .team-member img,
.team-container .team-member .social-buttons{
 
 -webkit-transition:all .25s;
 -moz-transition:all .25s;
 -ms-transition:all .25s;
 -o-transition:all .25s;
 transition:all .25s;
}
.team-container .team-member:hover figure{
 background-color:#3498db;
 color:#fff;
}
.team-container .team-member:hover figcaption{
 border-color:#3498db;
 color:#fff;
}

.team-container .team-member:hover .social-buttons{
 top:90px;
}
</style>

</figcaption>
 </figure>
 <div class="social-btn-container">
 <div class="team-socail-btn">
 <span class="social-btn-box facebook-btn-container">
 <a href="#" class="facebook-btn">
 <i class="fa fa-facebook"></i>
 </a>
 </span>

<div class="col-sm-4">
 <div class="team-member">
 <figure>
 <img src="https://bootstraptema.ru/snippets/sp/team-2.jpg" alt="Team Member">
 <figcaption>
 <p class="member-name">
 Claudia Springer
 </p>
 <p class="designation">
 Designer 
 </p>

<div class="col-sm-4">
 <div class="team-member">
 <figure>
 <img src="https://bootstraptema.ru/snippets/sp/team-3.jpg" alt="Team Member">
 <figcaption>
 <p class="member-name">
 Max Anthony
 </p>
 <p class="designation">
 Developer 
 </p>

</div>
</div>
</div>

BootstrapTema

Три блока Social Profile Bootstrap 3

Скриншот

Подробнее

Похожие материалы

Просмотренные материалы

Всего комментариев: 0