<div class="static-slider4">
<div class="container">
<!-- Row -->
<div class="row">
<div class="col-md-5 img-anim">
<img src="https://www.wrappixel.com/demos/ui-kit/wrapkit/assets/images/sliders/static-slider/slider4/img1.png" alt="wrapkit" class="img-fluid" />
</div>
<!-- Column -->
<div class="col-md-6 ml-auto align-self-center mt-3 mt-md-0">
<h1 class="title">I’m Angelina Flintoff <b class="font-weight-bold">Marketing & <span class="text-info-gradiant typewrite" data-period="2000" data-type='[ "SEO Expert", "HTML Expert", "CSS3 Expert"]'></span></b></h1>
<a class="btn btn-outline-info btn-md mt-3" href=""><span>Checkout My Work</span></a>
</div>
<!-- Column -->
</div>
</div>
<div class="bg-info-gradiant">
<div class="container">
<div class="row">
<div class="col-lg-6 ml-auto info-box">
<div class="d-flex">
<div class="display-5 text-white mr-3"><i class="font-weight-bold icon-control-play"></i></div>
<div class="align-self-center">
<h4 class="font-weight-light mb-0"><a href="#" data-toggle="modal" data-target="#static-slide3" class="text-white"><b class="font-weight-bold">10 Marketing Tips for your Project </b><br/>05:30 By Angelina Flintoff</a></h4>
</div>
<div class="modal fade" id="static-slide3">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h6 class="modal-title">Watch video</h6>
<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>
</div>
</div>
</div>
@import url(//fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700,800);
.static-slider4 {
font-family: "Montserrat", sans-serif;
color: #8d97ad;
font-weight: 300;
}
.static-slider4 h1,
.static-slider4 h2,
.static-slider4 h3,
.static-slider4 h4,
.static-slider4 h5,
.static-slider4 h6 {
color: #3e4555;
}
.static-slider4 h4 {
font-size: 21px;
}
.static-slider4 a {
text-decoration: none;
}
.static-slider4 .font-weight-medium {
font-weight: 500;
}
.static-slider4 .subtitle {
color: #8d97ad;
line-height: 24px;
}
.static-slider4 h1 {
font-weight: 100;
line-height: 50px;
font-size: 33px;
}
.static-slider4 h1 span {
border-bottom: 3px solid #188ef4;
}
.static-slider4 .info-box {
padding: 25px 15px;
}
.static-slider4 .img-anim {
position: relative;
top: 110px;
}
@media (max-width: 767px) {
.static-slider4 h1 {
line-height: 36px;
font-size: 24px;
}
.static-slider4 .img-anim {
position: relative;
top: 0px;
}
.static-slider4 .bg-info-gradiant {
margin-top: 40px;
}
}
.static-slider4 .btn-md {
padding: 15px 45px;
font-size: 16px;
}
.static-slider4 .bg-info-gradiant {
background: #188ef4;
background: -webkit-linear-gradient(legacy-direction(to right), #188ef4 0%, #316ce8 100%);
background: -webkit-gradient(linear, left top, right top, from(#188ef4), to(#316ce8));
background: -webkit-linear-gradient(left, #188ef4 0%, #316ce8 100%);
background: -o-linear-gradient(left, #188ef4 0%, #316ce8 100%);
background: linear-gradient(to right, #188ef4 0%, #316ce8 100%);
}
.static-slider4 .display-5 {
font-size: 2.5rem;
}
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