Winegeek HP
<style><!--
.kn_subbanner {
position: relative;
overflow: hidden;
text-align:center;
}
.kn_subbanner .fadedbox {
background-color: #ffffffdb;
position: absolute;
top: 0;
left: 0;
bottom: 0;
color: #3c3e39;
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
opacity: 0;
width: 100%;
height: auto;
padding: 20px;
flex-wrap: wrap;
justify-content: center;
display: flex;
align-items: center;
}
.kn_subbanner:hover .fadedbox { opacity: 1; }
.kn_subbanner .text {
-webkit-transition: all 300ms ease-out;
-moz-transition: all 300ms ease-out;
-o-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
transform: translateY(-30px);
-webkit-transform: translateY(-30px);
}
.kn_subbanner .title {
color:#f29553;
font-family: 'recklessheavy' !important;
width: 100%;
font-size: 1.25em;
opacity: 0;
transition-delay: 0.2s;
transition-duration: 0.3s;
}
.kn_subbanner:hover .title,
.kn_subbanner:focus .title {
opacity: 1;
transform: translateY(0px);
-webkit-transform: translateY(0px);
}
.benefit_header {
font-weight: 600;
color: #3c3e39;
}
.no_cart:before, .top-products-wrapper {display: none;}
.kn_subbanners_container {width:100%;
display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
flex-flow: row wrap;justify-content:space-between;}
/* Fix for Safari width */
.kn_subbanners_container:before, .kn_subbanners_container:after {
width: 100%;
}
.kn_subbanner {
position: relative;
}
.kn_subbanner > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent: -9999px;
overflow: hidden;
}
.kn_subbanner > p {
position: absolute;
bottom: 20px;
left: 20px;
color:white;
font-size:25px;
font-weight:600;
margin-bottom:0;
}
@media (max-width: 768px) {
.kn_subbanner {width:100%; padding:10px;}
.kn_benefit {width:100%; padding:10px;flex-wrap: wrap;margin-bottom:0 !important;justify-content: space-between;}
.kn_benefit img {width:25%;padding: 7px;}
.kn_benefit p {width:65%;display: block;font-size: 20px;}
}
@media (min-width: 768px) and (max-width: 991px) {
.kn_benefit {width:50%; padding:10px;}
}
@media (min-width: 768px) and (max-width: 1199px) {
.kn_subbanner {width:49%; padding:10px;}
.kn_benefit img {width:35%;padding: 7px;}
.kn_benefit p {width:65%;display: block;font-size: 20px;}
}
@media (min-width: 992px) and (max-width: 1199px) {
.kn_benefit {width:25%; padding:10px;}
}
@media (min-width: 1200px) {
.kn_benefit {width:25%; padding:0px;}
.kn_subbanner {width:25%; padding:10px;}
.kn_subbanner .title {font-size: 18px; padding: 15px;}
.kn_benefit img {width:35%;padding: 7px;}
.kn_benefit p {width:65%;display: block;font-size: 20px;}
}
.benefit_header {
position: absolute;
font-family: 'recklessheavy' !important;
position: absolute;
left: 10px;
bottom: 4px;
font-size: 22px;
font-weight: 600;
color: #fff;
text-align: left;
}
.kn_subbanner > a {
transition: all 0.5s ease;
background-color: #00025;
position:absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.kn_subbanner a:hover {background-color: transparent;}
.kn_benefit {display:flex;align-items:center;margin-bottom:15px;}
--></style>
<div class="kn_subbanners_container subcarousel_banners">
<div class="kn_benefit"><img src='https://cdn.myshoptet.com/usr/code2.kubanavratil.com/user/documents/upload/Res/2021/winegeek/benefity_doprava.svg' />
<p><span style="color: #f29553; font-family: 'recklessheavy' !important;">Doprava ZDARMA</span><br />již od 0 Kč!</p>
</div>
<div class="kn_benefit"><img src='https://cdn.myshoptet.com/usr/code2.kubanavratil.com/user/documents/upload/Res/2021/winegeek/benefity_vyber.svg' />
<p><span style="color: #f29553; font-family: 'recklessheavy' !important;">Žádné váhání</span><br />Vína jsme předvybrali pro vás</p>
</div>
<div class="kn_benefit"><img src='https://cdn.myshoptet.com/usr/code2.kubanavratil.com/user/documents/upload/Res/2021/winegeek/benefity_prodejna.svg' />
<p><span style="color: #f29553; font-family: 'recklessheavy' !important;">Kamenná prodejna</span><br />na Praze 7</p>
</div>
<div class="kn_benefit"><img src='https://cdn.myshoptet.com/usr/code2.kubanavratil.com/user/documents/upload/Res/2021/winegeek/benefity_vino.svg' />
<p><span style="color: #f29553; font-family: 'recklessheavy' !important;">Víno bez zbytečností</span><br />S respektem k přírodě i k člověku. </p>
</div>
<div class="kn_subbanner"><img src='https://cdn.myshoptet.com/usr/code2.kubanavratil.com/user/documents/upload/Res/2021/winegeek/subbanner_sixpacky_1.png' />
<p class="benefit_header">Six-packy</p>
<div class="fadedbox">
<div class="title text">Rozmanité výběry 6 vín</div>
<a class="btn btn-cart add-to-cart-button no_cart" href="#">Omrknout</a></div>
<a href="/"> </a></div>
<div class="kn_subbanner"><img src='https://cdn.myshoptet.com/usr/code2.kubanavratil.com/user/documents/upload/Res/2021/winegeek/subbanner_naturální vína_1.png' />
<p class="benefit_header">Naturální vína</p>
<div class="fadedbox">
<div class="title text">Chutě a vůně vín bez makeupu</div>
<a class="btn btn-cart add-to-cart-button no_cart" href="#">Objevovat</a></div>
<a href="/"> </a></div>
<div class="kn_subbanner"><img src='https://cdn.myshoptet.com/usr/code2.kubanavratil.com/user/documents/upload/Res/2021/winegeek/subbanner_petnaty_1.png' />
<p class="benefit_header">Pét-naty</p>
<div class="fadedbox">
<div class="title text">Zábavné bubliny pod korunkou!</div>
<a class="btn btn-cart add-to-cart-button no_cart" href="#">Bouchnout to</a></div>
<a href="/"> </a></div>
<div class="kn_subbanner"><img src='https://cdn.myshoptet.com/usr/code2.kubanavratil.com/user/documents/upload/Res/2021/winegeek/subbanner_oranzove_1.png' />
<p class="benefit_header">Oranžová vína</p>
<div class="fadedbox">
<div class="title text">Bílá macerovaná vína plná života</div>
<a class="btn btn-cart add-to-cart-button no_cart" href="#">Chci to na slupkách</a></div>
<a href="/"> </a></div>
</div>