Price Cards

$29/ mo

Freelance

  • 1 GB of space
  • Support at $25/hour
  • Limited cloud access
$59/ mo

Business

  • 5 GB of space
  • Support at $5/hour
  • Full cloud access
$99/ mo

Enterprise

  • 10 GB of space
  • Support at $5/hour
  • Full cloud access
HTML
<div class="row_f || pricing">
	<div class="col_4 || col_md_6 || col_xs_12 || pricing_item">
		<div class="pricing_deco">
			<svg class="pricing_deco_img" enable-background="new 0 0 300 100" height="100px" id="Layer_1"preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" width="300px" x="0px"xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg" y="0px">
                <path class="deco_layer || deco_layer_1"d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729&#x000A; c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z"fill="#FFFFFF" opacity="0.6"></path>
				<path class="deco_layer || deco_layer_2"d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729&#x000A; c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z"fill="#FFFFFF" opacity="0.6"></path>
				<path class="deco_layer || deco_layer_3"d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716&#x000A; H42.401L43.415,98.342z"fill="#FFFFFF" opacity="0.7"></path>
				<path class="deco_layer || deco_layer_4"d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428&#x000A; c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z"fill="#FFFFFF"></path>
            </svg>
			<div class="pricing_price">
				<span class="pricing_currency">$</span>29<span class="pricing_period">/ mo</span>
			</div>
			<h3 class="pricing_title">Freelance</h3>
		</div>
		<ul class="pricing_feature_list">
			<li>1 GB of space</li>
			<li>Support at $25/hour</li>
			<li>Limited cloud access</li>
		</ul>
		<button class='button || pricing_action'>Choose plan</button>
	</div>
	<div class="col_4 || col_md_6 || col_xs_12 || pricing_item || pricing_item_featured">
		<div class="pricing_deco">
			<svg class="pricing_deco_img" enable-background="new 0 0 300 100" height="100px" id="Layer_1"preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" width="300px" x="0px"xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg" y="0px">
                <path class="deco_layer || deco_layer_1"d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729&#x000A; c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z"fill="#FFFFFF" opacity="0.6"></path>
				<path class="deco_layer || deco_layer_2"d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729&#x000A; c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z"fill="#FFFFFF" opacity="0.6"></path>
				<path class="deco_layer || deco_layer_3"d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716&#x000A; H42.401L43.415,98.342z"fill="#FFFFFF" opacity="0.7"></path>
				<path class="deco_layer || deco_layer_4"d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428&#x000A; c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z"fill="#FFFFFF"></path>
            </svg>
			<div class="pricing_price">
				<span class="pricing_currency">$</span>59<span class="pricing_period">/ mo</span>
			</div>
			<h3 class="pricing_title">Business</h3>
		</div>
		<ul class="pricing_feature_list">
			<li>5 GB of space</li>
			<li>Support at $5/hour</li>
			<li>Full cloud access</li>
		</ul>
		<button class="button || pricing_action">Choose plan</button>
	</div>
	<div class="col_4 || col_md_6 || col_xs_12 || pricing_item">
		<div class="pricing_deco">
			<svg class="pricing_deco_img" enable-background="new 0 0 300 100" height="100px" id="Layer_1"preserveAspectRatio="none" version="1.1" viewBox="0 0 300 100" width="300px" x="0px"xml:space="preserve" xmlns:xlink="http://www.w3.org/1999/xlink"xmlns="http://www.w3.org/2000/svg" y="0px">
                <path class="deco_layer || deco_layer_1"d="M30.913,43.944c0,0,42.911-34.464,87.51-14.191c77.31,35.14,113.304-1.952,146.638-4.729&#x000A; c48.654-4.056,69.94,16.218,69.94,16.218v54.396H30.913V43.944z"fill="#FFFFFF" opacity="0.6"></path>
				<path class="deco_layer || deco_layer_2"d="M-35.667,44.628c0,0,42.91-34.463,87.51-14.191c77.31,35.141,113.304-1.952,146.639-4.729&#x000A; c48.653-4.055,69.939,16.218,69.939,16.218v54.396H-35.667V44.628z"fill="#FFFFFF" opacity="0.6"></path>
				<path class="deco_layer || deco_layer_3"d="M43.415,98.342c0,0,48.283-68.927,109.133-68.927c65.886,0,97.983,67.914,97.983,67.914v3.716&#x000A; H42.401L43.415,98.342z"fill="#FFFFFF" opacity="0.7"></path>
				<path class="deco_layer || deco_layer_4"d="M-34.667,62.998c0,0,56-45.667,120.316-27.839C167.484,57.842,197,41.332,232.286,30.428&#x000A; c53.07-16.399,104.047,36.903,104.047,36.903l1.333,36.667l-372-2.954L-34.667,62.998z"fill="#FFFFFF"></path>
            </svg>
			<div class="pricing_price">
				<span class="pricing_currency">$</span>99<span class="pricing_period">/ mo</span>
			</div>
			<h3 class="pricing_title">Enterprise</h3>
		</div>
		<ul class="pricing_feature_list">
			<li>10 GB of space</li>
			<li>Support at $5/hour</li>
			<li>Full cloud access</li>
		</ul>
		<button class="button || pricing_action">Choose plan</button>
	</div>
