"Holiday Guide"
Bootstrap 3.3.0 Snippet by jasonethedesigner

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="xmas-guide container-fliud">
<div class="row">
<!-- CENTERED TOP TABS START -->
<ul id="tabs" class="nav nav-tabs nav-justified intro-container" style="margin-bottom:80px;">
<li class="xmas-intro">
<div class="xmas-intro-wrap">
<img class="img-responsive logo center-block" src="https://cdn.halocigs.com/media/wysiwyg/promotions/halo-logo.png" alt="Halo E-Liquids Logo">
<img class="img-responsive ribbon-small center-block" src="https://cdn.halocigs.com/media/wysiwyg/promotions/holiday-banner2.png" alt="Halo Gift Guide Banner">
<h2 class="text-uppercase text-center">Halo’s 2016 Gift Guide is Here!</h2>
<p class="text-center">The holidays are upon us once again, and Halo is here to help reduce your gift-giving stress with some fantastic suggestions. You’ll find something for every vaper on your list, from the newbie to the hardcore hobbyist, right here.</p>
</div>
<div class="xmas-intro-wrap" style="margin-top: 0px;">
<img class="img-responsive ribbon-small center-block" src="https://cdn.halocigs.com/media/wysiwyg/promotions/step1-banner.png" alt="Halo Gift Guide Banner" style=" max-width: 200px;">
<p class="text-center" style="margin-bottom: 20px;">To get started, choose one of our award-winning e-liquid brands or devices, then scroll down to view our gift suggestions for your Holiday Gifts.</p>
</div>
<div class="disclaimer-one text-center" style="margin-bottom: 0px;">
<p class="text-uppercase" style="margin-bottom: 0px;"><span>Disclaimer:</span></p>
<p><small>Offers exclude clearance, gift cards, and purchases made using rewards points. Offers cannot be combined with any other promotion.</small></p>
</div>
</li>
<li role="presentation" class="active img-block">
<a class="text-uppercase text-center xmas-halo" aria-controls="haloblock" data-toggle="tab" href="#haloblock">HALO E-LIQUIDS</a>
</li>
<li role="presentation" class="img-block">
<a class="text-uppercase text-center xmas-devices" aria-controls="deviceblock" data-toggle="tab" href="#deviceblock">Devices</a>
</li>
<li role="presentation" class="img-block">
<a class="text-uppercase text-center xmas-evo" aria-controls="evoblock" data-toggle="tab" href="#evoblock">EVO E-Liquids</a>
</li>
</ul>
<!-- CENTERED TOP TABS END -->
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Halo Webpage override edits */
.main.container {width: 100%;}
.top-container>.breadcrumbs{margin-bottom: 0px;}
ul.intro-container{padding-left: 0px;}
.intro-container li,.xmas-intro{height: 900px;vertical-align: middle;}
.intro-container .img-block a{background-position: top left;background-size: cover;}
.intro-container .img-block .xmas-halo{background-image: url(https://cdn.halocigs.com/media/wysiwyg/promotions/vape-image-111.jpg);background-position: center center;}
.intro-container .img-block .xmas-devices{background-image: url(https://cdn.halocigs.com/media/wysiwyg/promotions/vape-image-222.jpg);background-position: center center;}
.intro-container .img-block .xmas-evo{background-image: url(https://cdn.halocigs.com/media/wysiwyg/promotions/vape-image-333.jpg);background-position: center center;}
.intro-container .img-block>a::after{
content: "";
background-color: rgba(255, 255, 255, 0.22);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: 20;
transition: all .2s ease-in-out !important;
}
.xmas-guide .nav-tabs>li.active:hover>a::after,.xmas-guide .nav-tabs>li.img-block:hover>a::after, .xmas-guide .nav-tabs>li.img-block:focus>a::after{background-color: rgba(255, 255, 255, 0.0);}
.xmas-guide .nav-tabs>li.active:hover a,.xmas-guide .nav-tabs>li.img-block:hover a, .xmas-guide .nav-tabs>li.img-block:focus a{color:#ffffff;}
.xmas-intro{position: relative;padding: 20px;background-color: #f3f3f3;float: left;display: block;}
.xmas-intro-wrap{margin-top: 36%;}
.xmas-intro-wrap,.xmas-intro-wrap img,.xmas-intro-wrap h4,.xmas-intro-wrap p,.disclaimer-one,.disclaimer-one p{display:block;}
.xmas-intro-wrap img{margin-bottom: 20px;}
.xmas-intro-wrap h2{margin-bottom: 10px;color:#424242;}
.xmas-intro-wrap p{}
.disclaimer-one{vertical-align: bottom;float:none;margin-top: 41%;}
.disclaimer-one p{font-size: 11px;line-height: 13px;}
li.img-block{background-color: #424242;padding:0px;}
li.img-block a{height: 100%;line-height: 900px;padding-top: 0px;padding-bottom: 0px;}
li.img-block a:hover{background-color: rgba(0,0,0,.5);}
.xmas-guide .nav-tabs>li >a:hover, .xmas-guide .nav-tabs>li >a:focus, .xmas-guide .nav-tabs>li.active>a:hover{color: #ffffff;}
.xmas-guide .nav-tabs>li >a{color: #383838;}
/* Steps Content Section */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
jQuery(document).ready(function() {
jQuery("ul.nav-tabs>li>a").click(function(e) {
e.preventDefault();
jQuery(this).siblings('a.active').removeClass("active");
jQuery(this).addClass("active");
var index = jQuery(this).index();
jQuery("div.tab-content>div.tab-pane").removeClass("active");
jQuery("div.tab-content>div.tab-pane").eq(index).addClass("active");
});
jQuery(".filter-button").click(function(){
var value = jQuery(this).attr('data-filter');
if(value == "all")
{
//$('.filter').removeClass('hidden');
jQuery('.filter').show('1000');
}
else
{
//$('.filter[filter-item="'+value+'"]').removeClass('hidden');
//$(".filter").not('.filter[filter-item="'+value+'"]').addClass('hidden');
jQuery(".filter").not('.'+value).hide('3000');
jQuery('.filter').filter('.'+value).show('3000');
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Bootstrap Wizard

Questions / Comments: