HTML
<!-- Inspired by Piotr Malinowski's Dribbble "Daily UI 017 - Email Receipt"
https://dribbble.com/shots/3300933-Daily-UI-017-Email-Receipt -->
<div id="John-Wick-Chapter-2" class="background"></div>
<div class="receipt__container">
<div class="receipt__body">
<div class="left">
<div class="left__name">
<span>Hello, Peter</span>
<span>15:50 17/02/17</span>
</div>
<div class="left__items">
<span>Your Tickets</span>
<table class="tickets">
<tr>
<td class="type">Adult Ticket</td>
<td class="price">16.45</td>
</tr>
<tr>
<td class="type">Adult Ticket</td>
<td class="price">16.45</td>
</tr>
<tr>
<td class="type">Adult Ticket</td>
<td class="price">16.45</td>
</tr>
</table>
</div>
<div class="left__total">
<span>Price: <b>$49.35</b></span>
<span>Payment: <b>Credit Card</b></span>
</div>
<div class="left__notice">
<span>
We advize you to pick up your tickets 30 minutes before showtime.
Also, <b>download our new app</b>.
</span>
</div>
</div>
<div class="right">
<div class="right__poster"
id="John-Wick-Chapter-2">
</div>
<div class="right__title">
<span>John Wick: Chapter 2</span>
</div>
<div class="right__time">
<span>Time</span>
<span>9:37 PM</span>
</div>
<div class="right__cinema">
<span>Cinema Hall</span>
<span>03</span>
</div>
</div>
</div>
</div>
SCSS
$blue: #2E43B0;
$purple: #32257E;
$gray1: #E5E5E5;
$gray2: #C6C6C6;
$gray3: #B6BAC5;
body {
font-family: 'Oxygen', sans-serif;
background-color: #32257e;
/* IE9, iOS 3.2+ */
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0idnNnZyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIxMDAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPjxzdG9wIHN0b3AtY29sb3I9IiMyZTQzYjAiIHN0b3Atb3BhY2l0eT0iMSIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iIzM2MDY0YyIgc3RvcC1vcGFjaXR5PSIxIiBvZmZzZXQ9IjEiLz48L2xpbmVhckdyYWRpZW50PjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjdnNnZykiIC8+PC9zdmc+);
background-image: -webkit-gradient(linear, 100% 0%, 0% 100%,color-stop(0, rgb(46, 67, 176)),color-stop(1, rgb(54, 6, 76)));
/* Android 2.3 */
background-image: -webkit-repeating-linear-gradient(top right,rgb(46, 67, 176) 0%,rgb(54, 6, 76) 100%);
/* IE10+ */
background-image: repeating-linear-gradient(to bottom left,rgb(46, 67, 176) 0%,rgb(54, 6, 76) 100%);
background-image: -ms-repeating-linear-gradient(top right,rgb(46, 67, 176) 0%,rgb(54, 6, 76) 100%);
}
/* IE8- CSS hack */
@media \0screen\,screen\9 {
body {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ff2e43b0",endColorstr="#ff36064c",GradientType=0);
}
}
.background#John-Wick-Chapter-2 {
position: fixed;
left: 0;
right: 0;
z-index: 1;
display: block;
background-image: url('http://i.imgur.com/JIihZLt.jpg');
background-size: cover;
width: 100vw;
height: 100vh;
opacity: .7;
-webkit-filter: blur(15px);
-moz-filter: blur(15px);
-o-filter: blur(15px);
-ms-filter: blur(15px);
filter: blur(15px);
}
.receipt__container {
position: fixed;
z-index: 9999;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 12px;
box-shadow: 0 0 30px rgba(0,0,0,0.7);
.receipt__body {
width: 650px;
height: 395px;
border-radius: 12px;
background-color: #fff;
position: relative;
.left {
width: 325px;
height: 395px;
float: left;
.left__name, .left__items, .left__total {
border-bottom: 1px solid $gray1;
width: 325px;
}
.left__name {
height: 70px;
span:nth-child(1) {
color: $purple;
font-size: 20px;
display: inline-block;
widdth: 50%;
line-height: 70px;
padding-left: 25px;
}
span:nth-child(2) {
color: $gray2;
font-size: 15px;
display: inline;
float: right;
width: 50%;
line-height: 70px;
padding-left: 35px;
}
} // left__name
.left__items {
height: 162px;
padding-left: 25px;
padding-top: 12px;
span {
color: $gray2;
text-transform: uppercase;
padding-left: 2px;
}
.tickets {
display: block;
width: 325px;
padding-top: 8px;
.type {
color: $blue;
font-size: 20px;
vertical-align: middle;
padding-bottom: 7px;
&:before {
content: '';
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAAMCAYAAACJOyb4AAAAw0lEQVQ4T7WTwQ2CUBBEZzCe1Q4w4S7agHagJViC3CVCBViKdqAdfCuQEvBswhgQlRC9fHCvm327mZ3hzAs3IBN0XVLAqReeSM5LtnQTYGz3EPBBDp4onZvwQMCyBfz4UuELHDGInS0c+syXcN/bLkjuCU7qTasFFVzQReitWUB8N3Kdfn7tCp7fnZFJo+xf8LFJo7SSxUnKT9c0aycLjPI8bril44c2fF5YcWV1NQACh59WlJABsg4RQJ/E8B2if8b/Acd1cyOtTJqXAAAAAElFTkSuQmCC);
width: 23px;
height: 12px;
background-repeat: no-repeat;
background-size: 23px 12px;
display: inline-block;
margin-right: 15px;
margin-left: 2px;
}
} // type
.price {
color: $gray3;
padding-left: 80px;
font-size: 15px;
vertical-align: middle;
font-weight: bold;
&:before {
content: '$';
font-size: 15px;
font-weight: normal;
padding-right: 1px;
}
} // price
} // tickets
.left__notice {
width: 325px;
height: 73px;
}
} // left-items
.left__total {
height: 90px;
span {
color: $purple;
display: block;
width: 325px;
padding-left: 25px;
line-height: 45px;
}
span:nth-child(1) {
padding-top: 5px;
}
span:nth-child(2) {
margin-top: -10px;
}
} // left__total
.left__notice {
color: $gray3;
font-size: 12px;
margin: 15px 25px;
}
} // left
.right {
border-left: solid 1px $gray1;
width: 325px;
height: 395px;
float: left;
.right__poster {
margin: 0 auto;
margin-top: 30px;
width: 149px;
height: 229.8px;
box-shadow: 0 0 15px rgba(0,0,0,0.3);
&#John-Wick-Chapter-2 {
background: url('http://i.imgur.com/JIihZLt.jpg') no-repeat;
background-size: contain;
}
} // right__poster
.right__title {
color: $blue;
padding-top: 20px;
font-size: 20px;
line-height: 20px;
display: block;
width: 325px;
text-align: center;
}
.right__time {
width: 50%;
text-align: center;
display: inline-block;
span:nth-child(1) {
color: $gray2;
font-size: 15px;
text-transform: uppercase;
display: block;
padding-top: 20px;
}
span:nth-child(2) {
color: $blue;
font-size: 20px;
display: block;
}
} // right__time
.right__cinema {
width: 50%;
float: right;
text-align: center;
display: inline-block;
span:nth-child(1) {
color: $gray2;
font-size: 15px;
text-transform: uppercase;
display: block;
padding-top: 25px;
}
span:nth-child(2) {
color: $blue;
font-size: 20px;
display: block;
}
} // right__cinema
} // right
} // receipt__body
} // receipt__container
