<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Baner Decathlon</title>
<!-- <link rel="stylesheet" href="./style.css"> -->
</head>
<body style="margin:0;padding:0;">
<style>
.banner,.banner-container{overflow:hidden}a,img{border:none;outline:0}.banner{position:relative;background:#f3f3f3;display:block;-webkit-transform-origin:0 50%;-moz-transform-origin:0 50%;-ms-transform-origin:0 50%;-o-transform-origin:0 50%;transform-origin:0 50%}.banner.is-hidden{display:none}.banner img{display:block;max-width:100%}.banner-item{display:none}.banner-item.run-animation{display:-webkit-box;display:-moz-box;display:box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex}.banner-item-product{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;-webkit-flex:1 1 auto;-moz-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;display:-webkit-box;display:-moz-box;display:box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-moz-box-pack:center;box-pack:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;justify-content:center;-ms-flex-pack:center;-webkit-box-align:center;-moz-box-align:center;box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;-ms-flex-align:center}.item-product-info{margin-left:25px}.item-product-info img{display:block}.item-product-name{margin-bottom:7px}.bannr-item-info,.item-product-image,.item-product-name,.item-product-price{opacity:0}.banner-fallback{display:none}.banner-fallback.is-visible{display:block}.banner-fallback img{width:100%}@media (min-width:480px) and (max-width:767px){.banner-decathlon img{width:65%}}@media (min-width:768px) and (max-width:991px){.banner{width:780px;height:100px}.banner .bannr-item-info img,.banner .item-product-image{height:100px;width:auto}.banner .banner-decathlon img{height:90px;width:auto}.banner .banner-item-product{position:absolute;left:300px;width:100%}.run-animation.banner-item{-webkit-animation:fadeOut 1s ease 5s forwards;-moz-animation:fadeOut 1s ease 5s forwards;animation:fadeOut 1s ease 5s forwards}.run-animation .bannr-item-info{-webkit-animation:fadeIn 1s ease forwards;-moz-animation:fadeIn 1s ease forwards;animation:fadeIn 1s ease forwards}.run-animation .item-product-image,.run-animation .item-product-name,.run-animation .item-product-price{-webkit-animation-name:fadeIn,fadeOut;-moz-animation-name:fadeIn,fadeOut;animation-name:fadeIn,fadeOut;-webkit-animation-timing-function:ease;-moz-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:.5s;-moz-animation-duration:.5s;animation-duration:.5s}.run-animation .banner-item-product-1 .item-product-image{-webkit-animation-delay:.5s,2.5s;-moz-animation-delay:.5s,2.5s;animation-delay:.5s,2.5s}.run-animation .banner-item-product-1 .item-product-name{-webkit-animation-delay:1s,2.5s;-moz-animation-delay:1s,2.5s;animation-delay:1s,2.5s}.run-animation .banner-item-product-1 .item-product-price{-webkit-animation-delay:1.5s,2.5s;-moz-animation-delay:1.5s,2.5s;animation-delay:1.5s,2.5s}.run-animation .banner-item-product-2 .item-product-image{-webkit-animation-delay:3s,5s;-moz-animation-delay:3s,5s;animation-delay:3s,5s}.run-animation .banner-item-product-2 .item-product-name{-webkit-animation-delay:3.5s,5s;-moz-animation-delay:3.5s,5s;animation-delay:3.5s,5s}.run-animation .banner-item-product-2 .item-product-price{-webkit-animation-delay:4s,5s;-moz-animation-delay:4s,5s;animation-delay:4s,5s}}@media (min-width:768px){.banner-item{position:absolute;pointer-events:none}.banner-decathlon{margin:0 10px;position:absolute;right:0;top:50%;-webkit-transform:translateY(-50%);-moz-transform:translateY(-50%);-ms-transform:translateY(-50%);-o-transform:translateY(-50%);transform:translateY(-50%)}}@media (min-width:768px) and (max-width:1139px){.banner-item-product{margin:0 10px}.banner-item-4 .banner-item-product-1{margin-right:10px}.banner-item-4 .banner-item-product-2{margin-left:10px}}@media (min-width:992px){.banner{width:1140px;height:120px}.run-animation.banner-item{-webkit-animation:fadeOut 1s ease 5s forwards;-moz-animation:fadeOut 1s ease 5s forwards;animation:fadeOut 1s ease 5s forwards}.run-animation .bannr-item-info{-webkit-animation:fadeIn 1s ease forwards;-moz-animation:fadeIn 1s ease forwards;animation:fadeIn 1s ease forwards}.run-animation .item-product-image,.run-animation .item-product-name,.run-animation .item-product-price{-webkit-animation-name:fadeIn;-moz-animation-name:fadeIn;animation-name:fadeIn;-webkit-animation-timing-function:ease;-moz-animation-timing-function:ease;animation-timing-function:ease;-webkit-animation-fill-mode:forwards;-moz-animation-fill-mode:forwards;animation-fill-mode:forwards;-webkit-animation-duration:.5s;-moz-animation-duration:.5s;animation-duration:.5s}.run-animation .banner-item-product-1 .item-product-image{-webkit-animation-delay:.5s;-moz-animation-delay:.5s;animation-delay:.5s}.run-animation .banner-item-product-1 .item-product-name{-webkit-animation-delay:1s;-moz-animation-delay:1s;animation-delay:1s}.run-animation .banner-item-product-1 .item-product-price{-webkit-animation-delay:1.5s;-moz-animation-delay:1.5s;animation-delay:1.5s}.run-animation .banner-item-product-2 .item-product-image{-webkit-animation-delay:2s;-moz-animation-delay:2s;animation-delay:2s}.run-animation .banner-item-product-2 .item-product-name{-webkit-animation-delay:2.5s;-moz-animation-delay:2.5s;animation-delay:2.5s}.run-animation .banner-item-product-2 .item-product-price{-webkit-animation-delay:3s;-moz-animation-delay:3s;animation-delay:3s}}@media (min-width:992px) and (max-width:1139px){.banner{-webkit-transform:scale(.88);-moz-transform:scale(.88);-ms-transform:scale(.88);-o-transform:scale(.88);transform:scale(.88)}}@media (min-width:1140px){.banner-item-product{margin:0 25px}}@media (max-width:767px){.banner{width:100%;display:-webkit-box;display:-moz-box;display:box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex}.banner .bannr-item-info img,.banner .item-product-image{max-height:100px}.banner-item{-webkit-box-flex:1;-moz-box-flex:1;box-flex:1;-webkit-flex:1 1 auto;-moz-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto}.banner-item-product{display:none!important}.banner-decathlon{-webkit-box-flex:0;-moz-box-flex:0;box-flex:0;-webkit-flex:0 1 auto;-moz-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto;padding:10px;height:auto;display:-webkit-box;display:-moz-box;display:box;display:-webkit-flex;display:-moz-flex;display:-ms-flexbox;display:flex;-webkit-box-align:center;-moz-box-align:center;box-align:center;-webkit-align-items:center;-moz-align-items:center;-ms-align-items:center;-o-align-items:center;align-items:center;-ms-flex-align:center;-webkit-box-pack:center;-moz-box-pack:center;box-pack:center;-webkit-justify-content:center;-moz-justify-content:center;-ms-justify-content:center;-o-justify-content:center;justify-content:center;-ms-flex-pack:center}.run-animation.banner-item{-webkit-animation:fadeOut 1s ease 5s forwards;-moz-animation:fadeOut 1s ease 5s forwards;animation:fadeOut 1s ease 5s forwards}.run-animation .bannr-item-info{-webkit-animation:fadeIn 1s ease forwards;-moz-animation:fadeIn 1s ease forwards;animation:fadeIn 1s ease forwards}}@media (max-width:479px){.banner-decathlon img{width:55%}}@keyframes fadeOut{0%{opacity:1}100%,75%{opacity:0}}@keyframes fadeIn{0%{opacity:0}100%,75%{opacity:1}}
</style>
<div class="banner-container">
<a id="js-banner" href="https://www.decathlon.pl/C-411460-koszykowka?utm_source=gwiazdybasketu.pl&utm_medium=banner&utm_campaign=gwiazdybasketu.plbaner" target="_blank" class="banner">
<div id="js-banner-item-1" class="banner-item banner-item-1 run-animation">
<div class="bannr-item-info">
<img src="./img/info-1.jpg">
</div>
<div href="#1" class="banner-item-product banner-item-product-1">
<img class="item-product-image" src="./img/item-1-product-1.jpg">
<div class="item-product-info">
<img class="item-product-name" src="./img/item-1-product-1-name.jpg">
<img class="item-product-price" src="./img/item-1-product-1-price.jpg">
</div>
</div>
<div href="#2" class="banner-item-product banner-item-product-2">
<img class="item-product-image" src="./img/item-1-product-2.jpg">
<div class="item-product-info">
<img class="item-product-name" src="./img/item-1-product-2-name.jpg">
<img class="item-product-price" src="./img/item-1-product-2-price.jpg">
</div>
</div>
</div>
<div id="js-banner-item-2" class="banner-item banner-item-2">
<div class="bannr-item-info">
<img src="./img/info-2.jpg">
</div>
<div href="#3" class="banner-item-product banner-item-product-1">
<img class="item-product-image" src="./img/item-2-product-1.jpg">
<div class="item-product-info">
<img class="item-product-name" src="./img/item-2-product-1-name.jpg">
<img class="item-product-price" src="./img/item-2-product-1-price.jpg">
</div>
</div>
<div href="#4" class="banner-item-product banner-item-product-2">
<img class="item-product-image" src="./img/item-2-product-2.jpg">
<div class="item-product-info">
<img class="item-product-name" src="./img/item-2-product-2-name.jpg">
<img class="item-product-price" src="./img/item-2-product-2-price.jpg">
</div>
</div>
</div>
<div id="js-banner-item-3" class="banner-item banner-item-3">
<div class="bannr-item-info">
<img src="./img/info-3.jpg">
</div>
<div href="#5" class="banner-item-product banner-item-product-1">
<img class="item-product-image" src="./img/item-3-product-1.jpg">
<div class="item-product-info">
<img class="item-product-name" src="./img/item-3-product-1-name.jpg">
<img class="item-product-price" src="./img/item-3-product-1-price.jpg">
</div>
</div>
<div href="#6" class="banner-item-product banner-item-product-2">
<img class="item-product-image" src="./img/item-3-product-2.jpg">
<div class="item-product-info">
<img class="item-product-name" src="./img/item-3-product-2-name.jpg">
<img class="item-product-price" src="./img/item-3-product-2-price.jpg">
</div>
</div>
</div>
<div id="js-banner-item-4" class="banner-item banner-item-4">
<div class="bannr-item-info">
<img src="./img/info-4.jpg">
</div>
<div href="#7" class="banner-item-product banner-item-product-1">
<img class="item-product-image" src="./img/item-4-product-1.jpg">
<div class="item-product-info">
<img class="item-product-name" src="./img/item-4-product-1-name.jpg">
<img class="item-product-price" src="./img/item-4-product-1-price.jpg">
</div>
</div>
<div href="#8" class="banner-item-product banner-item-product-2">
<img class="item-product-image" src="./img/item-4-product-2.jpg">
<div class="item-product-info">
<img class="item-product-name" src="./img/item-4-product-2-name.jpg">
<img class="item-product-price" src="./img/item-4-product-2-price.jpg">
</div>
</div>
</div>
<div class="banner-decathlon">
<img src="./img/decathlon.jpg">
</div>
</a>
<a id="js-banner-fallback" href="https://www.decathlon.pl/C-411460-koszykowka?utm_source=gwiazdybasketu.pl&utm_medium=banner&utm_campaign=gwiazdybasketu.plbaner" target="_blank" class="banner-fallback">
<img src="./img/banner-decathlon.jpg" alt="">
</a>
</div>
<script type="text/javascript">
function addClass(el, classNameToAdd){
el.className += ' ' + classNameToAdd;
}
function removeClass(el, classNameToRemove){
var elClass = ' ' + el.className + ' ';
while(elClass.indexOf(' ' + classNameToRemove + ' ') !== -1){
elClass = elClass.replace(' ' + classNameToRemove + ' ', '');
}
el.className = elClass;
}
var animation = false,
animationstring = 'animation',
keyframeprefix = '',
domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
pfx = '',
elm = document.createElement('div');
if( elm.style.animationName !== undefined ) { animation = true; }
if( animation === false ) {
for( var i = 0; i < domPrefixes.length; i++ ) {
if( elm.style[ domPrefixes[i] + 'AnimationName' ] !== undefined ) {
pfx = domPrefixes[ i ];
animationstring = pfx + 'Animation';
keyframeprefix = '-' + pfx.toLowerCase() + '-';
animation = true;
break;
}
}
}
if( animation === false ) {
addClass(document.getElementById('js-banner'), 'is-hidden');
addClass(document.getElementById('js-banner-fallback'), 'is-visible');
} else {
var i = 0, currItem, nextItem;
var bannerInterval = setInterval(function() {
i++
currItem = document.getElementById('js-banner-item-'+i);
removeClass(currItem, 'run-animation');
if (i === 4) i = 0;
nextItem = document.getElementById('js-banner-item-'+(i+1));
addClass(nextItem, 'run-animation');
}, 5000);
}
</script>
</body>
</html>
