RESPONSIVE PRICING TABLE DESIGN
A Pen by Digimad Media on CodePen.
<link href='https://fonts.googleapis.com/css?family=Lato:400,300,700,100' rel='stylesheet' type='text/css'> | |
<h1>RESPONSIVE PRICING TABLE DESIGN <br> BY <a target="blank" href="http://www.digimadmedia.com">DIGIMAD MEDIA</h1> | |
<div class="price-table-wrapper"> | |
<div class="pricing-table"> | |
<h2 class="pricing-table__header">- BASIC -</h2> | |
<h3 class="pricing-table__price">£50</h3> | |
<a target="_blank" class="pricing-table__button" href="http://www.digimadmedia.com"> | |
Join Now! | |
</a> | |
<ul class="pricing-table__list"> | |
<li>30 day free trial</li> | |
<li>50gb storage space</li> | |
<li>20% discount</li> | |
<li>24 hour support</li> | |
</ul> | |
</div> | |
<div class="pricing-table featured-table"> | |
<h2 class="pricing-table__header">- BUSINESS -</h2> | |
<h3 class="pricing-table__price">£80</h3> | |
<a target="_blank" class="pricing-table__button" href="http://www.digimadmedia.com"> | |
Join Now! | |
</a> | |
<ul class="pricing-table__list"> | |
<li>40 day free trial</li> | |
<li>100gb storage space</li> | |
<li>25% discount</li> | |
<li>24 hour support</li> | |
</ul> | |
</div> | |
<div class="pricing-table"> | |
<h2 class="pricing-table__header">- PREMIUM -</h2> | |
<h3 class="pricing-table__price">£130</h3> | |
<a target="_blank" class="pricing-table__button" href="http://www.digimadmedia.com"> | |
Join Now! | |
</a> | |
<ul class="pricing-table__list"> | |
<li>50 day free trial</li> | |
<li>200gb storage space</li> | |
<li>40% discount</li> | |
<li>24 hour support</li> | |
</ul> | |
</div> | |
</div> |
RESPONSIVE PRICING TABLE DESIGN
A Pen by Digimad Media on CodePen.
body{ | |
background: #F8F8F8; | |
} | |
a{ | |
text-decoration: none; | |
} | |
h1{ | |
text-align: center; | |
font-family: 'Lato', sans-serif; | |
font-size: 25px; | |
line-height: 32px; | |
padding-top: 70px; | |
a{ | |
color: #66CCCC; | |
} | |
} | |
.price-table-wrapper{ | |
font-family: 'Lato', sans-serif; | |
text-align: center; | |
margin-top: 30px; | |
.featured-table{ | |
box-shadow: 0px 0px 19px -3px rgba(0,0,0,0.36); | |
} | |
.pricing-table{ | |
display: inline-block; | |
border: 1px solid #C8C8C8; | |
border-radius: 10px; | |
background: white; | |
margin: 20px; | |
transition: all 0.3s ease-in-out; | |
&__header{ | |
padding: 20px; | |
font-size: 20px; | |
color: #909090 ; | |
background: #E0E0E0; | |
} | |
&__price{ | |
color: #66CCCC; | |
padding: 20px; | |
margin: auto; | |
font-size: 40px; | |
font-weight: 500; | |
} | |
&__button{ | |
display: block; | |
background: #66CCCC; | |
text-decoration: none; | |
padding: 20px; | |
color: white; | |
position: relative; | |
overflow: hidden; | |
transition: all 0.3s ease-in-out; | |
&:before{ | |
position: absolute; | |
left: -20%; | |
top: -10%; | |
content: ''; | |
width: 60%; | |
height: 220%; | |
transform: rotate(-30deg); | |
background: white; | |
opacity: .3; | |
transition: all 0.3s ease-in-out; | |
} | |
&:after{ | |
position: absolute; | |
content: '>'; | |
top: 0; | |
right: 0; | |
font-size: 25px; | |
padding: 15px; | |
padding-right: 40px; | |
color: white; | |
opacity: 0; | |
transition: all 0.3s ease-in-out; | |
} | |
&:hover{ | |
background: black; | |
} | |
} | |
&__list{ | |
padding: 20px; | |
color: #A0A0A0; | |
li{ | |
padding: 15px; | |
border-bottom: 1px solid #C8C8C8 ; | |
&:last-child{ | |
border: none; | |
} | |
} | |
} | |
&:hover{ | |
box-shadow: 0px 0px 19px -3px rgba(0,0,0,0.36); | |
.pricing-table__button{ | |
padding-left: 0; | |
padding-right: 35px; | |
&:before{ | |
top: -80%; | |
transform: rotate(0deg); | |
width: 100%; | |
} | |
&:after{ | |
opacity: 1; | |
padding-right: 15px; | |
} | |
} | |
} | |
} | |
} |