Your IP : 216.73.217.62


Current Path : /home/kamilrogam/komp/2018/180513/_MY_PROJECTS/kamin/
Upload File :
Current File : /home/kamilrogam/komp/2018/180513/_MY_PROJECTS/kamin/index_old.html

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
	<head>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
		<title>Kasia i Łukasz</title>
		<style>
			.lbox{position:relative;transition:all .2s ease;position:fixed;width:100%;height:100%;background:#000;z-index:999999999;}
			.loader:before{content:"";position:absolute;top:0px;left:-25px;height:12px;width:12px;border-radius:12px;-webkit-animation:loader10g 3s ease-in-out infinite;animation:loader10g 3s ease-in-out infinite;}
			.loader{position:fixed;z-index:9999999999;width:12px;height:12px;left:50%;top:50%;margin-top:-6px;margin-left:-6px;border-radius:12px;-webkit-animation:loader10m 3s ease-in-out infinite;animation:loader10m 3s ease-in-out infinite;}
			.loader:after{content:"";position:absolute;top:0px;left:25px;height:10px;width:10px;border-radius:10px;-webkit-animation:loader10d 3s ease-in-out infinite;animation:loader10d 3s ease-in-out infinite;}
			@-webkit-keyframes loader10g{0%{background-color:rgba(255,255,255,.2);}25%{background-color:rgba(255,255,255,1);}50%{background-color:rgba(255,255,255,.2);}75%{background-color:rgba(255,255,255,.2);}100%{background-color:rgba(255,255,255,.2);}}
			@keyframes loader10g{0%{background-color:rgba(255,255,255,.2);}25%{background-color:rgba(255,255,255,1);}50%{background-color:rgba(255,255,255,.2);}75%{background-color:rgba(255,255,255,.2);}100%{background-color:rgba(255,255,255,.2);}}
			@-webkit-keyframes loader10m{0%{background-color:rgba(255,255,255,.2);}25%{background-color:rgba(255,255,255,.2);}50%{background-color:rgba(255,255,255,1);}75%{background-color:rgba(255,255,255,.2);}100%{background-color:rgba(255,255,255,.2);}}
			@keyframes loader10m{0%{background-color:rgba(255,255,255,.2);}25%{background-color:rgba(255,255,255,.2);}50%{background-color:rgba(255,255,255,1);}75%{background-color:rgba(255,255,255,.2);}100%{background-color:rgba(255,255,255,.2);}}
			@-webkit-keyframes loader10d{0%{background-color:rgba(255,255,255,.2);}25%{background-color:rgba(255,255,255,.2);}50%{background-color:rgba(255,255,255,.2);}75%{background-color:rgba(255,255,255,1);}100%{background-color:rgba(255,255,255,.2);}}
			@keyframes loader10d{0%{background-color:rgba(255,255,255,.2);}25%{background-color:rgba(255,255,255,.2);}50%{background-color:rgba(255,255,255,.2);}75%{background-color:rgba(255,255,255,1);}100%{background-color:rgba(255,255,255,.2);}}
		</style>
		<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
		<link href="https://fonts.googleapis.com/css?family=Arima+Madurai:400,700&amp;subset=latin-ext" rel="stylesheet">
		<script type="text/javascript" src="assets/jquery-1.10.1.min.js"></script>
		<script type="text/javascript" src="assets/jquery.fancybox.pack.js?v=2.1.5"></script>
		<link rel="stylesheet" href="css/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen" />
		<link rel="stylesheet" type="text/css" href="css/jquery.fancybox-thumbs.css?v=1.0.7" />
		<script type="text/javascript" src="assets/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>
		<script src="assets/jquery.bxslider.min.js"></script>
		<link href="css/jquery.bxslider.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/main.css" type="text/css" />	
	</head>
	<body>
		<div class="lbox"><div class="loader"></div></div>
		<div class="img-cover">
			<div class="txt"><span>Save</span><span>the date</span></div>
			<div class="anchor">
				<img src="img/arrow.png" alt="Przewiń w dół" title="Przewiń w dół"/>
			</div>
		</div>
		<div class="width info" id="main">
			<div class="float-container">
				<div class="floatl">
					<h1>Kasia <span>+</span> Łukasz</h1>
					<h2>Pobieramy się!</h2>
					<h3><span>Lipiec.</span><span>14</span><span>2017</span></h3>
					<div id="countdown"></div>
				</div>
				<div class="floatr">

					<ul class="bxslider">
					  <li><img src="img/4_b.jpg" /></li>
					  <li><img src="img/3_b.jpg" /></li>
					  <li><img src="img/2_b.jpg" /></li>
					  <li><img src="img/1_b.jpg" /></li>
					</ul>
				</div>
			</div>
		</div>
		<div class="width loveimg">
			<img class="love" src="img/love.png"/>
		</div>
		<div class="width galeria">
			<p>
				<a class="fancybox-thumbs" data-fancybox-group="thumb" href="img/4_b.jpg"><img src="img/4_s.jpg" alt="" /></a>
				<a class="fancybox-thumbs" data-fancybox-group="thumb" href="img/3_b.jpg"><img src="img/3_s.jpg" alt="" /></a>
				<a class="fancybox-thumbs" data-fancybox-group="thumb" href="img/2_b.jpg"><img src="img/2_s.jpg" alt="" /></a>
				<a class="fancybox-thumbs" data-fancybox-group="thumb" href="img/1_b.jpg"><img src="img/1_s.jpg" alt="" /></a>
				<a class="fancybox-thumbs" data-fancybox-group="thumb" href="img/4_b.jpg"><img src="img/4_s.jpg" alt="" /></a>
				<a class="fancybox-thumbs" data-fancybox-group="thumb" href="img/3_b.jpg"><img src="img/3_s.jpg" alt="" /></a>
				<a class="fancybox-thumbs" data-fancybox-group="thumb" href="img/2_b.jpg"><img src="img/2_s.jpg" alt="" /></a>
				<a class="fancybox-thumbs" data-fancybox-group="thumb" href="img/1_b.jpg"><img src="img/1_s.jpg" alt="" /></a>
				<a class="fancybox-thumbs" data-fancybox-group="thumb" href="img/4_b.jpg"><img src="img/4_s.jpg" alt="" /></a>
				<a class="fancybox-thumbs" data-fancybox-group="thumb" href="img/3_b.jpg"><img src="img/3_s.jpg" alt="" /></a>
				<a class="fancybox-thumbs" data-fancybox-group="thumb" href="img/2_b.jpg"><img src="img/2_s.jpg" alt="" /></a>
				<a class="fancybox-thumbs" data-fancybox-group="thumb" href="img/1_b.jpg"><img src="img/1_s.jpg" alt="" /></a>
				<a class="fancybox-thumbs" data-fancybox-group="thumb" href="img/4_b.jpg"><img src="img/4_s.jpg" alt="" /></a>
				<a class="fancybox-thumbs" data-fancybox-group="thumb" href="img/3_b.jpg"><img src="img/3_s.jpg" alt="" /></a>
				<a class="fancybox-thumbs" data-fancybox-group="thumb" href="img/2_b.jpg"><img src="img/2_s.jpg" alt="" /></a>
				<a class="fancybox-thumbs" data-fancybox-group="thumb" href="img/1_b.jpg"><img src="img/1_s.jpg" alt="" /></a>
			</p>
		</div>
		<div class="width loveimg">
			<img class="love" src="img/love.png"/>
		</div>
		<audio id="audio" class="audio" autoplay loop>
			<source src="img/song.mp3" type="audio/mpeg">
			Stara przegladarka...
		</audio>
		<div class="controls">
			<button class="play" style="display:none;" onclick="playVid()" type="button"></button>
			<button class="pause" onclick="pauseVid()" type="button"></button>
		</div>
		<script type="text/javascript">
			var end = new Date('07/14/2017 05:1 PM');
			var _second = 1000;
			var _minute = _second * 60;
			var _hour = _minute * 60;
			var _day = _hour * 24;
			var timer;
			function showRemaining() {
				var now = new Date();
				var distance = end - now;
				if (distance < 0) {
					clearInterval(timer);
					document.getElementById('countdown').innerHTML = 'To juz dziś!';
					return;
				}
				var days = Math.floor(distance / _day);
				document.getElementById('countdown').innerHTML = 'czyli za ' + days + ' dni ;)';
			}
			timer = setInterval(showRemaining, 100);
			(function($) {
				$(window).load(function() {
					$('.loader').fadeOut();
					$('.lbox').delay(350).fadeOut('slow');
					$('body').delay(350).css({'overflow':'visible'});
				});
			})(jQuery); 
			$(window).load(function(){
				function wymiar(){
					jQuery('html, body').animate({scrollTop: jQuery("#main").offset().top}, 2000);
				};
				window.setTimeout( wymiar, 3000 );
			})
			jQuery(document).ready(function() {
				jQuery('.fancybox-thumbs').fancybox({
					prevEffect : 'none',
					nextEffect : 'none',
					closeBtn  : false,
					arrows    : false,
					nextClick : true,
					helpers : {
						thumbs : {
							width  : 50,
							height : 50
						}
					}
				});
				jQuery('.bxslider').bxSlider({
					mode: 'fade',
					auto: true,
					controls: false,
					pager: false
				  });
				jQuery(".anchor").click(function() {
					jQuery('html, body').animate({scrollTop: jQuery("#main").offset().top}, 2000);
				});
				jQuery(".pause").click(function() {
					jQuery(".pause").hide();
					jQuery(".play").show();
				});
				jQuery(".play").click(function() {
					jQuery(".pause").show();
					jQuery(".play").hide();
				});
				

			});
			var vid = document.getElementById("audio"); 
			function playVid() { 
				vid.play(); 
			} 
			function pauseVid() { 
				vid.pause(); 
			} 
			$(window).load(function(){
				vid.volume = 0.05
			});
		</script>
	</body>
</html>