<table class="table table-hover table-bordered" style="text-align:center;padding-left:200px; padding-right:200px;">
<thead>
<tr class="active">
<th style="background:#fff"><center></center></th>
<th><center><h3>Basic</h3><p class="text-muted text-sm">Ideal for small operations.</p></center></th>
<th><center><h3>Plus</h3><p class="text-muted text-sm">Perfect for larger operations.</p></center></th>
<th><center><h3>Super</h3><p class="text-muted text-sm">Perfect for those who want software.</p></center></th>
<th><center><h3>Platinum</h3><p class="text-muted text-sm">The best fit for larger operations.</p></center></th>
</tr>
</thead>
<tbody>
<tr>
<td><br />Price</td>
<td><h3 class="panel-title price">$399</h3></td>
<td><h3 class="panel-title price">$699</h3></td>
<td><h3 class="panel-title price">$799</h3></td>
<td><h3 class="panel-title price">$1299</h3></td>
</tr>
<tr>
<td colspan="5" align="left" style="padding-left:20px;" class="active"><b>Website Features</b></td>
</tr>
<tr>
<td>Responsive design</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>Scales to mobile</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>Contact Form</td>
<td>-</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>Social Media Integration</td>
<td>-</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>Custom Pages</td>
<td>3</td>
<td>10</td>
<td>5</td>
<td>13</td>
</tr>
<tr>
<td>Storage</td>
<td>2GB</td>
<td>10GB</td>
<td>10GB</td>
<td>50GB</td>
</tr>
<tr>
<td colspan="5" align="left" style="padding-left:20px;" class="active"><b>Features</b></td>
</tr>
<tr>
<td>Powerful Analytics</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>24/7 Support</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>Free Domain Name</td>
<td>-</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td>-</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>Free SSL Certificate</td>
<td>-</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td>-</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>SEO Setup</td>
<td>Basic</td>
<td>Advanced</td>
<td>Basic</td>
<td>Advanced</td>
</tr>
<tr>
<td>Free Hosting</td>
<td>6 Months</td>
<td>1 Year</td>
<td>6 Months</td>
<td>1 Year</td>
</tr>
<tr>
<td>Social Media Management</td>
<td>+$60 p/m</td>
<td>+$60 p/m</td>
<td>+$60 p/m</td>
<td>+$60 p/m</td>
</tr>
<tr>
<td>Free Updates</td>
<td>-</td>
<td>For 3 Months</td>
<td>-</td>
<td>For 3 Months</td>
</tr>
<tr>
<td colspan="5" align="left" style="padding-left:20px;" class="active"><b>Integration</b></td>
</tr>
<tr>
<td>Wordpress</td>
<td>+$250</td>
<td>+$250</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>Woocommerce</td>
<td>+$250</td>
<td>+$250</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>Joomla</td>
<td>+$250</td>
<td>+$250</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>Drupal</td>
<td>+$250</td>
<td>+$250</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>Ghost</td>
<td>+$250</td>
<td>+$250</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>Shopify</td>
<td>+$250</td>
<td>+$250</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>Opencart</td>
<td>+$350</td>
<td>+$350</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>Magento</td>
<td>+$350</td>
<td>+$350</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>Prestashop</td>
<td>+$350</td>
<td>+$350</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>phpBB</td>
<td>+$250</td>
<td>+$250</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>vBulletin</td>
<td>+$250</td>
<td>+$250</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr>
<td>Invision Power</td>
<td>+$250</td>
<td>+$250</td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
<td><i style="color:limegreen" class="fa fa-check fa-lg"></i></td>
</tr>
<tr><td></td>
<td><a class="btn btn-info" style="margin-top:10px; margin-bottom:10px">Order Now</a></td>
<td><a class="btn btn-info" style="margin-top:10px; margin-bottom:10px">Order Now</a></td>
<td><a class="btn btn-info" style="margin-top:10px; margin-bottom:10px">Order Now</a></td>
<td><a class="btn btn-info" style="margin-top:10px; margin-bottom:10px">Order Now</a></td></tr>
</tbody>
</table>
table {
table-layout: fixed;
word-wrap: break-word;
margin-top:auto;
margin-bottom:auto;
}
.text-sm {
font-size: 12px;
}
.price {
font-size: 3em;
}
// Created by Owen
// NO JAVASCRIPT!
This Pen doesn't use any external JavaScript resources.