pricing table panel
Bootstrap
by marusti
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container-fluid">
<div class="row">
<div class="col-md-4 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-heading text-center">
<h3 class="panel-title">
Basic <br>
<small>€120 / Jahr</small>
</h3>
</div>
<div class="panel-body">
<ul class="fa-ul">
<li><i class="fa-li fa fa-check green" aria-hidden="true"></i> Backup der Webseite (inklusive Datenbank)
</li>
<li><i class="fa-li fa fa-check green" aria-hidden="true"></i> Installation der Joomla! Updates bei Erscheinen
</li>
<li><i class="fa-li fa fa-times red" aria-hidden="true"></i> Monatliche Aktualisierung von Erweiterungen
</li>
<li><i class="fa-li fa fa-check green" aria-hidden="true"></i> Funktions-Check der Website nach jedem Update
</li>
</ul>
</div>
<div class="panel-footer text-center">
Order Now
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-primary">
<div class="panel-heading text-center">
<h3 class="panel-title">
Plus<br>
<small>€240 / Jahr</small>
</h3>
</div>
<div class="panel-body">
<ul class="fa-ul">
<li><i class="fa-li fa fa-check green" aria-hidden="true"></i> Backup der Webseite (inklusive Datenbank)
</li>
<li><i class="fa-li fa fa-check green" aria-hidden="true"></i> Installation der Joomla! Updates bei Erscheinen
</li>
<li><i class="fa-li fa...
CSS
.green {
color: lightgreen
}
.red {
color: red
}