Code

How To Create a Responsive Pricing Table

Step 1 Add HTML: <div class=”columns”>  <ul class=”price”>    <li class=”header”>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 class=”grey”><a href=”#” class=”button”>Sign Up</a></li>  </ul></div> Step 2 Add CSS: * {  box-sizing: border-box;} /* Create three columns of equal width */.columns {  float: left;  width: 33.3%;  padding: 8px;} /* Style the list */.price {  list-style-type: none;  border: 1px solid #eee;  margin: 0;  padding: 0;  -webkit-transition: 0.3s;  transition: 0.3s;} /* Add shadows on hover */.price:hover {  box-shadow: 0 8px 12px 0 rgba(0,0,0,0.2)} /* Pricing header */.price .header { …