</div>
CSS
.pricing{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-webkit-justify-content:center;-moz-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:3rem -1.5rem}
.pricing .pricing_item{display:-webkit-box;display:-webkit-flex;display:-moz-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-moz-box-orient:vertical;-moz-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:stretch;-webkit-align-items:stretch;-moz-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;text-align:center;margin:1.5rem -1rem;color:#84697c;background-color:#fff;-webkit-box-shadow:0 0 1rem rgba(46,59,125,0.23);-moz-box-shadow:0 0 1rem rgba(46,59,125,0.23);box-shadow:0 0 1rem rgba(46,59,125,0.23);-webkit-border-radius:1rem;-moz-border-radius:1rem;border-radius:1rem;position:relative}
.pricing .pricing_item.pricing_item_featured{margin:0;-webkit-box-shadow:0 0 .3rem rgba(46,59,125,0.23);-moz-box-shadow:0 0 .3rem rgba(46,59,125,0.23);box-shadow:0 0 .3rem rgba(46,59,125,0.23);position:relative;z-index:10}
.pricing_item .pricing_deco{-webkit-border-radius:1rem 1rem 0 0;-moz-border-radius:1rem 1rem 0 0;border-radius:1rem 1rem 0 0;background:rgba(76,70,101,0.99);padding:6rem 0 16rem;position:relative}
.pricing_item .pricing_deco_img{position:absolute;bottom:0;left:0;width:100%;height:16rem}
.pricing_item .pricing_title{font-size:1.2rem;line-height:1;margin:0;text-transform:uppercase;letter-spacing:.5rem;color:#fff}
.pricing_item .deco_layer{-webkit-transition:-webkit-transform .5s;transition:-webkit-transform .5s;-o-transition:-o-transform .5s;-moz-transition:transform 0.5s,-moz-transform .5s;transition:transform .5s;transition:transform 0.5s,-webkit-transform 0.5s,-moz-transform 0.5s,-o-transform .5s}
.pricing_item .pricing_price{font-size:8rem;font-weight:700;padding:0;color:#fff;margin:0 0 2rem;line-height:.75}
.pricing_item .pricing_currency{font-size:1.2rem;vertical-align:top}
.pricing_item .pricing_period{font-size:1.2rem;font-style:italic;padding:0 0 0 .5rem}
.pricing_item .pricing_feature_list{padding:0 2.5rem 4.5rem;margin:-4rem 0 0;position:relative;z-index:1}
.pricing_item .pricing_feature_list li{font-size:1.8rem;font-weight:600;padding:1rem 0}
.pricing_item .pricing_action{margin:auto 4.5rem 3rem}

@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
	.pricing_item:hover .deco_layer_1{-webkit-transform:translate3d(1.5rem,0,0);-moz-transform:translate3d(1.5rem,0,0);transform:translate3d(1.5rem,0,0)}
	.pricing_item:hover .deco_layer_2{-webkit-transform:translate3d(-1.5rem,0,0);-moz-transform:translate3d(-1.5rem,0,0);transform:translate3d(-1.5rem,0,0)}
}

@media only screen and (max-width: 992px) {
	.pricing_item .pricing_feature_list{padding:0 2.5rem 2.5rem;margin:-6rem 0 0}
	.pricing .pricing_item,.pricing .pricing_item.pricing_item_featured{margin:1rem 1.5rem}
}
SCSS
.pricing {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin: 3rem -1.5rem;
	
	.pricing_item {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		text-align: center;
		margin: 1.5rem -1rem;
		color: #84697c;
		background-color: #fff;
		box-shadow: 0 0 1rem rgba(46, 59, 125, 0.23);
		border-radius: 1rem;
		position: relative;
		
		&.pricing_item_featured {
			margin: 0;
			box-shadow: 0 0 .3rem rgba(46, 59, 125, 0.23);
			position: relative;
			z-index: 10;
		}
	}
}

.pricing_item{
	.pricing_deco {
		border-radius: 1rem 1rem 0 0;
		background: rgba(76, 70, 101, 0.99);
		padding: 6rem 0 16rem;
		position: relative;
	}
	
	.pricing_deco_img {
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 16rem;
	}
	
	.pricing_title {
		font-size: 1.2rem;
		line-height: 1;
		margin: 0;
		text-transform: uppercase;
		letter-spacing: .5rem;
		color: #fff;
	}
	
	.deco_layer {
		transition: transform 0.5s;
	}
	
	.pricing_price {
		font-size: 8rem;
		font-weight: 700;
		padding: 0;
		color: #fff;
		margin: 0 0 2rem 0;
		line-height: .75;
	}
	
	.pricing_currency {
		font-size: 1.2rem;
		vertical-align: top;
		
	}
	
	.pricing_period {
		font-size: 1.2rem;
		font-style: italic;
		padding: 0 0 0 .5rem;
	}
	
	.pricing_feature_list {
		padding: 0 2.5rem 4.5rem;
		margin: -4rem 0 0;
		position: relative;
		z-index: 1;
		
		li {
			font-size: 1.8rem;
			font-weight: 600;
			padding: 1rem 0;
		}
	}
	
	.pricing_action {
		margin: auto 4.5rem 3rem 4.5rem;
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.pricing_item{
		&:hover{
			.deco_layer_1 {
				transform: translate3d(1.5rem,0,0);
			}
			.deco_layer_2 {
				transform: translate3d(-1.5rem,0,0);
			}
		}
	}
}

@media only screen and (max-width: 992px) {
	.pricing_item .pricing_feature_list {padding: 0 2.5rem 2.5rem;margin: -6rem 0 0}
	.pricing .pricing_item, .pricing .pricing_item.pricing_item_featured {margin: 1rem 1.5rem}
}