jQuery(".splitchar").splitchar();
<h2 class="tegel-text">SplitChar plugin</h2>
<div id="tegel-font-strip" class="tegel">
<p class="weight800 splitchar horizontal">Haste</p>
<p class="weight400 no-margin-top">makes</p>
<p class="weight800 splitchar vertical">waste</p>
</div>
h2 {
font-family:'Droid Serif', serif;
font-size: 55px;
text-align: center;
}
.tegel {
font-family:'Lato';
text-align: center;
height: 170px;
vertical-align: middle;
border: 1px solid #ccc;
padding: 20px;
box-sizing: border-box;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.tegel-text {
width: 600px;
margin-left: auto;
margin-right: auto;
}
p.tegel-text {
font-size: 18px;
font-family:'roboto';
font-weight: 300;
line-height:30px;
}
.tegel p {
margin-top: 10px;
font-size: 26px;
}
.weight400 {
font-weight: 400;
}
.weight800 {
font-weight: 800;
}
@media screen and (min-width: 480px) {
.tegel {
height: 210px;
padding: 25px;
}
.tegel p {
font-size: 36px;
}
}
@media screen and (min-width: 768px) {
.tegel {
height: 275px;
padding: 35px;
}
.tegel p {
margin-top: 15px;
font-size: 45px;
}
}
@media screen and (min-width: 960px) {
.tegel {
height: 350px;
padding: 50px;
}
.tegel p {
margin-top: 25px;
font-size: 55px;
}
}
/* ========================== font strip ================================ */
/* === colors: http://www.colourlovers.com/palette/1416141/Naked_Palette === */
#tegel-font-strip {
background: #DBD8A2;
color:#1e8c93;
border:10px solid #C4ac30;
font-family:'Arial';
}
#tegel-font-strip p {
font-size: 28px;
line-height: 28px;
margin-top: 0px;
margin-bottom: 0px;
}
#tegel-font-strip p.no-margin-top {
margin-top: 10px;
}
#tegel-font-strip > p > span {
top: 7px;
}
#tegel-font-strip .splitchar.horizontal:before, #tegel-font-strip .splitchar.vertical:before {
color: #4b3e4d;
}
#tegel-font-strip .splitchar.horizontal:after, #tegel-font-strip .splitchar.vertical:after {
color: #d74f33;
}
@media screen and (min-width: 480px) {
#tegel-font-strip p {
font-size: 38px;
line-height: 38px;
}
}
@media screen and (min-width: 768px) {
#tegel-font-strip p {
font-size: 50px;
line-height: 50px;
}
}
@media screen and (min-width: 960px) {
#tegel-font-strip p {
font-size: 70px;
line-height: 70px;
}
}
External resources loaded into this fiddle: