Grid

by Kirubel Girma

HTML

<div class="value grid">
  <h1 class="xcent xhead"><span class="xpers">Kirubel's</span>BUILDS</h1>
</div>
<div class="value2 grid"></div>

CSS

* {
  font-family: arial;
  margin: 0em;
}

.xcent {
  position: absolute;
  margin: auto;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  color: white;
}

.xhead {
  height: 3.7em;
  width: 3.7em;
  font-size: 5.5em;
}

.xpers {
  font-size: .4em;
  display: block;
}

body {
  position: absolute;
  background: cornflowerblue;
  height: 100%;
  width: 100%;
}

.grid {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  border-right: 1px solid rgba(255, 255, 255, 0.2);
  background: linear-gradient(0deg, rgba(255, 255, 255, 0.2) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.2) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(0deg, rgba(255, 255, 255, 0.1) 1px, rgba(0, 0, 0, 0) 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, rgba(0, 0, 0, 0) 1px);
  background-position: 0px -1px;
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
}

.value {
  width: 100%;
  height: 100%;
}

.value2 {
  width: 100%;
  height: 100%;
  background: black;
}