Owl Slider Carousel Comments Bootstrap 3 / Слайдеры / Сниппеты Bootstrap

Версия: v1.0

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

Категория: Слайдеры

Bootstrap: 3, 4, 5

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

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

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

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

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

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

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

Рейтинг: 4.2 / 5 - 9 голосов

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

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

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

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

Теги: адаптивный, Snippet, Comments, Bootstrap, Responsive, mouse drag, html, Carousel, Slider, слайдер

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

Добавлено: 2016-09-20 в 19:30

Метка: 1581109339

⇄ ⇅

#comments-slider {
 margin: 20px auto;
 width: 100%;
 padding: 1em;
 font-family: sans-serif;
 font-weight: normal;
 font-size: 1em;
 color:#FFC345;
}
.quote {
 background: #3E3831;
 padding: 15px 20px 5px 15px;
 border-radius: 5px;
 margin-bottom: 30px;
}
.quote:after {
 content: '';
 width: 0px;
 height: 0px;
 border-style: solid;
 border-width: 20px 18px 0 18px;
 border-color: #3E3831 transparent transparent transparent;
 position: relative;
 top: 37px;
 left: 20px;
}
.persona {
 margin-left: 25px;
 margin-bottom: 80px;
}
.persona .photo {
 background-color: #ccc;
 border-radius: 100px;
 width: 60px;
 height: 60px;
 float: left;
 margin-right: 10px;
}
.persona p {
 position: relative;
 top: 5px;
 text-transform: uppercase;
}
.persona p:nth-child(2) {
 font-size: 16px;
 font-weight: 600;
 margin-bottom: 0;
}
.persona p:nth-child(3) {
 font-size: 14px;
 color: #777;
}
</style>

<div class="quote">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra, diam mauris bibendum orci, sit amet ullamcorper purus dui sit amet augue. Donec aliquet diam ut neque mattis, eu tristique sem rutrum.</p>
 </div>
 <div class="persona">
 <div class="photo"><img class="img-circle img-thumbnail" src="https://bootstraptema.ru/snippets/icons/2016/mia/1.png" alt="" /></div>
 <p>Cup Streer</p>
 <p>Director Company</p>
 </div>

</div>

<div class="quote">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra, diam mauris bibendum orci, sit amet ullamcorper purus dui sit amet augue. Donec aliquet diam ut neque mattis, eu tristique sem rutrum.</p>
 </div>
 <div class="persona">
 <div class="photo"><img class="img-circle img-thumbnail" src="https://bootstraptema.ru/snippets/icons/2016/mia/2.png" alt="" /></div>
 <p>Regit Teersana</p>
 <p>Designer Company</p>
 </div>

</div>

<div class="quote">
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In ultrices, elit sed faucibus pharetra, diam mauris bibendum orci, sit amet ullamcorper purus dui sit amet augue. Donec aliquet diam ut neque mattis, eu tristique sem rutrum.</p>
 </div>
 <div class="persona">
 <div class="photo"><img class="img-circle img-thumbnail" src="https://bootstraptema.ru/snippets/icons/2016/mia/3.png" alt="" /></div>
 <p>Pablo Napp</p>
 <p>Individual person Company</p>
 </div>

</div>

</div>

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

BootstrapTema

Owl Slider Carousel Comments Bootstrap 3

Скриншот

Подробнее

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

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

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