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

first commit

Browse Source
This commit is contained in:
Jacek Pyziak
2025-03-06 19:27:29 +01:00
commit f2698d53d0
6352 changed files with 822401 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

144
layout/style-scss/_mixins.scss Normal file
View File

@@ -0,0 +1,144 @@
$breakpoints: (
xs: 576px,
sm: 768px,
md: 992px,
lg: 1200px
);
@mixin respond-above($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
$breakpoint-value: map-get($breakpoints, $breakpoint);
@media (min-width: $breakpoint-value) {
@content;
}
} @else {
@warn 'Invalid breakpoint: #{$breakpoint}.';
}
}
@mixin respond-below($breakpoint) {
@if map-has-key($breakpoints, $breakpoint) {
$breakpoint-value: map-get($breakpoints, $breakpoint);
@media (max-width: ($breakpoint-value - 1)) {
@content;
}
} @else {
@warn 'Invalid breakpoint: #{$breakpoint}.';
}
}
@mixin respond-between($lower, $upper) {
@if map-has-key($breakpoints, $lower) and map-has-key($breakpoints, $upper) {
$lower-breakpoint: map-get($breakpoints, $lower);
$upper-breakpoint: map-get($breakpoints, $upper);
@media (min-width: $lower-breakpoint) and (max-width: ($upper-breakpoint - 1)) {
@content;
}
} @else {
@if (map-has-key($breakpoints, $lower) == false) {
@warn 'Your lower breakpoint was invalid: #{$lower}.';
}
@if (map-has-key($breakpoints, $upper) == false) {
@warn 'Your upper breakpoint was invalid: #{$upper}.';
}
}
}
@mixin border-radius($px: 0) {
-webkit-border-radius: $px;
-moz-border-radius: $px;
border-radius: $px;
}
@mixin box-shadow($value) {
-webkit-box-shadow: $value;
-moz-box-shadow: $value;
box-shadow: $value;
}
@mixin transition($element: all, $time: .5s, $option: ease) {
-webkit-transition: $element $time $option;
transition: $element $time $option;
}
@mixin opacity($value) {
$IEValue: $value*100;
opacity: $value;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity="+$IEValue+")";
filter: alpha(opacity=$IEValue);
}
@mixin flexbox() {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
@mixin flex($values) {
-webkit-box-flex: $values;
-moz-box-flex: $values;
-webkit-flex: $values;
-ms-flex: $values;
flex: $values;
}
@mixin flex-direction($direction) {
-webkit-flex-direction: $direction;
-moz-flex-direction: $direction;
-ms-flex-direction: $direction;
flex-direction: $direction;
}
@mixin flex-wrap($wrap) {
-webkit-flex-wrap: $wrap;
-moz-flex-wrap: $wrap;
-ms-flex-wrap: $wrap;
flex-wrap: $wrap;
}
@mixin flex-flow($flow) {
-webkit-flex-flow: $flow;
-moz-flex-flow: $flow;
-ms-flex-flow: $flow;
flex-flow: $flow;
}
@mixin order($val) {
-webkit-box-ordinal-group: $val;
-moz-box-ordinal-group: $val;
-ms-flex-order: $val;
-webkit-order: $val;
order: $val;
}
@mixin flex-grow($grow) {
-webkit-flex-grow: $grow;
-moz-flex-grow: $grow;
-ms-flex-grow: $grow;
flex-grow: $grow;
}
@mixin flex-shrink($shrink) {
-webkit-flex-shrink: $shrink;
-moz-flex-shrink: $shrink;
-ms-flex-shrink: $shrink;
flex-shrink: $shrink;
}
@mixin flex-basis($width) {
-webkit-flex-basis: $width;
-moz-flex-basis: $width;
-ms-flex-basis: $width;
flex-basis: $width;
}
@mixin justify-content($justify) {
-webkit-justify-content: $justify;
-moz-justify-content: $justify;
-ms-justify-content: $justify;
justify-content: $justify;
-ms-flex-pack: $justify;
}
@mixin align-content($align) {
-webkit-align-content: $align;
-moz-align-content: $align;
-ms-align-content: $align;
align-content: $align;
}
@mixin align-items($align) {
-webkit-align-items: $align;
-moz-align-items: $align;
-ms-align-items: $align;
align-items: $align;
}
@mixin align-self($align) {
-webkit-align-self: $align;
-moz-align-self: $align;
-ms-align-self: $align;
align-self: $align;
}

181
layout/style-scss/_variables.scss Normal file
View File

@@ -0,0 +1,181 @@
//* Colors
$cWhite: #ffffff;
$cGray: #bababa;
$cLightGray: #f6f6f6;
$cCloud: #f0f0f0;
$cSand: #e3e1de;
$cSandDarker: #d9d9d9;
$cBlack: #010101;
$cTxtWhite: #ffffff;
$cTxtCloud: #f0f0f0;
$cTxtGray: #bababa;
$cTxtGrayDarker: #a1a0a0;
$cTxtBlack: #010101;
$fontNewOrder: "New Order", sans-serif;
$fontURWForm: "URW Form", sans-serif;
//* Fonts
@font-face {
font-family: "URW Form";
src: url("/layout/fonts/URWForm-LightItalic.woff2") format("woff2"),
url("/layout/fonts/URWForm-LightItalic.woff") format("woff");
font-weight: 300;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "URW Form";
src: url("/layout/fonts/URWForm-ExtraLightItalic.woff2") format("woff2"),
url("/layout/fonts/URWForm-ExtraLightItalic.woff") format("woff");
font-weight: 200;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "URW Form";
src: url("/layout/fonts/URWForm-Medium.woff2") format("woff2"),
url("/layout/fonts/URWForm-Medium.woff") format("woff");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "URW Form";
src: url("/layout/fonts/URWForm-MediumItalic.woff2") format("woff2"),
url("/layout/fonts/URWForm-MediumItalic.woff") format("woff");
font-weight: 500;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "URW Form Demi";
src: url("/layout/fonts/URWForm-Demi.woff2") format("woff2"),
url("/layout/fonts/URWForm-Demi.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "URW Form";
src: url("/layout/fonts/URWForm-Italic.woff2") format("woff2"),
url("/layout/fonts/URWForm-Italic.woff") format("woff");
font-weight: normal;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "URW Form";
src: url("/layout/fonts/URWForm-Light.woff2") format("woff2"),
url("/layout/fonts/URWForm-Light.woff") format("woff");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "URW Form";
src: url("/layout/fonts/URWForm-ThinItalic.woff2") format("woff2"),
url("/layout/fonts/URWForm-ThinItalic.woff") format("woff");
font-weight: 100;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "URW Form";
src: url("/layout/fonts/URWForm-Bold.woff2") format("woff2"),
url("/layout/fonts/URWForm-Bold.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "URW Form";
src: url("/layout/fonts/URWForm-BoldItalic.woff2") format("woff2"),
url("/layout/fonts/URWForm-BoldItalic.woff") format("woff");
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "URW Form";
src: url("/layout/fonts/URWForm-Thin.woff2") format("woff2"),
url("/layout/fonts/URWForm-Thin.woff") format("woff");
font-weight: 100;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "URW Form";
src: url("/layout/fonts/URWForm-Regular.woff2") format("woff2"),
url("/layout/fonts/URWForm-Regular.woff") format("woff");
font-weight: normal;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "URW Form Extra";
src: url("/layout/fonts/URWForm-ExtraBoldItalic.woff2") format("woff2"),
url("/layout/fonts/URWForm-ExtraBoldItalic.woff") format("woff");
font-weight: bold;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "URW Form Extra";
src: url("/layout/fonts/URWForm-ExtraBold.woff2") format("woff2"),
url("/layout/fonts/URWForm-ExtraBold.woff") format("woff");
font-weight: bold;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "New Order";
src: url("/layout/fonts/NewOrder-Light.otf") format("otf");
font-weight: 300;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "New Order";
src: url("/layout/fonts/NewOrder-Regular.otf") format("otf");
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "New Order";
src: url("/layout/fonts/NewOrder-Medium.otf") format("otf");
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "New Order";
src: url("/layout/fonts/NewOrder-SemiBold.otf") format("otf");
font-weight: 600;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "New Order";
src: url("/layout/fonts/NewOrder-Bold.otf") format("otf");
font-weight: 700;
font-style: normal;
font-display: swap;
}

392
layout/style-scss/about-us.scss Normal file
View File

@@ -0,0 +1,392 @@
@import "_mixins";
@import "_variables";
.box-01 {
padding: 100px 0;
overflow: hidden;
ul {
position: relative;
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
column-gap: 50px;
@include respond-above(md) {
&::before {
content: "";
position: absolute;
top: calc(123px / 2);
height: 1px;
left: 50%;
width: 100vw;
transform: translate(-50%, -50%);
background: $cBlack;
}
}
li {
position: relative;
display: flex;
flex-direction: column;
row-gap: 25px;
z-index: 1;
&.contact-us {
width: 100%;
max-width: 123px;
height: 123px;
background: $cWhite;
border: 1px solid $cBlack;
border-radius: 100%;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
a {
position: relative;
color: $cTxtBlack;
padding-bottom: 10px;
&::before {
content: "";
position: absolute;
bottom: 0;
left: 50%;
width: 42px;
height: 2px;
background: $cBlack;
transform: translateX(-50%);
}
&::after {
content: "";
position: absolute;
bottom: -5px;
left: calc(50% + 15px);
width: 12px;
height: 12px;
border-right: 2px solid $cBlack;
border-bottom: 2px solid $cBlack;
transform: translateX(-50%) rotate(-45deg);
}
}
}
p {
color: $cTxtBlack;
font-size: 14px;
margin-bottom: 0;
text-align: center;
}
}
@include respond-below(md) {
flex-wrap: wrap;
row-gap: 40px;
}
}
}
.box-02 {
margin-bottom: 70px;
.scontainer-content {
max-width: 790px;
margin: 0 auto;
.row {
@include respond-above(md) {
background-image: url("/upload/filemanager/Pages/About-us/img-1.jpg");
background-repeat: no-repeat;
background-size: cover;
}
.col-left {
@include respond-above(md) {
img {
display: none;
}
}
@include respond-below(md) {
order: 1;
}
}
.col-right {
padding: 60px;
background-color: rgba($cWhite, 0.7);
@include respond-below(md) {
padding: 20px;
}
}
p {
font-size: 12px;
&:nth-child(1) {
margin-bottom: 60px;
}
&:nth-child(2) {
margin-bottom: 0;
}
strong {
display: block;
text-align: right;
font-weight: 700;
}
@include respond-below(md) {
text-align: center;
&:nth-child(1) {
margin-bottom: 20px;
}
strong {
text-align: center;
}
}
}
}
}
}
.box-03 {
margin-bottom: 80px;
h2 {
font-weight: 400;
font-size: 30px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 0px;
padding-right: 35px;
text-align: right;
@include respond-below(md) {
padding-right: 0;
text-align: center;
}
}
.row {
&.row_1 {
padding: 60px;
.col-left {
position: relative;
@include respond-above(md) {
&::before {
content: "";
position: absolute;
right: 0;
top: 0;
width: 2px;
height: 170px;
background: $cBlack;
}
}
}
.col-right {
p {
font-size: 14px;
padding-left: 35px;
line-height: 2;
margin-bottom: 0;
@include respond-below(md) {
text-align: center;
padding-left: 0;
}
}
}
@include respond-below(md) {
padding: 0;
margin-bottom: 50px;
}
}
&.row_2 {
@include respond-below(md) {
gap: 30px;
text-align: center;
}
}
}
}
.box-04 {
margin-bottom: 90px;
background: $cLightGray;
@include respond-below(md) {
padding: 80px 0;
}
h2 {
font-weight: 400;
font-size: 32px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 0px;
padding: 65px 0;
}
p {
font-size: 14px;
line-height: 2;
margin-bottom: 0;
}
.col-left {
position: relative;
h2 {
text-align: right;
}
p {
width: 100%;
max-width: 330px;
margin-left: auto;
text-align: right;
padding-top: 110px;
}
@include respond-above(md) {
padding-right: 50px;
&::before {
content: "";
position: absolute;
top: 80px;
bottom: 80px;
right: 0;
width: 2px;
background: $cBlack;
}
}
@include respond-below(md) {
display: flex;
flex-direction: column;
margin-bottom: 80px;
h2 {
order: 2;
text-align: center;
padding: 40px 0 30px;
}
p {
order: 3;
text-align: center;
max-width: unset;
padding-top: 0px;
}
img {
order: 1;
display: block;
margin: 0 auto;
}
}
}
.col-right {
padding-left: 50px;
h2 {
text-align: left;
}
p {
width: 100%;
max-width: 330px;
text-align: left;
}
@include respond-below(md) {
h2 {
text-align: center;
padding: 40px 0 30px;
}
p {
text-align: center;
max-width: unset;
}
img {
display: block;
margin: 0 auto;
}
}
}
}
.box-05 {
margin-bottom: 40px;
.row {
max-width: 800px;
margin: 0 auto;
border: 1px solid $cSandDarker;
}
.col-right {
padding: 0 50px !important;
}
h2 {
font-weight: 300;
font-size: 32px;
letter-spacing: 1px;
text-transform: uppercase;
margin-bottom: 30px;
}
p {
font-size: 12px;
line-height: 2;
margin-bottom: 0;
}
@include respond-below(md) {
.row {
text-align: center;
border: none;
.col-left {
margin-bottom: 50px;
}
}
}
}
.box-06 {
padding: 75px 0;
.download-catalog {
position: relative;
width: 100%;
max-width: 600px;
display: block;
color: $cTxtWhite;
font-weight: 200;
font-size: 26px;
padding: 24px 120px 20px 45px;
background-color: $cBlack;
margin: 0 auto;
&::before {
content: "";
position: absolute;
right: 45px;
top: 50%;
width: 60px;
height: 40px;
background-image: url("/upload/filemanager/Icons/icon-download-file.svg");
background-size: cover;
background-repeat: no-repeat;
transform: translateY(-50%);
}
}
}

385
layout/style-scss/accesories.scss Normal file
View File

@@ -0,0 +1,385 @@
@import "_mixins";
@import "_variables";
.box-01 {
padding: 100px 0;
overflow: hidden;
ul {
position: relative;
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
column-gap: 50px;
@include respond-above(md) {
&::before {
content: "";
position: absolute;
top: calc(144px / 2);
height: 1px;
left: 50%;
width: 100vw;
transform: translate(-50%, -50%);
background: $cBlack;
}
}
li {
position: relative;
display: flex;
flex-direction: column;
row-gap: 25px;
z-index: 1;
background: $cWhite;
img {
width: 144px;
min-width: 144px;
height: 144px;
border-radius: 100%;
border: 1px solid $cBlack;
object-fit: none;
max-width: unset !important;
background-color: $cLightGray;
}
p {
color: $cTxtBlack;
font-size: 16px;
margin-bottom: 0;
text-align: center;
}
}
@include respond-below(md) {
flex-wrap: wrap;
row-gap: 40px;
}
}
}
.box-02 {
margin-bottom: 70px;
.row {
&.row_1 {
.col-wrapper {
height: 100%;
background: $cLightGray;
}
.col-left {
@include respond-below(md) {
img {
max-width: unset !important;
}
}
}
}
&.row_2 {
.col-wrapper {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
column-gap: 40px;
padding: 30px;
background: $cLightGray;
}
img {
}
ul {
list-style: none;
padding: 0;
margin: 0;
li {
p {
position: relative;
font-size: 9px;
width: fit-content;
padding-right: 20px;
margin-bottom: 12px;
border-bottom: 1px solid $cSandDarker;
strong {
font-weight: 700;
}
}
h3 {
font-size: 19px;
font-weight: 300;
margin-bottom: 25px;
}
a.btn-1 {
font-size: 19px;
font-weight: 300;
padding: 17px 70px 13px 30px;
&::before {
width: 30px;
right: 25px;
}
&::after {
right: 25px;
}
}
}
}
}
&.row_3 {
.col-left {
.col-data {
max-width: 300px;
text-align: right;
margin-left: auto;
margin-right: 60px;
padding: 30px 0;
}
p {
color: $cTxtBlack;
font-size: 14px;
font-weight: 300;
margin-bottom: 0;
line-height: 2;
}
}
@include respond-below(md) {
.col-left {
order: 1;
.col-data {
max-width: unset;
margin-right: 0;
text-align: center;
}
}
.col-right {
img {
max-width: unset !important;
}
}
}
}
}
}
.box-03 {
margin-bottom: 60px;
h2 {
font-size: 30px;
font-weight: 300;
margin-bottom: 0;
}
.col-left {
border-right: 2px solid $cBlack;
.col-data {
text-align: right;
margin-right: 70px;
padding-bottom: 50px;
h2 {
margin-bottom: 25px;
}
p {
font-size: 14px;
font-weight: 300;
margin-bottom: 0;
line-height: 2;
}
img {
margin-top: 50px;
}
}
@include respond-below(md) {
border-right: none;
.col-data {
display: flex;
flex-direction: column;
align-items: center;
margin-right: auto;
text-align: center;
}
}
}
.col-right {
.col-data {
display: flex;
flex-direction: column;
column-gap: 20px;
margin-left: 60px;
> div {
display: flex;
flex-direction: row;
column-gap: 45px;
align-items: center;
ul {
padding: 0;
margin: 0;
list-style: none;
li {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 11px;
&:not(:last-child) {
margin-bottom: 3px;
}
p {
font-size: 12px;
margin-bottom: 0;
}
}
}
}
}
@include respond-below(md) {
.col-data {
margin-left: auto;
flex-direction: column;
align-items: center;
row-gap: 30px;
}
}
}
}
.box-04 {
margin-bottom: 190px;
@include respond-below(md) {
margin-bottom: 100px;
}
.row {
&.row_1 {
margin-bottom: 60px;
}
&.row_2 {
.col-data {
position: relative;
margin: 0 auto;
width: 100%;
max-width: 820px;
padding: 0 60px 30px 60px;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 100px;
grid-template-areas:
"col_1_subtitle col_2_subtitle"
"col_1_title col_2_title"
"col_1_txt col_2_txt"
"col_1_img col_2_img";
&::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: $cBlack;
}
&::after {
content: "";
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 2px;
background: $cBlack;
}
h3 {
font-size: 13px;
font-weight: 700;
margin-bottom: 30px;
}
h2 {
font-size: 25px;
font-weight: 300;
margin-bottom: 15px;
}
p {
font-size: 13px;
font-weight: 300;
line-height: 2;
margin-bottom: 0;
}
img {
height: 100%;
width: 100%;
object-fit: contain;
object-position: bottom;
max-width: fit-content;
margin: 0 auto;
}
.col-1-subtitle {
grid-area: col_1_subtitle;
text-align: right;
}
.col-2-subtitle {
grid-area: col_2_subtitle;
}
.col-1-title {
grid-area: col_1_title;
text-align: right;
}
.col-2-title {
grid-area: col_2_title;
}
.col-1-txt {
grid-area: col_1_txt;
text-align: right;
}
.col-2-txt {
grid-area: col_2_txt;
}
.col-1-img {
grid-area: col_1_img;
@include respond-below(md) {
padding-bottom: 80px;
}
}
.col-2-img {
grid-area: col_2_img;
}
@include respond-below(md) {
grid-template-columns: 1fr;
grid-template-areas:
"col_1_subtitle"
"col_1_title"
"col_1_txt"
"col_1_img"
"col_2_subtitle"
"col_2_title"
"col_2_txt"
"col_2_img";
padding: 0 30px 30px 30px;
> * {
text-align: center !important;
}
}
}
}
}
}

6
layout/style-scss/aluminium-windows.scss Normal file
View File

@@ -0,0 +1,6 @@
.box-02 {
padding: 90px 0;
}
.box-04 {
margin-bottom: 160px;
}

336
layout/style-scss/black-week.scss Normal file
View File

@@ -0,0 +1,336 @@
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
$font1: 'Open Sans', sans-serif;
#page-black-week {
.c-container {
width: 100%;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
@media (min-width: 1560px) {
max-width: 1560px;
}
@media (min-width: 1200px) and (max-width: 1559.98px) {
max-width: 1140px;
}
@media (min-width: 992px) and (max-width: 1199.98px) {
max-width: 960px;
}
@media (min-width: 768px) and (max-width: 991.98px) {
max-width: 720px;
}
@media (min-width: 576px) and (max-width: 767.98px) {
max-width: 540px;
}
@media (max-width: 575.98px) {
max-width: 100%;
}
}
.box-1 {
text-align: center;
margin-bottom: 50px;
img {
width: 100%;
max-width: fit-content;
}
}
.box-2 {
text-align: center;
margin-bottom: 100px;
@media (max-width: 992px) {
margin-bottom: 60px;
}
h2 {
font-size: 48px;
font-family: $font1;
font-weight: 300;
text-transform: uppercase;
max-width: 1000px;
margin-left: auto;
margin-right: auto;
margin-bottom: 90px;
color: #000;
line-height: 1.3;
strong {
display: block;
font-weight: 700;
}
@media (max-width: 1200px) {
font-size: 38px;
margin-bottom: 50px;
}
@media (max-width: 768px) {
font-size: 28px;
}
}
p {
width: 100%;
max-width: 920px;
color: #000;
font-size: 32px;
font-family: $font1;
font-weight: 300;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
line-height: 1.3;
@media (max-width: 1200px) {
font-size: 26px;
}
@media (max-width: 768px) {
font-size: 20px;
}
}
}
.box-3 {
.c-row {
&-1 {
display: flex;
flex-direction: row;
column-gap: 30px;
margin-bottom: 70px;
@media (max-width: 768px) {
flex-direction: column-reverse;
row-gap: 30px;
align-items: center;
}
}
&-2 {
display: flex;
flex-direction: row;
justify-content: flex-end;
.c-col {
max-width: 1000px;
}
}
}
h2 {
color: #000;
font-family: $font1;
font-size: 36px;
font-weight: 600;
text-transform: uppercase;
margin-bottom: 60px;
line-height: 1.3;
@media (max-width: 768px) {
font-size: 30px;
margin-bottom: 40px;
}
}
ul {
list-style: decimal;
margin-bottom: 50px;
@media (max-width: 768px) {
font-size: 30px;
}
li {
color: #000;
font-family: $font1;
font-size: 36px;
font-weight: 300;
line-height: 1.3;
@media (max-width: 1200px) {
font-size: 26px;
}
@media (max-width: 768px) {
font-size: 20px;
}
}
}
a {
display: inline-block;
color: #fff;
padding: 20px 40px;
background: #1d1d1b;
font-style: italic;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
@media (max-width: 1200px) {
padding: 15px 30px;
}
}
p {
color: #000;
font-family: $font1;
font-size: 20px;
text-align: right;
margin-left: auto;
margin-bottom: 0;
line-height: 1.3;
@media (max-width: 992px) {
text-align: left;
font-size: 16px;
}
}
.sales-box {
display: flex;
flex-direction: column;
width: 440px;
align-items: center;
@media (max-width: 992px) {
width: 260px;
}
@media (max-width: 768px) {
width: 340px;
}
span {
color: #fff;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 100%;
font-family: $font1;
font-weight: 700;
&:nth-child(1) {
font-size: 128px;
width: 325px;
height: 325px;
background: #e9ab6e;
margin-left: 100px;
@media (max-width: 992px) {
font-size: 68px;
width: 220px;
height: 220px;
margin-left: 40px;
}
@media (max-width: 768px) {
margin-left: 120px;
}
}
&:nth-child(2) {
font-size: 128px;
height: 300px;
width: 300px;
background: #b79f87;
margin-top: -70px;
margin-bottom: -70px;
margin-right: 100px;
@media (max-width: 992px) {
font-size: 68px;
height: 180px;
width: 180px;
margin-right: 60px;
}
@media (max-width: 768px) {
margin-left: -80px;
margin-top: -100px;
margin-bottom: -100px;
}
}
&:nth-child(3) {
font-size: 96px;
height: 240px;
width: 240px;
background: #cccccc;
margin-left: 190px;
@media (max-width: 992px) {
font-size: 46px;
height: 140px;
width: 140px;
margin-left: 110px;
}
// @media (max-width: 768px) {
// margin-left: 120px;
// }
}
}
}
}
.box-4 {
margin-bottom: 200px;
@media (max-width: 992px) {
margin-bottom: 150px;
}
h2 {
color: #000;
font-size: 38px;
font-family: $font1;
font-weight: 300;
margin-bottom: 48px;
text-transform: uppercase;
strong {
display: block;
font-size: 24px;
text-align: center;
font-weight: bold;
}
@media (max-width: 1200px) {
font-size: 32px;
}
}
ul {
list-style: decimal;
li {
color: #000;
font-size: 20px;
font-family: $font1;
font-weight: 300;
&:not(:last-child) {
margin-bottom: 20px;
}
@media (max-width: 1200px) {
font-size: 18px;
}
}
}
.c-row {
margin-top: 90px;
padding-top: 90px;
border-top: 1px solid #000;
@media (max-width: 992px) {
margin-top: 60px;
padding-top: 60px;
}
}
}
}

392
layout/style-scss/contact.scss Normal file
View File

@@ -0,0 +1,392 @@
@import '_mixins';
@import '_variables';
.box-01 {
margin-bottom: 35px;
.contact-sections {
display: grid;
grid-template-columns: 500px 1fr;
grid-template-areas:
's0 s4'
'sw1 s5'
'sw1 s6'
'sw1 s7';
.sections-wrapper {
grid-area: sw1;
}
.sections_2_3 {
@include respond-above(md) {
position: relative;
padding-top: 260px;
padding-bottom: 100px;
background-color: #010101;
background-image: url('/upload/filemanager/Pages/Contact/contact-bg.png');
&::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg,
rgba(0, 0, 0, 1) 0%,
rgba(102, 102, 102, 0) 100%);
}
}
}
section {
position: relative;
&.section_0 {
grid-area: s0;
@include respond-above(md) {
background-color: $cBlack;
}
}
&.section_1 {
grid-area: s1;
text-align: right;
padding: 75px 50px 75px;
@include respond-below(md) {
padding: 75px 50px 30px;
}
@include respond-above(md) {
background-color: $cBlack;
}
h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 75px;
@include respond-above(md) {
color: $cTxtWhite;
}
@include respond-below(md) {
margin-bottom: 20px;
}
}
p {
font-size: 14px;
font-weight: 200;
@include respond-above(md) {
color: $cTxtWhite;
}
strong {
font-weight: 700;
}
}
ul {
padding: 0;
margin: 0;
list-style: none;
li {
&:not(:last-child) {
margin-bottom: 10px;
}
a {
font-size: 18px;
@include respond-above(md) {
color: $cTxtWhite;
}
@include respond-below(md) {
color: $cTxtBlack;
}
}
}
}
@include respond-below(md) {
text-align: center;
}
}
&.section_2 {
grid-area: s2;
text-align: right;
padding: 0 50px 90px 50px;
// @include respond-above(md) {
// background-color: $cBlack;
// }
img {
margin-bottom: 20px;
@include respond-below(md) {
filter: invert(1);
}
}
p {
font-size: 15px;
font-weight: 700;
margin-bottom: 0;
@include respond-above(md) {
color: $cTxtWhite;
}
}
@include respond-below(md) {
text-align: center;
padding: 50px 0 20px;
}
}
&.section_3 {
grid-area: s3;
text-align: right;
padding: 0 50px;
// @include respond-above(md) {
// background-color: $cBlack;
// }
h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 60px;
@include respond-above(md) {
color: $cTxtWhite;
}
@include respond-below(md) {
font-size: 22px;
br {
display: none;
}
}
}
p {
color: #fff;
font-size: 20px;
font-weight: 700;
margin-bottom: 0;
line-height: 30px;
}
@include respond-below(md) {
text-align: center;
margin-bottom: 10px;
p {
color: #000;
}
}
}
&.section_4 {
grid-area: s4;
padding: 80px 50px;
display: flex;
flex-direction: row;
align-items: center;
gap: 25px;
p {
color: $cTxtGrayDarker;
font-size: 25px;
font-weight: 200;
margin-bottom: 0;
}
a {
width: 100%;
max-width: 50px;
img {
width: 100%;
}
}
@include respond-below(md) {
flex-direction: column-reverse;
align-items: center;
text-align: center;
}
}
&.section_5 {
grid-area: s5;
padding: 75px 50px 0;
h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 75px;
text-transform: uppercase;
@include respond-below(md) {
margin-bottom: 20px;
}
}
p {
font-size: 12px;
font-weight: 300;
margin-bottom: 20px;
}
@include respond-below(md) {
text-align: center;
}
#contact_form {
.agreement {
display: flex;
flex-direction: row;
gap: 40px;
.agreement-container {
.form_group_2 {
input[type='checkbox'] {
background: #fff;
border: 1px solid #000000;
&::before {
background: #000;
}
&::after {
background: #000;
}
}
}
}
.buttons-container {
button {
width: 180px;
&::before,
&::after {
right: 40px;
}
}
}
}
}
}
&.section_6 {
grid-area: s6;
padding: 100px 50px 50px;
display: flex;
flex-direction: column;
justify-content: center;
p {
font-size: 21px;
font-weight: 300;
margin-bottom: 0;
span {
display: inline-block;
min-width: 44px;
}
}
@include respond-below(md) {
text-align: center;
padding: 50px;
}
}
&.section_7 {
grid-area: s7;
padding: 0 50px;
iframe {
width: 100%;
height: 535px;
}
}
}
@include respond-below(lg) {
grid-template-columns: 350px 1fr;
}
@include respond-below(md) {
grid-template-columns: 1fr;
grid-template-areas:
's0'
'sw1'
// 's2'
's6'
's5'
's4'
's3'
's7';
padding-top: 50px;
}
}
}
.box-02 {
margin-bottom: 35px;
.box-2-data {
position: relative;
padding: 30px 150px;
background: #f4f4f4;
display: flex;
flex-direction: row;
align-items: center;
gap: 30px;
h2 {
color: #000;
font-size: 20px;
font-weight: 700;
letter-spacing: 0;
margin-bottom: 0;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 15px;
li {
img {
width: 100%;
max-width: 24px;
filter: brightness(0) saturate(100%) invert(0%) sepia(98%) saturate(0%) hue-rotate(47deg) brightness(98%) contrast(101%);
}
}
}
>img {
position: absolute;
top: 0;
right: 0;
bottom: 0;
}
}
}

