Status Display Board

index.html

<ul>
	<li>
		<span>Rabbit Dispenser</span>
		<span class="status green">Operational</span>
	</li>
	<li>
		<span>Gnome Garden</span>
		<span class="status red">Major Fault</span>
	</li>
	<li>
		<span>Cheese Filter</span>
		<span class="status orange">Partial Outage</span>
	</li>
	<li>
		<span>Toast Logistics</span>
		<span class="status yellow">Degraded Service</span>
	</li>
	<li>
		<span>Nuclear Reactor</span>
		<span class="status blue">Action Required</span>
	</li>
</ul>

Status-Display-Board.markdown

Status Display Board

A simple status display board for a project I'm working on.

Inspired by StatusPage.io and BitBucket's status page.

A Pen by mattfinch on CodePen.

License.

style.css

body{
  background: rgb(240,240,240);
  font-family: sans-serif;
  margin-top: 5%;
}
ul{
  width: 600px;
  margin: 0 auto;
  background: rgb(255,255,255);
  border: 1px solid rgb(220,220,220);
  border-radius: 5px;
  list-style: none;
  padding: 0px;
  line-height: 50px;
  cursor: default;
}
ul li {
  height: 50px;
  border-bottom: 1px solid rgb(220,220,220);
  text-indent: 15px;
}
ul li:last-child{
  border: none;
}
.status {
  display: inline-block;
  float: right;
  height: 1em;
  line-height: 1em;
  margin: 17px 15px;
  text-indent: 0;

  font-family:  'Monaco','Consolas', 'Courier', monospace;
  font-weight: bold;
  font-size: 0.750em;
  text-transform: uppercase;
  border: 1px solid;
  border-radius: 3px;
  padding: 1px 2px;
}
.blue {
  color: #2791d9;
  border-color: #2791d9;
}
.green {
  color: #2ecc71;
  border-color: #2ecc71;
}
.yellow {
  color: #f1c40f;
  border-color: #f1c40f;
}
.orange {
  color: #e67e22;
  border-color: #e67e22;
}
.red{
  color: #e74c3c;
  border-color: #e74c3c;
}