Edit on
<div class="box box-red">Box 1</div>
<div class="box box-gray">Box 2</div>
<div class="box box-blue">Box 3</div>
<div class="box box-darkblue">Box 4</div>
$blue: #3498DB;
$red: #C0392B;
$gray: #555555;
$darkblue: #34495E;
$black: #222;


body {background:$gray}

.box {
  width: 25%;
  height: 20rem;
  display:inline-block;
  vertical-align: top;
  margin-right: -4px;
  text-align: center;
  color: white;
  font-size: 16px;
  line-height: 20em;
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 6px;
}

.box:nth-child(1){
  background: lighten($red,10%);
}

.box:nth-child(2){
  background: darken($red,10%);
}

.box:nth-child(3){
  background: $red;
}

.box:nth-child(4){
  background: rgba($red,.3);
}
View Compiled
Rerun