CodePen Embed - Pricing Table

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<body>
  <div class="intro">
  <h1> Follow me on <a href="https://twitter.com/BenSassiAladin" target="_blank"><img src="http://vignette1.wikia.nocookie.net/dusktilldawn/images/1/1a/Twitter_logo.png/revision/latest?cb=20140507210836">Twitter</a> or <a href="https://tn.linkedin.com/in/aladinbensassi" target="_blank"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/LinkedIn_logo_initials.png/768px-LinkedIn_logo_initials.png">LinkedIn</a> for constant updates </h1>
</div>
  <h1 class="title"> Pricing table </h1>
  <div id="container">
    <div class="pricetab">
      <h1> FREE </h1>
      <div class="price"> 
        <h2> Free </h2> 
      </div>
      <div class="infos">
        <h3> Premium Profile Listing </h3>
        <h3> Unlimited File Access </h3>
        <h3> Free Appointments </h3>
        <h3> 0 Bonus Points every month</h3>
        <h3> Customizable Profile Page</h3>
        <h3> 1 month support</h3>
      </div>
      <div class="pricefooter">
        <div class="button">
          <a href="#"> Get started </a>
        </div>
      </div>
    </div>
    <div class="pricetab">
      <h1> STARTER </h1>
      <div class="price"> 
        <h2> 10$ </h2> 
      </div>
      <div class="infos">
        <h3> Premium Profile Listing </h3>
        <h3> Unlimited File Access </h3>
        <h3> Free Appointments </h3>
        <h3> 5 Bonus Points every month</h3>
        <h3> Customizable Profile Page</h3>
        <h3> 2 months support</h3>
      </div>
      <div class="pricefooter">
        <div class="button">
          <a href="#"> Get started </a>
        </div>
      </div>
    </div>
    <div class="pricetabmid">
      <h1> BASIC </h1>
      <div class="pricemid"> 
        <h2> 30$ </h2> 
      </div>
      <div class="infos">
        <h3> Premium Profile Listing </h3>
        <h3> Unlimited File Access </h3>
        <h3> Free Appointments </h3>
        <h3> 20 Bonus Points every month</h3>
        <h3> Customizable Profile Page</h3>
        <h3> 6 months support</h3>
      </div>
      <div class="pricefootermid">
        <div class="buttonmid">
          <a href="#"> Get started </a>
        </div>
      </div>
    </div>
    <div class="pricetab">
      <h1> PREMIUM </h1>
      <div class="price"> 
        <h2> 50$ </h2> 
      </div>
      <div class="infos">
        <h3> Premium Profile Listing </h3>
        <h3> Unlimited File Access </h3>
        <h3> Free Appointments </h3>
        <h3> 30 Bonus Points every month</h3>
        <h3> Customizable Profile Page</h3>
        <h3> 1 year support</h3>
      </div>
      <div class="pricefooter">
        <div class="button">
          <a href="#"> Get started </a>
        </div>
      </div>
    </div>
    <div class="pricetab">
      <h1> VIP </h1>
      <div class="price"> 
        <h2> 100$ </h2> 
      </div>
      <div class="infos">
        <h3> Premium Profile Listing </h3>
        <h3> Unlimited File Access </h3>
        <h3> Free Appointments </h3>
        <h3> 50 Bonus Points every month</h3>
        <h3> Customizable Profile Page</h3>
        <h3> 2 years support</h3>
      </div>
      <div class="pricefooter">
        <div class="button">
          <a href="#"> Get started </a>
        </div>
      </div>
    </div>
  </div>
</body>

/* General */
h1,h2,h3,h4,h5,h6{cursor:pointer;}

/* Intro */

.intro{
  width:100%;
  height:30px;
}
.intro h1{
  font-family:'Oswald', sans-serif;
  letter-spacing:2px;
  font-weight:normal;
  font-size:14px;
  color:#fff;
  text-align:center;
  margin-top:10px;
}
.intro a{
  color:#fff;
  font-weight:bold;
  letter-spacing:0;
}
.intro img{
  width:20px;
  heght:20px;
  margin-left:5px;
  margin-right:5px;
  position:relative;
  top:5px;
}

