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

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

@@ -15,7 +15,7 @@
<div class="container">
<div class="box-1--wrapper">
<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>
</div>
<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-col c-col-1">
<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>✅ Wszystko gotowe - czekamy na Twój ruch</li>
</ul>
</div>
<div class="c-col c-col-2">
@@ -158,7 +159,6 @@
<div class="c-row c-row-1">
<div class="c-col c-col-1">
<h2>Nie zamawiasz - <strong>kupujesz gotowe</strong></h2>
<h2>Nie czekasz - <strong>montujesz od razu</strong></h2>
</div>
</div>
</div>
@@ -166,6 +166,21 @@
<div class="box-8">
<div class="c-row c-row-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>
<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>
@@ -176,3 +191,15 @@
</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>