    <div class="row">
        <div class="col-12">
            <pre class="with-hljs"><code class="lang-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;en&quot;&gt;

&lt;head&gt;

    &lt;meta charset=&quot;utf-8&quot;&gt;
    &lt;meta http-equiv=&quot;X-UA-Compatible&quot; content=&quot;IE=edge&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1&quot;&gt;
    &lt;meta name=&quot;description&quot; content=&quot;&quot;&gt;
    &lt;meta name=&quot;author&quot; content=&quot;&quot;&gt;

    &lt;title&gt;Sara Textiles&lt;/title&gt;
    &lt;link href=&quot;css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;css/modern-business.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;font-awesome/css/font-awesome.min.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
&lt;/head&gt;

&lt;body&gt;
&lt;!--&lt;div class=&quot;bg&quot; id=&quot;item_1&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;bg&quot; id=&quot;item_2&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;bg&quot; id=&quot;item_3&quot;&gt;&lt;/div&gt;--&gt;
&lt;video autoplay loop poster=&quot;polina.jpg&quot; id=&quot;bgvid&quot;&gt;
&lt;source src=&quot;polina.webm&quot; type=&quot;video/webm&quot;&gt;
&lt;source src=&quot;sara_textiles_movies.mp4&quot; type=&quot;video/mp4&quot;&gt;
&lt;/video&gt;
  &lt;button id=&quot;vidpause&quot;&gt;Pause&lt;/button&gt;
        &lt;div&gt;
     &lt;div style=&quot;text-align:center; margin-bottom:20px; &quot;&gt;&lt;img src=&quot;images/logo.jpg&quot; /&gt;&lt;/div&gt;
         
        &lt;/div&gt;
     
    &lt;div class=&quot;container&quot;&gt;
        &lt;div class=&quot;row&quot;&gt;
            &lt;div class=&quot;col-lg-12&quot;&gt;
                &lt;h1 class=&quot;page-header&quot;&gt;
                    Welcome to Sara Textiles
                &lt;/h1&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-md-4&quot;&gt;
                &lt;div class=&quot;panel panel-default&quot;&gt;
                    &lt;div class=&quot;panel-heading&quot;&gt;
                        &lt;h4&gt;&lt;i class=&quot;fa fa-fw &quot;&gt;&lt;/i&gt;Home Furnishing&lt;/h4&gt;
                        &lt;img src=&quot;images/2.jpg&quot; height=&quot;200px&quot; width=&quot;300px&quot; /&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;panel-body&quot;&gt;
                        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?&lt;/p&gt;
                        &lt;a href=&quot;#&quot; class=&quot;btn btn-default&quot;&gt;Enter Site&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-md-4&quot;&gt;
                &lt;div class=&quot;panel panel-default&quot;&gt;
                    &lt;div class=&quot;panel-heading&quot;&gt;
                        &lt;h4&gt;&lt;i class=&quot;fa fa-fw &quot;&gt;&lt;/i&gt;Textiles Machinery&lt;/h4&gt;
                        &lt;img src=&quot;images/1.jpg&quot; height=&quot;200px&quot; width=&quot;300px&quot; /&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;panel-body&quot;&gt;
                        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?&lt;/p&gt;
                        &lt;a href=&quot;#&quot; class=&quot;btn btn-default&quot;&gt;Enter Site&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;div class=&quot;col-md-4&quot;&gt;
                &lt;div class=&quot;panel panel-default&quot;&gt;
                    &lt;div class=&quot;panel-heading&quot;&gt;
                        &lt;h4&gt;&lt;i class=&quot;fa fa-fw &quot;&gt;&lt;/i&gt;Garments&lt;/h4&gt;
                        &lt;img src=&quot;images/3.jpg&quot; height=&quot;200px&quot; width=&quot;300px&quot; /&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;panel-body&quot;&gt;
                        &lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque, optio corporis quae nulla aspernatur in alias at numquam rerum ea excepturi expedita tenetur assumenda voluptatibus eveniet incidunt dicta nostrum quod?&lt;/p&gt;
                        &lt;a href=&quot;#&quot; class=&quot;btn btn-default&quot;&gt;Enter Site&lt;/a&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;

        &lt;footer&gt;
            &lt;div class=&quot;row&quot;&gt;
                &lt;div class=&quot;col-lg-12&quot;&gt;
                    &lt;p&gt;Copyright &amp;copy; Sara Textiles 2015&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/footer&gt;

    &lt;/div&gt;
    &lt;!-- /.container --&gt;

    &lt;!-- jQuery --&gt;
    &lt;script src=&quot;js/jquery.js&quot;&gt;&lt;/script&gt;

    &lt;!-- Bootstrap Core JavaScript --&gt;
    &lt;script src=&quot;js/bootstrap.min.js&quot;&gt;&lt;/script&gt;

    &lt;!-- Script to Activate the Carousel --&gt;
    &lt;script&gt;
   /* $(&#039;.carousel&#039;).carousel({
        interval: 5000 //changes the speed
    })*/
	
	$(document).ready(function () {
/*    var img_array = [1, 2, 3],
        newIndex = 0,
        index = 0,
        interval = 5000;
    (function changeBg() {

        index = (index + 1) % img_array.length;

        $(&#039;body&#039;).css(&#039;backgroundImage&#039;, function () {
            $(&#039;#fullPage&#039;).animate({
                backgroundColor: &#039;transparent&#039;
            }, 1000, function () {
                setTimeout(function () {
                    $(&#039;#fullPage&#039;).animate({
                        backgroundColor: &#039;rgb(255,255,255)&#039;
                    }, 1000);
                }, 3000);
            });
            return &#039;url(images/&#039; + img_array[index] + &#039;.jpg)&#039;;
        });
        setTimeout(changeBg, interval);
    })();*/
	
/*	var step = 1;

function bg(){
 var opacity = 0.0;
 if (step == 3){
   n = 3;
   step = 1;
   opacity = 1.0;
   $(&quot;#item_&quot;+step).animate({&#039;opacity&#039;:opacity},2000);     
   $(&quot;#item_&quot;+n).animate({&#039;opacity&#039;: 0.0},2000);
   return;     
 }
 var n = step+1;
 $(&quot;#item_&quot;+step).animate({&#039;opacity&#039;:opacity},2000);
 $(&quot;#item_&quot;+n).animate({&#039;opacity&#039;:1.0},2000);
 step = n;
}

function loop(){
  setInterval(bg,4000);    
}

setTimeout(loop,0);*/


var vid = document.getElementById(&quot;bgvid&quot;);
var pauseButton = document.getElementById(&quot;vidpause&quot;);
function vidFade() {
vid.classList.add(&quot;stopfade&quot;);
}
vid.addEventListener(&#039;ended&#039;, function() {
// only functional if &quot;loop&quot; is removed
vid.pause();
// to capture IE10
vidFade();
});
pauseButton.addEventListener(&quot;click&quot;, function() {
vid.classList.toggle(&quot;stopfade&quot;);
if (vid.paused) {
vid.play();
pauseButton.innerHTML = &quot;Pause&quot;;
} else {
vid.pause();
pauseButton.innerHTML = &quot;Paused&quot;;
}
})

});


    &lt;/script&gt;

&lt;/body&gt;

&lt;/html&gt;
</code></pre>        </div>
    </div>