Pricing Table using Sass

Create a simple pricing table using HTML and Sass.

HTML

<div class="wrap">
	<div class="pricing-table">
		<div class="plan">
			<h3 class="name">Basic</h3>
			<h4 class="price">$10<span>/month</span></h4>
			<ul class="details">
				<li><strong>1</strong> Database</li>
				<li><strong>10GB</strong> file storage</li>
				<li><strong>100GB</strong> bandwidth</li>
			</ul>
			<h5 class="order"><a href="#">Order Now</a></h5>
		</div>
		<div class="plan">
			<h3 class="name">Standard</h3>
			<h4 class="price">$20<span>/month</span></h4>
			<ul class="details">
				<li><strong>2</strong> Databases</li>
				<li><strong>20GB</strong> file storage</li>
				<li><strong>150GB</strong> bandwidth</li>
			</ul>
			<h5 class="order"><a href="#">Order Now</a></h5>
		</div>
		<div class="plan">
			<h3 class="name">Premium</h3>
			<h4 class="price">$30<span>/month</span></h4>
			<ul class="details">
				<li><strong>5</strong> Databases</li>
				<li><strong>50GB</strong> file storage</li>
				<li><strong>500GB</strong> bandwidth</li>
			</ul>
			<h5 class="order"><a href="#">Order Now</a></h5>
		</div>
	</div>
</div>

Sass

.cf:before,
.cf:after {
  content: ".";
  display: block;
  height: 0;
  overflow: hidden;
}
.cf:after {clear: both;}
.cf {zoom: 1;}
.wrap{
	width: 900px;
	margin: 70px auto;
	color: #607d8b;
	box-shadow: 1px 1px 10px #424242;
}
.pricing-table{
	@extend .cf;
	.plan {
		box-sizing: border-box;
		width: 300px;
		background-color: #fff; float: left;
		text-align: center;
		position: relative;
		z-index: 10;
		h3.name{
			font-size: 20px;
			background-color: #546e7a;
			padding: 15px; color: #fff;
      margin: 0 auto;
		}
		h4.price{
			font-size: 49px; color: #fff; padding: 30px;
			background-color: #01A4F5; line-height: 40px;
			span{font-size: 16px; font-style: italic;};
      margin: 0 auto;
		}
		ul.details{
			list-style-type: none;

			li{
				border-bottom: 1px solid #B3B9C4;
				padding: 15px;
			}
		}
		h5.order{
			padding: 30px; font-size: 17px;
			a{
				text-decoration: none;
				color: #fff; background-color: #01A4F5;
				padding: 10px 20px;
			}
		}
		&:first-child{
			h4.price{background-color: #0EC0A5}
			h5.order{
				a{background-color: #0EC0A5;}
			}
		}
		&:last-child{
			h4.price{background-color: #F22D47}
			h5.order{
				a{background-color: #F22D47;}
			}
		}
		&:nth-child(2n){box-shadow: 0px 0px 10px #424242; z-index:100;}
	}
}
Brandon Himpfen
Blogger. Developer. Designer. Programmer. Photographer. Traveller. Digital Marketer. Gamer.