A few days back, I shared some beautiful author profile cards, which have been liked by many users. Also, this post got published by Google on Google discoverer, and I received high traffic for this 👏.
Today, I thought I should share some more beautiful stuff, so I am sharing here the beautiful and elegant 4 Pricing Tables, which you can use to showcase your pricing plans to convert sales for any kind of business.
Pricing Table Examples
The following pricing tables are showing the website hosting plans, which can be changed easily by editing the HTML code.
Example - 1
The below pricing table will show the five hosting plans, and on hover will highlight the selected one:
HTML Code
<div class="container group"> <div class="grid-1-5"> <h2>Basic</h2> <h3><span class="uppercase">Free</span></h3> <p>10,000 monthly visits</p> <ul> <li>Limited Email Support</li> <li>Unlimited Data Transfer</li> <li>10GB Local Storage</li> </ul> <a href="" class="button">Sign Up</a> </div> <div class="grid-1-5"> <h2>Startup</h2> <h3><sup>$</sup>79<span class="small">/mo</span></h3> <p>25,000 monthly visits</p> <ul> <li>Limited Email Support</li> <li>Unlimited Data Transfer</li> <li>20GB Local Storage</li> </ul> <a href="" class="button">Sign Up</a> </div> <div class="grid-1-5"> <h2>Growth</h2> <h3><sup>$</sup>179<span class="small">/mo</span></h3> <p>75,000 monthly visits</p> <ul> <li>Email Support</li> <li>Unlimited Data Transfer</li> <li>30GB Local Storage</li> </ul> <a href="" class="button">Sign Up</a> </div> <div class="grid-1-5"> <h2>Premium</h2> <h3><sup>$</sup>499<span class="small">/mo</span></h3> <p>225,000 monthly visits</p> <ul> <li>Email Support</li> <li>Phone Support</li> <li>Unlimited Data Transfer</li> </ul> <a href="" class="button">Sign Up</a> </div> <div class="grid-1-5"> <h2>Enterprise</h2> <h3><span class="uppercase">Let's Talk</span></h3> <p>1M+ monthly visits</p> <ul> <li>Email Support</li> <li>Phone Support</li> <li>Dedicated Environment</li> <li>Customized Plan</li> </ul> <a href="" class="button">Sign Up</a> </div> </div>
CSS Code
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,900);
html {
box-sizing: border-box;
height: 100%;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
background-color: #211f23;
background-repeat: no-repeat;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FF53455B', endColorstr='#FF201E22');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PHJhZGlhbEdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjAlIiByPSI3MCUiPjxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM1MzQ1NWIiLz48c3RvcCBvZmZzZXQ9IjcwJSIgc3RvcC1jb2xvcj0iIzIwMWUyMiIvPjwvcmFkaWFsR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -moz-radial-gradient(top, circle, #53455b 0%, #201e22 70%);
background-image: -webkit-radial-gradient(top, circle, #53455b 0%, #201e22 70%);
background-image: radial-gradient(circle at top, #53455b 0%, #201e22 70%);
color: #fff;
font-family: 'Lato', sans-serif;
font-size: 100%;
min-height: 100%;
line-height: 1.5;
padding: 2.5em 0;
}
.container {
margin: 0 auto;
width: 90%;
max-width: 1200px;
}
.group:after {
content: "";
display: table;
clear: both;
}
.grid-1-5 {
border: 2px solid #5d4e65;
min-height: 400px;
padding: 1.25em;
position: relative;
text-align: center;
transition: all .2s ease-in-out;
}
@media screen and (min-width: 700px) {
.grid-1-5 {
float: left;
width: 50%;
}
.grid-1-5:nth-child(odd) {
clear: left;
}
}
@media screen and (min-width: 800px) {
.grid-1-5 {
width: 33.3333333%;
}
.grid-1-5:nth-child(3n+1) {
clear: left;
}
.grid-1-5:nth-child(odd) {
clear: none;
}
}
@media screen and (min-width: 1120px) {
.grid-1-5 {
width: 20%;
}
.grid-1-5:nth-child(odd), .grid-1-5:nth-child(3n+1) {
clear: none;
}
}
.grid-1-5:hover {
background-color: #53455b;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FF53455B', endColorstr='#FF201D22');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUzNDU1YiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIwMWQyMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #53455b), color-stop(100%, #201d22));
background-image: -moz-linear-gradient(top, #53455b 0%, #201d22 100%);
background-image: -webkit-linear-gradient(top, #53455b 0%, #201d22 100%);
background-image: linear-gradient(to bottom, #53455b 0%, #201d22 100%);
border-top: 2px solid #ec7a37;
border-bottom: 2px solid #ff4f69;
box-shadow: 0px 0px 10px 0px #323232;
transform: scale(1.025);
z-index: 2;
}
.grid-1-5:hover:before, .grid-1-5:hover:after {
content: "";
position: absolute;
background-color: #f67d35;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=0, startColorstr='#FFF67D35', endColorstr='#FFFF4F68');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y2N2QzNSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmNGY2OCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f67d35), color-stop(100%, #ff4f68));
background-image: -moz-linear-gradient(top, #f67d35 0%, #ff4f68 100%);
background-image: -webkit-linear-gradient(top, #f67d35 0%, #ff4f68 100%);
background-image: linear-gradient(to bottom, #f67d35 0%, #ff4f68 100%);
top: -2px;
bottom: -2px;
width: 2px;
}
.grid-1-5:hover:before {
left: -2px;
}
.grid-1-5:hover:after {
right: -2px;
}
.grid-1-5:hover .button {
background-color: #ee7a36;
*zoom: 1;
filter: progid:DXImageTransform.Microsoft.gradient(gradientType=1, startColorstr='#FFEE7A36', endColorstr='#FFEB495D');
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuMCIgeTE9IjAuNSIgeDI9IjEuMCIgeTI9IjAuNSI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlN2EzNiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ViNDk1ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
background-size: 100%;
background-image: -webkit-gradient(linear, 0% 50%, 100% 50%, color-stop(0%, #ee7a36), color-stop(100%, #eb495d));
background-image: -moz-linear-gradient(left, #ee7a36 0%, #eb495d 100%);
background-image: -webkit-linear-gradient(left, #ee7a36 0%, #eb495d 100%);
background-image: linear-gradient(to right, #ee7a36 0%, #eb495d 100%);
}
h2, h3, p, ul {
margin: 0;
}
h2 {
font-size: 1em;
font-weight: 400;
margin: 0 0 0.5em;
}
h3 {
font-size: 1.5em;
letter-spacing: 0.0625em;
margin: 0 0 0.3333333333333333em;
}
p {
font-size: 0.875em;
}
p, ul {
margin: 0 0 1.5em;
}
ul {
color: #796583;
font-size: 0.75em;
list-style-type: none;
padding: 0;
}
ul li {
margin: 0 0 0.8333333333333333em;
}
.button {
background-color: #9c83aa;
border-radius: 20px;
color: #fff;
font-size: 1em;
font-weight: 700;
padding: 0.75em 1.5em;
position: absolute;
bottom: 1.25em;
left: 50%;
margin-left: -60px;
text-decoration: none;
width: 120px;
}
.uppercase, .button, h2 {
text-transform: uppercase;
}
sup, .small {
font-size: 0.6125em;
}Output
Example - 2
The following pricing table shows the four plans, having the orange color 3D button, which looks good with white and blue color combinations.
HTML Code
<div class="plans">
<div class="plan">
<h3 class="plan-title">Started</h3>
<p class="plan-price">$19 <span class="plan-unit">per month</span></p>
<ul class="plan-features">
<li class="plan-feature">2 <span class="plan-feature-name">websites</span></li>
<li class="plan-feature">5<span class="plan-feature-unit">GB</span> <span class="plan-feature-name">storage</span></li>
<li class="plan-feature">3 <span class="plan-feature-name">users</span></li>
</ul>
<a href="#" class="plan-button">Choose Plan</a>
</div>
<div class="plan plan-highlight">
<p class="plan-recommended">Recommended</p>
<h3 class="plan-title">Team</h3>
<p class="plan-price">$49 <span class="plan-unit">per month</span></p>
<ul class="plan-features">
<li class="plan-feature">5 <span class="plan-feature-name">websites</span></li>
<li class="plan-feature">20<span class="plan-feature-unit">GB</span> <span class="plan-feature-name">storage</span></li>
<li class="plan-feature">10 <span class="plan-feature-name">users</span></li>
</ul>
<a href="#" class="plan-button">Choose Plan</a>
</div>
<div class="plan">
<h3 class="plan-title">Premium</h3>
<p class="plan-price">$99 <span class="plan-unit">per month</span></p>
<ul class="plan-features">
<li class="plan-feature">20 <span class="plan-feature-name">websites</span></li>
<li class="plan-feature">50<span class="plan-feature-unit">GB</span> <span class="plan-feature-name">storage</span></li>
<li class="plan-feature">25 <span class="plan-feature-name">users</span></li>
</ul>
<a href="#" class="plan-button">Choose Plan</a>
</div>
<div class="plan">
<h3 class="plan-title">Corporate</h3>
<p class="plan-price">$249 <span class="plan-unit">per month</span></p>
<ul class="plan-features">
<li class="plan-feature">∞ <span class="plan-feature-name">websites</span></li>
<li class="plan-feature">200<span class="plan-feature-unit">GB</span> <span class="plan-feature-name">storage</span></li>
<li class="plan-feature">∞ <span class="plan-feature-name">users</span></li>
</ul>
<a href="#" class="plan-button">Choose Plan</a>
</div>
</div>CSS Code
body {
font: 13px/20px 'Helvetica Neue', Helvetica, Arial, sans-serif;
color: #404040;
background: #eeebe4;
}
.plans {
width: 836px;
margin: 50px auto;
overflow: hidden;
}
.plan {
float: left;
width: 150px;
margin: 20px 2px;
padding: 15px 25px;
text-align: center;
background: white;
background-clip: padding-box;
border: 2px solid #e5ded6;
border-color: rgba(black, .1);
border-radius: 5px;
}
.plan-title {
margin-bottom: 12px;
font-size: 24px;
color: #36bce6;
}
.plan-price {
margin-bottom: 20px;
line-height: 1;
font-size: 28px;
font-weight: bold;
color: #fd935a;
}
.plan-unit {
display: block;
margin-top: 5px;
font-size: 13px;
font-weight: normal;
color: #aaa;
}
.plan-features {
width: 120px;
margin: 20px auto 15px;
padding: 15px 0 0 15px;
border-top: 1px solid #e5ded6;
text-align: left;
}
.plan-feature {
line-height: 20px;
font-size: 24px;
font-weight: 500;
color: #333;
& + & { margin-top: 5px; }
}
.plan-feature-unit {
margin-left: 2px;
font-size: 16px;
}
.plan-feature-name {
font-size: 13px;
font-weight: normal;
color: #aaa;
}
.plan-button {
position: relative;
display: block;
line-height: 40px;
font-size: 16px;
font-weight: 500;
color: white;
text-align: center;
text-decoration: none;
text-shadow: 0 1px rgba(black, .1);
background: #fd935c;
border-bottom: 2px solid #cf7e3b;
border-color: rgba(black, .15);
border-radius: 4px;
&:active {
top: 2px;
margin-bottom: 2px;
border-bottom: 0;
}
}
.plan-highlight {
margin-top: 0;
margin-bottom: 0;
padding-left: 15px;
padding-right: 15px;
width: 170px;
border: 4px solid #37bbe6;
.plan-button {
font-size: 18px;
line-height: 49px;
background: #37bce5;
border-color: #3996b3;
border-color: rgba(black, .15);
}
}
.plan-recommended {
width: 160px;
margin: -15px auto 15px;
padding-bottom: 2px;
line-height: 22px;
font-size: 14px;
font-weight: bold;
color: white;
text-shadow: 0 1px rgba(black, .05);
background: #37bbe6;
border-radius: 0 0 4px 4px;
}Output
Example - 3
If you like the clean and minimalist design, then the below pricing table is for you:
HTML Code
<div class="container">
<div class="row flex-items-xs-middle flex-items-xs-center">
<!-- Table #1 -->
<div class="col-xs-12 col-lg-4">
<div class="card text-xs-center">
<div class="card-header">
<h3 class="display-2"><span class="currency">$</span>19<span class="period">/month</span></h3>
</div>
<div class="card-block">
<h4 class="card-title">
Basic Plan
</h4>
<ul class="list-group">
<li class="list-group-item">Ultimate Features</li>
<li class="list-group-item">Responsive Ready</li>
<li class="list-group-item">Visual Composer Included</li>
<li class="list-group-item">24/7 Support System</li>
</ul>
<a href="#" class="btn btn-gradient mt-2">Choose Plan</a>
</div>
</div>
</div>
<!-- Table #1 -->
<div class="col-xs-12 col-lg-4">
<div class="card text-xs-center">
<div class="card-header">
<h3 class="display-2"><span class="currency">$</span>29<span class="period">/month</span></h3>
</div>
<div class="card-block">
<h4 class="card-title">
Regular Plan
</h4>
<ul class="list-group">
<li class="list-group-item">Ultimate Features</li>
<li class="list-group-item">Responsive Ready</li>
<li class="list-group-item">Visual Composer Included</li>
<li class="list-group-item">24/7 Support System</li>
</ul>
<a href="#" class="btn btn-gradient mt-2">Choose Plan</a>
</div>
</div>
</div>
<!-- Table #1 -->
<div class="col-xs-12 col-lg-4">
<div class="card text-xs-center">
<div class="card-header">
<h3 class="display-2"><span class="currency">$</span>39<span class="period">/month</span></h3>
</div>
<div class="card-block">
<h4 class="card-title">
Premium Plan
</h4>
<ul class="list-group">
<li class="list-group-item">Ultimate Features</li>
<li class="list-group-item">Responsive Ready</li>
<li class="list-group-item">Visual Composer Included</li>
<li class="list-group-item">24/7 Support System</li>
</ul>
<a href="#" class="btn btn-gradient mt-2">Choose Plan</a>
</div>
</div>
</div>
</div>
</div>CSS Code
@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500,700");
body {
background-color: #f8f8f8;
font-family: "Roboto", sans-serif;
font-weight: 300;
}
.row {
min-height: 100vh;
}
.card {
border: 0;
border-radius: 0px;
-webkit-box-shadow: 0 3px 0px 0 rgba(0, 0, 0, 0.08);
box-shadow: 0 3px 0px 0 rgba(0, 0, 0, 0.08);
transition: all .3s ease-in-out;
padding: 2.25rem 0;
position: relative;
will-change: transform;
}
.card:after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 5px;
background-color: #57e2b2;
transition: 0.5s;
}
.card:hover {
transform: scale(1.05);
-webkit-box-shadow: 0 20px 35px 0 rgba(0, 0, 0, 0.08);
box-shadow: 0 20px 35px 0 rgba(0, 0, 0, 0.08);
}
.card:hover:after {
width: 100%;
}
.card .card-header {
background-color: white;
padding-left: 2rem;
border-bottom: 0px;
}
.card .card-title {
margin-bottom: 1rem;
}
.card .card-block {
padding-top: 0;
}
.card .list-group-item {
border: 0px;
padding: .25rem;
color: #808080;
font-weight: 300;
}
.display-2 {
font-size: 7rem;
letter-spacing: -.5rem;
}
.display-2 .currency {
font-size: 2.75rem;
position: relative;
font-weight: 400;
top: -45px;
letter-spacing: 0px;
}
.display-2 .period {
font-size: 1rem;
color: #b3b3b3;
letter-spacing: 0px;
}
.btn {
text-transform: uppercase;
font-size: .75rem;
font-weight: 500;
color: #a6a6a6;
border-radius: 0;
padding: .75rem 1.25rem;
letter-spacing: 1px;
}
.btn-gradient {
background-color: #f2f2f2;
transition: background .3s ease-in-out;
}
.btn-gradient:hover {
color: white;
background-color: #57e2b2;
}Output
Example - 4
Another beautiful pricing table example, which shows four hosting plans options.
HTML Code
<div class="snip1404">
<div class="plan">
<header>
<h4 class="plan-title">
Starter
</h4>
<div class="plan-cost"><span class="plan-price">$19</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>5GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>5 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>250Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h4 class="plan-title">
Basic
</h4>
<div class="plan-cost"><span class="plan-price">$29</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>10GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>10 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>500Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan featured">
<header>
<h4 class="plan-title">
Professional
</h4>
<div class="plan-cost"><span class="plan-price">$49</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>25GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>25 MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>2000Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
<div class="plan">
<header>
<h4 class="plan-title">
Ultra
</h4>
<div class="plan-cost"><span class="plan-price">$99</span><span class="plan-type">/month</span></div>
</header>
<ul class="plan-features">
<li><i class="ion-checkmark"> </i>100GB Linux Web Space</li>
<li><i class="ion-checkmark"> </i>Unlimited MySQL Databases</li>
<li><i class="ion-checkmark"> </i>Unlimited Email</li>
<li><i class="ion-checkmark"> </i>10000Gb mo Transfer</li>
<li><i class="ion-checkmark"> </i>24/7 Tech Support</li>
<li><i class="ion-checkmark"> </i>Daily Backups</li>
</ul>
<div class="plan-select"><a href="">Select Plan</a></div>
</div>
</div>CSS Code
@import url(https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css);
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600);
.snip1404 {
font-family: 'Source Sans Pro', Arial, sans-serif;
color: #ffffff;
text-align: left;
font-size: 16px;
width: 100%;
max-width: 1000px;
margin: 50px 10px;
}
.snip1404 img {
position: absolute;
left: 0;
top: 0;
height: 100%;
z-index: -1;
}
.snip1404 .plan {
margin: 0;
width: 25%;
position: relative;
float: left;
overflow: hidden;
border: 3px solid #442232;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
background-color: #5f3047;
}
.snip1404 .plan:hover i,
.snip1404 .plan.hover i {
-webkit-transform: scale(1.2);
transform: scale(1.2);
}
.snip1404 .plan:first-of-type {
border-radius: 8px 0 0 8px;
}
.snip1404 .plan:last-of-type {
border-radius: 0 8px 8px 0;
}
.snip1404 * {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
}
.snip1404 header {
background-color: #5f3047;
color: #ffffff;
}
.snip1404 .plan-title {
background-color: rgba(0, 0, 0, 0.5);
position: relative;
margin: 0;
padding: 20px 20px 0;
text-transform: uppercase;
letter-spacing: 4px;
}
.snip1404 .plan-title:after {
position: absolute;
content: '';
top: 100%;
left: 0;
width: 0;
height: 0;
border-style: solid;
border-width: 40px 300px 0 0;
border-color: rgba(0, 0, 0, 0.5) transparent transparent;
}
.snip1404 .plan-cost {
padding: 40px 20px 10px;
text-align: right;
}
.snip1404 .plan-price {
font-weight: 600;
font-size: 3em;
}
.snip1404 .plan-type {
opacity: 0.8;
font-size: 0.7em;
text-transform: uppercase;
}
.snip1404 .plan-features {
padding: 0 0 20px;
margin: 0;
list-style: outside none none;
}
.snip1404 .plan-features li {
padding: 8px 5%;
}
.snip1404 .plan-features i {
margin-right: 8px;
color: rgba(0, 0, 0, 0.5);
}
.snip1404 .plan-select {
border-top: 1px solid rgba(0, 0, 0, 0.2);
padding: 20px;
text-align: center;
}
.snip1404 .plan-select a {
background-color: #442232;
color: #ffffff;
text-decoration: none;
padding: 12px 20px;
font-size: 0.75em;
font-weight: 600;
border-radius: 20px;
text-transform: uppercase;
letter-spacing: 4px;
display: inline-block;
}
.snip1404 .plan-select a:hover {
background-color: #552a3f;
}
.snip1404 .featured {
margin-top: -10px;
border-color: #331926;
box-shadow: 0 0 25px rgba(0, 0, 0, 0.4);
z-index: 1;
border-radius: 8px;
}
.snip1404 .featured .plan-select {
padding: 30px 20px;
}
@media only screen and (max-width: 767px) {
.snip1404 .plan {
width: 50%;
}
.snip1404 .plan-title,
.snip1404 .plan-select a {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.snip1404 .plan-select,
.snip1404 .featured .plan-select {
padding: 20px;
}
.snip1404 .featured {
margin-top: 0;
}
}
@media only screen and (max-width: 440px) {
.snip1404 .plan {
width: 100%;
}
}Output
