Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Adaptive Pricing Table
<div class="pricingTable">
<h2 class="pricingTable-title">Find a plan that's right for you.</h2>
<h3 class="pricingTable-subtitle">Every plan comes with a 30-day free trial.</h3>
<ul class="pricingTable-firstTable">
<li class="pricingTable-firstTable_table">
<h1 class="pricingTable-firstTable_table__header">Bronze Packege</h1>
<p class="pricingTable-firstTable_table__pricing"><span>$</span><span>10</span><span>Month</span></p>
<ul class="pricingTable-firstTable_table__options">
<li>Unlimited Listing</li>
<li>Edit Your Listing</li>
<li>Approve Reviews</li>
</ul>
<div class="pricingTable-firstTable_table__getstart">Get Started Now</div>
</li><li class="pricingTable-firstTable_table">
<h1 class="pricingTable-firstTable_table__header">Gold Packege</h1>
<p class="pricingTable-firstTable_table__pricing"><span>$</span><span>19</span><span>Month</span></p>
<ul class="pricingTable-firstTable_table__options">
<li>Unlimited Listing</li>
<li>Edit Your Listing</li>
<li>Approve Reviews</li>
<li>Take Booking Online</li>
<li>24/7 Support Service</li>
</ul>
<div class="pricingTable-firstTable_table__getstart">Get Started Now</div>
</li><li class="pricingTable-firstTable_table">
<h1 class="pricingTable-firstTable_table__header">Platinum Packege</h1>
<p class="pricingTable-firstTable_table__pricing"><span>$</span><span>49</span><span>Month</span></p>
<ul class="pricingTable-firstTable_table__options">
<li>Unlimited Listing</li>
<li>Edit Your Listing</li>
<li>Approve Reviews</li>
</ul>
<div class="pricingTable-firstTable_table__getstart">Get Started Now</div>
</li>
</ul>
</div>
//design by Adam Pickering
//https://dribbble.com/adampickering
$h1color: #6e768d;
$h3color: #b4bdc6;
$widthoftable: 31%;
$bgctables: #ffffff;
$bgfontcolor: #717787;
.pricingTable{
margin: 40px auto;
&>&-title{
text-align: center;
color: $h1color;
font-size: 3em;
font-size: 300%;
margin-bottom: 20px;
letter-spacing: 0.04em;
}
&>&-subtitle{
text-align: center;
color: $h3color;
font-size: 1.8em;
letter-spacing: 0.04em;
margin-bottom: 60px;
@media screen and (max-width: 480px){
margin-bottom: 30px;
}
}
&-firstTable{
list-style: none;
padding-left: 2em;
padding-right: 2em;
text-align: center;
&_table{
vertical-align: middle;
width: $widthoftable;
background-color: $bgctables;
display: inline-block;
padding: 0px 30px 40px;
text-align: center;
max-width: 320px;
transition: all 0.3s ease;
border-radius: 5px;
@media screen and (max-width: 767px){
display: block;
width: 90%;
margin: 0 auto;
max-width: 90%;
margin-bottom: 20px;
padding: 10px;
padding-left: 20px;
}
& > * {
@media screen and (max-width: 767px){
display: inline-block;
vertical-align: middle;
}
@media screen and (max-width: 480px){
display: block;
float: none;
}
}
&:after {
@media screen and (max-width: 767px){
display: table;
content: '';
clear: both;
}
}
&:hover{
transform: scale(1.08);
@media screen and (max-width: 767px){
transform: none;
}
}
&:not(:last-of-type){
margin-right: (100%-$widthoftable*3)/2;
@media screen and (max-width: 767px){
margin-right: auto;
}
}
&:nth-of-type(2){
position: relative;
& h1{
@media screen and (max-width: 767px){
padding-top: 8%;
}
}
&:before{
content: 'Most Popular';
position: absolute;
color: white;
display: block;
background-color: #3bbdee;
text-align: center;
right: 15px;
top: -25px;
height: 65px;
width: 65px;
border-radius: 50%;
box-sizing: border-box;
font-size: 0.5em;
padding-top: 22px;
text-transform: uppercase;
letter-spacing: 0.13em;
transition: all 0.5s ease;
@media screen and (max-width: 988px){
font-size: 0.6em;
}
@media screen and (max-width: 767px){
left: 10px;
width: 45px;
height: 45px;
top: -10px;
padding-top: 13px;
}
@media screen and (max-width: 480px){
font-size: 0.8em;
}
}
&:hover:before{
transform: rotate(360deg);
}
}
&__header{
font-size: 1.6em;
padding: 40px 0px;
border-bottom: 2px solid #ebedec;
letter-spacing: 0.03em;
@media screen and (max-width: 1068px){
font-size: 1.45em;
}
@media screen and (max-width: 767px){
padding: 0px;
border-bottom: none;
float: left;
width: 33%;
padding-top: 3%;
padding-bottom: 2%;
}
@media screen and (max-width: 610px){
font-size: 1.3em;
}
@media screen and (max-width: 480px){
float: none;
width: 100%;
font-size: 1.8em;
margin-bottom: 5px;
}
}
&__pricing{
font-size: 3em;
padding: 30px 0px;
border-bottom: 2px solid #ebedec;
line-height: 0.7;
@media screen and (max-width: 1068px){
font-size: 2.8em;
}
@media screen and (max-width: 767px){
border-bottom: none;
padding: 0;
float: left;
clear: left;
width: 33%;
}
@media screen and (max-width: 610px){
font-size: 2.4em;
}
@media screen and (max-width: 480px){
float: none;
width: 100%;
font-size: 3em;
margin-bottom: 10px;
}
span:first-of-type{
font-size: 0.35em;
vertical-align: top;
letter-spacing: 0.15em;
@media screen and (max-width: 1068px){
font-size: 0.3em;
}
}
span:last-of-type{
vertical-align: bottom;
font-size: 0.30em;
letter-spacing: 0.04em;
padding-left: 0.2em;
@media screen and (max-width: 1068px){
font-size: 0.25em;
}
}
}
&__options{
list-style: none;
padding: 15px;
font-size: 0.9em;
border-bottom: 2px solid #ebedec;
@media screen and (max-width: 1068px){
font-size: 0.85em;
}
@media screen and (max-width: 767px){
border-bottom: none;
padding: 0;
margin-right: 10%;
}
@media screen and (max-width: 610px){
font-size: 0.7em;
margin-right: 8%;
}
@media screen and (max-width: 480px){
font-size: 1.3em;
margin-right: none;
margin-bottom: 10px;
}
&>li{
padding: 8px 0px;
@media screen and (max-width: 767px){
text-align: left;
}
@media screen and (max-width: 610px){
padding: 5px 0;
}
@media screen and (max-width: 480px){
text-align: center;
}
&:before{
content: '';
display: inline-block;
margin-right: 15px;
color: white;
background-color: #74ce6a;
border-radius: 50%;
width: 15px;
height: 15px;
font-size: 0.8em;
padding: 2px;
text-align: center;
@media screen and (max-width: 1068px){
width: 14px;
height: 14px;
padding: 1.5px;
}
@media screen and (max-width: 767px){
width: 12px;
height: 12px;
}
}
}
}
&__getstart{
color: white;
background-color: #71ce73;
margin-top: 30px;
border-radius: 5px;
cursor: pointer;
padding: 15px;
box-shadow: 0px 3px 0px 0px rgba(102, 172, 100, 1);
letter-spacing: 0.07em;
transition: all 0.4s ease;
@media screen and (max-width: 1068px){
font-size: 0.95em;
}
@media screen and (max-width: 767px){
margin-top: 0;
}
@media screen and (max-width: 610px){
font-size: 0.9em;
padding: 10px;
}
@media screen and (max-width: 480px){
font-size: 1em;
width: 50%;
margin: 10px auto;
}
&:hover{
transform: translateY(-10px);
box-shadow: 0px 40px 29px -19px rgba(102, 172, 100, 0.9);
@media screen and (max-width: 767px){
transform: none;
box-shadow: none;
}
}
&:active{
box-shadow: inset 0 0 10px 1px rgba(102, 165, 100, 1), 0px 40px 29px -19px rgba(102, 172, 100, 0.95);
transform: scale(0.95) translateY(-9px);
@media screen and (max-width: 767px){
transform: scale(0.95) translateY(0);
box-shadow: none;
}
}
}
}
}
}
body{
font-family: 'Montserrat', sans-serif;
font-size: 100%;
background-color: #f0f4f7;
color: $bgfontcolor;
@media screen and (max-width: 960px){
font-size: 80%;
}
@media screen and (max-width: 776px){
font-size: 70%;
}
@media screen and (max-width: 496px){
font-size: 50%;
}
@media screen and (max-width: 320px){
font-size: 40%;
}
}
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.