599
layout/style-scss/entrance-doors.scss Normal file
View File

@@ -0,0 +1,599 @@
@import '_mixins';
@import '_variables';
#page-hero {
margin-bottom: 100px;
width: 100%;
}
#nav_tabs,
#nav_tabs_colors {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 17px;
list-style-type: none;
li {
position: relative;
min-width: fit-content;
width: 200px;
border: 1px solid #000;
background: #fff;
transition: background 250ms ease;
&.new {
&::before {
content: url('/upload/filemanager/Icons/new-icon.png');
position: absolute;
top: -10px;
right: -15px;
}
}
&.active {
background: #000;
a {
color: #fff;
}
}
a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-decoration: none;
row-gap: 7px;
color: #000;
font-weight: 300;
font-size: 18px;
line-height: 1;
margin-bottom: 0;
padding: 12px 20px;
cursor: pointer;
transition: color 250ms ease;
u {
display: flex;
flex-direction: column;
align-items: center;
font-weight: 300;
font-size: 14px;
line-height: 1.3;
margin-bottom: 0;
letter-spacing: 0.05em;
text-decoration: none;
span {
margin-top: -4px;
font-size: 14px;
}
}
}
}
}
button.c-button {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 250px;
min-height: 38px;
background: #fff;
border: 1px solid #000;
padding: 0 20px;
outline: none !important;
background: #fff;
transition: background 250ms ease-in-out;
cursor: pointer;
&:hover {
background: #000;
color: #fff;
}
}
.box-01 {
padding-bottom: 150px;
@include respond-below(md) {
padding-bottom: 50px;
}
#product-preview-box {
margin-bottom: 0;
.product-preview-box {
.scontainer-content {
.product-preview {
padding-left: 0;
.row {
&:not(:last-child) {
margin-bottom: 110px;
padding-bottom: 110px;
border-bottom: 1px solid #000;
}
}
}
h3 {
color: #000;
font-size: 32px;
font-weight: 300;
letter-spacing: 4px;
line-height: 1;
margin-bottom: 40px;
text-transform: uppercase;
}
#nav_tabs {
margin-bottom: 50px;
// padding-bottom: 0;
max-width: unset;
padding: 0;
border: none;
&::before {
display: none;
}
}
.product-doors-list {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
column-gap: 30px;
row-gap: 40px;
padding: 0;
li {
display: flex;
flex-direction: column;
row-gap: 16px;
align-items: center;
img {
width: 100%;
max-width: fit-content;
}
p {
margin-bottom: 0;
text-align: center;
color: #000;
font-size: 20px;
font-weight: 700;
letter-spacing: 1px;
line-height: 1;
font-family: 'URW Form', sans-serif;
}
}
}
.product-doors-list-more {
padding-top: 40px;
display: none;
}
.c-button {
margin-top: 40px;
}
}
}
}
}
#product-colors-preview-box {
margin-bottom: 70px;
.scontainer-content {
.colors-box-header {
padding: 45px 50px 30px;
margin-bottom: 50px;
background: #f4f4f4;
h2 {
font-size: 30px;
font-weight: 300;
line-height: 25px;
letter-spacing: 0.15em;
}
p {
font-size: 16px;
font-weight: 300;
line-height: 25px;
letter-spacing: 0.05em;
margin-bottom: 0;
}
.c-row {
display: flex;
flex-direction: row;
column-gap: 40px;
.c-col {
&-2 {
display: flex;
justify-content: center;
flex: 1;
}
}
}
}
.colors-preview {
display: none;
&.active {
display: block;
}
.color-tiles-rows {
.color-tiles {
&:not(:last-child) {
margin-bottom: 130px;
}
.color-tiles-title {
}
.color-tiles-data {
display: flex;
flex-direction: row;
flex-wrap: wrap;
column-gap: 17px;
row-gap: 17px;
align-items: flex-start;
overflow: hidden;
li {
flex: 0 0 calc(100% / 3 - (17px * 2 / 3));
@include respond-below(md) {
flex: 0 0 calc(100% / 2 - (17px / 2));
&.empty {
display: none;
}
}
@include respond-below(sm) {
flex: 0 0 100%;
}
}
}
}
}
}
}
}
.color-tiles {
position: relative;
height: fit-content;
&::before {
content: '';
position: absolute;
left: 0;
top: 12px;
bottom: 0;
width: 1px;
background: #6c6d70;
}
&-title {
position: relative;
padding-left: 240px;
min-height: 30px;
&::before {
content: '';
position: absolute;
left: 0;
top: 12px;
width: 213px;
height: 1px;
background: #6c6d70;
}
h2 {
font-weight: 700;
font-size: 20px;
line-height: 25px;
letter-spacing: 0.07em;
text-transform: uppercase;
margin-bottom: 0;
}
@include respond-below(md) {
padding-left: 100px;
&::before {
width: 60px;
}
}
}
&-data {
padding-left: 60px;
padding-top: 50px;
max-height: unset;
li {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 17px;
img {
width: 100%;
max-width: fit-content;
}
p {
font-weight: 300;
font-size: 13px;
line-height: 15px;
letter-spacing: 0.05em;
text-transform: uppercase;
margin-bottom: 0;
font-family: 'URW Form', sans-serif;
}
}
@include respond-below(md) {
padding-left: 30px;
padding-top: 30px;
}
}
&[status='true'] {
button {
span {
&::after {
width: 0;
}
}
}
}
button {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
max-width: 250px;
min-height: 38px;
background: #fff;
border: 1px solid #000;
margin-left: 60px;
margin-top: 19px;
padding: 0 20px;
outline: none !important;
background: #fff;
transition: background 250ms ease-in-out;
cursor: pointer;
&:hover {
background: #000;
p {
color: #fff;
}
span {
border-color: #fff;
&::before,
&::after {
background: #fff;
}
}
}
p {
font-weight: 300;
font-size: 16px;
line-height: 20px;
letter-spacing: 0.15em;
text-transform: uppercase;
margin-bottom: 0;
transition: color 250ms ease-in;
}
span {
position: relative;
width: 20px;
height: 20px;
border-radius: 100%;
border: 1px solid #000;
transition: border 250ms ease-in;
&::before {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 1px;
background: #000;
border-radius: 3px;
transform: translate(-50%, -50%);
transition: background 250ms ease-in;
}
&::after {
content: '';
position: absolute;
left: 50%;
top: 50%;
width: 10px;
height: 1px;
background: #000;
border-radius: 3px;
transform: translate(-50%, -50%) rotate(90deg);
transition: width 250ms ease-in, background 250ms ease-in;
}
}
@include respond-below(md) {
margin-left: 30px;
}
}
}
.additional-colors {
color: #303030;
text-decoration: none;
cursor: pointer;
background: #f4f4f4;
font-weight: 500;
padding: 10px 20px;
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 25px;
&.active {
span {
&::after {
height: 0;
}
}
}
span {
position: relative;
padding-top: 3px;
padding-right: 20px;
&::before {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 10px;
height: 2px;
background-color: #000;
transform: translateY(-50%);
}
&::after {
content: '';
position: absolute;
top: 50%;
right: 4px;
width: 2px;
height: 10px;
background-color: #000;
transform: translateY(-50%);
transition: all 250ms ease-in-out;
}
}
}
.box-03 {
margin-bottom: 100px;
.c-row {
display: flex;
flex-direction: row;
align-items: center;
@include respond-below(md) {
flex-direction: column-reverse;
row-gap: 20px;
}
.c-col-1 {
flex-basis: 50%;
@include respond-below(md) {
max-width: 527px;
}
h2 {
color: #000;
font-size: 30px;
font-family: 'URW Form', sans-serif;
font-weight: 400;
letter-spacing: 2px;
text-transform: uppercase;
padding: 35px 30px 25px;
margin: 0;
background: #f4f4f4;
@include respond-below(lg) {
font-size: 26px;
padding: 25px 20px 17px;
}
}
ul {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px 30px;
padding: 30px 0 0 30px;
@include respond-below(lg) {
padding: 20px 0 0 20px;
gap: 20px 30px;
}
@include respond-below(md) {
justify-content: center;
}
li {
display: flex;
flex-direction: column;
row-gap: 4px;
img {
width: 100%;
max-width: 130px;
@include respond-between(md, lg) {
max-width: 110px;
}
}
p {
color: #000;
font-size: 15px;
font-family: 'URW Form', sans-serif;
font-weight: 400;
margin-bottom: 0;
text-transform: uppercase;
letter-spacing: 1px;
}
}
}
}
.c-col-2 {
flex-basis: 50%;
img {
width: 100%;
max-width: fit-content;
}
}
}
}

