<div id="main-container" class="container main-content">
<div class="row">
<h1>Testing</h1>
<div class="col-md-12">
<div class="top-video">
<div class="row">
<span class="pt_featured_video" style="width:100%;">
<h4>
<span class="animate six">
<span>g</span><span>e</span><span>t</span>
<span>y</span><span>o</span><span>u</span><span>r</span>
<p class="intro"> text<span id="dot"></span>text</p>
<span>w</span><span>o</span><span>r</span><span>k</span><span>i</span><span>n</span><span>g</span>
</span>
</h4>
</div>
</div>
</div>
</div>
</div>
@import url("https://fonts.googleapis.com/css?family=Lato:100,100i,300,300i,400,400i,700,700i,900,900i");
* {
margin: 0;
}
body {-webkit-text-size-adjust: 100%;}
p.intro {
white-space: pre;
font-size: 32px;
font-family: arial, open sans;
font-weight: 900;
margin: 0 30px 0 -6px;
}
#dot {
width: 15px;
height: 15px;
margin: 0 2px;
display: inline-block;
background: #c07373;
vertical-align: middle;
}
.animate {
display:block;
font-size: 29px;
line-height: 1;
font-weight: 900;
margin: 0px 0 0;
font-family: arial, sans-serif;
color: #c7bcb4;
word-wrap: break-word;
padding: 0 0 0 30px;
}
.animate span {
display: inline-block;
}
.animate span:nth-of-type(2) {
animation-delay: 0.05s;
}
.animate span:nth-of-type(3) {
animation-delay: 0.1s;
}
.animate span:nth-of-type(4) {
animation-delay: 0.15s;
}
.animate span:nth-of-type(5) {
animation-delay: 0.2s;
}
.animate span:nth-of-type(6) {
animation-delay: 0.25s;
}
.animate span:nth-of-type(7) {
animation-delay: 0.3s;
}
.animate span:nth-of-type(8) {
animation-delay: 0.35s;
}
.animate span:nth-of-type(9) {
animation-delay: 0.4s;
}
.animate span:nth-of-type(10) {
animation-delay: 0.45s;
}
.animate span:nth-of-type(11) {
animation-delay: 0.5s;
}
.animate span:nth-of-type(12) {
animation-delay: 0.55s;
}
.animate span:nth-of-type(13) {
animation-delay: 0.6s;
}
.animate span:nth-of-type(14) {
animation-delay: 0.65s;
}
.animate span:nth-of-type(15) {
animation-delay: 0.7s;
}
.animate span:nth-of-type(16) {
animation-delay: 0.75s;
}
.animate span:nth-of-type(17) {
animation-delay: 0.8s;
}
.animate span:nth-of-type(18) {
animation-delay: 0.85s;
}
.animate span:nth-of-type(19) {
animation-delay: 0.9s;
}
.animate span:nth-of-type(20) {
animation-delay: 0.95s;
}
/* animation six */
.six span {
color: #000000;
opacity: 0;
transform: rotate(-180deg) translate(150px, 0);
animation: twister 0.7s forwards;
}
@keyframes twister {
10% {
opacity: 1;
}
100% {
transform: rotate(0deg) translate(0);
opacity: 1;
}
}
@media only screen and (max-width: 760px) {
.animate {
font-size: 1.2em;
}
.pt_featured_video h4 {
top: -15px;
left: -5px;
width: 80%;
}
.intro {
font-size: 1em;
}
}
This Pen doesn't use any external JavaScript resources.