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

Версия: v1.0

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

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

Bootstrap: 3, 4, 5

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

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

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

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

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

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

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

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

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

Авторство: https://goo.gl/W6jljk

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

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

Теги: Responsive, адаптивный, testimonial, Slider, owl carousel, слайдер, Bootstrap

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

Добавлено: 2016-09-16 в 14:10

Метка: 1581109396

⇄ ⇅

.testimonial{
 background: #fff;
 text-align: center;
 padding: 40px 20%;
 border-radius: 5px;
}
.testimonial .pic{
 width: 70px;
 height: 70px;
 border-radius: 50%;
 overflow: hidden;
 margin: 0 auto;
}
.testimonial .pic img{
 width: 100%;
 height: auto;
 filter: grayscale(100%);
}
.testimonial .testimonial-title{
 font-size: 16px;
 color: #9e9e9e;
 letter-spacing: 3px;
 text-transform: uppercase;
 margin-bottom: 0;
}
.testimonial .post{
 display: block;
 font-size: 12px;
 font-style: italic;
 color: #bcbcbc;
 margin-top: 10px;
 text-transform: uppercase;
}
.testimonial .description{
 font-size: 15px;
 font-style: italic;
 color: #86868a;
 line-height: 1.8;
 margin-top: 10px;
}
.owl-theme .owl-controls{
 width: 100%;
 position: absolute;
 top: 45px;
}
.owl-theme .owl-controls .owl-buttons div{
 font-size: 18px;
 background: transparent;
 opacity: 0.5;
}
.owl-theme .owl-prev{
 position: relative;
 left: -45px;
}
.owl-theme .owl-next{
 position: relative;
 right: -45px;
}
.owl-prev:before,
.owl-next:before{
 content: "\f177";
 font-family: 'FontAwesome';
 color: #444;
}
.owl-next:before{
 content: "\f178";
}
@media only screen and (max-width: 480px){
 .testimonial{
 padding: 40px 10%;
 }
}
</style>

<div class="testimonial">
 <div class="pic">
 <img src="https://bootstraptema.ru/snippets/slider/2016/testimonials/testimonials-1.jpg" alt="">
 </div>
 <h3 class="testimonial-title">Kihore</h3>
 <small class="post">Web Instruktor</small>
 <p class="description">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
 </div>
 
 <div class="testimonial">
 <div class="pic">
 <img src="https://bootstraptema.ru/snippets/slider/2016/testimonials/testimonials-2.jpg" alt="">
 </div>
 <h3 class="testimonial-title">Yana</h3>
 <small class="post">Web Master</small>
 <p class="description">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 </p>
 </div>

<div class="testimonial">
 <div class="pic">
 <img src="https://bootstraptema.ru/snippets/slider/2016/testimonials/testimonials-3.jpg" alt="">
 </div>
 <h3 class="testimonial-title">kristiana</h3>
 <small class="post">Web Programist</small>
 <p class="description">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
 </p>
 </div>

</div>

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

BootstrapTema

Bootstrap Owl Carousel Slider Testimonial

Скриншот

Подробнее

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

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

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