| Current Path : /home/kamilrogam/komp/2018/180513/_MY_PROJECTS/kamin/ |
| 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&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>