279
layout/style-scss/facades.scss Normal file
View File

@@ -0,0 +1,279 @@
@import '_mixins';
@import '_variables';
.box-01 {
#product-preview-box {
.product-preview-box {
.scontainer-content {
.product-preview {
.product_info_text {
ul {
padding: 10px 0px 10px 40px;
max-height: fit-content !important;
li {
grid-template-columns: 1fr;
p {
line-height: 1.9;
strong {
font-weight: 700;
}
}
}
@include respond-below(md) {
padding: 0;
}
}
}
}
}
}
}
}
.box-02 {
padding: 90px 0;
}
.box-03 {
margin-bottom: 80px;
.col-left {
text-align: right;
h3 {
font-size: 30px;
font-weight: 600;
text-transform: uppercase;
max-width: 270px;
margin-left: auto;
margin-bottom: 0;
padding-right: 20px;
}
@include respond-below(md) {
text-align: center;
margin-bottom: 30px;
h3 {
max-width: unset;
padding: 0;
}
}
}
.col-right {
ul {
margin: 0;
list-style: none;
padding: 10px 0 10px 40px;
border-left: 2px solid $cBlack;
li {
&:not(:last-child) {
margin-bottom: 25px;
}
img {
width: 100%;
max-width: 100px;
}
a {
font-size: 19px;
padding: 25px 100px 25px 35px;
max-width: 250px;
&::before {
width: 30px;
}
}
}
@include respond-below(md) {
padding: 40px 10px 10px 10px;
border-top: 2px solid $cBlack;
border-left: none;
text-align: center;
}
}
}
}
.box-04 {
margin-bottom: 50px;
.row {
&.row_1 {
.tile-left {
img {
height: 100%;
object-fit: cover;
@include respond-below(md) {
max-width: unset !important;
}
}
}
}
&.row_2 {
.tiles {
.tile-right {
padding: 0;
img {
height: 100%;
object-fit: cover;
@include respond-below(md) {
max-width: unset !important;
}
}
}
}
}
&.row_3 {
position: relative;
padding-bottom: 40px;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 15px;
right: 15px;
height: 1px;
background: $cBlack;
}
.tile-left {
img {
height: 100%;
object-fit: cover;
@include respond-below(md) {
max-width: unset !important;
}
}
}
}
}
.tiles {
display: grid;
grid-template-columns: 1fr 1fr;
.tile-left {
height: 100%;
img {
width: 100%;
max-width: fit-content;
}
}
.tile-right {
display: flex;
flex-direction: column;
justify-content: center;
padding: 70px;
background: $cLightGray;
height: 100%;
h3 {
color: $cTxtBlack;
font-size: 25px;
font-weight: 300;
margin-bottom: 25px;
}
p {
font-size: 14px;
font-weight: 300;
line-height: 2;
margin-bottom: 0;
strong {
font-weight: 700;
}
}
}
.read-more {
position: relative;
display: block;
color: $cTxtWhite;
font-size: 40px;
font-weight: 200;
background: $cBlack;
padding: 60px 60px 55px;
text-align: center;
width: calc(100% - 1px);
&::before {
content: '';
position: absolute;
right: calc(50% - 170px);
top: 50%;
width: 10px;
height: 65px;
background-image: url('/upload/filemanager/Other/big-arrow-bottom-white.svg');
background-repeat: no-repeat;
background-size: cover;
transform: translateY(-50%);
}
@include respond-below(md) {
padding: 50px 50px 45px;
}
}
@include respond-below(md) {
grid-template-columns: 1fr;
.tile-right {
padding: 40px;
}
}
}
}
.box-05 {
padding-bottom: 140px;
.row {
position: relative;
padding-bottom: 60px;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 15px;
right: 15px;
height: 1px;
background: $cBlack;
}
}
.img-zoom {
display: flex;
flex-direction: row;
align-items: flex-end;
width: 100%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
h3 {
color: $cSandDarker;
font-size: 25px;
font-weight: 700;
writing-mode: vertical-rl;
text-orientation: mixed;
transform: rotate(180deg);
margin: 0;
}
img {
width: 100%;
max-width: fit-content;
}
}
}

