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

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 {
}
}