/* Body */
body{
  font-family: arial, verdana;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  background:#e74c3c;
}
#container{
  width:80%;
  min-width:1100px;
  min-height:500px;
  margin:3% auto 0 auto;
}
.pricetab{
  width:20%;
  min-width:220px;
  background: linear-gradient(#555, #444);
  float:left;
  margin-top:.2%;
  box-shadow:1px 1px 5px rgba(0, 0, 0, .5);
}
.pricetabmid{
  width:20%;
  min-width:220px;
  background: linear-gradient( #F9B84A, #ff9547);
  float:left;
  box-shadow:0 0  15px rgba(0, 0, 0, 1);
  position:relative;
}
.priceheader{
  width:100%;
  height:60px;
  background-image: -o-linear-gradient(bottom ,#444 , #555); 
  background-image: -webkit-linear-gradient(bottom ,#444 , #555);
  background-image: -o-linear-gradient(bottom ,#444 , #555); 
  background-image: -moz-linear-gradient(bottom ,#444 , #555); 
  background-image: linear-gradient(to bottom , #444 , #555); 
  box-shadow:0 2px 12px rgba(0, 0, 0, .5);
}
.price{
  width:120px;
  height:120px;
  border-radius:50%;
  border:1px solid #ff9547;
  margin:5% auto 0 auto;
  text-align:center;
}
.pricemid{
  width:120px;
  height:120px;
  border-radius:50%;
  border:1px solid #444;
  margin:5% auto 0 auto;
  text-align:center;
}
.infos{
  margin-top:10%;
}
.pricefooter{
  width:100%;
  height:50px;
  margin-top:10%;
  background:#333; 
}
.pricefootermid{
  width:100%;
  height:50px;
  margin-top:10%;
  background:#fe9040; 
}
.author{
  width:10%;
  min-width:150px;
  height:40px;
  background:rgba(0, 0, 0, .5);
  overflow:hidden;
  clear:both;
  float:right;
  position:fixed;
  bottom:0;
  right:0;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.author:hover{
  background:rgba(0, 0, 0, .8);
}
.author:hover .credit{
  margin-left:10%;
}
/* Typo */ 
.title{
  font-family:arial;
  color:#fff;
  font-size:38px;
  font-weight:normal;
  text-align:center;
  text-transform:uppercase;
  text-shadow: 1px 2px 5px rgba(0,0,5,0.2);
  margin:auto;
}
h1{
  font-size:18px;
  color:#fff;
  text-align:center;
  line-height:3;
}
h2{
  text-align:center;
  font-size:42px;
  color:#fff;
}
sub{
  text-transform: uppercase;
  font-size: 14px;
  font-weight: bold;
}
h3{
  font-size:14px;
  font-weight:normal;
  text-align:center;
  color:#fff;
  line-height:1;
}
.button a{
  color:#fff;
  font-size:14px;
  font-weight:bold;
  text-decoration:none;
  line-height:3;
}
.buttonmid a{
  color:#fff;
  font-size:14px;
  font-weight:bold;
  text-decoration:none;
  line-height:3;
}
.credit{
  font-family:arial;
  color:#fff;
  font-size:16px;
  font-weight:normal;
  text-align:left;
  text-shadow: 1px 2px 5px rgba(0,0,5,0.2);
  margin-left:5%;
  line-height:1.3;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
/* Buttons */ 
.button{
  width:50%;
  height:50px;
  margin:0 auto 0 auto;
  background:#ff9547;
  text-align:center; 
  cursor:pointer;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.button:hover{
  width:60%;
}
.buttonmid{
  width:50%;
  height:50px;
  margin:0 auto 0 auto;
  background:#333;
  text-align:center; 
  cursor:pointer;
  -moz-transition: all 0.4s ease-in-out;
  -o-transition: all 0.4s ease-in-out;
  -ms-transition: all 0.4s ease-in-out;
  transition: all 0.4s ease-in-out;
}
.buttonmid:hover{
  width:60%;
}

Run Pen

This Pen is owned by Aladin Bensassi on CodePen.

See more by @aladinbs on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.