This commit is contained in:
Roman Pyrih
2026-03-11 10:45:20 +01:00
parent 947931f2b6
commit bcfc7c55ae
8 changed files with 622 additions and 16 deletions

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -3246,3 +3246,288 @@ footer#footer {
}
}
}
//* Page "Struktury" (new)
body.cms-id-15 {
._box-1 {
margin-bottom: 80px;
._row {
display: flex;
flex-direction: row;
column-gap: 90px;
@media (max-width: 1200px) {
column-gap: 50px;
}
@media (max-width: 991px) {
flex-direction: column;
}
._col-1 {
.box-title {
h2 {
color: $cDark;
font-family: $fInter;
font-weight: 500 !important;
font-size: 37px !important;
line-height: 1 !important;
margin: 0 0 59px 0 !important;
strong {
display: block;
padding-top: 20px;
padding-left: 55px;
color: $cGold;
font-family: $fNotoSerifDisplay;
font-weight: 400;
font-size: 37px;
line-height: inherit;
@media (max-width: 1200px) {
padding-left: 0;
padding-top: 0;
}
}
}
}
.box-text {
width: 100%;
@media (min-width: 992px) {
max-width: 406px;
}
p {
color: $cDark;
font-family: $fInter;
font-weight: 400 !important;
font-size: 14px !important;
line-height: 1.78 !important;
text-align: left;
&:last-child {
margin-bottom: 0;
}
}
}
}
._col-2 {
.box-structure-slider {
position: relative;
padding: 0 52px;
width: fit-content;
@media (max-width: 991px) {
margin: 0 auto;
}
.structure-slider {
width: 100%;
max-width: 473px;
@media (max-width: 1200px) {
max-width: 370px;
}
}
.swiper-button-next,
.swiper-button-prev {
color: #8c8c8c;
width: 14px;
}
.swiper-button-next {
right: 15px;
}
.swiper-button-prev {
left: 15px;
}
}
}
}
}
._box-2 {
._row {
.box-title {
h2 {
color: $cDark;
font-family: $fInter;
font-weight: 500 !important;
font-size: 37px !important;
line-height: 1 !important;
margin: 0 0 90px 0 !important;
@media (max-width: 1200px) {
margin: 0 0 60px 0 !important;
}
}
}
._tiles {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
column-gap: 50px;
row-gap: 28px;
._tile {
width: 340px;
cursor: pointer;
@media (max-width: 1200px) {
width: 270px;
}
@media (max-width: 991px) {
width: 295px;
}
@media (max-width: 767px) {
width: 350px;
}
&:hover {
._tile-content {
._tile-images {
.img-1 {
opacity: 0;
visibility: hidden;
}
.img-2 {
opacity: 1;
visibility: visible;
}
}
}
}
&.active {
._tile-content {
._tile-images {
opacity: 0;
visibility: hidden;
}
._tile-text {
opacity: 1;
visibility: visible;
}
}
}
._tile-content {
position: relative;
margin-bottom: 10px;
width: 340px;
height: 340px;
display: flex;
align-items: center;
justify-content: center;
@media (max-width: 1200px) {
width: 270px;
height: 270px;
}
@media (max-width: 991px) {
width: 295px;
height: 295px;
}
@media (max-width: 767px) {
width: 350px;
height: 350px;
}
._tile-images {
position: absolute;
inset: 0;
transition: all 300ms ease-in-out;
img {
width: 340px !important;
min-width: 340px !important;
height: 340px !important;
border-radius: 100%;
object-fit: cover;
@media (max-width: 1200px) {
width: 270px !important;
min-width: 270px !important;
height: 270px !important;
}
@media (max-width: 991px) {
width: 295px !important;
min-width: 295px !important;
height: 295px !important;
}
@media (max-width: 767px) {
width: 350px !important;
min-width: 350px !important;
height: 350px !important;
}
}
.img-1 {
position: absolute;
inset: 0;
z-index: 1;
opacity: 1;
visibility: visible;
transition: all 300ms ease-in-out;
}
.img-2 {
position: absolute;
inset: 0;
opacity: 0;
visibility: hidden;
transition: all 300ms ease-in-out;
}
}
._tile-text {
text-align: left !important;
padding: 25px;
opacity: 0;
visibility: hidden;
transition: all 300ms ease-in-out;
position: relative;
z-index: 2;
h5 {
color: $cDark;
font-family: $fInter;
font-weight: 400;
font-size: 14px !important;
line-height: 1.2;
margin: 0 0 10px 0 !important;
}
p {
color: $cDark;
font-family: $fInter;
font-weight: 700;
font-size: 10px;
line-height: 1.5;
margin: 0 0 10px 0 !important;
}
ul {
margin: 0 !important;
list-style: disc !important;
li {
color: $cDark;
font-family: $fInter;
font-weight: 400;
font-size: 10px;
line-height: 1.4;
padding: 0 !important;
}
}
}
}
h3 {
color: $cDark;
font-family: $fInter;
font-weight: 700;
font-size: 20px;
line-height: 1;
text-align: center !important;
margin: 0 !important;
}
}
}
}
}
}