693
layout/style-scss/home.scss Normal file
View File

@@ -0,0 +1,693 @@
@import "_mixins";
@import "_variables";
.box-01 {
.home_slider {
.swiper-slide {
height: 840px;
display: flex;
align-items: flex-end;
padding: 160px 0;
overflow: hidden;
.slide-bg {
img {
position: absolute;
top: 50%;
left: 50%;
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
max-width: fit-content;
z-index: 1;
overflow: hidden;
filter: brightness(0.7);
}
}
.slide-data {
position: relative;
width: 100%;
z-index: 1;
h2 {
color: $cTxtWhite;
font-size: 45px;
font-weight: 400;
text-transform: uppercase;
strong {
font-weight: 700;
}
span {
position: relative;
margin-right: 40px;
&::before {
content: "";
position: absolute;
top: calc(50% - 4px);
right: 0;
width: 30px;
height: 3px;
background: $cWhite;
transform: translate(calc(100% + 8px), -50%);
}
}
}
ul {
position: relative;
margin-bottom: 35px;
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
column-gap: 35px;
row-gap: 10px;
width: fit-content;
&::before {
content: "";
position: absolute;
right: 0;
bottom: calc(-30px / 2);
width: 100vw;
height: 2px;
background: $cWhite;
}
li {
position: relative;
color: $cTxtWhite;
font-size: 25px;
&:not(:last-child) {
&::before {
content: "";
position: absolute;
top: calc(50% - 3px);
right: 0;
width: 20px;
height: 2px;
background: $cWhite;
transform: translate(calc(100% + 8px), -50%);
}
}
}
}
h3 {
position: relative;
color: $cTxtWhite;
font-size: 25px;
margin-bottom: 35px;
&::before {
content: "";
position: absolute;
right: 55%;
bottom: calc(-30px / 2);
width: 100vw;
height: 2px;
background: $cWhite;
}
}
}
@include respond-below(sm) {
height: 700px;
}
}
.swiper-pagination {
position: absolute;
right: 50px;
bottom: 50px;
width: auto;
display: flex;
justify-content: flex-end;
gap: 30px;
.swiper-pagination-bullet {
color: #fff;
background: transparent !important;
position: relative;
display: block;
height: 30px;
width: 30px;
opacity: 1 !important;
&::before {
display: block;
height: 30px;
width: 30px;
position: absolute;
top: 0;
left: 0;
font-size: 22px;
}
&:first-child::before {
content: "01";
}
&:nth-child(2)::before {
content: "02";
}
&:nth-child(3)::before {
content: "03";
}
&:nth-child(4)::before {
content: "04";
}
&.swiper-pagination-bullet-active {
margin-right: 70px;
position: relative;
&::after {
content: "";
display: block;
height: 1px;
width: 50px;
background: #fff;
position: absolute;
top: 50%;
right: -75px;
}
&:last-child {
margin-right: 0 !important;
}
&:nth-child(2) {
margin-left: 70px;
// margin-right: 4px;
&::after {
// display: none;
right: auto;
left: -80px;
}
}
}
}
}
}
}
.box-02 {
padding-top: 60px;
margin-bottom: 100px;
.row {
&.row_1 {
position: relative;
padding-bottom: 60px;
margin-bottom: 60px;
&::before {
content: "";
position: absolute;
bottom: 0;
left: 15px;
right: 15px;
height: 1px;
background: $cGray;
}
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: row;
column-gap: 35px;
li {
font-size: 18px;
font-weight: 300;
border: 1px solid $cBlack;
text-align: center;
padding: 18px;
}
}
@include respond-below(md) {
ul {
flex-wrap: wrap;
row-gap: 35px;
li {
flex: 1;
}
}
}
}
&.row_2 {
.col-left {
text-align: right;
@include respond-below(md) {
text-align: left;
}
}
.col-right {
p {
font-size: 14px;
margin-bottom: 20px;
}
a {
position: relative;
color: $cTxtBlack;
font-size: 16px;
font-weight: 400;
margin-left: auto;
display: block;
max-width: fit-content;
padding-right: 70px;
&::before {
content: "";
position: absolute;
right: 0;
top: 50%;
height: 2px;
width: 50px;
background: $cBlack;
transform: translateY(-50%);
}
&::after {
content: "";
position: absolute;
right: 1px;
top: 50%;
height: 12px;
width: 12px;
border-right: 3px solid $cBlack;
border-bottom: 3px solid $cBlack;
transform: translateY(-50%) rotate(-45deg);
}
}
}
}
}
}
.box-03 {
margin-bottom: 150px;
@include respond-below(sm) {
margin-bottom: 100px;
}
ul {
list-style: none;
padding: 20px 0 15px;
margin: 0;
li {
line-height: 1;
color: $cTxtBlack;
font-size: 12px;
font-weight: 700;
border-bottom: 1px solid $cSandDarker;
margin-bottom: 3px;
width: fit-content;
a {
color: $cTxtBlack;
}
}
}
h3 {
position: relative;
width: 100%;
max-width: 150px;
margin-bottom: 0;
a {
position: relative;
padding-bottom: 30px;
&::before {
content: "";
position: absolute;
left: 0;
bottom: 10px;
height: 2px;
width: 30px;
background: $cBlack;
transform: translateY(-50%);
}
&::after {
content: "";
position: absolute;
left: 30px;
bottom: 0;
height: 12px;
width: 12px;
border-right: 2px solid $cBlack;
border-bottom: 2px solid $cBlack;
transform: translate(-100%, -50%) rotate(-45deg);
}
}
a {
color: $cTxtBlack;
font-size: 20px;
font-weight: 400;
}
@include respond-below(md) {
margin: 0 auto;
a {
&::before {
left: 50%;
transform: translate(-50%, -50%);
}
&::after {
left: 50%;
transform: translate(10%, -50%) rotate(-45deg);
}
}
}
}
}
.box-04 {
margin-bottom: 100px;
.col-left {
p {
font-size: 14px;
font-weight: 300;
text-align: right;
margin-bottom: 0;
line-height: 2;
}
@include respond-below(lg) {
p {
br {
display: none;
}
}
}
@include respond-below(md) {
order: 1;
p {
text-align: left;
}
}
}
.col-right {
position: relative;
&::before {
content: "";
position: absolute;
left: -45px;
top: 0;
bottom: 0;
width: 2px;
background: $cBlack;
}
h2 {
position: relative;
margin-bottom: 0;
a {
position: relative;
padding-bottom: 40px;
&::before {
content: "";
position: absolute;
left: 0;
bottom: 10px;
height: 2px;
width: 30px;
background: $cBlack;
transform: translateY(-50%);
}
&::after {
content: "";
position: absolute;
left: 30px;
bottom: 0;
height: 12px;
width: 12px;
border-right: 2px solid $cBlack;
border-bottom: 2px solid $cBlack;
transform: translate(-100%, -50%) rotate(-45deg);
}
}
}
a {
color: $cTxtBlack;
}
@include respond-below(md) {
&::before {
display: none;
}
h2 {
padding-bottom: 0;
a {
margin-bottom: 8px;
&::before {
display: none;
}
&::after {
display: none;
}
br {
display: none;
}
}
}
}
}
}
.box-05 {
margin-bottom: 150px;
@include respond-below(sm) {
margin-bottom: 100px;
}
ul {
padding: 0;
margin: 0;
list-style: none;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 290px 290px;
gap: 40px;
grid-template-areas:
"t1 t2 t2"
"t3 t4 t5";
li {
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 30px;
position: relative;
img {
position: absolute;
inset: 0;
height: 100%;
object-fit: cover;
}
h3 {
position: relative;
color: $cTxtWhite;
font-size: 26px;
font-weight: 700;
z-index: 1;
a {
color: $cTxtWhite;
font-size: 26px;
}
}
p {
position: relative;
color: $cTxtWhite;
font-size: 16px;
font-weight: 200;
margin-bottom: 0;
z-index: 1;
a {
color: $cTxtWhite;
font-size: 16px;
font-weight: 200;
}
}
&.tile-1 {
grid-area: t1;
}
&.tile-2 {
grid-area: t2;
}
&.tile-3 {
grid-area: t3;
}
&.tile-4 {
grid-area: t4;
}
&.tile-5 {
grid-area: t5;
justify-content: flex-start;
border: 1px solid $cSandDarker;
h3 {
color: $cTxtBlack;
font-size: 32px;
font-weight: 500;
&:last-child {
font-weight: 300;
a {
position: relative;
padding-bottom: 40px;
&::before {
content: "";
position: absolute;
left: 5px;
bottom: 10px;
height: 2px;
width: 50px;
background: $cBlack;
transform: translateY(-50%);
}
&::after {
content: "";
position: absolute;
left: 55px;
bottom: 0;
height: 12px;
width: 12px;
border-right: 2px solid $cBlack;
border-bottom: 2px solid $cBlack;
transform: translate(-100%, -50%) rotate(-45deg);
}
}
}
a {
color: $cTxtBlack;
}
}
}
}
@include respond-below(md) {
grid-template-columns: 1fr 1fr;
grid-template-rows: 290px 290px 290px;
grid-template-areas:
"t2 t2"
"t1 t3"
"t4 t5";
}
@include respond-below(sm) {
grid-template-columns: 1fr;
grid-template-rows: 290px 290px 290px 290px 290px;
grid-template-areas:
"t1"
"t2"
"t3"
"t4"
"t5";
li {
img {
max-width: unset !important;
}
}
}
}
}
.box-06 {
margin-bottom: 60px;
.col-left {
position: relative;
&::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
right: -1px;
width: 2px;
background: $cBlack;
}
h2 {
width: 100%;
max-width: 270px;
margin-left: auto;
text-align: right;
}
p {
font-size: 14px;
font-weight: 300;
text-align: right;
max-width: 380px;
margin-bottom: 0;
margin-left: auto;
line-height: 2;
}
@include respond-below(md) {
margin-bottom: 45px;
&::before {
display: none;
}
h2 {
max-width: unset;
text-align: left;
}
p {
max-width: unset;
text-align: left;
}
}
}
.col-right {
ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
gap: 30px;
}
}
}

