cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              // Fonts
@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';

// Colors
$goldfusion: #7B7554;
$yankeesblue: #17183B;
$darkmagenta: #A11692;
$fieryrose: #FF4F79;
$peachorange: #FFB49A;

body {
	background: $yankeesblue;
	color: $yankeesblue;
	font-family: 'Lato', sans-serif;
}

.App {
	width: 100vw;
	height: 100vh;
	position: absolute;
	top: 0;
	left: 0;
	background: $yankeesblue;
	
	.Overlay {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		left: 0;
		background-size: cover;
		filter: blur(10px);
		opacity: .2;
	}
}

// Header
header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	background: white;
	z-index: 10;
	padding: 20px;
}

// Container
.Container {
	display: flex;
	height: 532px;
	max-width: 650px;
	z-index: 3;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
}

// ImagePreview
.ImagePreview {
	background-size: cover;
	display: flex;
	align-items: flex-end;
	position: relative;
	width: 50%;
	
	&::before {
		width: 100%;
		content: '';
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		background: -moz-linear-gradient(top, rgba($yankeesblue,0) 0%, rgba($yankeesblue,0.45) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba($yankeesblue,0) 0%,rgba($yankeesblue,0.45) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba($yankeesblue,0) 0%,rgba($yankeesblue,0.45) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#a6000000',GradientType=0 ); /* IE6-9 */
	}
	
	.WorkspaceOverview {
		color: white;
		position: relative;
		z-index: 3;
		width: 100%;
		padding: 20px;
		
		.WorkspaceInformation {
			
			.WorkspaceName {
				font-family: 'Playfair Display';
				font-weight: 600;
				font-size: 36px;
			}
			
			.WorkspacePrice {
				display: flex;
				align-items: flex-end;
				margin-top: 20px;
				
				.Price {
					font-size: 26px;
					font-weight: 200;
				}
				
				.Duration {
					font-size: 16px;
					font-weight: 300;
					position: relative;
					bottom: 2px;
					margin-left: 5px;
				}
			}
		}
		
		.WorkspaceMeta {
			color: white;
			line-height: 1.6;
			font-size: 13px;
			font-weight: 300;
			margin-top: 20px;
			
			strong {
				font-weight: 600;
			}
		}
	}
}

// Checkout
.Checkout {
	background: white;
	width: 50%;
	
	.OrderSummary {
		border-bottom: 1px solid darken(white, 5);
		padding-bottom: 10px;
		
		table {
			font-size: 12px;
			margin: 0 20px;
			margin-bottom: 10px;
			line-height: 1.6;
			width: calc(100% - 40px);
			opacity: .8;
			font-weight: 400;
			
			tr {
				td:last-child {
					text-align: right;
					font-weight: 600;
				}
			}
		}
		
		.Total {
			display: flex;
			padding: 0 20px;
			margin-bottom: 10px;
			align-items: flex-end;
			
			.TotalLabel {
				display: block;
				text-transform: uppercase;
				margin-bottom: 5px;
				font-size: 11px;
				font-weight: 600;
			}
			
			.Amount {
				font-size: 18px;
				margin-left: auto;
			}
		}
	}
	
	.Title {
		font-family: 'Playfair Display';
		font-size: 18px;
		padding: 20px;
	}
}

// Inputs
.BasicInput {
	padding: 0 20px;
	margin-bottom: 20px;
	
	label {
		display: block;
		text-transform: uppercase;
		margin-bottom: 5px;
		font-size: 11px;
		font-weight: 600;
	}
	
	input {
		width: 100%;
		border: 0;
		border-bottom: 1px solid $yankeesblue;
		font-family: 'Lato', sans-serif;
		padding: 5px 0;
		font-size: 18px;
		font-weight: 300;
		outline: none;
		
		&:focus {
			border-bottom: 1px solid $peachorange;
		}
	}
}

// Expiry Date
.ExpiryDate {
	display: flex;
	margin-bottom: 20px;
	padding: 0 20px;
	width: 100%;
	box-sizing: border-box;
	flex-wrap: nowrap;
	
	label {
		display: block;
		text-transform: uppercase;
		margin-bottom: 5px;
		font-size: 11px;
		font-weight: 600;
	}
	
	div:first-child {
		flex: 1 0 auto;
	}
	
	.Expiry {
		display: flex;
	}
	
	input {
		width: 100%;
		border: 0;
		border-bottom: 1px solid $yankeesblue;
		font-family: 'Lato', sans-serif;
		padding: 5px 0;
		font-size: 18px;
		font-weight: 300;
		outline: none;
	}

	select {
		appearance: none;
		flex: 1 0 auto;
		padding: 10px;
		border-radius: 0;
		border: 0;
		background: transparent;
		border-bottom: 1px solid $yankeesblue;
		border-bottom: 1px solid $yankeesblue;
		font-family: 'Lato', sans-serif;
		padding: 5px 0;
		font-size: 18px;
		font-weight: 300;
		outline: none;
		margin-right: 10px;
	}
	
	.CVCField {
		width: 20%;
	}
}

// CVC
.CVC {
	display: flex;
	margin-bottom: 20px;
	padding: 0 20px;
	
	label {
		display: block;
		text-transform: uppercase;
		margin-bottom: 5px;
		font-size: 11px;
		font-weight: 600;
	}
	
	input {
		width: 100%;
		border: 0;
		border-bottom: 1px solid $yankeesblue;
		font-family: 'Lato', sans-serif;
		padding: 5px 0;
		font-size: 18px;
		font-weight: 300;
		outline: none;
		
		&:focus {
			border-bottom: 1px solid $peachorange;
		}
	}
	
	span {
		display: block;
		padding-top: 20px;
		margin-left: 10px;
		color: $peachorange;
		font-size: 11px;
		border-bottom: 1px dotted $peachorange;
	}
}

// Checkout Button
.CheckoutButton {
	padding: 0 20px;
	text-align: center;
	
	button {
		background: darken($peachorange, 5);
		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;
		
		&:hover {
			background: darken($peachorange, 10);
		}
		
		&:active {
			transform: scale(.99);
		}
	}
	
	span {
		font-size: 11px;
		color: darken(white, 25);
		font-weight: 300;
		text-align: center;
	}
}

// Animations
.overlay-enter {
  opacity: 0.01;
}

.overlay-enter.overlay-enter-active {
  opacity: .2;
  transition: opacity .5s ease .5s;
}

.container-enter {
  opacity: 0.01;
}

.container-enter.container-enter-active {
  opacity: 1;
  transition: opacity .5s ease;
}
            
          
!
            
              var ReactCSSTransitionGroup = React.addons.CSSTransitionGroup;

var Overlay = React.createClass({
	render: function() {
		return (
			<div className="Overlay" style={{'backgroundImage':'url(' + this.props.image + ')'}}>
				Something
			</div>
		);
	}
});

var Container = React.createClass({
	render: function() {
		return (
			<div className="Container">
				{this.props.children}
			</div>
		)
	}
});

var WorkspaceInformation = React.createClass({
	render: function() {
		
		if(this.props.duration > 1) {
			var duration = this.props.duration + ' days';
		} else {
			var duration = this.props.duration + ' day';
		}
		
		return (
			<div className="WorkspaceInformation">
				<div className="WorkspaceName">{this.props.name}</div>
				<div className="WorkspacePrice">
					<div className="Price">{this.props.price} GBP</div>
					<div className="Duration">/ {duration}</div>
				</div>
			</div>
		);
	}
});

var WorkspaceMeta = React.createClass({
	render: function() {
		
		if(this.props.people > 1) {
			var people = this.props.people + ' people';
		} else {
			var people = this.props.people + ' person';
		}
		
		
		return (
			<div className="WorkspaceMeta">
				<div className="Description">Entire office for <strong>{people}</strong></div>	
				<div className="Dates"><strong>Mon, Aug 22, 2016</strong> to <strong>Fri, Aug 29, 2016</strong></div>
			</div>
		);
	}
});

var ImagePreview = React.createClass({
	render: function() {
		return (
			<div className="ImagePreview" style={{'backgroundImage': 'url('+ this.props.image +')'}}>
				<div className="WorkspaceOverview">
					<WorkspaceInformation name="Coworking Space, South Korea" price={this.props.price} duration="1" />
					<WorkspaceMeta people={this.props.people} />
				</div>
			</div>
		);
	}
});

var OrderSummary = React.createClass({
	render: function() {
		
		// 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 (
			<div className="OrderSummary">
				<div className="Title">Order Summary</div>
				<table>
					<tr>
						<td>{this.props.price} x {duration}</td>
						<td>{initialTotal} GBP</td>
					</tr>
					<tr>
						<td>Discount</td>
						<td>{discount} GBP</td>
					</tr>
					<tr>
						<td>Subtotal</td>
						<td>{subTotal} GBP</td>
					</tr>
					<tr>
						<td>Tax</td>
						<td>{tax} GBP</td>
					</tr>
				</table>
				<div className="Total">
					<div className="TotalLabel">Total</div>
					<div className="Amount">
						{total} <small>GBP</small>
					</div>
				</div>
			</div>
		);
	}
});

var PaymentForm = React.createClass({
	render: function() {
		return (
			<div className="PaymentForm">
				<form onSubmit={this.props.onSubmit}>
					<div className="Title">Payment information</div>
					<BasicInput name="name" label="Name on credit card" type="text" placeholder="John Smith" />
					<BasicInput name="card" label="Credit card number" type="number" placeholder="0000 0000 0000 0000" />
					<ExpiryDate />
					<CheckoutButton />
				</form>
			</div>
		);
	}
});

var CheckoutButton = React.createClass({
	render: function() {
		return (
			<div className="CheckoutButton">
				<button>Book securely</button>
				<span><i className="fa fa-fw fa-lock"></i> Your credit card information is encrypted</span>
			</div>
		);
	}
});

var ExpiryDate = React.createClass({
	render: function() {
		return (
			<div className="ExpiryDate">
				<div>
					<label>Expires on</label>
					<div className="Expiry">
						<select>
							<option value="">January</option>
							<option value="">February</option>
							<option value="">March</option>
							<option value="">April</option>
							<option value="">May</option>
							<option value="">June</option>
							<option value="">July</option>
							<option value="">August</option>
							<option value="">September</option>
							<option value="">October</option>
							<option value="">November</option>
							<option value="">December</option>
						</select>
						<select name="" id="">
							<option value="">2016</option>
							<option value="">2017</option>
							<option value="">2018</option>
							<option value="">2019</option>
							<option value="">2020</option>
							<option value="">2021</option>
						</select>
					</div>
				</div>
				<div className="CVCField">
					<label>CVC</label>
					<input placeholder="000" type="number" />
				</div>
			</div>
		);
	}
});

