Responsive Pricing Table

Started by Mick, Sep 13, 2020

"Responsive Pricing Table"
Simplistic HTML & 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