53
layout/style-scss/pvcu-aluminium-windows.scss Normal file
View File

@@ -0,0 +1,53 @@
@import "_mixins";
@import "_variables";
.box-01 {
#product-preview-box {
.product-preview-box {
.product-nav {
#nav_tabs {
max-width: 300px;
@include respond-below(md) {
max-width: unset;
}
}
}
}
}
}
.box-02 {
padding: 90px 0;
}
.box-03 {
.scontainer-content {
> .row {
align-items: center;
}
.col-right {
margin-top: 0;
}
}
}
.box-04 {
margin-bottom: 160px;
#product-colors {
.col-right {
.color-tiles-grid {
grid-template-columns: 1fr;
}
.color-tiles {
.color-tiles-data {
li {
img {
width: 128px !important;
height: 34px;
max-height: 34px;
}
}
}
}
}
}
}

122
layout/style-scss/pvcu-windows.scss Normal file
View File

@@ -0,0 +1,122 @@
@import '_mixins';
@import '_variables';
.box-02 {
padding: 90px 0;
}
.box-03 {
.scontainer-content {
> .row {
align-items: center;
}
.col-right {
margin-top: 0;
}
}
}
.box-04 {
margin-bottom: 160px;
#product-colors {
.col-right {
.color-tiles-grid {
&.color-tiles-grid-top {
grid-template-columns: 1fr;
margin-bottom: 50px;
}
&.color-tiles-grid-bottom {
.color-tiles {
&:nth-child(1) {
.color-tiles-data {
&::before {
background-color: $cBlack;
}
&::after {
content: 'URBAN';
color: $cTxtWhite;
}
}
}
&:nth-child(2) {
.color-tiles-data {
&::before {
background-color: #ece9e2;
}
&::after {
content: 'FUTURE';
color: $cTxtBlack;
}
}
}
&:nth-child(3) {
.color-tiles-data {
&::before {
background-color: #9c703b;
}
&::after {
content: 'MODERN BOHO';
color: $cTxtWhite;
}
}
}
.action-btn {
left: 100px;
}
.color-tiles-data {
position: relative;
padding-left: 100px;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 90px;
height: 170px;
border-top-left-radius: 100px;
border-bottom-left-radius: 100px;
box-sizing: border-box;
}
&::after {
position: absolute;
top: 85px;
left: 55px;
width: 120px;
font-size: 20px;
font-weight: 300;
text-align: center;
letter-spacing: 5px;
transform: translate(-50%, -50%) rotate(-90deg);
}
li {
img {
width: 44px !important;
height: 44px;
min-height: 44px;
}
}
}
}
}
}
.color-tiles-title {
h2 {
font-weight: 300;
font-size: 20px;
margin-bottom: 25px;
}
}
}
#scontainer-68 {
.col-right {
.color-tiles-grid {
grid-template-columns: 1fr;
}
}
}
}
}

458
layout/style-scss/shutters.scss Normal file
View File

@@ -0,0 +1,458 @@
@import '_mixins';
@import '_variables';
body {
overflow-x: hidden;
}
.box-01 {
padding: 100px 0;
overflow: hidden;
ul {
position: relative;
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
justify-content: center;
column-gap: 50px;
@include respond-above(md) {
&::before {
content: '';
position: absolute;
top: calc(144px / 2);
height: 1px;
left: 50%;
width: 100vw;
transform: translate(-50%, -50%);
background: $cBlack;
}
}
li {
position: relative;
display: flex;
flex-direction: column;
row-gap: 25px;
z-index: 1;
background: $cWhite;
img {
width: 144px;
height: 144px;
border-radius: 100%;
border: 1px solid $cBlack;
object-fit: none;
background-color: $cWhite;
}
p {
color: $cTxtBlack;
font-size: 16px;
margin-bottom: 0;
text-align: center;
}
}
@include respond-below(md) {
flex-direction: column;
align-items: center;
row-gap: 40px;
li {
&::before {
content: '';
position: absolute;
top: calc(144px / 2);
height: 1px;
left: 50%;
width: 100vw;
transform: translate(-50%, -50%);
background: $cBlack;
z-index: -1;
}
}
}
}
}
.box-03 {
margin-bottom: 100px;
.section {
&.section_1 {
#scontainer-38 {
.row {
position: relative;
margin-top: 50px;
padding-bottom: 80px;
&::before {
content: '';
position: absolute;
bottom: calc(80px / 2);
left: 0;
right: 0;
height: 1px;
background-color: $cSandDarker;
}
.col-left {
text-align: right;
h3 {
font-size: 22px;
font-weight: 300;
text-transform: uppercase;
max-width: 200px;
margin-left: auto;
margin-bottom: 0;
padding: 50px 20px 50px 0;
}
@include respond-below(md) {
h3 {
max-width: unset;
text-align: center;
padding: 30px 0;
}
}
}
.col-right {
}
}
}
}
&.section_2 {
display: grid;
grid-template-columns: 450px minmax(430px, 1fr);
column-gap: 140px;
row-gap: 50px;
grid-template-areas:
's1 s3'
's2 s4';
@include respond-below(lg) {
column-gap: 50px;
}
@include respond-below(md) {
grid-template-columns: 1fr;
grid-template-areas:
's1'
's2'
's3'
's4';
}
.scontainer-content {
.row {
display: none;
&.active {
display: block;
}
}
}
#scontainer-39 {
grid-area: s1;
@include respond-below(md) {
text-align: center;
}
}
#scontainer-40 {
grid-area: s2;
h3 {
display: block;
color: $cTxtWhite;
font-size: 25px;
font-weight: 200;
margin-bottom: 3px;
padding: 12px 20px 8px;
background: $cBlack;
}
img {
width: 100%;
max-width: fit-content;
}
@include respond-below(md) {
text-align: center;
width: fit-content;
max-width: 451px;
margin: 0 auto;
}
}
#scontainer-41 {
grid-area: s3;
h2 {
color: $cTxtBlack;
font-size: 25px;
font-weight: 200;
margin-bottom: 30px;
}
p {
font-size: 14px;
font-weight: 300;
line-height: 2;
padding-bottom: 0;
}
@include respond-below(md) {
text-align: center;
width: fit-content;
max-width: 451px;
margin: 0 auto;
}
}
#scontainer-42 {
grid-area: s4;
p {
font-size: 14px;
font-weight: 300;
margin-bottom: 0;
line-height: 2;
}
ul {
margin-bottom: 0;
padding-left: 15px;
}
@include respond-below(md) {
text-align: center;
width: fit-content;
max-width: 451px;
margin: 0 auto;
}
}
}
}
}
.box-04 {
margin-bottom: 100px;
.row_1 {
margin-bottom: 60px;
.col-left {
h3 {
color: $cTxtWhite;
font-size: 40px;
font-weight: 200;
margin-bottom: 0;
background: $cBlack;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
@include respond-below(md) {
h3 {
max-width: 600px;
margin: 0 auto;
padding: 60px 20px;
}
}
}
.col-right {
@include respond-below(md) {
text-align: center;
}
}
}
.row_2 {
position: relative;
padding-bottom: 70px;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 15px;
right: 15px;
height: 1px;
background: $cBlack;
}
ul {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
column-gap: 80px;
row-gap: 25px;
// max-width: 1000px;
margin: 0 auto;
padding: 0;
list-style: none;
li {
display: flex;
flex-direction: column;
// align-items: center;
row-gap: 10px;
width: fit-content;
img {
max-height: 65px;
width: 185px !important;
object-fit: cover;
}
p {
color: $cTxtBlack;
font-size: 14px;
font-weight: 300;
margin-bottom: 0;
text-align: center;
}
}
}
h3 {
&:not(:first-child) {
margin-top: 30px;
}
}
}
}
.box-05 {
margin-bottom: 140px;
.row_1 {
.col-img {
@include respond-below(md) {
margin-bottom: 40px;
}
}
.col-text {
text-align: right;
.col-data {
border-top: 2px solid black;
margin-left: auto;
margin-right: 80px;
}
@include respond-below(md) {
text-align: center;
order: 1;
.col-data {
border: none;
margin-right: auto;
}
}
}
}
.row_2 {
h2 {
display: flex;
align-items: center;
justify-content: center;
padding: 90px 20px 80px;
color: $cTxtBlack;
font-size: 40px;
font-weight: 200;
margin-bottom: 0;
background: $cLightGray;
}
@include respond-below(md) {
h2 {
padding: 50px 20px 40px;
}
}
}
.row_3 {
.col-text {
text-align: left;
.col-data {
border-bottom: 2px solid black;
margin-left: 80px;
}
@include respond-below(md) {
text-align: center;
.col-data {
border: none;
margin-left: auto;
}
}
}
.col-img {
display: flex;
justify-content: flex-end;
@include respond-below(md) {
margin-bottom: 40px;
}
}
}
.col-text {
h3 {
color: $cTxtBlack;
font-size: 25px;
font-weight: 200;
margin-bottom: 30px;
}
p {
color: $cTxtBlack;
font-size: 14px;
font-weight: 300;
margin-bottom: 0;
line-height: 2;
}
.col-data {
max-width: 420px;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
@include respond-below(md) {
max-width: unset;
}
}
}
.col-img {
img {
width: 50vw !important;
}
@include respond-above(md) {
min-height: 470px;
img {
height: 100%;
object-fit: cover;
}
}
@include respond-below(md) {
img {
width: 100% !important;
}
}
}
}

