Project-Pro/vidok.com
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Save

Browse Source
This commit is contained in:
Roman Pyrih
2025-05-14 15:58:29 +02:00
parent d5768525a5
commit c22a17e23c
4 changed files with 114 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
layout/style-css/promocja-drzwi-aluminiowe.css
View File

File diff suppressed because one or more lines are too long

2
layout/style-css/promocja-drzwi-aluminiowe.css.map
View File

File diff suppressed because one or more lines are too long

123
layout/style-scss/promocja-drzwi-aluminiowe.scss
View File

@@ -19,19 +19,21 @@ strong {
} }
.box-1 { .box-1 {
background-image: url('/upload/filemanager/Pages/Promocje/Drzwi-aluminiowe/img-1.jpg'); background-image: url('/upload/filemanager/Pages/Promocje/Drzwi-aluminiowe/img-1-1.jpg');
background-position: center; background-position: center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
min-height: 434px; min-height: 390px;
border-bottom: 10px solid #adbdcd; border-bottom: 10px solid #adbdcd;
align-content: center; align-content: flex-end;
@include respond-below(sm) { @include respond-below(sm) {
min-height: 315px; min-height: 315px;
} }
.box-1--wrapper { .box-1--wrapper {
margin-bottom: 50px;
.box-title { .box-title {
position: relative; position: relative;
margin-bottom: 80px; margin-bottom: 80px;
@@ -40,39 +42,23 @@ strong {
margin-bottom: 30px; margin-bottom: 30px;
} }
img {
position: absolute;
width: 100%;
max-width: 135px;
bottom: 0;
transform: translateX(-70%);
@include respond-below(md) {
max-width: 105px;
}
@include respond-below(sm) {
max-width: 80px;
}
}
h1 { h1 {
position: relative; position: relative;
color: $cWhite; color: $cWhite;
font-size: 50px; font-size: 40px;
font-weight: 400; font-weight: 400;
line-height: 1; line-height: 1;
letter-spacing: 2px; letter-spacing: 2px;
text-transform: uppercase; text-transform: uppercase;
strong { strong {
font-size: 70px; font-size: 60px;
font-weight: 700; font-weight: 700;
display: block; display: block;
} }
@include respond-below(md) { @include respond-below(md) {
font-size: 40px; font-size: 30px;
strong { strong {
font-size: 50px; font-size: 50px;
@@ -92,10 +78,10 @@ strong {
margin: 0; margin: 0;
color: $cWhite; color: $cWhite;
font-size: 35px; font-size: 30px;
font-weight: 400; font-weight: 300;
line-height: 1; line-height: 1;
letter-spacing: 2px; letter-spacing: 1px;
text-transform: uppercase; text-transform: uppercase;
@include respond-below(md) { @include respond-below(md) {
@@ -108,7 +94,7 @@ strong {
strong { strong {
display: inline-block; display: inline-block;
padding: 12px; padding: 5px 7px;
background: #6488ab; background: #6488ab;
font-weight: 700; font-weight: 700;
border-radius: 10px; border-radius: 10px;
@@ -128,7 +114,7 @@ strong {
h2 { h2 {
position: relative; position: relative;
color: $cTxtBlack; color: $cTxtBlack;
font-size: 40px; font-size: 30px;
font-weight: 400; font-weight: 400;
line-height: 1.3; line-height: 1.3;
letter-spacing: 2px; letter-spacing: 2px;
@@ -154,7 +140,7 @@ strong {
font-size: 20px; font-size: 20px;
font-weight: 300; font-weight: 300;
line-height: 1; line-height: 1;
letter-spacing: 2px; letter-spacing: 0;
text-align: center; text-align: center;
@include respond-below(md) { @include respond-below(md) {
@@ -191,9 +177,10 @@ strong {
&-1 { &-1 {
position: relative; position: relative;
// @include respond-below(md) { @include respond-below(md) {
// order: 2; order: 2;
// } }
.product-head { .product-head {
position: relative; position: relative;
width: fit-content; width: fit-content;
@@ -201,12 +188,13 @@ strong {
@include respond-below(md) { @include respond-below(md) {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 30px;
} }
span.tag { span.tag {
position: relative; position: relative;
color: $cWhite; color: $cWhite;
font-size: 30px; font-size: 25px;
font-weight: 700; font-weight: 700;
letter-spacing: 1px; letter-spacing: 1px;
line-height: 1; line-height: 1;
@@ -259,7 +247,7 @@ strong {
@include respond-below(lg) { @include respond-below(lg) {
gap: 30px; gap: 30px;
padding: 20px 20px 10px 40px; padding: 20px 20px 10px 50px;
} }
span { span {
@@ -338,7 +326,10 @@ strong {
line-height: 1; line-height: 1;
margin-bottom: 10px; margin-bottom: 10px;
@include respond-below(lg) { @include respond-below(md) {
text-align: center;
}
@include respond-below(sm) {
font-size: 30px; font-size: 30px;
} }
} }
@@ -347,6 +338,10 @@ strong {
padding: 0; padding: 0;
margin: 0 0 40px 0; margin: 0 0 40px 0;
@include respond-below(md) {
text-align: center;
}
li { li {
color: $cTxtBlack; color: $cTxtBlack;
font-size: 20px; font-size: 20px;
@@ -394,6 +389,12 @@ strong {
padding-bottom: 6px; padding-bottom: 6px;
width: 16px; width: 16px;
} }
@include respond-below(md) {
margin: 0 auto;
display: block;
width: fit-content;
}
} }
} }
} }
@@ -424,19 +425,27 @@ strong {
height: 400px; height: 400px;
} }
@include respond-below(md) { @include respond-below(md) {
height: 475px; height: 600px;
width: 50svw;
border-top-left-radius: 50px; border-top-left-radius: 50px;
border-bottom-left-radius: 50px; border-bottom-left-radius: 50px;
} }
@include respond-below(sm) {
height: 440px;
}
@include respond-below(xs) { @include respond-below(xs) {
top: auto; top: auto;
bottom: 0; bottom: 0;
left: 50%; left: 50%;
width: 100svw;
border-radius: 0; border-radius: 0;
transform: translateX(-50%); transform: translateX(-50%);
} }
} }
@include respond-below(md) {
order: 1;
}
@include respond-below(xs) { @include respond-below(xs) {
flex-direction: column-reverse; flex-direction: column-reverse;
padding-left: 0; padding-left: 0;
@@ -463,7 +472,7 @@ strong {
.c-desk-text { .c-desk-text {
@include respond-below(xs) { @include respond-below(xs) {
text-align: center; text-align: center;
padding-bottom: 30px; // padding-bottom: 30px;
transform: rotate(90deg); transform: rotate(90deg);
margin-bottom: -60px; margin-bottom: -60px;
margin-top: -30px; margin-top: -30px;
@@ -535,7 +544,7 @@ strong {
width: 100%; width: 100%;
max-width: fit-content; max-width: fit-content;
@include respond-below(xs) { @include respond-below(md) {
display: none; display: none;
} }
} }
@@ -550,7 +559,7 @@ strong {
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
column-gap: 60px; column-gap: 60px;
align-items: center; align-items: center;
padding-bottom: 50px; padding-bottom: 80px;
border-bottom: 1px solid #000000; border-bottom: 1px solid #000000;
@include respond-below(xs) { @include respond-below(xs) {
@@ -587,8 +596,8 @@ strong {
&-2 { &-2 {
h3 { h3 {
text-align: right; text-align: right;
color: $cTxtBlack; color: #7087a4;
font-size: 35px; font-size: 30px;
font-family: $font3; font-family: $font3;
letter-spacing: 2px; letter-spacing: 2px;
text-transform: uppercase; text-transform: uppercase;
@@ -710,10 +719,12 @@ strong {
@include respond-below(xs) { @include respond-below(xs) {
flex-direction: column; flex-direction: column;
row-gap: 30px; // row-gap: 30px;
} }
.product-img { .product-img {
position: relative;
img { img {
@include respond-below(sm) { @include respond-below(sm) {
width: 100%; width: 100%;
@@ -740,7 +751,8 @@ strong {
} }
@include respond-below(xs) { @include respond-below(xs) {
border-radius: 25px; border-radius: 25px;
padding: 30px; padding: 100px 30px 30px 30px;
margin-top: -50px;
text-align: center; text-align: center;
} }
@@ -907,6 +919,29 @@ strong {
&-1 { &-1 {
.c-col { .c-col {
&-1 { &-1 {
.mySwiper {
@include respond-above(sm) {
display: none;
}
.swiper-slide {
text-align: center;
}
.swiper-button-prev,
.swiper-button-next {
width: 40px;
height: 40px;
background: #2c3030;
border-radius: 100%;
&::after {
color: $cWhite;
font-size: 20px;
}
}
}
ol { ol {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -916,6 +951,10 @@ strong {
margin: 0; margin: 0;
list-style: none; list-style: none;
@include respond-below(sm) {
display: none;
}
@include respond-below(xs) { @include respond-below(xs) {
flex-direction: column; flex-direction: column;
} }

33
templates_user/pages/promocja-drzwi-aluminiowe.php
View File

@@ -15,7 +15,7 @@
<div class="container"> <div class="container">
<div class="box-1--wrapper"> <div class="box-1--wrapper">
<div class="box-title"> <div class="box-title">
<img src="/upload/filemanager/Pages/Promocje/Drzwi-aluminiowe/V.svg" alt=""> <!-- <img src="/upload/filemanager/Pages/Promocje/Drzwi-aluminiowe/V.svg" alt=""> -->
<h1><strong>Drzwi aluminiowe</strong> Va-d 114</h1> <h1><strong>Drzwi aluminiowe</strong> Va-d 114</h1>
</div> </div>
<p>Gotowe. Stylowe. <strong>Dostępne od ręki</strong></p> <p>Gotowe. Stylowe. <strong>Dostępne od ręki</strong></p>
@@ -85,8 +85,9 @@
<div class="c-row c-row-2"> <div class="c-row c-row-2">
<div class="c-col c-col-1"> <div class="c-col c-col-1">
<ul> <ul>
<li>✅ Montaż możliwy już jutro</li> <li>✅ Czas to komfort - szybka decyzja, fachowe wsparcie</li>
<li>✅ Ilość ograniczona - kto pierwszy, ten montuje</li> <li>✅ Ilość ograniczona - kto pierwszy, ten montuje</li>
<li>✅ Wszystko gotowe - czekamy na Twój ruch</li>
</ul> </ul>
</div> </div>
<div class="c-col c-col-2"> <div class="c-col c-col-2">
@@ -158,7 +159,6 @@
<div class="c-row c-row-1"> <div class="c-row c-row-1">
<div class="c-col c-col-1"> <div class="c-col c-col-1">
<h2>Nie zamawiasz - <strong>kupujesz gotowe</strong></h2> <h2>Nie zamawiasz - <strong>kupujesz gotowe</strong></h2>
<h2>Nie czekasz - <strong>montujesz od razu</strong></h2>
</div> </div>
</div> </div>
</div> </div>
@@ -166,6 +166,21 @@
<div class="box-8"> <div class="box-8">
<div class="c-row c-row-1"> <div class="c-row c-row-1">
<div class="c-col c-col-1"> <div class="c-col c-col-1">
<div class="swiper mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="/upload/filemanager/Pages/Promocje/Drzwi-aluminiowe/img-5.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="/upload/filemanager/Pages/Promocje/Drzwi-aluminiowe/img-6.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="/upload/filemanager/Pages/Promocje/Drzwi-aluminiowe/img-7.jpg" alt="">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<ol> <ol>
<li><img src="/upload/filemanager/Pages/Promocje/Drzwi-aluminiowe/img-5.jpg" alt=""></li> <li><img src="/upload/filemanager/Pages/Promocje/Drzwi-aluminiowe/img-5.jpg" alt=""></li>
<li><img src="/upload/filemanager/Pages/Promocje/Drzwi-aluminiowe/img-6.jpg" alt=""></li> <li><img src="/upload/filemanager/Pages/Promocje/Drzwi-aluminiowe/img-6.jpg" alt=""></li>
@@ -176,3 +191,15 @@
</div> </div>
</div> </div>
</div> </div>
<script class="footer">
var swiper = new Swiper(".mySwiper", {
// slidesPerView: 3,
slidesPerView: 1,
// spaceBetween: 30,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>