"Tickets Concept"
Bootstrap 3.3.0 Snippet by alexandru-paduraru

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 ---------->
<body>
<div class="wrapper">
<div class="container">
<h2 class="page-title">Tickets Concept</h2>
<div class="row">
<div class="col-lg-4 col-md-6 col-sm-6">
<div class="ticket-card">
<div class="cover">
<img src="http://s28.postimg.org/p916fev0t/week.jpg" alt="" />
<div class="info">
<div class="going">
<i class="fa fa-group"></i> 4,234 Going
</div>
<div class="tickets-left">
<i class="fa fa-ticket"></i> 240 Tickets Left
</div>
</div>
</div>
<div class="body">
<div class="artist">
<h6 class="info">Global Tour 2016</h6>
<h4 class="name">The Weeknd</h4>
</div>
<div class="price">
<div class="from">From</div>
<div class="value">
<b>$</b>599
</div>
</div>
<div class="clearfix"></div>
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
.page-title {
text-align: center;
color: #FFFFFF;
font-weight: 100;
font-size: 40px;
margin-top: 60px;
margin-bottom: 40px;
}
.wrapper {
width: 100%;
min-height: 930px;
display: block;
position: relative;
background: #333333;
background-image: url("https://images.unsplash.com/photo-1448485780098-7e0b78781fc1?crop=entropy&dpr=2&fit=crop&fm=jpg&h=750&ixjsv=2.1.0&ixlib=rb-0.3.5&q=50&w=1450");
background-size: cover;
background-position: center center;
padding-bottom: 50px;
}
.wrapper:after {
position: absolute;
width: 100%;
height: 100%;
background: #111111;
display: block;
content: "";
top: 0;
left: 0;
z-index: 1;
opacity: .6;
}
.wrapper .container {
z-index: 2;
position: relative;
}
.wrapper footer {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
$(document).ready(function(){
console.log('ready');
$('.toggle-tickets').click(function() {
$tickets = $(this).parent().siblings('.collapse');
if ($tickets.hasClass('in')) {
$tickets.collapse('hide');
$(this).html('Show Tickets');
$(this).closest('.ticket-card').removeClass('active');
} else {
$tickets.collapse('show');
$(this).html('Hide Tickets');
$(this).closest('.ticket-card').addClass('active');
}
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Rubik Presentation Page
Tumblr cards redesign concept

Questions / Comments: