transparent divs

flexy grid

by trentHarlem

HTML

<div class="container">

  <div class="box one">
    ¡ACHTUNG!
  </div>

  <div class="box two">
    ¡ACHTUNG!
  </div>

  <div class="box three">
Boxy
  </div>

  <div class="box four">
  Monsieur
  </div>

  <div class="box five">
Boxington
  </div>

  <div class="box six">

  </div>

  <div class="box seven">

  </div>

  <div class="box eight">

  </div>

</div>

CSS

body,
html {
  height: 100%;
  background-image: url(https://picsum.photos/480/1200);
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  grid-gap: 15px;
}

.box {
  font: 28px system-ui;
  height: 150px;
  width: auto;
  padding: 1em;
  text-align: center;
}

.one {
  background: rgba(0, 100, 255, 0.5);
  border: 1px solid rgb(0, 100, 255);
}

.two {
  background: #FFA50099;
  border: 1px solid #FFA500; 
}

.three {
  background: rgba(255, 0, 100, 0.4);
  border: 1px solid rgba(255, 0, 100, 0.6);
}

.four {
  background: rgba(100, 255, 0, 0.5);
  border: 1px solid rgb(100, 255, 0);
}

.five {
  background-color: #fffa;
  border: 1px solid #fff;
}
.six {
  background-color: #800080aa;
  border: 1px solid #800080;
}
.seven {
  background-color: #1E90FFaa;
  border: 1px solid #1E90FF;
}
.eight {
  background-color: #FFFF0099;
  border: 1px solid #FFFF00;
}