Garden: shed, bins, and paving slabs

by Laura Kishimoto

HTML

<div class="space">
  <div class="stone__area">
    <div class="stone"></div>
    <div class="stone"></div>
    <div class="stone"></div>
    <div class="stone"></div>
    <div class="stone"></div>
    <div class="stone"></div>
    <div class="stone"></div>
    <div class="stone"></div>
    <div class="stone"></div>
    <div class="stone"></div>
    <div class="stone stone--edge"></div>
    <div class="stone stone--edge"></div>
    <div class="stone stone--edge"></div>
    <div class="stone stone--edge"></div>
    <div class="stone stone--edge"></div>
  </div>
  <div class="shed"></div>
  <div class="bin bin--brown turned"></div>
  <div class="bin bin--blue bin--small"></div>
  <div class="bin bin--black bin--small"></div>
</div>

SCSS

$slab-size: 60em;

html {
  font-size: 2px;
}

.space {
  position: relative;
  width: 303em;
  height: 144em;
  background-color: darkgrey;
  padding: 0.2em;
}

.stone {
  display: inline-block;
  margin: 0.2em;
  background-color: lightgrey;
  height: $slab-size;
  width: $slab-size;
  opacity: 0.5;
  
  &--edge {
    height: 5em;
  }
  
  &__area {
    position: absolute;
    top: 0;
    margin-top: 6em;
  }
}
  
.shed {
  width: 190em;
  height: 121em;
  margin: 2em;
  background-color: #F5B041;
  opacity: 0.6;
  float: right;
}

.bin {
  width: 55.7em;
  height: 76em;
  background-color: #333;
  display: inline-block;
  opacity: 0.4;
  margin: 1em;
  
  &--small {
    width: 49em;
    height: 67em;
  }
  
  &--blue {
    background-color: blue;
  }
  
  &--brown {
    background-color: saddlebrown;
    height: 55.7em;
    width: 76em;
  }

  &--black {
    order: 100;
/*     height: 49em;
    width: 67em; */
  }
}