<div class="static-slider8" style="background-image:url(https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/sliders/static-slider/slider8/img1.jpg)">
<div class="container">
<!-- Row -->
<div class="row justify-content-center ">
<!-- Column -->
<div class="col-md-8 align-self-center text-center">
<h1 class="title text-white typewrite" data-period="2000" data-type='[ "Because", "Wrapkit" ]'></h1>
<h5 class="text-white font-weight-light">Awesome Extra Ordinary Flexibility</h5>
<a class="btn btn-danger-gradiant rounded-pill btn-md mt-3 mb-4 text-white border-0" href=""><span>Features</span></a><br/>
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/sliders/static-slider/slider8/img2.png" alt="wrapkit" class="showcase-img" />
</div>
<!-- Column -->
</div>
</div>
</div>
@import url(//fonts.googleapis.com/css?family=Montserrat:300,700);
.static-slider8 {
font-family: "Montserrat", sans-serif;
color: #8d97ad;
font-weight: 300;
padding: 80px 0 0;
overflow: hidden;
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
}
.static-slider8 h1.title {
font-size: 65px;
font-weight: 700;
}
.static-slider8 .showcase-img {
position: relative;
margin-bottom: -300px;
}
.static-slider8 .btn-danger-gradiant {
background: #ff4d7e;
background: -webkit-linear-gradient(legacy-direction(to right), #ff4d7e 0%, #ff6a5b 100%);
background: -webkit-gradient(linear, left top, right top, from(#ff4d7e), to(#ff6a5b));
background: -webkit-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
background: -o-linear-gradient(left, #ff4d7e 0%, #ff6a5b 100%);
background: linear-gradient(to right, #ff4d7e 0%, #ff6a5b 100%);
}
.static-slider8 .btn-danger-gradiant:hover {
background: #ff6a5b;
background: -webkit-linear-gradient(legacy-direction(to right), #ff6a5b 0%, #ff4d7e 100%);
background: -webkit-gradient(linear, left top, right top, from(#ff6a5b), to(#ff4d7e));
background: -webkit-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
background: -o-linear-gradient(left, #ff6a5b 0%, #ff4d7e 100%);
background: linear-gradient(to right, #ff6a5b 0%, #ff4d7e 100%);
}
.static-slider8 .btn-md {
padding: 15px 45px;
font-size: 16px;
}
var TxtType = function(el, toRotate, period) {
this.toRotate = toRotate;
this.el = el;
this.loopNum = 0;
this.period = parseInt(period, 10) || 2000;
this.txt = '';
this.tick();
this.isDeleting = false;
};
TxtType.prototype.tick = function() {
var i = this.loopNum % this.toRotate.length;
var fullTxt = this.toRotate[i];
if (this.isDeleting) {
this.txt = fullTxt.substring(0, this.txt.length - 1);
} else {
this.txt = fullTxt.substring(0, this.txt.length + 1);
}
this.el.innerHTML = ''+this.txt+'';
var that = this;
var delta = 200 - Math.random() * 100;
if (this.isDeleting) { delta /= 2; }
if (!this.isDeleting && this.txt === fullTxt) {
delta = this.period;
this.isDeleting = true;
} else if (this.isDeleting && this.txt === '') {
this.isDeleting = false;
this.loopNum++;
delta = 500;
}
setTimeout(function() {
that.tick();
}, delta);
};
window.onload = function() {
var elements = document.getElementsByClassName('typewrite');
for (var i=0; i