<!--

Follow me on
Dribbble: https://dribbble.com/supahfunk
Twitter: https://twitter.com/supahfunk
Codepen: https://codepen.io/supah/

-->
<div class="landing">
  <div class="base">
    <div class="image">
      <img src="http://www.supah.it/dribbble/frame-dailyui-003.jpg" />
    </div>
    <div class="copy">
      <div class="logo">
        <svg version="1.1" x="0px" y="0px" width="48px" height="27px" viewBox="0 0 48 27" enable-background="new 0 0 48 27" xml:space="preserve">
<path fill-rule="evenodd" clip-rule="evenodd"  d="M37.527,26.994c-2.109,0-4.49-0.279-7.103-1.018
	C19.701,22.947,15.346,11.96,14.921,9.2L23.735,0c0,0-1.806,8.389,3.557,13.584c3.339,3.236,7.071,4.037,9.924,4.037
	c1.729,0,3.134-0.295,3.935-0.52L48,24.299C48,24.299,44.079,26.994,37.527,26.994z M40.726,18.6
	c-0.849,0.185-2.069,0.374-3.51,0.374c-2.868,0-7.077-0.765-10.839-4.408c-3.443-3.336-4.223-7.775-4.267-10.932l-5.74,5.992
	c0.402,1.532,1.54,4.306,3.513,7.064c2.006,2.805,5.524,6.465,10.896,7.983c2.273,0.642,4.543,0.968,6.748,0.968
	c3.807,0,6.676-0.977,8.281-1.7L40.726,18.6z M24.584,0l8.07,8.173c0,0-0.742,4.112-2.334,6.709C30.32,14.882,22.407,10.77,24.584,0
	z M16.726,15.911c0,0,2.23,4.33,6.266,7.089c0,0-9.717,7.793-22.992,1.625l7.115-7.361C7.115,17.264,12.584,18.672,16.726,15.911z"
	/>
</svg>
      </div>
      <div class="title">
        <small>There's no sobstitute for power.</small> Except more power.</div>
      <div class="text">What CrossFit has taught me, and what I think everyone <br /> can apply to their own fitness, is the idea that the body can
        <br />always do more. The average CrossFit WOD is deliberately<br /> designed to fatigue your body to the point where you don't<br /> think you can go on. The lesson in the WODs is that when<br /> your body is totally exhausted, you must look
        for a different<br /> energysource. And guess what?<br /> Your body will do it.</div>
      <a class="cta" target="_blank">play video</a>
    </div>
  </div>
</div>

/*--------------------
Reset & body
--------------------*/
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

body {
  background: #100F1D;
  font-family: 'Open Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.4;
  
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    background: linear-gradient(42deg, #070c18, #1f141c);
    opacity: 0.9;
  }
}


/*--------------------
Landing
--------------------*/
.landing {
  position: relative;
  z-index: 2;
  width: 710px;
  height: 520px;
  margin: 25px auto;
  box-shadow: 0 3px 30px rgba(0, 0, 0, 0.3);
  overflow: hidden;
  
  & .logo svg {
    fill: #1E1C45;
  }
  
  & .base {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    padding: 38px;
    color: #082352;
    background: #fff;
  }
    
  & .image {
    display: none;
  }
  
}


/*--------------------
Copy
--------------------*/
.copy {
  position: relative;
  z-index: 2;
  
  & .title {
    font-size: 52px;
    font-weight: 800;
    text-transform: uppercase;
    line-height: 1;
    margin-bottom: 30px;
    margin-left: -3px;
    background-image: linear-gradient(45deg, #191A42, #B1499C);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    
    & small {
      font-size: 18px;
      font-weight: 800;
      text-transform: uppercase;
      margin-top: 50px;
      line-height: 1;
      display: block;
      text-indent: 3px;
    }
  }
  
  & .text {
    color: #282652;
    width: 400px;
    font-size: 90%;
  }
  
  & .cta {
    cursor: pointer;
    margin-top: 40px;
    background: linear-gradient(25deg, #2f2d56, #6e355b);
    color: #fff;
    text-transform: uppercase;
    display: inline-block;
    border-radius: 30px;
    text-decoration: none;
    padding: 10px 30px;
    font-weight: 600;
  }
  
}


/*--------------------
Overlay
--------------------*/
.base.overlay {
  z-index: 2;
  clip-path: polygon(375px 0, 710px 0, 710px 530px, 469px 530px);
  color: #fff;
  background: linear-gradient(45deg, #082352, #6f2d52);
  transition: all .6s ease-in-out;
  transform-origin: 0 0;
  
  &.over {
    clip-path: polygon(-1750px 0, 710px 0, 710px 630px, 0 710px);
  }
  
  & .logo svg {
    fill: #fff;
  }
    
  & .image {
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    z-index: 1;
    
    &::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      right: 0;
      z-index: 1;
      background: linear-gradient(42deg, #082352, #6f2d52);
      opacity: 0.8;
    }
  }
  
  & .title {
    background-image: linear-gradient(0, #fff, #fff);
  }
  
  & .text {
    color: #fff;
  }
  
  & .cta {
    background: #fff;
    color: #0A2452;
  }
}

$('.base').clone().addClass('overlay').appendTo('.landing');
$('.cta').hover(function() {
  $('.overlay').toggleClass('over');
});

/*--------------------
Codepen Preview Tile
--------------------*/
setTimeout(function() {
  $('.overlay').addClass('over').delay(600).queue(function() {
    $(this).removeClass("over").dequeue();
  });
}, 400)