JustWine homepage
<style><!--
.index-content-wrapper {display:flex; flex-direction: column;}
.homepage-texts-wrapper {order: 1;}
.shp-tabs-wrapper.homepage-tabs-wrapper {order: 2;}
.banners-content.body-banners {order: 3;}
.kn_container {width:100%;
display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex;
flex-direction:row;flex-wrap:wrap;justify-content:center;}
.kn_child3 p {font-size: 22px;
text-align: left;
position: relative;
bottom: 50px;
color: #fff;
margin-bottom: -50px;
width: 100%;
background-color: rgba(0,0,0,0.8);
padding: 10px 25px;}
.kn_child3 {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
position: relative;
}
.kn_child3:hover {opacity: 0.7;}
.kn_child3 > a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent: -9999px;
overflow: hidden;
}
.kn_child4 { padding:35px;
padding-left: 85px;
background-position: 35px center;
background-repeat: no-repeat;
background-size: 70px 70px;
}
.kn_child4 p:nth-child(1) {font-size:24px; font-weight: 600;}
.benefit1 {background-image:url("https://322821.myshoptet.com/user/documents/upload/res/Bílé víno.svg");}
@media (max-width: 768px) {
.kn_child1 {width:100%; padding:10px;}
.kn_child2 {width:100%; padding:10px;}
.kn_child3 {width:100%; padding:10px;}
.kn_child4 {width:50%; padding:10px;}
}
@media (min-width: 768px) and (max-width: 992px) {
.kn_child1 {width:100%; padding:10px;}
.kn_child2 {width:100%; padding:10px;}
.kn_child3 {width:50%; padding:10px;}
.kn_child4 {width:50%; padding:10px;}
}
@media (min-width: 993px) {
.kn_child1 {width:100%; padding:10px;}
.kn_child2 {width:50%; padding:10px;}
.kn_child3 {width:33.3333%;}
.kn_child4 {width:25%;}
}
--></style>
<div class="kn_container" style="margin-top: 30px; margin-bottom: 30px;">
<div class="kn_child4 benefit1" style="text-align: center;">
<p>Benefit 1</p>
<p>vysvětlivka</p>
</div>
<div class="kn_child4 benefit1" style="text-align: center;">
<p>Benefit 2</p>
<p>vysvětlivka</p>
</div>
<div class="kn_child4 benefit1" style="text-align: center;">
<p>Benefit 3</p>
<p>vysvětlivka</p>
</div>
<div class="kn_child4 benefit1" style="text-align: center;">
<p>Benefit 4</p>
<p>vysvětlivka</p>
</div>
</div>
<div class="kn_container">
<div class="kn_child3" style="text-align: center;"><img src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res/Rozcestník.png' alt="Rozcestník" />
<p style="text-align: left;">Novinky</p>
<a href="#"> </a></div>
<div class="kn_child3" style="text-align: center;"><img src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res/Rozcestník.png' alt="Rozcestník" />
<p style="text-align: left;">Tipy na dárky</p>
<a href="#"> </a></div>
<div class="kn_child3" style="text-align: center;"><img src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res/Rozcestník.png' alt="Rozcestník" />
<p style="text-align: left;">Vstupenky na degustace</p>
<a href="#"> </a></div>
<div class="kn_child3" style="text-align: center;"><img src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res/Rozcestník.png' alt="Rozcestník" />
<p style="text-align: left;">Přírodní vína</p>
<a href="#"> </a></div>
<div class="kn_child3" style="text-align: center;"><img src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res/Rozcestník.png' alt="Rozcestník" />
<p style="text-align: left;">Degustační balíčky</p>
<a href="#"> </a></div>
<div class="kn_child3" style="text-align: center;"><img src='https://cdn.myshoptet.com/usr/code.kubanavratil.com/user/documents/upload/res/Rozcestník.png' alt="Rozcestník" />
<p style="text-align: left;">JustWine lovers</p>
<a href="#"> </a></div>
</div>