Advertisement
Guest User

Help | HTML

a guest
Aug 20th, 2017
107
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.54 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  6.     <meta name="description" content="">
  7.     <meta name="author" content="">
  8.     <link href="css/boostrap.css" rel="stylesheet">
  9.     <link href="css/styles.css" rel="stylesheet">
  10.  
  11.     <title>Title &nspb GG</title>
  12.  
  13.  </head>
  14.  
  15.  
  16. <nav class="navbar navbar-expand navbar-dark bg-dark">
  17.  <a class="navbar-brand" href="#"><img src="img/logo.png" width=35rem></a>
  18.  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="true" aria-label="Toggle navigation">
  19.    <span class="navbar-toggler-icon"></span>
  20.  </button>
  21.  <div class="collapse navbar-collapse" id="navbarsExample02">
  22.    <ul class="navbar-nav mr-auto">
  23.      <li class="nav-item active">
  24.        <a class="nav-link" href="#">Overview <span class="sr-only">(current)</span></a>
  25.      </li>
  26.      <li class="nav-item">
  27.        <a class="nav-link" href="#">Servers</a>
  28.      </li>
  29.      <li class="nav-item">
  30.        <a class="nav-link" href="#">Editor</a>
  31.      </li>
  32.    </ul>
  33.  </div>
  34. </nav>
  35.  
  36. <h1> System Overview </h1>
  37. <p> This page shows the overall infrastructure status </p>
  38.  
  39. <div class="container">
  40.  <div class="row">
  41.    <div class="col-md-4">
  42.  
  43. <!-- Windows Side -->
  44. <h4><img src="img/windows.png" width=40rem>   Windows</h4>
  45.  
  46. <table class="table table-bordered">
  47.  <thead>
  48.    <tr>
  49.      <th>Server</th>
  50.      <th>Status</th>
  51.    </tr>
  52.  </thead>
  53.  <tbody>
  54.    <tr>
  55.      <td>dc1.example.com</td>
  56.      <td class="status-ok">OK</td>
  57.    </tr>
  58.    <tr>
  59.      <td>dc2.example.com</td>
  60.      <td class="status-ok">OK</td>
  61.    </tr>
  62.    <tr>
  63.      <td>fs1.example.com</td>
  64.      <td class="status-ok">OK</td>
  65.    </tr>
  66.    <tr>
  67.      <td>fs2.example.com</td>
  68.      <td class="status-ok">OK</td>
  69.    </tr>
  70.    <tr>
  71.      <td>ex1.example.com</td>
  72.      <td class="status-ok">OK</td>
  73.    </tr>
  74.    <tr>
  75.      <td>sq1.example.com</td>
  76.      <td class="status-ok">OK</td>
  77.    </tr>
  78.  </tbody>
  79. </table>
  80.  
  81. </div>
  82.  
  83.  
  84. <!-- Linux Side -->
  85. <Div class="col-md-4">
  86. <h4><img src="img/linux.png" width=45rem> Linux</h4>
  87.  
  88.  <table class="table table-bordered">
  89.    <thead>
  90.      <tr>
  91.        <th>Server</th>
  92.        <th>Status</th>
  93.      </tr>
  94.    </thead>
  95.    <tbody>
  96.      <tr>
  97.        <td>web1.example.com</td>
  98.        <td class="status-ok">OK</td>
  99.      </tr>
  100.      <tr>
  101.        <td>web2.example.com</td>
  102.        <td class="status-degraded">Degraded </td>
  103.      </tr>
  104.      <tr>
  105.        <td>cs1.example.com</td>
  106.        <td class="status-offline">Offline</td>
  107.      </tr>
  108.      <tr>
  109.        <td>cs2.example.com</td>
  110.        <td class="status-ok">OK</td>
  111.      </tr>
  112.    </tbody>
  113.  </table>
  114. </div>
  115.  
  116. <!-- Hyper V side -->
  117. <Div class="col-md-4">
  118. <h4><img src="img/hyper-v.png" width=45rem> Hyper V's</h4>
  119.  
  120.  <table class="table table-bordered">
  121.    <thead>
  122.      <tr>
  123.        <th>Server</th>
  124.        <th>Status</th>
  125.      </tr>
  126.    </thead>
  127.    <tbody>
  128.      <tr>
  129.        <td>hv1.example.com</td>
  130.        <td class="status-ok">OK</td>
  131.      </tr>
  132.      <tr>
  133.        <td>hv2.example.com</td>
  134.        <td class="status-degraded">Degraded </td>
  135.      </tr>
  136.      <tr>
  137.        <td>hv4.example.com</td>
  138.        <td class="status-offline">Offline</td>
  139.      </tr>
  140.      <tr>
  141.        <td>hv5.example.com</td>
  142.        <td class="status-ok">OK</td>
  143.      </tr>
  144.    </tbody>
  145.  </table>
  146. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement