Стильные блоки Bootstrap 3 & Hipster / Блоки / Сниппеты Bootstrap

Версия: v1.0.1

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

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

Bootstrap: 3

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

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

Вес файла: 2.80 Mb

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

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

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

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

Прикреплён файл №1: /_sf/3/391.css

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

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

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

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

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

Авторство: http://u.to/McSvDQ

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

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

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

Поделился: IZOTOP

Добавлено: 2016-01-17 в 17:29

Метка: 1581763763

⇄ ⇅

<div class="wrapper"> 
 
 <div class="container">
 
 <div class="masonry-container">
 
 
 <div class="card-box col-md-4 col-sm-6">
 <div class="card card-with-border card-just-text" data-background="color" data-color="black" >
 <div class="content">
 <h4 class="title">"In the end we only <b>regret</b> the chances we didn't take."</h4>
 <p class="description">- Hipster Quote</p>
 </div>
 </div> 
 </div> 
 
 
 
 <div class="card-box col-md-4 col-sm-6">
 <div class="card"> 
 <div class="header">
 <img src="https://bootstraptema.ru/snippets/block/2016/style-blocks/lifestyle-8.jpg"/>
 <div class="filter"></div>
 
 <div class="actions">
 <button class="btn btn-round btn-fill btn-neutral btn-modern">
 Read Article
 </button>
 </div>
 </div>
 
 <div class="content">
 <h6 class="category">News</h6>
 <h4 class="title"><a href="#">Try the new hairstyle from this Barber Shop </a></h4>
 <p class="description">When selling products it's always a good idea to go with commanding fonts that are good at showing authority and security. I feel like Raleway and Roboto do just that.</p>
 </div> 
 </div> 
 </div>
 
 
 <div class="card-box col-md-4 col-sm-6"> 
 <div class="card" data-background="image" data-src="https://bootstraptema.ru/snippets/block/2016/style-blocks/lifestyle-1.jpg">
 <div class="header">
 <div class="category">
 <h6 class="label label-danger">Hipster Tag</h6> 
 </div>
 </div>
 
 <div class="content">
 <h4 class="title title-uppercase">
 <a href="">Here can be your special title for this card</a>
 </h4>
 <p class="description">When selling products it's always a good idea to go with commanding fonts that are good at showing authority and security. I feel like Raleway and Roboto do just that.</p>
 </div> 
 <div class="filter">
 
 </div>
 </div>  
 </div>
 
 
 <div class="card-box col-md-4 col-sm-6">
 <div class="card"> 
 <div class="content">
 <h6 class="category">Best stories</h6>
 <h4 class="title"><a href="#">This is a plain Hipster Card, see for yourself</a></h4>
 <p class="description">When selling products it's always a good idea to go with commanding fonts that are good at showing authority and security. I feel like Raleway and Roboto do just that.</p>
 </div> 
 </div> 
 </div>
 
 
 <div class="card-box col-md-4 col-sm-6"> 
 <div class="card"> 
 <div class="header">
 <img src="https://bootstraptema.ru/snippets/block/2016/style-blocks/beard-1.jpg" />
 
 <div class="social-line social-line-visible" data-buttons="4">
 <button class="btn btn-social btn-facebook">
 <i class="fa fa-facebook"></i>
 </button>
 <button class="btn btn-social btn-twitter">
 <i class="fa fa-twitter"></i>
 </button>
 <button class="btn btn-social btn-pinterest">
 <i class="fa fa-pinterest"></i>
 </button>
 <button class="btn btn-social btn-google">
 <i class="fa fa-google-plus"></i>
 </button>
 </div>
 </div>
 
 <div class="content">
 <h6 class="category">News</h6>
 <h4 class="title">Use this card and see what you can achive</h4>
 <p class="description">When selling products it's always a good idea to go with commanding fonts that are good at showing authority and security. I feel like Raleway and Roboto do just that.</p>
 </div> 
 </div> 
 </div>
 
 
 
 <div class="card-box col-md-4 col-sm-6">
 <div class="card" data-background="image" data-src="https://bootstraptema.ru/snippets/block/2016/style-blocks/lifestyle-2.jpg">
 <div class="header">
 <div class="category">
 <h6 class="label label-warning">Trending Post</h6> 
 </div>
 
 <div class="social-line" data-buttons="3">
 <button class="btn btn-social btn-facebook">
 <i class="fa fa-facebook-square"></i> Share
 </button>
 <button class="btn btn-social btn-twitter">
 <i class="fa fa-twitter"></i> Tweet
 </button>
 <button class="btn btn-social btn-pinterest">
 <i class="fa fa-pinterest"></i> Pin
 </button>
 </div> 
 </div>
 
 <div class="content">
 <h4 class="title">Tobias Van Schneider is a German designer raised in Austria...</h4>
 <p class="description">When selling products it's always a good idea to go with commanding fonts that are good at showing authority and security.</p>
 </div> 
 <div class="filter"></div>
 </div>  
 </div>
 
 
 
 
 
 <div class="card-box col-md-4 col-sm-6"> 
 <div class="card card-with-border" data-background="image" data-src="https://bootstraptema.ru/snippets/block/2016/style-blocks/fashion-1.jpg">
 <div class="header">
 </div>
 
 <div class="content text-center">
 <p class="description">When selling products it's always a good idea to go with commanding fonts that are good at showing authority and security. I feel like Raleway and Roboto do just that.</p>
 </div> 
 <div class="footer text-center">
 <a href="#" class="btn btn-danger btn-fill btn-round">Read article</a>
 </div>
 <div class="filter"></div>
 </div> 
 </div>
 
 
 
 <div class="card-box col-md-4 col-sm-6"> 
 <div class="card card-just-text card-with-border" data-background="image" data-src="https://bootstraptema.ru/snippets/block/2016/style-blocks/lifestyle-9.jpg">
 <div class="content">
 <h4 class="title title-modern">"I liked nutella, triangles and outerspace way before hipsters."</h4>
 <p class="description">- Not A Hipster</p>
 </div>
 <div class="filter"></div>
 </div>  
 </div>
 
 
 <div class="card-box col-md-4 col-sm-6"> 
 <div class="card card-with-border" data-background="color" data-color="azure">
 <div class="header">
 <div class="icon">
 <i class="pe-7s-radio"></i>
 </div>
 </div>
 <div class="content text-center">
 <h4 class="title title-modern">Nicecream.fm</h4>
 <p class="description">Best vibes in the marketplace. Listen to the best music from '89. I feel like Nicecream and .fm do just that.</p>
 </div> 
 <div class="footer text-center">
 <button class="btn btn-neutral btn-round btn-fill btn-modern">Listen Now!</button>
 </div> 
 </div> 
 </div>

