Bootstrap Snippet card tiket using HTML CSS

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
<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 ---------->
<widget type="ticket" class="--flex-column"> 
   <div class="top --flex-column">
      <div class="bandname -bold">Ghost Mice</div>
      <div class="tourname">Home Tour</div>
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/199011/concert.png" alt="" />
      <div class="deetz --flex-row-j!sb">
         <div class="event --flex-column">
            <div class="date">3rd March 2017</div>
            <div class="location -bold">Bloomington, Indiana</div>
         </div>
         <div class="price --flex-column">
            <div class="label">Price</div>
            <div class="cost -bold">$30</div>
         </div> 
      </div> 
   </div>
   <div class="rip"></div>
   <div class="bottom --flex-row-j!sb">
      <div class="barcode"></div>
      <a class="buy" href="#">BUY TICKET</a>
   </div>
</widget>
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
body {
  background-image: -webkit-linear-gradient(135deg, #8067B7, #EC87C0);
  background-image: linear-gradient(-45deg, #8067B7, #EC87C0);
  min-height: calc(100vh - 40px);
  margin: 20px;
  font-family: 'Lato', sans-serif;
}
body widget {
  -webkit-filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
          filter: drop-shadow(1px 1px 3px rgba(0, 0, 0, 0.3));
}
body widget[type="ticket"] {
  width: 255px;
}
body widget[type="ticket"] .top > div,
body widget[type="ticket"] .bottom > div {
  padding: 0 18px;
}
body widget[type="ticket"] .top > div:first-child,
body widget[type="ticket"] .bottom > div:first-child {
  padding-top: 18px;
}
body widget[type="ticket"] .top > div:last-child,
body widget[type="ticket"] .bottom > div:last-child {
  padding-bottom: 18px;
}
body widget[type="ticket"] .top img,
body widget[type="ticket"] .bottom img {
  padding: 18px 0;
}
body widget[type="ticket"] .top,
body widget[type="ticket"] .bottom,
body widget[type="ticket"] .rip {
  background-color: #fff;
}
body widget[type="ticket"] .top {
  border-top-right-radius: 5px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"card tiket"
Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"card tiket" Bootstrap 3.3.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"card tiket"
Bootstrap 3.3.0 Snippet by evarevirus