100
layout/style-scss/sliding-doors.scss Normal file
View File

@@ -0,0 +1,100 @@
@import "_mixins";
@import "_variables";
.box-02 {
padding-top: 120px;
padding-bottom: 170px;
@include respond-below(md) {
padding-top: 100px;
padding-bottom: 100px;
}
.row {
&.row_1 {
.col-text {
text-align: right;
.col-data {
margin-left: auto;
margin-right: 80px;
}
}
@include respond-below(md) {
margin-bottom: 60px;
.col-text {
order: 1;
.col-data {
margin-right: auto;
margin-left: auto;
}
}
}
}
&.row_2 {
.col-text {
text-align: left;
.col-data {
margin-left: 60px;
}
.action-btn {
left: 75px;
bottom: 0;
}
}
@include respond-below(md) {
.col-text {
.col-data {
margin-right: auto;
margin-left: auto;
}
}
}
}
.col-img {
text-align: center;
}
.col-text {
display: flex;
align-items: center;
p {
color: $cTxtBlack;
font-size: 14px;
font-weight: 300;
margin-bottom: 0;
line-height: 2;
}
.col-data {
padding-top: 40px;
max-width: 420px;
border-top: 2px solid black;
margin-top: 60px;
overflow: hidden;
transition: height 250ms ease-in-out;
}
@include respond-below(md) {
p {
text-align: center;
}
.col-data {
max-width: 606px;
margin-top: 40px;
}
}
}
}
}
.box-03 {
margin-bottom: 150px;
}