<div class="card-box col-md-4 col-sm-6"> 
 <div class="card card-with-border" data-background="color" data-color="orange">
 <div class="content">
 <h6 class="category">Hot Article</h6>
 <h4 class="title">
 <a href="#"> Try the new hairstyle from this Barber Shop</a>
 </h4>
 <p class="description">When selling products it's always a good idea to go with commanding fonts that are good at showing authority and security. I feel like Raleway and Roboto do just that.</p>
 </div> 
 </div> 
 </div>

<div class="card-box col-md-4 col-sm-6"> 
 <div class="card text-center" data-background="image" data-src="https://bootstraptema.ru/snippets/block/2016/style-blocks/city-2.png">
 <h4 class="title title-modern">Hipster Vacation</h4>
 
 <div class="content">
 <div class="price">
 <h6>From</h6>
 <h4>2.799<b class="currency">$</b></h4>
 </div>
 <p class="description">When selling products it's always a good idea to go with commanding fonts that are good at showing authority and security.</p> 
 </div> 
 <div class="filter"></div>
 <div class="footer btn-center">
 <button class="btn btn-neutral btn-round btn-fill">Book Now!</button> 
 </div> 
 </div>  
 </div>

<div class="card-box col-md-4 col-sm-6">
 <div class="card card-with-border">
 <div class="header">
 <div class="icon">
 <i class="pe-7s-glasses"></i>
 </div>
 </div>
 <div class="content text-center">
 <h4 class="title text-center">Hipster Glasses App</h4>
 <p class="description">Here can be a description about the application that is for download. I feel like this app is what I need.</p> 
 </div>
 <div class="footer btn-center">
 <button class="btn btn-default btn-round btn-fill btn-info btn-modern">Download</button> 
 </div> 
 </div> 
 </div>
 
 
 
 
 
 
 <div class="card-box col-md-4 col-sm-6">
 <div class="card card-just-text card-with-border" data-background="image" data-src="https://bootstraptema.ru/snippets/block/2016/style-blocks/music-3.jpg">
 <div class="content">
 <div class="filter filter-red"></div>
 <h4 class="title title-modern">"I like the way you work it
