AUG logo

Just messsing around

by Augustus Yuan

HTML

<div class="container">
  <div class="logo">Aug</div>
</div>
<br />
<div class="black container">
  <div class="logo inverse">Aug</div>
</div>

CSS

.container {
  width: 100%;
  display: inline-block;
  padding: 10px;
  
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  
  padding: 100px 0px;
}

.logo {
  display: inline-block;
  padding: 5px;
  text-transform: uppercase;
  font-family: Helvetica, Sans-serif;
  border: 4px solid black;
  font-size: 50px;
  font-weight: 700;
  letter-spacing: 4px;
  text-indent: 4px;
  text-align: center;
}

.black {
  background: black;
}

.logo.inverse {
  color: white;
  border-color: white;
}