View File

@@ -861,7 +861,18 @@ $(document).ready(function() {
spaceBetween: 20,
slidesPerView: 1,
loop: true,
speed: 1000,
effect: "fade",
navigation: {
nextEl: ".box-structure-slider .swiper-button-next",
prevEl: ".box-structure-slider .swiper-button-prev",
},
});
}
});
$(document).ready(function() {
$('body').on('click', '.page-cms-15 ._box-2 ._tiles ._tile', function() {
$(this).toggleClass('active').siblings().removeClass('active');
})
});

View File

@@ -10,7 +10,7 @@
<div class="_row">
<div class="_col-1">
<div class="box-title">
<h3>Dobierz <strong>odpowiednią strukturę</strong></h3>
<h2>Dobierz <strong>odpowiednią strukturę</strong></h2>
</div>
<div class="box-text">
<p>Lorem ipsum dolor sit amet consectetur. Leo rhoncus sit amet velit etiam eu nullam sit. Dolor in urna enim
@@ -24,19 +24,323 @@
</div>
</div>
<div class="_col-2">
<div class="structure-slider swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-1.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-2.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-3.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-4.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-5.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-6.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-7.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-8.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-9.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-10.png" alt=""></div>
<div class="box-structure-slider">
<div class="structure-slider swiper">
<div class="swiper-wrapper">
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-1.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-2.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-3.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-4.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-5.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-6.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-7.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-8.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-9.png" alt=""></div>
<div class="swiper-slide"><img src="/img/cms/custom-pages/struktury/image-10.png" alt=""></div>
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
</div>
</div>
</div>
<div class="_box-2">
<div class="_row">
<div class="box-title">
<h2>
Struktury
</h2>
</div>
<div class="_tiles">
<div class="_tile">
<div class="_tile-content">
<div class="_tile-images">
<div class="img-1">
<img src="/img/cms/custom-pages/struktury/image-1.png" alt="">
</div>
<div class="img-2">
<img src="/img/cms/custom-pages/struktury/Canvas-texture.png" alt="">
</div>
</div>
<div class="_tile-text">
<h5>Tapeta winylowa na flizelinie - gramatura 350g</h5>
<p>Cechy charakterystyczne:</p>
<ul>
<li>gramatura: ok. 185 g/m2</li>
<li>grubość: ok. 340 µm</li>
<li>łatwa do usunięcia bez pozostawiania śladów po zakończeniu eksploatacji</li>
<li>odporna na uderzenia i pęknięcia</li>
<li>nie zawiera PCW</li>
<li>oznaczenie CE - EN 15102:2007+A1:2011</li>
<li>atest higieniczny</li>
<li>klasyfikacja ogniowa wg normy EN 13501-1 dla niezadrukowanego</li>
<li>i zadrukowanego materiału (klasa: C - s1, d0 / materiał trudno palny)</li>
</ul>
</div>
</div>
<h3>Canvas</h3>
</div>
<div class="_tile">
<div class="_tile-content">
<div class="_tile-images">
<div class="img-1">
<img src="/img/cms/custom-pages/struktury/image-2.png" alt="">
</div>
<div class="img-2">
<img src="/img/cms/custom-pages/struktury/Canvas-texture.png" alt="">
</div>
</div>
<div class="_tile-text">
<h5>Tapeta winylowa na flizelinie - gramatura 350g</h5>
<p>Cechy charakterystyczne:</p>
<ul>
<li>gramatura: ok. 185 g/m2</li>
<li>grubość: ok. 340 µm</li>
<li>łatwa do usunięcia bez pozostawiania śladów po zakończeniu eksploatacji</li>
<li>odporna na uderzenia i pęknięcia</li>
<li>nie zawiera PCW</li>
<li>oznaczenie CE - EN 15102:2007+A1:2011</li>
<li>atest higieniczny</li>
<li>klasyfikacja ogniowa wg normy EN 13501-1 dla niezadrukowanego</li>
<li>i zadrukowanego materiału (klasa: C - s1, d0 / materiał trudno palny)</li>
</ul>
</div>
</div>
<h3>Concre</h3>
</div>
<div class="_tile">
<div class="_tile-content">
<div class="_tile-images">
<div class="img-1">
<img src="/img/cms/custom-pages/struktury/image-3.png" alt="">
</div>
<div class="img-2">
<img src="/img/cms/custom-pages/struktury/Canvas-texture.png" alt="">
</div>
</div>
<div class="_tile-text">
<h5>Tapeta winylowa na flizelinie - gramatura 350g</h5>
<p>Cechy charakterystyczne:</p>
<ul>
<li>gramatura: ok. 185 g/m2</li>
<li>grubość: ok. 340 µm</li>
<li>łatwa do usunięcia bez pozostawiania śladów po zakończeniu eksploatacji</li>
<li>odporna na uderzenia i pęknięcia</li>
<li>nie zawiera PCW</li>
<li>oznaczenie CE - EN 15102:2007+A1:2011</li>
<li>atest higieniczny</li>
<li>klasyfikacja ogniowa wg normy EN 13501-1 dla niezadrukowanego</li>
<li>i zadrukowanego materiału (klasa: C - s1, d0 / materiał trudno palny)</li>
</ul>
</div>
</div>
<h3>Craft</h3>
</div>
<div class="_tile">
<div class="_tile-content">
<div class="_tile-images">
<div class="img-1">
<img src="/img/cms/custom-pages/struktury/image-4.png" alt="">
</div>
<div class="img-2">
<img src="/img/cms/custom-pages/struktury/Canvas-texture.png" alt="">
</div>
</div>
<div class="_tile-text">
<h5>Tapeta winylowa na flizelinie - gramatura 350g</h5>
<p>Cechy charakterystyczne:</p>
<ul>
<li>gramatura: ok. 185 g/m2</li>
<li>grubość: ok. 340 µm</li>
<li>łatwa do usunięcia bez pozostawiania śladów po zakończeniu eksploatacji</li>
<li>odporna na uderzenia i pęknięcia</li>
<li>nie zawiera PCW</li>
<li>oznaczenie CE - EN 15102:2007+A1:2011</li>
<li>atest higieniczny</li>
<li>klasyfikacja ogniowa wg normy EN 13501-1 dla niezadrukowanego</li>
<li>i zadrukowanego materiału (klasa: C - s1, d0 / materiał trudno palny)</li>
</ul>
</div>
</div>
<h3>Extra Fine</h3>
</div>
<div class="_tile">
<div class="_tile-content">
<div class="_tile-images">
<div class="img-1">
<img src="/img/cms/custom-pages/struktury/image-5.png" alt="">
</div>
<div class="img-2">
<img src="/img/cms/custom-pages/struktury/Canvas-texture.png" alt="">
</div>
</div>
<div class="_tile-text">
<h5>Tapeta winylowa na flizelinie - gramatura 350g</h5>
<p>Cechy charakterystyczne:</p>
<ul>
<li>gramatura: ok. 185 g/m2</li>
<li>grubość: ok. 340 µm</li>
<li>łatwa do usunięcia bez pozostawiania śladów po zakończeniu eksploatacji</li>
<li>odporna na uderzenia i pęknięcia</li>
<li>nie zawiera PCW</li>
<li>oznaczenie CE - EN 15102:2007+A1:2011</li>
<li>atest higieniczny</li>
<li>klasyfikacja ogniowa wg normy EN 13501-1 dla niezadrukowanego</li>
<li>i zadrukowanego materiału (klasa: C - s1, d0 / materiał trudno palny)</li>
</ul>
</div>
</div>
<h3>Fibro</h3>
</div>
<div class="_tile">
<div class="_tile-content">
<div class="_tile-images">
<div class="img-1">
<img src="/img/cms/custom-pages/struktury/image-6.png" alt="">
</div>
<div class="img-2">
<img src="/img/cms/custom-pages/struktury/Canvas-texture.png" alt="">
</div>
</div>
<div class="_tile-text">
<h5>Tapeta winylowa na flizelinie - gramatura 350g</h5>
<p>Cechy charakterystyczne:</p>
<ul>
<li>gramatura: ok. 185 g/m2</li>
<li>grubość: ok. 340 µm</li>
<li>łatwa do usunięcia bez pozostawiania śladów po zakończeniu eksploatacji</li>
<li>odporna na uderzenia i pęknięcia</li>
<li>nie zawiera PCW</li>
<li>oznaczenie CE - EN 15102:2007+A1:2011</li>
<li>atest higieniczny</li>
<li>klasyfikacja ogniowa wg normy EN 13501-1 dla niezadrukowanego</li>
<li>i zadrukowanego materiału (klasa: C - s1, d0 / materiał trudno palny)</li>
</ul>
</div>
</div>
<h3>Linen</h3>
</div>
<div class="_tile">
<div class="_tile-content">
<div class="_tile-images">
<div class="img-1">
<img src="/img/cms/custom-pages/struktury/image-7.png" alt="">
</div>
<div class="img-2">
<img src="/img/cms/custom-pages/struktury/Canvas-texture.png" alt="">
</div>
</div>
<div class="_tile-text">
<h5>Tapeta winylowa na flizelinie - gramatura 350g</h5>
<p>Cechy charakterystyczne:</p>
<ul>
<li>gramatura: ok. 185 g/m2</li>
<li>grubość: ok. 340 µm</li>
<li>łatwa do usunięcia bez pozostawiania śladów po zakończeniu eksploatacji</li>
<li>odporna na uderzenia i pęknięcia</li>
<li>nie zawiera PCW</li>
<li>oznaczenie CE - EN 15102:2007+A1:2011</li>
<li>atest higieniczny</li>
<li>klasyfikacja ogniowa wg normy EN 13501-1 dla niezadrukowanego</li>
<li>i zadrukowanego materiału (klasa: C - s1, d0 / materiał trudno palny)</li>
</ul>
</div>
</div>
<h3>Novella</h3>
</div>
<div class="_tile">
<div class="_tile-content">
<div class="_tile-images">
<div class="img-1">
<img src="/img/cms/custom-pages/struktury/image-8.png" alt="">
</div>
<div class="img-2">
<img src="/img/cms/custom-pages/struktury/Canvas-texture.png" alt="">
</div>
</div>
<div class="_tile-text">
<h5>Tapeta winylowa na flizelinie - gramatura 350g</h5>
<p>Cechy charakterystyczne:</p>
<ul>
<li>gramatura: ok. 185 g/m2</li>
<li>grubość: ok. 340 µm</li>
<li>łatwa do usunięcia bez pozostawiania śladów po zakończeniu eksploatacji</li>
<li>odporna na uderzenia i pęknięcia</li>
<li>nie zawiera PCW</li>
<li>oznaczenie CE - EN 15102:2007+A1:2011</li>
<li>atest higieniczny</li>
<li>klasyfikacja ogniowa wg normy EN 13501-1 dla niezadrukowanego</li>
<li>i zadrukowanego materiału (klasa: C - s1, d0 / materiał trudno palny)</li>
</ul>
</div>
</div>
<h3>Ruta</h3>
</div>
<div class="_tile">
<div class="_tile-content">
<div class="_tile-images">
<div class="img-1">
<img src="/img/cms/custom-pages/struktury/image-9.png" alt="">
</div>
<div class="img-2">
<img src="/img/cms/custom-pages/struktury/Canvas-texture.png" alt="">
</div>
</div>
<div class="_tile-text">
<h5>Tapeta winylowa na flizelinie - gramatura 350g</h5>
<p>Cechy charakterystyczne:</p>
<ul>
<li>gramatura: ok. 185 g/m2</li>
<li>grubość: ok. 340 µm</li>
<li>łatwa do usunięcia bez pozostawiania śladów po zakończeniu eksploatacji</li>
<li>odporna na uderzenia i pęknięcia</li>
<li>nie zawiera PCW</li>
<li>oznaczenie CE - EN 15102:2007+A1:2011</li>
<li>atest higieniczny</li>
<li>klasyfikacja ogniowa wg normy EN 13501-1 dla niezadrukowanego</li>
<li>i zadrukowanego materiału (klasa: C - s1, d0 / materiał trudno palny)</li>
</ul>
</div>
</div>
<h3>Trapan</h3>
</div>
<div class="_tile">
<div class="_tile-content">
<div class="_tile-images">
<div class="img-1">
<img src="/img/cms/custom-pages/struktury/image-10.png" alt="">
</div>
<div class="img-2">
<img src="/img/cms/custom-pages/struktury/Canvas-texture.png" alt="">
</div>
</div>
<div class="_tile-text">
<h5>Tapeta winylowa na flizelinie - gramatura 350g</h5>
<p>Cechy charakterystyczne:</p>
<ul>
<li>gramatura: ok. 185 g/m2</li>
<li>grubość: ok. 340 µm</li>
<li>łatwa do usunięcia bez pozostawiania śladów po zakończeniu eksploatacji</li>
<li>odporna na uderzenia i pęknięcia</li>
<li>nie zawiera PCW</li>
<li>oznaczenie CE - EN 15102:2007+A1:2011</li>
<li>atest higieniczny</li>
<li>klasyfikacja ogniowa wg normy EN 13501-1 dla niezadrukowanego</li>
<li>i zadrukowanego materiału (klasa: C - s1, d0 / materiał trudno palny)</li>
</ul>
</div>
</div>
<h3>Zebra</h3>
</div>
</div>
</div>