Cat Block / Блоки / Сниппеты Bootstrap

Версия: v1.0.0

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

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

Bootstrap: 3, 4, 5

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

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

Вес файла: 1.1 Kb

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

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

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

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

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

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

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

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

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

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

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

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

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

Теги: Block, блоки команды, Responsive, адаптивный, Команда, сниппет команды, сниппет, Snippet, блок, team, Bootstrap

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

Добавлено: 2022-12-17 в 15:39

Метка: 1671280748

⇄ ⇅

.team-card .img {
 left: 50%;
 top: -100px;
 padding: 10px;
 position: absolute;
 border-radius: 50%;
 -webkit-transition: all 0.5s ease;
 transition: all 0.5s ease;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
 border: 10px solid #171718;
}

.team-card .img img {
 width: 200px;
 max-width: 200px;
 border-radius: 50%;
 position: relative;
}

.team-card .body {
 text-align: center;
 border-radius: 80px;
 -webkit-transition: all 0.5s ease;
 transition: all 0.5s ease;
 background: #171718;
 padding: 150px 30px 30px 30px;
}

.team-card .body .text {
 margin-bottom: 30px;
}

.team-card .body .text h5 {
 color: #fff;
 margin-bottom: 10px;
}

.team-card .body .text p {
 font-weight: 500;
 color: #fff;
 text-transform: uppercase;
}

.team-card .body .social ul li {
 display: inline-block;
 margin-right: 10px;
}

.team-card .body .social ul li a {
 padding: 10px;
 border-radius: 50%;
 display: inline-block;
 border: 2px solid #fff;
 -webkit-transition: all 0.5s ease;
 transition: all 0.5s ease;
}

.team-card .body .social ul li a i {
 width: 40px;
 height: 40px;
 line-height: 40px;
 border-radius: 50%;
 color: #ff4500;
 background: #fff;
 -webkit-transition: all 0.5s ease;
 transition: all 0.5s ease;
}

.team-card .body .social ul li a:hover {
 border-color: #171718;
}

.team-card .body .social ul li a:hover i {
 color: #fff;
 background: #171718;
}

.team-card:hover .body {
 background: #ff4500;
}

.team-card:hover .img {
 border-color: #ff4500;
}
</style>

<div class="container">
 <div class="row">
 <div class="col-md-6 col-lg-4">
 <div class="team-card">
 <div class="img">
 <img src="https://murchim.ru/_sf/0/55038608.png" alt="Cat image">
 </div>
 <div class="body">
 <div class="text">
 <h5>Agent One</h5> <p>MURCHIM DESIGNER</p> </div>
 <div class="social">
 <ul>
 <li><a href="https://vk.com/murchim_ru" target="_blank"><i class="fab fa-vk"></i></a></li> <li><a href="https://ok.ru/murchim.rf"><i class="fab fa-odnoklassniki"></i></a></li> <li><a href="https://t.me/murchim_rf"><i class="fab fa-telegram"></i></a></li> </ul>
 </div>
 </div>
 </div>
 </div>
 <div class="col-md-6 col-lg-4">
 <div class="team-card">
 <div class="img">
 <img src="https://murchim.ru/_sf/0/55573677.png" alt="Cat image">
 </div>
 <div class="body">
 <div class="text">
 <h5>Agent Two</h5> <p>MURCHIM DEVELOPER</p> </div>
 <div class="social">
 <ul>
 <li><a href="https://vk.com/murchim_ru" target="_blank"><i class="fab fa-vk"></i></a></li> <li><a href="https://ok.ru/murchim.rf"><i class="fab fa-odnoklassniki"></i></a></li> <li><a href="https://t.me/murchim_rf"><i class="fab fa-telegram"></i></a></li> </ul>
 </div>
 </div>
 </div>
 </div>
 <div class="col-md-6 col-lg-4">
 <div class="team-card">
 <div class="img">
 <img src="https://murchim.ru/_sf/0/51904071.png" alt="Cat image">
 </div>
 <div class="body">
 <div class="text">
 <h5>Agent Tree</h5> <p>MURCHIM ADMIN</p> </div>
 <div class="social">
 <ul>
 <li><a href="https://vk.com/murchim_ru" target="_blank"><i class="fab fa-vk"></i></a></li> <li><a href="https://ok.ru/murchim.rf"><i class="fab fa-odnoklassniki"></i></a></li> <li><a href="https://t.me/murchim_rf"><i class="fab fa-telegram"></i></a></li> </ul>
 </div>
 </div>
 </div>
 </div>
 </div>
 </div>

BootstrapTema

Cat Block

Скриншот

Подробнее

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

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

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