Untitled

dabblet.css

body {
    background:none;
 
}
@font-face {
    font-family: 'BebasRegular';
        src: url('fonts/BEBAS___-webfont.eot');
        src: local('�'), url('../fonts/bebas/BEBAS___-webfont.woff') format('woff'), url('../fonts/bebas/BEBAS___-webfont.ttf') format('truetype'), url('../fonts/bebas/BEBAS___-webfont.svg#webfontSRj8j0PE') format('svg');
        font-weight: normal;
        font-style: normal;
}
#logo a {
    background-color:#ffbdbd;
}
article {
    height:100%;
    min-height:100%;
    font-size:1.2em;
    background:#ffbdbd;
}
.textzone {
text-align:center;
    margin:0 auto;
    display:block;
    width:100%;
    height:100%;
    overflow: hidden;
}
h1 {
display:block;
font-family:'BebasRegular';
  font-size:14em;
  font-style: normal;
  text-transform: uppercase;
  color:#fff;
  position:relative;
  font-weight:100;
  letter-spacing: 0.38em;
}
.love {
    top:192px;
    z-index:10;
 
     
}
.hate {
    -webkit-transform:skew(-50deg);
    color:#ff6060;
    font-size:9.4em;
     left:90px;
      font-weight:700;
  letter-spacing: 0.8em;
}
.textzone:hover >.love {
  -webkit-transition: all 1s linear;
    -webkit-transform:skew(-50deg);
    font-size:9.4em;
  letter-spacing: 0.8em;
text-shadow:none;
top:246px;
left:110px; 
color:#000;
}
.textzone:hover > .hate {
        -webkit-transform:skew(0deg);
        letter-spacing:0;
        left:0px;
  -webkit-transition: all 1s linear;
  z-index:20;
    letter-spacing: 0.38em;
  font-size:14em;
  color:#fff;
  }
.bg {
    height:100%;
    min-height:100%;
}
.bg:hover {
  -webkit-transition: all 1s linear;
 
background:#1e1e1e;
}

dabblet.html

<div class="bg">
<div class="textzone">
        <h1 class="love">Love</h1>
        <h1 class="hate">Hate</h1>
        </div>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}