2020
layout/style-scss/style.scss Normal file
View File

File diff suppressed because it is too large Load Diff

45
layout/style-scss/wooden-aluminium-windows.scss Normal file
View File

@@ -0,0 +1,45 @@
.box-02 {
padding: 90px 0;
}
.box-03 {
.scontainer-content {
> .row {
align-items: center;
}
.col-right {
margin-top: 0;
}
}
}
.box-04 {
margin-bottom: 160px;
#product-colors {
.col-right {
.color-tiles-list {
display: flex;
flex-direction: row;
row-gap: 20px;
column-gap: 70px;
flex-wrap: wrap;
li {
display: flex;
flex-direction: column;
row-gap: 9px;
img {
max-height: 42px;
width: 160px !important;
object-fit: cover;
}
p {
font-weight: 300;
font-size: 14px;
margin-bottom: 0;
}
}
}
}
}
}

77
layout/style-scss/wooden-windows.scss Normal file
View File

@@ -0,0 +1,77 @@
@import "_mixins";
@import "_variables";
.box-01 {
#product-preview-box {
.product-preview-box {
.product-nav {
#nav_tabs {
max-width: 300px;
@include respond-below(md) {
max-width: unset;
}
}
}
}
}
}
.box-02 {
padding: 90px 0;
}
.box-03 {
.scontainer-content {
> .row {
align-items: center;
}
.col-right {
margin-top: 0;
}
}
}
.box-04 {
margin-bottom: 160px;
#product-colors {
.col-left {
img {
&.mb-5 {
@include respond-below(md) {
display: block;
margin-left: auto;
margin-right: auto;
}
}
}
@include respond-below(md) {
text-align: center;
}
}
.col-right {
.color-tiles-list {
display: flex;
flex-direction: row;
row-gap: 20px;
column-gap: 70px;
flex-wrap: wrap;
li {
display: flex;
flex-direction: column;
row-gap: 9px;
img {
max-height: 42px;
width: 160px !important;
object-fit: cover;
}
p {
font-weight: 400;
font-size: 14px;
margin-bottom: 0;
}
}
}
}
}
}