Секция с блоками профилей / Блоки / Сниппеты Bootstrap

Секция с блоками профилей

Готовая секция для установки с 3 блоками оригинального дизайна и эффектом при наведении, используется вёрстка Bootstrap, можете скачать бесплатно.

* Дополнительные шрифты не используются, Вы видите шрифт установленный по умолчанию в браузере, скачать архив с исходниками можно в прикреплении №2.

Версия: v1.0.1

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

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

Bootstrap: 3

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

Язык: Русский

Вес файла: 490.6 Kb

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

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

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

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

Прикреплён файл №1: /_sf/6/628.html

Прикреплён файл №2: /stuff/0-0-0-628-20

Скачали бесплатно: 67 раз

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

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

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

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

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

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

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

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

Добавлено: 2016-02-25 в 16:00

Метка: 1581666237

⇄ ⇅

.service-aro-left {
 width: 150px;
 height: 1px;
 float: left;
 margin-top: 16px;
 }

.service-aro-right {
 width: 150px;
 height: 1px;
 float: right;
 margin-top: 16px;
 }

.service-aro-icon i {
 font-size: 16px;
 border: 1px solid;
 width: 33px;
 height: 33px;
 line-height: 32px;
 border-radius: 6px 0 6px 0;
 }

#about-page{
 background-color: #1b1b1b;
 padding: 100px 0px;
 }

#about-page .about-title{
 color: #f4f4f4;
 font-size: 30px;
 text-transform: uppercase;
 padding-bottom: 18px;
 }

#about-page h2{
 color: #808b8d;
 font-size: 24px;
 text-transform: uppercase;
 margin-top: 30px;
 margin-bottom: 20px;
 }

#about-page p{
 color: #808b8d;
 font-size: 14px;
 margin-bottom: 40px;
 }

.member{
 margin-top: 25px;
 }

.member .member-img{
 position: relative;
 width: 300px;
 margin: auto;
 }

.member .member-img:before{
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease;
 z-index: 200;
 content: "";
 width: 100%;
 height: 100%;
 background-color: #000;
 position: absolute;
 top: 0;
 opacity: 0;
 border-radius: 40px 0px;
 }

.member .member-img:hover:before{
 opacity: 0.6;
 }

.member .member-img img{
 border-width: 3px;
 border-style: solid;
 border-radius: 40px 0px;
 width: 100%;
 height: auto;
 }

.member-social{
 position: absolute;
 width: 303px;
 height: 303px;
 top: 0;
 left: 0;
 }

.member-social .facebook-icon i{
 color: #ffffff;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 border-radius: 8px 0px;
 margin: 1px;
 position: absolute;
 top: -0px;
 left: 114px;
 z-index: -999;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease;
 }

.member .member-img:hover .facebook-icon i{
 top: 114px;
 z-index: 300;
 }

.member-social .twitter-icon i{
 color: #ffffff;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 border-radius: 0px 8px;
 margin: 1px;
 position: absolute;
 top: 114px;
 right: -0px;
 z-index: -999;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease;
 }

.member .member-img:hover .twitter-icon i{
 right: 114px;
 z-index: 300;
 }

.member-social .linkedin-icon i{
 color: #ffffff;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 border-radius: 0px 8px;
 margin: 1px;
 position: absolute;
 bottom: 114px;
 left: -0px;
 z-index: -999;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease;
 }

.member .member-img:hover .linkedin-icon i{
 left: 114px;
 z-index: 300;
 }

.member-social .google-plus-icon i{
 color: #ffffff;
 font-size: 20px;
 width: 35px;
 height: 35px;
 line-height: 35px;
 border-radius: 8px 0px;
 margin: 1px;
 position: absolute;
 bottom: -0px;
 right: 114px;
 z-index: -999;
 -webkit-transition: all 0.3s ease;
 -moz-transition: all 0.3s ease;
 -o-transition: all 0.3s ease;
 transition: all 0.3s ease;
 }

.member .member-img:hover .google-plus-icon i{
 bottom: 114px;
 z-index: 300;
 }

.member h3{
 color: #f7f7f7;
 font-size: 24px;
 text-transform: uppercase;
 font-weight: bold;
 }

.member span{
 font-size: 18px;
 }

/* Фиолетовая расцветка */

.service-aro-icon,
.member span{
 color: #8600c8;
}

.service i,
.member .member-img img {
 border-color: #8600c8;
}

.service-aro-left,
.service-aro-right,
.member-social .facebook-icon i,
.member-social .twitter-icon i,
.member-social .linkedin-icon i,
.member-social .google-plus-icon i {
 background: #8600c8;
}

.member-social .facebook-icon i:hover,
.member-social .twitter-icon i:hover,
.member-social .linkedin-icon i:hover,
.member-social .google-plus-icon i:hover {
 background: #7101A8;
}
</style>

<div class="col-md-12 text-center">
 <h1 class="about-title">Блок профилей Member</h1>
 <div class="service-aro-icon">
 <div class="service-aro-left"></div>
 <i class="fa fa-group"></i>
 <div class="service-aro-right"></div>
 </div>
 <h2>Готовая секция для установки</h2>
 <p>Вы видите Ваш установленный шрифт браузера по умолчанию</p>
 </div>

<div class="col-md-4 text-center member">
 <div class="member-img">
 <img src="http://bootstraptema.ru/snippets/block/2016/member/01.jpg" alt="" />
 <div class="member-social">
 <a class="facebook-icon" href=""><i class="fa fa-facebook"></i></a>
 <a class="twitter-icon" href=""><i class="fa fa-twitter"></i></a>
 <a class="linkedin-icon" href=""><i class="fa fa-linkedin"></i></a>
 <a class="google-plus-icon" href=""><i class="fa fa-google-plus"></i></a>
 </div>
 </div>
 <h3>Имя профиля 1</h3>
 <span>Определение 1</span>
 </div>

<div class="col-md-4 text-center member">
 <div class="member-img">
 <img src="http://bootstraptema.ru/snippets/block/2016/member/02.jpg" alt="" />
 <div class="member-social">
 <a class="facebook-icon" href=""><i class="fa fa-facebook"></i></a>
 <a class="twitter-icon" href=""><i class="fa fa-twitter"></i></a>
 <a class="linkedin-icon" href=""><i class="fa fa-linkedin"></i></a>
 <a class="google-plus-icon" href=""><i class="fa fa-google-plus"></i></a>
 </div>
 </div>
 <h3>Имя профиля 2</h3>
 <span>Определение 2</span>
 </div>
 <div class="col-md-4 text-center member">
 <div class="member-img">
 <img src="http://bootstraptema.ru/snippets/block/2016/member/03.jpg" alt="" />
 <div class="member-social">
 <a class="facebook-icon" href=""><i class="fa fa-facebook"></i></a>
 <a class="twitter-icon" href=""><i class="fa fa-twitter"></i></a>
 <a class="linkedin-icon" href=""><i class="fa fa-linkedin"></i></a>
 <a class="google-plus-icon" href=""><i class="fa fa-google-plus"></i></a>
 </div>
 </div>
 <h3>Имя профиля 2</h3>
 <span>Определение 2</span>
 </div>

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

BootstrapTema

Секция с блоками профилей

Скриншот

Подробнее

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

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

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