LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

  

Tickets Concept

4,234 Going
240 Tickets Left
Global Tour 2016

The Weeknd

From
$599

Barcelona, Spain

30 Aug, 2016

  • Basic Ticket
    25 Tickets left
    $599
    Buy Now!
  • Regular Ticket
    15 Tickets left
    $799
    Buy Now!
  • Premium Ticket
    62 Tickets left
    $1,299
    Buy Now!
  • VIP Ticket
    6 Tickets left
    $1,799
    Buy Now!
4,234 Going
240 Tickets Left
Yeezus Worldwide

Kanye West

From
$699

Dallas, Texas

30 Aug, 2017

  • Basic Ticket
    25 Tickets left
    $699
    Buy Now!
  • Regular Ticket
    15 Tickets left
    $799
    Buy Now!
  • Premium Ticket
    62 Tickets left
    $1,299
    Buy Now!
  • VIP Ticket
    6 Tickets left
    $1,799
    Buy Now!
4,234 Going
240 Tickets Left
Trust Issues Tour

Drake

From
$499

Paris, France

20 Aug, 2016

  • Basic Ticket
    25 Tickets left
    $499
    Buy Now!
  • Regular Ticket
    15 Tickets left
    $799
    Buy Now!
  • Premium Ticket
    62 Tickets left
    $1,299
    Buy Now!
  • VIP Ticket
    6 Tickets left
    $1,799
    Buy Now!

Connect with me on:

CSS
.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;
  position: relative;
  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 {
  position: absolute;
  z-index: 3;
  bottom: 20px;
  width: 100%;
  text-align: center;
}
.wrapper footer h3 {
  color: #FFFFFF;
  font-weight: 200;
}
.wrapper footer .social-icon {
  color: #FFFFFF;
  opacity: 0.8;
  font-size: 34px;
  margin: 20px;
}
.wrapper footer .social-icon:hover {
  opacity: 1;
}

.ticket-card {
  margin-top: 15vh;
  margin-bottom: 15vh;
  background: #FFFFFF;
  border-radius: 4px;
}
.ticket-card:hover .cover img, .ticket-card.active .cover img {
  -moz-transform: translate(0, -50px);
  -o-transform: translate(0, -50px);
  -ms-transform: translate(0, -50px);
  -webkit-transform: translate(0, -50px);
  transform: translate(0, -50px);
  box-shadow: 0 10px 20px -4px rgba(22, 22, 22, 0.5);
}
.ticket-card .cover {
  border-radius: 4px 4px 0 0;
  position: relative;
  margin: 15px;
}
.ticket-card .cover img {
  width: 100%;
  position: relative;
  z-index: 2;
  margin-top: -30px;
  box-shadow: 0 10px 16px -6px rgba(22, 22, 22, 0.5);
  border-radius: 4px;
  -moz-transform: translate(0, 0);
  -o-transform: translate(0, 0);
  -ms-transform: translate(0, 0);
  -webkit-transform: translate(0, 0);
  transform: translate(0, 0);
  -webkit-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 300ms ease, opacity 300ms ease;
  -moz-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 300ms ease, opacity 300ms ease;
  -o-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 300ms ease, opacity 300ms ease;
  -ms-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 300ms ease, opacity 300ms ease;
  transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 300ms ease, opacity 300ms ease;
}
.ticket-card .cover .info {
  position: absolute;
  width: 100%;
  bottom: 0px;
  padding: 0 15px;
  color: #777777;
}
.ticket-card .cover .info .going,
.ticket-card .cover .info .tickets-left {
  padding-bottom: 10px;
  border-bottom: 1px solid #f3f3f3;
  width: 50%;
}
.ticket-card .cover .info .going {
  float: left;
}
.ticket-card .cover .info .tickets-left {
  float: right;
  text-align: right;
}
.ticket-card .cover .info .fa {
  color: #CCCCCC;
  margin-right: 5px;
}
.ticket-card .artist {
  float: left;
}
.ticket-card .artist .info {
  font-weigth: 600;
  font-size: 12px;
  text-transform: uppercase;
  color: #BBBBBB;
  margin-bottom: 0;
}
.ticket-card .artist .name {
  font-weight: 200;
  font-size: 22px;
  margin-top: 5px;
}
.ticket-card .ticket {
  float: left;
}
.ticket-card .ticket small {
  font-size: 75%;
}
.ticket-card .price {
  float: right;
  text-align: right;
}
.ticket-card .price .from {
  color: #BBBBBB;
}
.ticket-card .price .value {
  font-size: 28px;
  font-weight: 200;
  color: #00bbff;
  margin-top: -5px;
}
.ticket-card .price .value b {
  font-size: 18px;
  font-weight: 200;
}
.ticket-card .list-unstyled {
  max-height: 200px;
  overflow-x: scroll;
  background: #EEEEEE;
  margin-bottom: 0;
  box-shadow: inset 0px 4px 10px rgba(0, 0, 0, 0.25);
}
.ticket-card .list-unstyled li {
  border-bottom: 1px dotted #CCCCCC;
  padding: 5px 30px;
  overflow: hidden;
  width: 100%;
  display: block;
  position: relative;
}
.ticket-card .list-unstyled li .btn-buy {
  position: absolute;
  right: 15px;
  top: 13px;
  padding: 8px 20px;
  border-radius: 6px;
  background: #00bbff;
  border: 0;
  opacity: 0;
  -webkit-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 300ms ease, opacity 300ms ease;
  -moz-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 300ms ease, opacity 300ms ease;
  -o-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 300ms ease, opacity 300ms ease;
  -ms-transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 300ms ease, opacity 300ms ease;
  transition: transform 300ms cubic-bezier(0.34, 2, 0.6, 1), box-shadow 300ms ease, opacity 300ms ease;
}
.ticket-card .list-unstyled li:hover .btn-buy {
  opacity: 1;
}
.ticket-card .list-unstyled li:last-child {
  border-bottom: none;
}
.ticket-card .list-unstyled li:before, .ticket-card .list-unstyled li:after {
  display: table;
  content: " ";
  clear: both;
}
.ticket-card .list-unstyled li .price .value {
  color: #444444;
  font-size: 22px;
  margin-top: 10px;
}
.ticket-card .body {
  padding: 5px 30px;
}
.ticket-card .body .info {
  color: #777777;
}
.ticket-card .body .location,
.ticket-card .body .date {
  padding-top: 10px;
  width: 50%;
}
.ticket-card .body .location {
  float: left;
}
.ticket-card .body .date {
  float: right;
  text-align: right;
}
.ticket-card .body .fa {
  color: #CCCCCC;
  margin-right: 5px;
}
.ticket-card .footer .btn {
  width: 100%;
  background: transparent;
  border-top: 1px dotted #BBBBBB;
  border-radius: 0;
  padding: 15px 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  color: #666666;
  box-shadow: none;
}
.ticket-card .footer .btn:focus, .ticket-card .footer .btn:hover, .ticket-card .footer .btn:active {
  outline: none !important;
}
JS
$('.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');
  }
});
Host Instantly Drag and Drop Website Builder

 

Description

An interesting way to buy different tickets for your favourite concert. Feel free to do whatever you want with those cards. If you use them in any project please post here the link, I'm very curious to see how you used them.
Term
Mon, 11/27/2017 - 21:55

Related Codes

Pen ID
Pen ID
Pen ID