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

Home page

Browse Source
This commit is contained in:
Roman Pyrih
2026-05-15 15:56:02 +02:00
parent d4a13b81c9
commit e50f8aa19f
4 changed files with 473 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
layout/style-css/home-page.css Normal file
View File

File diff suppressed because one or more lines are too long

1
layout/style-css/home-page.css.map Normal file
View File

@@ -0,0 +1 @@
{"version":3,"sources":["../style-scss/_variables.scss","../style-scss/home-page.scss"],"names":[],"mappings":"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","file":"home-page.css"}

259
layout/style-scss/home-page.scss Normal file
View File

@@ -0,0 +1,259 @@
@import 'variables';
@import '_mixins';
html {
scroll-behavior: smooth;
scroll-padding-top: 105px;
}
body {
&.fixed {
overflow: hidden;
}
}
p {
&:last-child {
margin-bottom: 0;
}
}
strong {
font-weight: 700;
}
#AppHome {
.box-title {
color: #13293f;
font-family: $font3;
font-style: normal;
font-weight: 400;
font-size: 30px;
line-height: 1.2;
margin-bottom: 20px;
strong {
font-weight: 600;
}
}
.box-1 {
margin-bottom: 100px;
.tiles {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
row-gap: 15px;
column-gap: 8px;
.tile {
display: flex;
flex-direction: row;
align-items: center;
gap: 18px;
padding: 20px 50px 20px 20px;
min-height: 120px;
border-radius: 30px;
background: $cWhite;
border-radius: 30px;
filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.15));
flex: 1;
transition: all 250ms ease-in-out;
&:hover {
background: #f1efed;
}
.tile-img {
}
.tile-text {
h3 {
color: $cBlack;
font-family: $font3;
font-style: normal;
font-weight: 500;
font-size: 20px;
line-height: 1.25;
margin: 9px;
}
}
svg {
position: absolute;
top: 50%;
right: 20px;
transform: translateY(-50%);
}
}
}
}
.box-2 {
margin-bottom: 135px;
&--wrapper {
.box-title {
margin-bottom: 0;
}
.swiper {
.swiper-slide {
&:hover {
.slide-data {
.slide-img {
img {
transform: scale(1.2);
}
}
}
}
.slide-data {
padding-top: 20px;
.slide-img {
text-align: center;
margin-bottom: -30px;
img {
transition: all 250ms ease-in-out;
}
}
.slide-name {
color: #181c1d;
font-family: $font3;
font-style: normal;
font-weight: 400;
font-size: 20px;
line-height: 1.5;
text-align: center;
text-transform: uppercase;
margin-bottom: 25px;
}
.slide-colors {
display: flex;
flex-direction: row;
width: 100%;
max-width: 160px;
margin: 0 auto;
&.color-pvc {
span {
background-color: #d5d5d5;
width: 100%;
}
}
&.color-drewno {
span {
background: linear-gradient(90deg, #927b63 0%, #a89177 100%);
width: 100%;
}
}
&.color-drewno-alu {
span {
&:nth-child(1) {
background: linear-gradient(
90deg,
#927b63 0%,
#a89177 100%
);
width: 80%;
}
&:nth-child(2) {
background: linear-gradient(
90deg,
#336997 0%,
#3f576f 100%
);
width: 20%;
}
}
}
&.color-alu {
span {
background: linear-gradient(90deg, #336997 0%, #3f576f 100%);
width: 100%;
}
}
&.color-pvc-alu {
span {
&:nth-child(1) {
background: #d5d5d5;
width: 70%;
}
&:nth-child(2) {
background: linear-gradient(
90deg,
#336997 0%,
#3f576f 100%
);
width: 30%;
}
}
}
span {
height: 8px;
}
}
}
}
}
}
}
.box-3 {
}
.box-4 {
}
.box-5 {
}
.box-6 {
}
.box-7 {
&--wrapper {
max-width: 1240px;
margin: 0 auto;
h3 {
color: $cBlack;
font-family: $font3;
font-style: normal;
font-weight: 400;
font-size: 40px;
line-height: 1.375;
text-align: center;
letter-spacing: -0.02em;
margin-bottom: 40px;
}
.box-text {
p {
color: #1d1d1e;
font-family: $font3;
font-weight: 400;
font-size: 18px;
line-height: 1.5;
text-align: center;
&:last-child {
margin-bottom: 0;
}
strong {
font-weight: 600;
}
}
}
}
}
.box-8 {
}
.box-9 {
}
}

212
templates_user/pages/home-page-v2.php Normal file
View File

@@ -0,0 +1,212 @@
<?php
$box1_arrow = ' <svg width="10" height="17" viewBox="0 0 10 17" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.38477 8.03125L9.06738 8.34863L9.07129 8.35254L1.35352 16.0703L0 14.7168L6.68164 8.03516L0 1.35352L1.35352 0L9.38477 8.03125Z" fill="#1E2832"/></svg>';
?>
<main id="AppHome">
<div class="box-1">
<div class="container">
<div class="box-1--wrapper">
<h2 class="box-title">Spektrum <strong>produktów</strong></h2>
<ol class="tiles">
<li class="tile">
<div class="tile-img">
<img src="/upload/filemanager/Pages/home-page/Okna.svg" alt="Okna">
</div>
<div class="tile-text">
<h3>Okna</h3>
</div>
<?= $box1_arrow; ?>
</li>
<li class="tile">
<div class="tile-img">
<img src="/upload/filemanager/Pages/home-page/Okna.svg" alt="Okna">
</div>
<div class="tile-text">
<h3>Drzwi wejściowe</h3>
</div>
<?= $box1_arrow; ?>
</li>
<li class="tile">
<div class="tile-img">
<img src="/upload/filemanager/Pages/home-page/Okna.svg" alt="Okna">
</div>
<div class="tile-text">
<h3>Systemy przesuwne</h3>
</div>
<?= $box1_arrow; ?>
</li>
<li class="tile">
<div class="tile-img">
<img src="/upload/filemanager/Pages/home-page/Okna.svg" alt="Okna">
</div>
<div class="tile-text">
<h3>Fasady</h3>
</div>
<?= $box1_arrow; ?>
</svg>
</li>
<li class="tile">
<div class="tile-img">
<img src="/upload/filemanager/Pages/home-page/Okna.svg" alt="Okna">
</div>
<div class="tile-text">
<h3>Rolety i bramy</h3>
</div>
<?= $box1_arrow; ?>
</li>
</ol>
</div>
</div>
</div>
<div class="box-2">
<div class="container">
<div class="box-2--wrapper">
<h2 class="box-title">Spektrum <strong>możliwości</strong></h2>
<div class="swiper slider-box-2">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="slide-data">
<div class="slide-img">
<img src="/upload/filemanager/Pages/home-page/mini-pvc.png" alt="">
</div>
<h3 class="slide-name">pvc</h3>
<div class="slide-colors color-pvc">
<span></span>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="slide-data">
<div class="slide-img">
<img src="/upload/filemanager/Pages/home-page/mini-drewno.png" alt="">
</div>
<h3 class="slide-name">drewno</h3>
<div class="slide-colors color-drewno">
<span></span>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="slide-data">
<div class="slide-img">
<img src="/upload/filemanager/Pages/home-page/mini-drewno-i-alu.png" alt="">
</div>
<h3 class="slide-name">drewno+alu</h3>
<div class="slide-colors color-drewno-alu">
<span></span>
<span></span>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="slide-data">
<div class="slide-img">
<img src="/upload/filemanager/Pages/home-page/mini-alu.png" alt="">
</div>
<h3 class="slide-name">aluminium</h3>
<div class="slide-colors color-alu">
<span></span>
</div>
</div>
</div>
<div class="swiper-slide">
<div class="slide-data">
<div class="slide-img">
<img src="/upload/filemanager/Pages/home-page/mini-pvc-i-alu.png" alt="">
</div>
<h3 class="slide-name">pvc+alu</h3>
<div class="slide-colors color-pvc-alu">
<span></span>
<span></span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="box-3">
<div class="container">
<div class="box-3--wrapper">
<h2 class="box-title">Spektrum <strong>materiału</strong></h2>
</div>
</div>
</div>
<div class="box-4">
<div class="container">
<div class="box-4--wrapper">
<h2 class="box-title">Spektrum <strong>usług</strong></h2>
</div>
</div>
</div>
<div class="box-5">
<div class="container">
<div class="box-5--wrapper">
</div>
</div>
</div>
<div class="box-6">
<div class="container">
<div class="box-6--wrapper">
<h2 class="box-title">Nasze <strong>kolekcje</strong></h2>
</div>
</div>
</div>
<div class="box-7">
<div class="container">
<div class="box-7--wrapper">
<h3>VIDOK - polski producent okien i drzwi z drewna, PVC i aluminium</h3>
<div class="box-text">
<p><strong>Stolarka okienna VIDOK</strong> to wyjątkowe połączenie <strong>nowoczesności i estetyki</strong>, które doskonale sprawdza się zarówno w budownictwie mieszkaniowym, jak i komercyjnym. Dostępne w szerokiej gamie kolorystycznej okna VIDOK pozwalają tworzyć wyjątkowe przestrzenie, a same okna zapewniają maksimum <strong>wygody, bezpieczeństwa i komfortu termicznego</strong>.</p>
<p>Stolarka otworowa to nie tylko praktyczny element konstrukcji budynku, ale także jeden z istotnych detali dekoracyjnych, który w olbrzymiej mierze wpływa na jego estetykę. Wybierając okna VIDOK, stawiasz na niezwykle <strong>starannie dopracowaną stolarkę</strong>, która oferuje wysoką funkcjonalność i szeroki zakres personalizacji wizualnej, a także konstrukcyjnej!</p>
</div>
</div>
</div>
</div>
<div class="box-8">
<div class="container">
<div class="box-8--wrapper">
</div>
</div>
</div>
<div class="box-9">
<div class="container">
<div class="box-9--wrapper">
<h2 class="box-title">Co mówią o nas klienci</h2>
</div>
</div>
</div>
</main>
<script class="footer">
var swiper_box_2 = new Swiper(".slider-box-2", {
slidesPerView: 5,
spaceBetween: 80,
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
</script>