Garden: shed furniture

by Laura Kishimoto

HTML

<div class="shed">
  <div class="hyllis"></div>
  <div class="hyllis"></div>
  <div class="bror"></div>
</div>

SCSS

html {
  font-size: 3px;
}
  
.shed {
  position: relative;
  margin: 4rem;
  width: 179em;
  height: 110.2em;
  margin: 50px;
  outline: 1px solid #F5B041;
  z-index: 1;
  
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  
  &::before {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 190.2em;
    height: 121.4em;
    background-color: #F5B041;
    z-index: -1;
    transform: translate(-50%, -50%);
    opacity: 0.4;
  }
  
  > * {
    margin: 1em 0.5em;
    opacity: 0.4;
    flex-grow: 0;
    flex-shrink: 0;
  }
}

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

.bror {
  width: 54em;
  height: 110em;
  background-color: black;
}

.hyllis {
  height: 27em;
  width: 60em;
  background-color: #999;
}
  
.turned {
  transform-origin: top right;
  transform: rotate(-90deg) translateY(-100%);
}