var BasicInput = React.createClass({
	render: function() {
		return (
			<div className="BasicInput">
				<label for={this.props.name}>{this.props.label}</label>
				<input id={this.props.name} type={this.props.type} placeholder={this.props.placeholder} />
			</div>
		);
	}
});

var Checkout = React.createClass({
	render: function() {
		return (
			<div className="Checkout">
				<OrderSummary discount={this.props.discount} tax={this.props.tax} price={this.props.price} duration={this.props.duration} />
				<PaymentForm onSubmit={this.props.onSubmit} />
			</div>
		);
	}
});

var Header = React.createClass({
	
	render: function() {
		return (
			<header>
				<input onChange={this.props.onChange} type="range" max="100" min="1" step="1" />
			</header>
		);
	}
});

var App = React.createClass({
	
	getInitialState: function() {
		return ({
			mounted: false,
			people: 1,
			price: 320.00,
			tax: 20,
			duration: 5,
			discount: 5
		});
	},
	
	componentDidMount: function() {
		this.setState({ mounted: true });
	},
	
	handleSubmit: function(e) {
		e.preventDefault();
	},
	
	handleChange: function(e) {
		console.log(e.target.value);
		this.setState({ duration: e.target.value });
	},

	render: function() {
		
		var overlay, container;
		if(this.state.mounted) {
			overlay = (
				<Overlay image="https://s3-us-west-2.amazonaws.com/s.cdpn.io/557257/jj-2.jpg" />
			);
			container = (
				<Container>
					<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" />
					<Checkout discount={this.state.discount} tax={this.state.tax} price={this.state.price} duration={this.state.duration} onSubmit={this.handleSubmit} />
				</Container>
			);
		}
		
		return(
			<div className="App">
				<ReactCSSTransitionGroup transitionName="overlay" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
					{overlay}
				</ReactCSSTransitionGroup>
				<ReactCSSTransitionGroup transitionName="container" transitionEnterTimeout={500} transitionLeaveTimeout={300}>
					{container}
				</ReactCSSTransitionGroup>
				<Header onChange={this.handleChange} />
			</div>
		);
	}
});

ReactDOM.render(
	<App />,
	document.getElementById('app')
);
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console