<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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="cardWrap">
<div class="card cardLeft">
<h1>Startup <span>Cinema</span></h1>
<div class="title">
<h2>How I met your Mother</h2>
<span>movie</span>
</div>
<div class="name">
<h2>Vladimir Kudinov</h2>
<span>name</span>
</div>
<div class="seat">
<h2>156</h2>
<span>seat</span>
</div>
<div class="time">
<h2>12:00</h2>
<span>time</span>
</div>
</div>
<div class="card cardRight">
<div class="eye"></div>
<div class="number">
<h3>156</h3>
<span>seat</span>
</div>
<div class="barcode"></div>
</div>
</div>
.cardWrap {
width: 27em;
margin: 3em auto;
color: #fff;
font-family: sans-serif;
}
.card {
background: linear-gradient(to bottom, #e84c3d 0%, #e84c3d 26%, #ecedef 26%, #ecedef 100%);
height: 11em;
float: left;
position: relative;
padding: 1em;
margin-top: 100px;
}
.cardLeft {
border-top-left-radius: 8px;
border-bottom-left-radius: 8px;
width: 16em;
}
.cardRight {
width: 6.5em;
border-left: .18em dashed #fff;
border-top-right-radius: 8px;
border-bottom-right-radius: 8px;
}
.cardRight:before, .cardRight:after {
content: "";
position: absolute;
display: block;
width: .9em;
height: .9em;
background: #fff;
border-radius: 50%;
left: -.5em;
}
.cardRight:before {
top: -.4em;
}
.cardRight:after {
bottom: -.4em;
}
h1 {
font-size: 1.1em;
margin-top: 0;
}
h1 span {
font-weight: normal;
}
.title, .name, .seat, .time {
text-transform: uppercase;
font-weight: normal;
}
.title h2, .name h2, .seat h2, .time h2 {
font-size: .9em;
color: #525252;
margin: 0;
}
.title span, .name span, .seat span, .time span {
font-size: .7em;
color: #a2aeae;
}
.title {
margin: 2em 0 0 0;
}
.name, .seat {
margin: .7em 0 0 0;
}
.time {
margin: .7em 0 0 1em;
}
.seat, .time {
float: left;
}
.eye {
position: relative;
width: 2em;
height: 1.5em;
background: #fff;
margin: 0 auto;
border-radius: 1em/0.6em;
z-index: 1;
}
.eye:before, .eye:after {
content: "";
display: block;
position: absolute;
border-radius: 50%;
}
.eye:before {
width: 1em;
height: 1em;
background: #e84c3d;
z-index: 2;
left: 8px;
top: 4px;
}
.eye:after {
width: .5em;
height: .5em;
background: #fff;
z-index: 3;
left: 12px;
top: 8px;
}
.number {
text-align: center;
text-transform: uppercase;
}
.number h3 {
color: #e84c3d;
margin: .9em 0 0 0;
font-size: 2.5em;
}
.number span {
display: block;
color: #a2aeae;
}
.barcode {
height: 2em;
width: 0;
margin: 1.2em 0 0 .8em;
box-shadow: 1px 0 0 1px #343434, 5px 0 0 1px #343434, 10px 0 0 1px #343434, 11px 0 0 1px #343434, 15px 0 0 1px #343434, 18px 0 0 1px #343434, 22px 0 0 1px #343434, 23px 0 0 1px #343434, 26px 0 0 1px #343434, 30px 0 0 1px #343434, 35px 0 0 1px #343434, 37px 0 0 1px #343434, 41px 0 0 1px #343434, 44px 0 0 1px #343434, 47px 0 0 1px #343434, 51px 0 0 1px #343434, 56px 0 0 1px #343434, 59px 0 0 1px #343434, 64px 0 0 1px #343434, 68px 0 0 1px #343434, 72px 0 0 1px #343434, 74px 0 0 1px #343434, 77px 0 0 1px #343434, 81px 0 0 1px #343434;
}
