<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 ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/jackoliver/pen/XKQxvy?depth=everything&order=popularity&page=66&q=Overlay&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'><link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css'>
<style class="cp-pen-styles">@import "https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900";
@import "https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900";
body {
background: #17183B;
color: #17183B;
font-family: 'Lato', sans-serif;
}
.App {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background: #17183B;
}
.App .Overlay {
width: 100vw;
height: 100vh;
position: absolute;
top: 0;
left: 0;
background-size: cover;
-webkit-filter: blur(10px);
filter: blur(10px);
opacity: .2;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100vw;
background: white;
z-index: 10;
padding: 20px;
}
.Container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
height: 532px;
max-width: 650px;
z-index: 3;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.ImagePreview {
background-size: cover;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
position: relative;
width: 50%;
}
.ImagePreview::before {
width: 100%;
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
/* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(23, 24, 59, 0) 0%, rgba(23, 24, 59, 0.45) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(23, 24, 59, 0) 0%, rgba(23, 24, 59, 0.45) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 );
/* IE6-9 */
}
.ImagePreview .WorkspaceOverview {
color: white;
position: relative;
z-index: 3;
width: 100%;
padding: 20px;
}
.ImagePreview .WorkspaceOverview .WorkspaceInformation .WorkspaceName {
font-family: 'Playfair Display';
font-weight: 600;
font-size: 36px;
}
.ImagePreview .WorkspaceOverview .WorkspaceInformation .WorkspacePrice {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
margin-top: 20px;
}
.ImagePreview .WorkspaceOverview .WorkspaceInformation .WorkspacePrice .Price {
font-size: 26px;
font-weight: 200;
}
.ImagePreview .WorkspaceOverview .WorkspaceInformation .WorkspacePrice .Duration {
font-size: 16px;
font-weight: 300;
position: relative;
bottom: 2px;
margin-left: 5px;
}
.ImagePreview .WorkspaceOverview .WorkspaceMeta {
color: white;
line-height: 1.6;
font-size: 13px;
font-weight: 300;
margin-top: 20px;
}
.ImagePreview .WorkspaceOverview .WorkspaceMeta strong {
font-weight: 600;
}
.Checkout {
background: white;
width: 50%;
}
.Checkout .OrderSummary {
border-bottom: 1px solid #f2f2f2;
padding-bottom: 10px;
}
.Checkout .OrderSummary table {
font-size: 12px;
margin: 0 20px;
margin-bottom: 10px;
line-height: 1.6;
width: calc(100% - 40px);
opacity: .8;
font-weight: 400;
}
.Checkout .OrderSummary table tr td:last-child {
text-align: right;
font-weight: 600;
}
.Checkout .OrderSummary .Total {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
padding: 0 20px;
margin-bottom: 10px;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
.Checkout .OrderSummary .Total .TotalLabel {
display: block;
text-transform: uppercase;
margin-bottom: 5px;
font-size: 11px;
font-weight: 600;
}
.Checkout .OrderSummary .Total .Amount {
font-size: 18px;
margin-left: auto;
}
.Checkout .Title {
font-family: 'Playfair Display';
font-size: 18px;
padding: 20px;
}
.BasicInput {
padding: 0 20px;
margin-bottom: 20px;
}
.BasicInput label {
display: block;
text-transform: uppercase;
margin-bottom: 5px;
font-size: 11px;
font-weight: 600;
}
.BasicInput input {
width: 100%;
border: 0;
border-bottom: 1px solid #17183B;
font-family: 'Lato', sans-serif;
padding: 5px 0;
font-size: 18px;
font-weight: 300;
outline: none;
}
.BasicInput input:focus {
border-bottom: 1px solid #FFB49A;
}
.ExpiryDate {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 20px;
padding: 0 20px;
width: 100%;
box-sizing: border-box;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
.ExpiryDate label {
display: block;
text-transform: uppercase;
margin-bottom: 5px;
font-size: 11px;
font-weight: 600;
}
.ExpiryDate div:first-child {
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
}
.ExpiryDate .Expiry {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.ExpiryDate input {
width: 100%;
border: 0;
border-bottom: 1px solid #17183B;
font-family: 'Lato', sans-serif;
padding: 5px 0;
font-size: 18px;
font-weight: 300;
outline: none;
}
.ExpiryDate select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
-webkit-box-flex: 1;
-ms-flex: 1 0 auto;
flex: 1 0 auto;
padding: 10px;
border-radius: 0;
border: 0;
background: transparent;
border-bottom: 1px solid #17183B;
border-bottom: 1px solid #17183B;
font-family: 'Lato', sans-serif;
padding: 5px 0;
font-size: 18px;
font-weight: 300;
outline: none;
margin-right: 10px;
}
.ExpiryDate .CVCField {
width: 20%;
}
.CVC {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
margin-bottom: 20px;
padding: 0 20px;
}
.CVC label {
display: block;
text-transform: uppercase;
margin-bottom: 5px;
font-size: 11px;
font-weight: 600;
}
.CVC input {
width: 100%;
border: 0;
border-bottom: 1px solid #17183B;
font-family: 'Lato', sans-serif;
padding: 5px 0;
font-size: 18px;
font-weight: 300;
outline: none;
}
.CVC input:focus {
border-bottom: 1px solid #FFB49A;
}
.CVC span {
display: block;
padding-top: 20px;
margin-left: 10px;
color: #FFB49A;
font-size: 11px;
border-bottom: 1px dotted #FFB49A;
}
.CheckoutButton {
padding: 0 20px;
text-align: center;
}
.CheckoutButton button {
background: #ffa181;
color: white;
border: 0;
border-radius: 2px;
font-family: 'Lato', sans-serif;
width: 100%;
font-size: 13px;
text-transform: uppercase;
font-weight: 300;
outline: none;
padding: 10px 0;
margin-bottom: 10px;
}
.CheckoutButton button:hover {
background: #ff8e67;
}
.CheckoutButton button:active {
-webkit-transform: scale(0.99);
transform: scale(0.99);
}
.CheckoutButton span {
font-size: 11px;
color: #bfbfbf;
font-weight: 300;
text-align: center;
}
.overlay-enter {
opacity: 0.01;
}
.overlay-enter.overlay-enter-active {
opacity: .2;
-webkit-transition: opacity .5s ease .5s;
transition: opacity .5s ease .5s;
}
.container-enter {
opacity: 0.01;
}
.container-enter.container-enter-active {
opacity: 1;
-webkit-transition: opacity .5s ease;
transition: opacity .5s ease;
}
</style></head><body>
<div id="app"></div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://fb.me/react-with-addons-0.14.7.js'></script><script src='https://npmcdn.com/react-dom@15.3.0/dist/react-dom.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/zepto/1.1.6/zepto.min.js'></script>
<script >'use strict';
var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;
var Overlay = React.createClass({
displayName: 'Overlay',
render: function render() {
return React.createElement(
'div',
{ className: 'Overlay', style: { 'backgroundImage': 'url(' + this.props.image + ')' } },
'Something'
);
}
});
var Container = React.createClass({
displayName: 'Container',
render: function render() {
return React.createElement(
'div',
{ className: 'Container' },
this.props.children
);
}
});
var WorkspaceInformation = React.createClass({
displayName: 'WorkspaceInformation',
render: function render() {
if (this.props.duration > 1) {
var duration = this.props.duration + ' days';
} else {
var duration = this.props.duration + ' day';
}
return React.createElement(
'div',
{ className: 'WorkspaceInformation' },
React.createElement(
'div',
{ className: 'WorkspaceName' },
this.props.name
),
React.createElement(
'div',
{ className: 'WorkspacePrice' },
React.createElement(
'div',
{ className: 'Price' },
this.props.price,
' GBP'
),
React.createElement(
'div',
{ className: 'Duration' },
'/ ',
duration
)
)
);
}
});
var WorkspaceMeta = React.createClass({
displayName: 'WorkspaceMeta',
render: function render() {
if (this.props.people > 1) {
var people = this.props.people + ' people';
} else {
var people = this.props.people + ' person';
}
return React.createElement(
'div',
{ className: 'WorkspaceMeta' },
React.createElement(
'div',
{ className: 'Description' },
'Entire office for ',
React.createElement(
'strong',
null,
people
)
),
React.createElement(
'div',
{ className: 'Dates' },
React.createElement(
'strong',
null,
'Mon, Aug 22, 2016'
),
' to ',
React.createElement(
'strong',
null,
'Fri, Aug 29, 2016'
)
)
);
}
});
var ImagePreview = React.createClass({
displayName: 'ImagePreview',
render: function render() {
return React.createElement(
'div',
{ className: 'ImagePreview', style: { 'backgroundImage': 'url(' + this.props.image + ')' } },
React.createElement(
'div',
{ className: 'WorkspaceOverview' },
React.createElement(WorkspaceInformation, { name: 'Coworking Space, South Korea', price: this.props.price, duration: '1' }),
React.createElement(WorkspaceMeta, { people: this.props.people })
)
);
}
});
var OrderSummary = React.createClass({
displayName: 'OrderSummary',
render: function render() {
// Duration pluralisation
if (this.props.duration > 1) {
var duration = this.props.duration + ' days';
} else {
var duration = this.props.duration + ' day';
}
// Initial total Calculation
var initialTotal = this.props.duration * this.props.price;
// Discount Calculation
var discount = Math.floor(initialTotal / 100 * this.props.discount);
// Subtotal (with Discount)
var subTotal = initialTotal - discount;
// Calculate tax
var tax = Math.floor(subTotal / 100 * this.props.tax);
// Total
var total = subTotal + tax;
return React.createElement(
'div',
{ className: 'OrderSummary' },
React.createElement(
'div',
{ className: 'Title' },
'Order Summary'
),
React.createElement(
'table',
null,
React.createElement(
'tr',
null,
React.createElement(
'td',
null,
this.props.price,
' x ',
duration
),
React.createElement(
'td',
null,
initialTotal,
' GBP'
)
),
React.createElement(
'tr',
null,
React.createElement(
'td',
null,
'Discount'
),
React.createElement(
'td',
null,
discount,
' GBP'
)
),
React.createElement(
'tr',
null,
React.createElement(
'td',
null,
'Subtotal'
),
React.createElement(
'td',
null,
subTotal,
' GBP'
)
),
React.createElement(
'tr',
null,
React.createElement(
'td',
null,
'Tax'
),
React.createElement(
'td',
null,
tax,
' GBP'
)
)
),
React.createElement(
'div',
{ className: 'Total' },
React.createElement(
'div',
{ className: 'TotalLabel' },
'Total'
),
React.createElement(
'div',
{ className: 'Amount' },
total,
' ',
React.createElement(
'small',
null,
'GBP'
)
)
)
);
}
});
var PaymentForm = React.createClass({
displayName: 'PaymentForm',
render: function render() {
return React.createElement(
'div',
{ className: 'PaymentForm' },
React.createElement(
'form',
{ onSubmit: this.props.onSubmit },
React.createElement(
'div',
{ className: 'Title' },
'Payment information'
),
React.createElement(BasicInput, { name: 'name', label: 'Name on credit card', type: 'text', placeholder: 'John Smith' }),
React.createElement(BasicInput, { name: 'card', label: 'Credit card number', type: 'number', placeholder: '0000 0000 0000 0000' }),
React.createElement(ExpiryDate, null),
React.createElement(CheckoutButton, null)
)
);
}
});
var CheckoutButton = React.createClass({
displayName: 'CheckoutButton',
render: function render() {
return React.createElement(
'div',
{ className: 'CheckoutButton' },
React.createElement(
'button',
null,
'Book securely'
),
React.createElement(
'span',
null,
React.createElement('i', { className: 'fa fa-fw fa-lock' }),
' Your credit card information is encrypted'
)
);
}
});
var ExpiryDate = React.createClass({
displayName: 'ExpiryDate',
render: function render() {
return React.createElement(
'div',
{ className: 'ExpiryDate' },
React.createElement(
'div',
null,
React.createElement(
'label',
null,
'Expires on'
),
React.createElement(
'div',
{ className: 'Expiry' },
React.createElement(
'select',
null,
React.createElement(
'option',
{ value: '' },
'January'
),
React.createElement(
'option',
{ value: '' },
'February'
),
React.createElement(
'option',
{ value: '' },
'March'
),
React.createElement(
'option',
{ value: '' },
'April'
),
React.createElement(
'option',
{ value: '' },
'May'
),
React.createElement(
'option',
{ value: '' },
'June'
),
React.createElement(
'option',
{ value: '' },
'July'
),
React.createElement(
'option',
{ value: '' },
'August'
),
React.createElement(
'option',
{ value: '' },
'September'
),
React.createElement(
'option',
{ value: '' },
'October'
),
React.createElement(
'option',
{ value: '' },
'November'
),
React.createElement(
'option',
{ value: '' },
'December'
)
),
React.createElement(
'select',
{ name: '', id: '' },
React.createElement(
'option',
{ value: '' },
'2016'
),
React.createElement(
'option',
{ value: '' },
'2017'
),
React.createElement(
'option',
{ value: '' },
'2018'
),
React.createElement(
'option',
{ value: '' },
'2019'
),
React.createElement(
'option',
{ value: '' },
'2020'
),
React.createElement(
'option',
{ value: '' },
'2021'
)
)
)
),
React.createElement(
'div',
{ className: 'CVCField' },
React.createElement(
'label',
null,
'CVC'
),
React.createElement('input', { placeholder: '000', type: 'number' })
)
);
}
});
var BasicInput = React.createClass({
displayName: 'BasicInput',
render: function render() {
return React.createElement(
'div',
{ className: 'BasicInput' },
React.createElement(
'label',
{ 'for': this.props.name },
this.props.label
),
React.createElement('input', { id: this.props.name, type: this.props.type, placeholder: this.props.placeholder })
);
}
});
var Checkout = React.createClass({
displayName: 'Checkout',
render: function render() {
return React.createElement(
'div',
{ className: 'Checkout' },
React.createElement(OrderSummary, { discount: this.props.discount, tax: this.props.tax, price: this.props.price, duration: this.props.duration }),
React.createElement(PaymentForm, { onSubmit: this.props.onSubmit })
);
}
});
var Header = React.createClass({
displayName: 'Header',
render: function render() {
return React.createElement(
'header',
null,
React.createElement('input', { onChange: this.props.onChange, type: 'range', max: '100', min: '1', step: '1' })
);
}
});
var App = React.createClass({
displayName: 'App',
getInitialState: function getInitialState() {
return {
mounted: false,
people: 1,
price: 320.00,
tax: 20,
duration: 5,
discount: 5
};
},
componentDidMount: function componentDidMount() {
this.setState({ mounted: true });
},
handleSubmit: function handleSubmit(e) {
e.preventDefault();
},
handleChange: function handleChange(e) {
console.log(e.target.value);
this.setState({ duration: e.target.value });
},
render: function render() {
var overlay, container;
if (this.state.mounted) {
overlay = React.createElement(Overlay, { image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/jj-2.jpg' });
container = React.createElement(
Container,
null,
React.createElement(ImagePreview, { price: this.state.price, duration: this.state.duration, people: this.state.people, image: 'https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/jj-2.jpg' }),
React.createElement(Checkout, { discount: this.state.discount, tax: this.state.tax, price: this.state.price, duration: this.state.duration, onSubmit: this.handleSubmit })
);
}
return React.createElement(
'div',
{ className: 'App' },
React.createElement(
ReactCSSTransitionGroup,
{ transitionName: 'overlay', transitionEnterTimeout: 500, transitionLeaveTimeout: 300 },
overlay
),
React.createElement(
ReactCSSTransitionGroup,
{ transitionName: 'container', transitionEnterTimeout: 500, transitionLeaveTimeout: 300 },
container
),
React.createElement(Header, { onChange: this.handleChange })
);
}
});
ReactDOM.render(React.createElement(App, null), document.getElementById('app'));
//# sourceURL=pen.js
</script>
</body></html>
