<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Sara Textiles</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/modern-business.css" rel="stylesheet">
<link href="font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--<div class="bg" id="item_1"></div>
<div class="bg" id="item_2"></div>
<div class="bg" id="item_3"></div>-->
<video autoplay loop poster="polina.jpg" id="bgvid">
<source src="polina.webm" type="video/webm">
<source src="sara_textiles_movies.mp4" type="video/mp4">
</video>
<button id="vidpause">Pause</button>
<div>
<div style="text-align:center; margin-bottom:20px; "><img src="images/logo.jpg" /></div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1 class="page-header">
Welcome to Sara Textiles
</h1>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw "></i>Home Furnishing</h4>
<img src="images/2.jpg" height="200px" width="300px" />
</div>
<div class="panel-body">
<p>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?</p>
<a href="#" class="btn btn-default">Enter Site</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw "></i>Textiles Machinery</h4>
<img src="images/1.jpg" height="200px" width="300px" />
</div>
<div class="panel-body">
<p>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?</p>
<a href="#" class="btn btn-default">Enter Site</a>
</div>
</div>
</div>
<div class="col-md-4">
<div class="panel panel-default">
<div class="panel-heading">
<h4><i class="fa fa-fw "></i>Garments</h4>
<img src="images/3.jpg" height="200px" width="300px" />
</div>
<div class="panel-body">
<p>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?</p>
<a href="#" class="btn btn-default">Enter Site</a>
</div>
</div>
</div>
</div>
<footer>
<div class="row">
<div class="col-lg-12">
<p>Copyright © Sara Textiles 2015</p>
</div>
</div>
</footer>
</div>
<!-- /.container -->
<!-- jQuery -->
<script src="js/jquery.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- Script to Activate the Carousel -->
<script>
/* $('.carousel').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;
$('body').css('backgroundImage', function () {
$('#fullPage').animate({
backgroundColor: 'transparent'
}, 1000, function () {
setTimeout(function () {
$('#fullPage').animate({
backgroundColor: 'rgb(255,255,255)'
}, 1000);
}, 3000);
});
return 'url(images/' + img_array[index] + '.jpg)';
});
setTimeout(changeBg, interval);
})();*/
/* var step = 1;
function bg(){
var opacity = 0.0;
if (step == 3){
n = 3;
step = 1;
opacity = 1.0;
$("#item_"+step).animate({'opacity':opacity},2000);
$("#item_"+n).animate({'opacity': 0.0},2000);
return;
}
var n = step+1;
$("#item_"+step).animate({'opacity':opacity},2000);
$("#item_"+n).animate({'opacity':1.0},2000);
step = n;
}
function loop(){
setInterval(bg,4000);
}
setTimeout(loop,0);*/
var vid = document.getElementById("bgvid");
var pauseButton = document.getElementById("vidpause");
function vidFade() {
vid.classList.add("stopfade");
}
vid.addEventListener('ended', function() {
// only functional if "loop" is removed
vid.pause();
// to capture IE10
vidFade();
});
pauseButton.addEventListener("click", function() {
vid.classList.toggle("stopfade");
if (vid.paused) {
vid.play();
pauseButton.innerHTML = "Pause";
} else {
vid.pause();
pauseButton.innerHTML = "Paused";
}
})
});
</script>
</body>
</html>