<h2>Colors</h2>
<section class="color-list"> 
  <div class="color-block">
    <div class="colors">
      <span data-hex="f59120"></span>
      <span data-hex="e67c05"></span>
    </div>
    <h3>Tree Poppy</h3>
    <ul>
      <li>f59120</li>
      <li>e67c05</li>
    </ul>
  </div>
  <div class="color-block">
    <div class="colors">
      <span data-hex="94c23d"></span>
      <span data-hex="81b226"></span>
    </div>
    <h3>Sushi</h3>
    <ul>
      <li>94c23d</li>
      <li>81b226</li>
    </ul>
  </div>
  <div class="color-block">
    <div class="colors">
      <span data-hex="69b5e1"></span>
      <span data-hex="4c9dcb"></span>
    </div>
    <h3>Viking</h3>
    <ul>
      <li>69b5e1</li>
      <li>4c9dcb</li>
    </ul>
  </div>
  <div class="color-block">
    <div class="colors">
      <span data-hex="f1553d"></span>
      <span data-hex="df3921"></span>
    </div>
    <h3>Flamingo</h3>
    <ul>
      <li>f1553d</li>
      <li>df3921</li>
    </ul>
  </div>
  <div class="color-block">
    <div class="colors">
      <span data-hex="e1a2c9"></span>
      <span data-hex="c583ac"></span>
    </div>
    <h3>Light Orchid</h3>
    <ul>
      <li>e1a2c9</li>
      <li>c583ac</li>
    </ul>
  </div>
  <div class="color-block">
    <div class="colors">
      <span data-hex="9078b6"></span>
      <span data-hex="795fa1"></span>
    </div>
    <h3>Purple Mountain's Majesty</h3>
    <ul>
      <li>9078b6</li>
      <li>795fa1</li>
    </ul>
  </div>
 </section>

body {
  background-color: #e3dedb;
  font-family: 'Open Sans', sans-serif;
  margin: 1rem 1.4rem;
  max-width: 800px;
  transition: margin 120ms linear;
}

h2 {
  color: #5b5351;
  font-size: 26pt;
  font-weight: 300;
  margin: 0;
  padding-bottom: 4pt;
  border-bottom: 1px solid #7f7975;
}

.color-list {
  display: flex;
  flex-direction: column;
}

.color-block {
  background-color: white;
  //border-radius:4px;
  box-shadow: 0 1px 0 #c8c3c1;
  overflow: hidden;
  margin: 1rem 0;
  position: relative;
  min-width: 150px;
  opacity: 0;
  transition: all 800ms ease;
  transform: scale(0.5) rotateX(-180deg) translateZ(0);
  
  &.flipIn {
    transform: none;
    opacity: 1;
  }
  
  .colors {
    height: 6rem;
    width: 100%;
    display: flex;
    
    span {
      flex: 1;
      opacity: 0;
      display: block;
      transition: background-color 500ms ease-in;
      
      &.fadeIn {
        opacity: 1;
        transform: none;
      }
    }
  }
  h3 {
    color: #fff;
    background-color: rgba(0,0,0,0.1);
    text-transform: uppercase;
    font-weight: 300;
    font-size: 8pt;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    padding: 6pt 8pt;
    border-bottom-right-radius: 4px;
    letter-spacing: 2px;
  }
  ul {
    list-style: none;
    font-size: 8pt;
    margin: 0;
    padding: 8pt 0;
    color: #777777;
    display: flex;
    
    li {
      flex: 1;
      display: block;
      text-align: center;
      
       &:before {
         content: '#'
       }
    }
  }
}

@media all and (min-width: 600px) {
  body {
    margin: 2rem 3rem;
  }
  
  .color-list {
    flex-flow: row wrap;
    justify-content: space-between;
    
    .color-block {
       flex: 0 0 48%;
       min-width: 200px;
    }
  }
}

const spans = document.querySelectorAll('span');

(function classLoop(i) {
  setTimeout(() => {
    if (i >= spans.length) {
      return;
    }

    const { hex } = spans[i].dataset;

    spans[i].style.backgroundColor = `#${hex}`;
    spans[i].classList.add('fadeIn');
    spans[i].parentNode.parentNode.classList.add('flipIn');

    i++;

    classLoop(i);
  }, (i == 0) ? 0 : i * 10);
})(0);