<div class="static-slider7" style="background-image:url(https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/sliders/static-slider/slider7/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='[ "Colour", "Wrapkit" ]'></h1>
<h5 class="text-white">Awesome Extra Ordinary Flexibility</h5>
<a class="btn btn-danger-gradiant rounded-pill btn-md mt-3 border-0 text-white" href=""><span>Products <i class="ti-arrow-right"></i></span></a>
<a class="btn btn-outline-light rounded-pill btn-md mt-3" data-toggle="modal" data-target="#static-slide7" href=""><i class="mr-2 icon-control-play"></i> Intro </a>
</div>
<!-- Column -->
<div class="modal fade" id="static-slide7">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Watch video</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="yt-player">
<iframe width="100%" height="315" src="https://www.youtube.com/embed/DDwbjWCgxVM?" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
@import url(//fonts.googleapis.com/css?family=Montserrat:400,500,700);
.static-slider7 {
font-family: "Montserrat", sans-serif;
color: #8d97ad;
font-weight: 300;
background-repeat: no-repeat;
background-size: cover;
background-position: bottom center;
padding: 12% 0;
}
.static-slider7 h1.title {
font-size: 122px;
font-weight: 700;
text-transform: uppercase;
line-height: 130px;
}
@media (max-width: 767px) {
.static-slider7 h1.title {
font-size: 60px;
line-height: 70px;
}
}
.static-slider7 .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-slider7 .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-slider7 .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