No diggity, I gotta bag it up."</h4>
 <p class="description">- Chet Faker</p> 
 </div>
 
 <div class="filter"></div>
 </div>  
 </div>
 
 
 
 <div class="card-box col-md-4 col-sm-6"> 
 <div class="card card-with-border" data-background="color" data-color="green">
 <div class="header">
 <div class="icon">
 <i class="pe-7s-gift"></i>
 </div>
 
 <div class="social-line" data-buttons="3">
 <button class="btn btn-social btn-facebook">
 <i class="fa fa-facebook"></i>
 </button>
 <button class="btn btn-social btn-twitter">
 <i class="fa fa-twitter"></i>
 </button>
 <button class="btn btn-social btn-pinterest">
 <i class="fa fa-pinterest"></i>
 </button>
 </div>
 
 </div>
 <div class="content text-center">
 <p class="description">Your friend <b>Michael Osborn</b> has sent you a hipster gift card.</p><br> 
 </div>
 <div class="footer btn-center">
 <button class="btn btn-neutral btn-fill btn-modern">View Gift Details</button> 
 </div> 
 </div>  
 </div> 
 
 
 
 <div class="card-box col-md-4 col-sm-6">
 <div class="card" data-background="color" data-color="black"> 
 <div class="header">
 <img src="https://bootstraptema.ru/snippets/block/2016/style-blocks/home-1.jpg"/>
 
 <div class="social-line" data-buttons="2">
 <button class="btn btn-social">
 <i class="fa fa-facebook-square"></i> Share
 </button>
 <button class="btn btn-social">
 <i class="fa fa-twitter"></i> Tweet
 </button>
 </div>
 </div>
 
 <div class="content">
 <h6 class="category">Interior Design</h6>
 <h4 class="title"><a href="#">Hipster Apartment sold for $1.2 mil.</a></h4>
 <p class="description">When selling products it's always a good idea to go with commanding fonts that are good at showing authority and security. I feel like Raleway and Roboto do just that.</p>
 </div> 
 </div>  
 </div> 
 
 
 
 <div class="card-box col-md-4 col-sm-6"> 
 <div class="card text-center" data-background="image" data-src="https://bootstraptema.ru/snippets/block/2016/style-blocks/city-1.jpg">
 <h4 class="title title-modern">Hipster City</h4>
 
 <div class="content">
 <div class="price">
 <h6>From</h6>
 <h4>1.499<b class="currency">$</b></h4>
 </div> 
 </div> 
 
 <div class="footer btn-center">
 <button class="btn btn-neutral btn-round btn-modern">Buy Ticket</button> 
 </div> 
 
 <div class="filter filter-blue"></div> 
 </div>  
 </div>
 
 
 </div>
 
 
 </div> 
</div>

hipster_cards = {
 misc:{
 navbar_menu_visible: 0
 },
 
 fitBackgroundForCards: function(){
 $('[data-background="image"]').each(function(){
 $this = $(this);
 
 background_src = $this.data("src"); 
 
 if(background_src != "undefined"){ 
 new_css = {
 "background-image": "url('" + background_src + "')",
 "background-position": "center center",
 "background-size": "cover"
 };
 
 $this.css(new_css); 
 } 
 });
 
 $('.card .header img').each(function(){
 $card = $(this).parent().parent();
 $header = $(this).parent();
 
 background_src = $(this).attr("src"); 
 
 if(background_src != "undefined"){ 
 new_css = {
 "background-image": "url('" + background_src + "')",
 "background-position": "center center",
 "background-size": "cover"
 };
 
 $header.css(new_css); 
 } 
 });
 
 }, 
}
</script>

BootstrapTema

Стильные блоки Bootstrap 3 & Hipster

Скриншот

Подробнее

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

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

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