<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--
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>
<script>
$('.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)
</script>
/*--------------------
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;
}
body::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1;
background: -webkit-linear-gradient(48deg, #070c18, #1f141c);
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;
}
.landing .logo svg {
fill: #1E1C45;
}
.landing .base {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
padding: 38px;
color: #082352;
background: #fff;
}
.landing .image {
display: none;
}
/*--------------------
Copy
--------------------*/
.copy {
position: relative;
z-index: 2;
}
.copy .title {
font-size: 52px;
font-weight: 800;
text-transform: uppercase;
line-height: 1;
margin-bottom: 30px;
margin-left: -3px;
background-image: -webkit-linear-gradient(45deg, #191A42, #B1499C);
background-image: linear-gradient(45deg, #191A42, #B1499C);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.copy .title small {
font-size: 18px;
font-weight: 800;
text-transform: uppercase;
margin-top: 50px;
line-height: 1;
display: block;
text-indent: 3px;
}
.copy .text {
color: #282652;
width: 400px;
font-size: 90%;
}
.copy .cta {
cursor: pointer;
margin-top: 40px;
background: -webkit-linear-gradient(65deg, #2f2d56, #6e355b);
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;
-webkit-clip-path: polygon(375px 0, 710px 0, 710px 530px, 469px 530px);
clip-path: polygon(375px 0, 710px 0, 710px 530px, 469px 530px);
color: #fff;
background: -webkit-linear-gradient(45deg, #082352, #6f2d52);
background: linear-gradient(45deg, #082352, #6f2d52);
-webkit-transition: all .6s ease-in-out;
transition: all .6s ease-in-out;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.base.overlay.over {
-webkit-clip-path: polygon(-1750px 0, 710px 0, 710px 630px, 0 710px);
clip-path: polygon(-1750px 0, 710px 0, 710px 630px, 0 710px);
}
.base.overlay .logo svg {
fill: #fff;
}
.base.overlay .image {
display: block;
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
z-index: 1;
}
.base.overlay .image::after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
right: 0;
z-index: 1;
background: -webkit-linear-gradient(48deg, #082352, #6f2d52);
background: linear-gradient(42deg, #082352, #6f2d52);
opacity: 0.8;
}
.base.overlay .title {
background-image: -webkit-linear-gradient(0, #fff, #fff);
background-image: linear-gradient(0, #fff, #fff);
}
.base.overlay .text {
color: #fff;
}
.base.overlay .cta {
background: #fff;
color: #0A2452;
}
