<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="jumbotron"> <div class="container"> <h1 class="text-center">Server Status Vanix Network</h1> </div> </div> <br> <div class="container"> <div class="status-critical"> <div class="panel-heading"> <div class="panel-title"> <h4> i nostri Data-Center sono attualmente in situazione <b>critica</b>. </h4> </div> </div> </div> <br> <div class="row clearfix"> <div class="col-md-12 column"> <div class="list-group"> <div class="list-group-item"> <h4 class="list-group-item-heading op"> Network Proxy <span class="pull-right">Offline</span> </h4> </div> <div class="list-group-item"> <h4 class="list-group-item-heading op"> Hub <span class="pull-right">... connection refused.</span> </h4> </div> <div class="list-group-item"> <h4 class="list-group-item-heading op"> KitPvP <span class="pull-right">.... connection refused</span> </h4> </div> <div class="list-group-item"> <h4 class="list-group-item-heading op"> Teamspeak <span class="pull-right">... timed out (1200ms)</span> </h4> </div> <div class="list-group-item"> <h4 class="list-group-item-heading op"> Sito <span class="pull-right">... timed out (10001ms)</span> </h4> </div> </div> </div> </div> </div> </div> </div> <br><br> <!-- removable spacing, just put it there for the sake of making it look good -->

@import url(https://fonts.googleapis.com/css?family=Roboto:300); @import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css); .op { margin-top: 7px; } body { font-family: 'Roboto', sans-serif; } .status-perfect { background-color: #33CC33; height: 100%; width: 100%; padding-top: 0.5em; padding-bottom: 0.5em; color: white; border-radius: 4px; font-size: 18px; } .status-reduced { background-color: #33CCFF; height: 100%; width: 100%; padding-top: 0.5em; padding-bottom: 0.5em; color: white; border-radius: 4px; font-size: 18px; } .status-critical { background-color: #FF0000; height: 100%; width: 100%; padding-top: 0.5em; padding-bottom: 0.5em; color: white; border-radius: 4px; font-size: 18px; }