<section class="colors one">
  <h1>KATELYN</h1>
</section>
<section class="colors two">
  <h1>MORRIS</h1>
</section>
<section class="colors three">
  <h1>ALEKS</h1>
</section>

body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
}

.colors {
  position: relative;
  width: 33.33%;
  height: 100%;
  display: flex;
  overflow: hidden;
  cursor: pointer;
  transition: all 300ms ease-in-out;
  h1 {
    position: relative;
    top: 90px;
    right: 10px;
    font-family: Contrail One;
    font-size: 13em;
    transform: rotate(-45deg);
    margin: auto;
  }
}

.one {
  background: #f22c21;
  h1 {
    color: #f8fcde;
  }
}

.two {
  left: 0;
  background: #f8fcde;
  -webkit-box-shadow: -5px 2px 29px -5px rgba(0,0,0,0.75);
  -moz-box-shadow: -5px 2px 29px -5px rgba(0,0,0,0.75);
  box-shadow: -5px 2px 29px -5px rgba(0,0,0,0.75);
  h1 {
    color: #f22c21;
  }
}

.three {
  left: 0;
  background: #202021;
  -webkit-box-shadow: -5px 2px 29px -5px rgba(0,0,0,0.75);
  -moz-box-shadow: -5px 2px 29px -5px rgba(0,0,0,0.75);
  box-shadow: -5px 2px 29px -5px rgba(0,0,0,0.75);
  h1 {
    color: #f8fcde;
  }
}

.one-reveal {
  left: 25%;
}

.two-reveal {
  left: -25%;
}

.three-reveal {
  left: -25%;
}

const one = document.querySelector('.one');
const two = document.querySelector('.two');
const three = document.querySelector('.three');

one.addEventListener('click', () => {
  two.classList.toggle('one-reveal')
})

two.addEventListener('click', () => {
  two.classList.toggle('two-reveal')
})

three.addEventListener('click', () => {
  three.classList.toggle('three-reveal')
})