WIND main page backup
<style><!--
.hide_elsewhere {display: block;}
aside {display: none;}
.homepage-box.welcome-wrapper {padding: 0px !important; margin: 0px !important;}
.overlay_container, .blog_banner {
position: relative;
}
.image {
display: block;
width: 100%;
height: auto;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
background-color:rgba(0,0,0,0.8);
}
.overlay_container:hover .overlay {
opacity: 1;
}
.overlay_text {
color: white;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
text-align: center;
}
.overlay_text h2 {color: #fff;font-weight: 600; border-bottom: solid 2px #fff;padding-bottom: 10px;font-size: 24px;}
.overlay_text p {font-size: 16px;margin-bottom:25px;}
.overlay_container > a:last-child, .blog_banner > a:nth-child(2) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent: -9999px;
overflow: hidden;
}
.blog_btn { color: #fff;
font-size: 20px;
border: solid 2px #f77136;
padding: 5px 30px;}
.blog_banner > a:nth-child(2):hover + a {background-color: #f77136;}
.blog_banner {padding: 0px 20px 26px 20px;}
.blog_banner h3 {margin-block-start: calc(1em - 10px);color: #fff;}
.kn_container {width:100%; background-color: #000;
display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
flex-direction:row;flex-wrap:wrap;justify-content:space-between;}
@media (max-width: 768px) {
.kn_child3 {width:100%;}
}
@media (min-width: 768px) {
.kn_child3 {width:33.3%;}
}
--></style>
<style><!--
.kn_container h3 {width:100%;text-align:center;font-size:25px;}
.kn_child4 p {font-weight:600;}
@media (max-width: 768px) {
.kn_child6 {width:50%; padding:10px;}
.overlay_text {width:75%;}
}
@media (min-width: 768px) and (max-width: 991px) {
.kn_child6 {width:33%; padding:10px;}
.overlay_text {width:75%;}
}
@media (min-width: 992px) {
.kn_child6 {width:16%; padding:10px;}
.overlay_text a {font-size: 22px; padding: 6px 24px; border: solid 3px #f77136; color: #fff;}
}
--></style>
<div class="kn_main_page">
<div class="kn_container">
<div class="kn_child3 overlay_container"><img class="image" src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res/New_carousel_wind_alt2.png' alt="Windsurfing" />
<div class="overlay">
<div class="overlay_text">
<h2>Windsurfing</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce consectetuer risus a nunc.</p>
<a href="#">Nakoupit</a></div>
</div>
<a href="/windsurfing/"> </a></div>
<div class="kn_child3 overlay_container"><img class="image" src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res/New_carousel_sup_alt2.png' alt="Paddleboarding" />
<div class="overlay">
<div class="overlay_text">
<h2>Paddleboarding</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce consectetuer risus a nunc.</p>
<a href="#">Nakoupit</a></div>
</div>
<a href="/paddleboarding/"> </a></div>
<div class="kn_child3 overlay_container"><img class="image" src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res/New_carousel_kite_alt2.png' alt="Kiteboarding" />
<div class="overlay">
<div class="overlay_text">
<h2>Kiteboarding</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce consectetuer risus a nunc.</p>
<a href="#">Nakoupit</a></div>
</div>
<a href="/kiteboarding/"> </a></div>
</div>
<div class="kn_container">
<div class="kn_child3 blog_banner" style="text-align: center; background-color: #222;">
<h3>Pročtěte si také naše články o windsurfingu!</h3>
<a href="/vse-o-windsurfingu"> </a> <a class="blog_btn" href="/vse-o-windsurfingu">Přečíst</a></div>
<div class="kn_child3 blog_banner" style="text-align: center; background-color: #111;">
<h3>Jak vybrat paddleboard? Poradíme vám!</h3>
<a href="/vse-o-paddleboardingu"> </a> <a class="blog_btn" href="/vse-o-paddleboardingu">Blog</a></div>
<div class="kn_child3 blog_banner" style="text-align: center; background-color: #000;">
<h3>Vše o kiteboardingu zjistíte na našem blogu!</h3>
<a href="/vse-o-kiteboardingu/"> </a> <a class="blog_btn" href="/vse-o-kiteboardingu/">Blog</a></div>
</div>
<div class="kn_container" style="background-color: #fff;">
<div class="kn_child6"><img style="max-width: 150px; padding: 5px; display: block; margin-left: auto; margin-right: auto;" src="https://www.paddleboardy.cz/user/documents/upload/UXUI/benefits_výběr.png" />
<p style="text-align: center;"><strong>Obrovský výběr přímo v centru Prahy</strong></p>
</div>
<div class="kn_child6"><img style="max-width: 150px; padding: 5px; display: block; margin-left: auto; margin-right: auto;" src="https://www.paddleboardy.cz/user/documents/upload/UXUI/benefits_personál.png" />
<p style="text-align: center;"><strong>Personál, který vám vždy ochotně poradí</strong></p>
</div>
<div class="kn_child6"><img style="max-width: 150px; padding: 5px; display: block; margin-left: auto; margin-right: auto;" src="https://www.paddleboardy.cz/user/documents/upload/UXUI/benefits_24.png" />
<p style="text-align: center;"><strong>Objednávky doručujeme do 24 h.</strong></p>
</div>
<div class="kn_child6"><img style="max-width: 150px; padding: 5px; display: block; margin-left: auto; margin-right: auto;" src="https://www.paddleboardy.cz/user/documents/upload/UXUI/benefits_doprava.png" />
<p style="text-align: center;"><strong>Doprava zdarma již při nákupu nad 1500,-</strong></p>
</div>
<div class="kn_child6"><img style="max-width: 150px; padding: 5px; display: block; margin-left: auto; margin-right: auto;" src="https://www.paddleboardy.cz/user/documents/upload/UXUI/benefits_doprava.png" />
<p style="text-align: center;"><strong>Doprava zdarma již při nákupu nad 1500,-</strong></p>
</div>
<div class="kn_child6"><img style="max-width: 150px; padding: 5px; display: block; margin-left: auto; margin-right: auto;" src="https://www.paddleboardy.cz/user/documents/upload/UXUI/benefits_doprava.png" />
<p style="text-align: center;"><strong>Doprava zdarma již při nákupu nad 1500,-</strong></p>
</div>
</div>
</div>