<div class="plans">
<div class="plan-box">
<div class="plan-options">
<p class="plan-name">
Personal
</p>
<div class="plan-price">
<strong>Free</strong>
</div>
<ul class="plan-details">
<li>1 sub-domain</li>
<li><strong>10</strong> email addresses</li>
<li><strong>Unlimited</strong> Bandwidth</li>
<li><strong>20GB</strong> Storage</li>
<li>Support Ads</li>
<li>Shared Hosting</li>
<li><strong>24/7</strong> Customer Support</li>
</ul>
<div class="element-hidden more-options">
<a href="#">+ more options</a>
<div class="element-hidden additional-options">
<p>If you need more options, please consider our <a href="#">Premium</a> or <a href="#">Pro</a> plans.</p>
</div>
</div>
<a class="button" href="#">Choose</a>
</div>
</div>
<div class="plan-box">
<div class="plan-options">
<p class="plan-name">
Premium
</p>
<div class="plan-price">
<strong>$19</strong>/mo
</div>
<ul class="plan-details">
<li><strong>FREE</strong> custom domain</li>
<li><strong>Unlimited</strong> email addresses</li>
<li><strong>Unlimited</strong> Bandwidth</li>
<li><strong>100GB</strong> Storage</li>
<li><strong>No Support Ads</strong></li>
<li><strong>24/7</strong> Customer Support</li>
</ul>
<div class="element-hidden more-options">
<a href="#">+ more options</a>
<div class="element-hidden additional-options">
<ul>
<li><input type="checkbox" id="10gb" name="extragigs" /> <label for="10gb">10GB more storage</label></li>
</ul>
</div>
</div>
<!-- Hiding until I think of a better style
<div class="best-choice">
Voted Best Choice
</div> -->
<a class="button" href="#">Choose</a>
</div>
</div>
<div class="plan-box">
<div class="plan-options">
<p class="plan-name">
Pro
</p>
<div class="plan-price">
<strong>$50</strong>/mo
</div>
<ul class="plan-details">
<li><strong>FREE</strong> custom domain</li>
<li><strong>Unlimited</strong> email addresses</li>
<li><strong>Unlimited</strong> Bandwidth</li>
<li><strong>200GB</strong> Storage</li>
<li><strong>No Support Ads</strong></li>
<li><strong>Quick Install</strong> Apps (WordPress, etc)</li>
<li><strong>VPS Hosting</strong></li>
<li><strong>24/7</strong> Customer Support</li>
</ul>
<div class="element-hidden more-options">
<a href="#">+ more options</a>
<div class="element-hidden additional-options">
<ul>
<li><input type="checkbox" id="10gb" name="extragigs" /> <label for="10gb">10GB more storage</label></li>
<li><input type="checkbox" id="marketing" name="marketing" /> <label for="marketing">SEO and Marketing Monthly Evaluation</label></li>
</ul>
</div>
</div>
<a class="button" href="#">Choose</a>
</div>
</div>
</div>
@import "compass/css3";
$beige: #F7EDB7;
$dark-grey: #272F30;
$orange: #E0401C;
$red: #9E2B20;
$warm-white: #FFFCEF;
$light-blue: #D5FFFC;
$dull-blue: #437299;
$base-font: Oxygen, Arial, Helvetica, sans-serif;
$heading-font: Oswald, Arial, Helvetica, sans-serif;
* {
box-sizing: border-box;
transition: all 1s;
}
body {
background: $beige;
color: $dark-grey;
font: 16px $base-font;
font-weight: 300;
padding: 50px 0;
}
ul, li {
list-style: none;
padding: 0;
margin: 0;
}
.element-hidden {
display: none;
}
.plan-name, .plan-price, .plan-details, .button, .more-options, .best-choice {
padding: 10px;
}
.plans {
margin: 0 auto;
max-width: 80%;
display: flex;
flex-flow: row wrap;
position: relative;
.plan-box {
display: flex;
width: 33.3333%;
background: $warm-white;
margin: 10px 0;
min-height: 650px;
.best-choice {
background: $light-blue;
text-transform: uppercase;
font-weight: 600;
color: $dull-blue;
@include box-shadow(inset 0 -2px 3px rgba(0, 0, 0, .15), inset 0 2px 3px rgba(0, 0, 0, .15));
margin-top: auto;
}
&:hover {
margin-top: -15px;
background: white;
@media all and (max-width: 700px) {
margin-top: 10px;
}
.button {
//padding: 20px;
//font-size: 30px;
}
.plan-name {
color: black;
}
.plan-price {
background: saturate($red, 55%);
@include box-shadow(inset 0 -4px 3px rgba(0, 0, 0, .15), inset 0 4px 3px rgba(0, 0, 0, .15));
text-align: center;
}
.more-options {
display: block;
padding: 20px;
text-align: right;
position: relative;
.additional-options {
position: relative;
text-align: left;
width: 100%;
margin: 0;
}
a {
color: $red;
text-decoration: none;
}
}
}
@media all and (max-width: 700px) {
&:first-child {
margin-bottom: 20px;
}
}
&:last-child {
//margin-right: 0;
}
&:nth-child(2) {
margin-top: 0;
@include box-shadow(-3px 0 3px rgba(0, 0, 0, .15), 3px 0 3px rgba(0, 0, 0, .15));
position: relative;
&:hover {
margin-top: -35px;
@media all and (max-width: 700px) {
margin-top: 0px;
marign-right: -30px;
}
}
}
@media all and (max-width: 700px) {
width: 100%;
}
}
.plan-name {
font: 300 32px $heading-font;
text-align: center;
margin: 0;
padding: 20px;
}
.plan-price {
background: $red;
color: white;
display: flex;
font: 24px $heading-font;
padding: 20px 10px;
text-align: center;
strong {
font-size: 34px;
align-self: baseline;
line-height: 1;
font-weight: 500;
}
}
.plan-options {
display: flex;
flex-flow: column;
width: 100%;
li {
border-bottom: 1px solid #cdcdcd;
padding: 5px 0;
margin: 5px 0;
}
.button {
margin-top: auto;
display: block;
background: $orange;
color: white;
text-align: center;
font: 24px $heading-font;
text-decoration: none;
&:hover {
background: saturate($orange, 10%);
}
}
}
}
View Compiled
$('.more-options a').click(function(e) {
$(this).next('.additional-options').slideToggle();
e.preventDefault();
});
This Pen doesn't use any external CSS resources.