Responsive Pricing Table

Written by Mick in Tutorials on 13 Sep 2020


smfhtmlcssresponsive
Responsive Pricing Table
Simplistic HTML and CSS pricing table that can be used with SMF's paid subscriptions. Every SMF developer is well aware of the importance of showcasing pricing information on their forum in an easy to read and stylish manner. Not only can a well thought out pricing table showcase all available buying options, but they can also be designed to encourage and direct your potential buyers to a particular choice.


Create and HTML blank page using your favorite portal or simply use top or bottom blocks


The CSS:
* {
  box-sizing: border-box;
}
.price-columns {
  float: left;
  width: 33.3%;
  padding: 8px;
}
.price {
  list-style-type: none;
  border: 1px solid #eee;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.price:hover {
  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)
}
.price .price-header {
  background-color: #111;
  color: #fff;
  font-size: 25px;
}
.price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center;
}
.price .grey {
  background-color: #eee;
  font-size: 20px;
}
.price-button {
  border: none;
  color: #fff !important;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 18px;
}
@media only screen and (max-width: 600px) {
  .price-columns {
    width: 100%;
  }
}

The HTML:
<h2 style="text-align:center">Responsive Pricing Tables</h2>
<p style="text-align:center">Resize the browser window to see the effect.</p>

<div class="price-columns">
  <ul class="price">
    <li class="price-header" style="background-color: #636e72">Basic</li>
    <li class="grey">$ 9.99 / year</li>
    <li>10GB Storage</li>
    <li>10 Emails</li>
    <li>10 Domains</li>
    <li>1GB Bandwidth</li>
    <li>24/7 Live Support (not gonna happen) <span style="color: #e74c3c;"><i class="fas fa-times"></i></span></li>
    <li class="grey"><a href="#" class="price-button" style="background-color: #636e72">Sign Up</a></li>
  </ul>
</div>
<div class="price-columns">
  <ul class="price">
    <li class="price-header" style="background-color: #00b894">Pro</li>
    <li class="grey">$ 24.99 / year</li>
    <li>25GB Storage</li>
    <li>25 Emails</li>
    <li>25 Domains</li>
    <li>2GB Bandwidth</li>
    <li>24/7 Live Support <span style="color: #27ae60;"><i class="fas fa-check"></i></span></li>
    <li class="grey"><a href="#" class="price-button" style="background-color: #00b894">Sign Up</a></li>
  </ul>
</div>
<div class="price-columns">
  <ul class="price">
    <li class="price-header" style="background-color: #ff7675">Premium</li>
    <li class="grey">$ 49.99 / year</li>
    <li>50GB Storage</li>
    <li>50 Emails</li>
    <li>50 Domains</li>
    <li>5GB Bandwidth</li>
    <li>24/7 Live Support <span style="color: #27ae60;"><i class="fas fa-check"></i></span></li>
    <li class="grey"><a href="#" class="price-button" style="background-color: #ff7675">Sign Up</a></li>
  </ul>
</div>

Reference: CodePen Search



Mick is an American theme designer for Simple Machines Forum software currently living in South Florida, USA. He runs idesignSMF and started tinkering with SMF in 2006 where he created several SMF forums of his own before he founded idesignSMF in 2009 to which he is dedicated full time.
    
0 Comments

Get more stuff like this

Subscribe to our mailing list and get interesting content and updates.