first commit
This commit is contained in:
375
layout/style-scss/_mixins.scss
Normal file
375
layout/style-scss/_mixins.scss
Normal file
@@ -0,0 +1,375 @@
|
||||
$breakpoints: (
|
||||
xs: 576px,
|
||||
sm: 768px,
|
||||
md: 992px,
|
||||
lg: 1200px,
|
||||
xl: 1360px,
|
||||
xxl: 1620px,
|
||||
);
|
||||
|
||||
@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: 0.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;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-LightItalic.woff2') format('woff2'),
|
||||
url('/layout/URWForm-LightItalic.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-ExtraLightItalic.woff2') format('woff2'),
|
||||
url('/layout/URWForm-ExtraLightItalic.woff') format('woff');
|
||||
font-weight: 200;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-Medium.woff2') format('woff2'),
|
||||
url('/layout/URWForm-Medium.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-MediumItalic.woff2') format('woff2'),
|
||||
url('/layout/URWForm-MediumItalic.woff') format('woff');
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form Demi';
|
||||
src: url('/layout/URWForm-Demi.woff2') format('woff2'),
|
||||
url('/layout/URWForm-Demi.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-Italic.woff2') format('woff2'),
|
||||
url('/layout/URWForm-Italic.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-Light.woff2') format('woff2'),
|
||||
url('/layout/URWForm-Light.woff') format('woff');
|
||||
font-weight: 300;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-ThinItalic.woff2') format('woff2'),
|
||||
url('/layout/URWForm-ThinItalic.woff') format('woff');
|
||||
font-weight: 100;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-Bold.woff2') format('woff2'),
|
||||
url('/layout/URWForm-Bold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-BoldItalic.woff2') format('woff2'),
|
||||
url('/layout/URWForm-BoldItalic.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-Thin.woff2') format('woff2'),
|
||||
url('/layout/URWForm-Thin.woff') format('woff');
|
||||
font-weight: 100;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form';
|
||||
src: url('/layout/URWForm-Regular.woff2') format('woff2'),
|
||||
url('/layout/URWForm-Regular.woff') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form Extra';
|
||||
src: url('/layout/URWForm-ExtraBoldItalic.woff2') format('woff2'),
|
||||
url('/layout/URWForm-ExtraBoldItalic.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: italic;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'URW Form Extra';
|
||||
src: url('/layout/URWForm-ExtraBold.woff2') format('woff2'),
|
||||
url('/layout/URWForm-ExtraBold.woff') format('woff');
|
||||
font-weight: bold;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
//* ~~~~ Colors ~~~~ *//
|
||||
$cWhite: #fff;
|
||||
$cMilk: #fafafa;
|
||||
$cSand: #e7dcd0;
|
||||
$cSandLight: #e6dccf;
|
||||
$cGray: #d8d8d8;
|
||||
$cYellow: #ffe604;
|
||||
$cIron: #b2b3b7;
|
||||
$cLightBlue: #4ca8e6;
|
||||
$cDarkNight: #343431;
|
||||
$cDeepDark: #1d1d1b;
|
||||
$cBlack: #000;
|
||||
|
||||
$cTxtWhite: #fff;
|
||||
$cTxtCloud: #d8d8d8;
|
||||
$cTxtLightBlue: #4ca8e6;
|
||||
$cTxtDark: #2c2d2f;
|
||||
$cTxtBlack: #000;
|
||||
//* ~~~~ Mixins ~~~~ *//
|
||||
|
||||
@mixin btn_classic($f_size, $color, $h_color, $bg, $h_bg) {
|
||||
text-align: center;
|
||||
font-size: $f_size;
|
||||
font-weight: 700;
|
||||
font-family: $font2;
|
||||
color: $color;
|
||||
background: $bg;
|
||||
text-transform: uppercase;
|
||||
line-height: 22px;
|
||||
padding: 12px 15px;
|
||||
display: inline-block;
|
||||
min-width: 210px;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:hover {
|
||||
background: $h_bg;
|
||||
color: $h_color !important;
|
||||
}
|
||||
}
|
||||
|
||||
//* ~~~~ Global ~~~~ *//
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
.box {
|
||||
padding-top: 125px;
|
||||
padding-bottom: 125px;
|
||||
|
||||
@include respond-below(sm) {
|
||||
padding-top: 90px;
|
||||
padding-bottom: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.box_title {
|
||||
font-family: 'URW Form', sans-serif;
|
||||
font-weight: 700;
|
||||
font-size: 35px;
|
||||
line-height: 1.25;
|
||||
margin-bottom: 28px;
|
||||
text-transform: uppercase;
|
||||
text-align: right;
|
||||
letter-spacing: 0.15em;
|
||||
}
|
||||
|
||||
.box_subtitle {
|
||||
font-family: 'URW Form';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
color: #000000;
|
||||
}
|
||||
130
layout/style-scss/_variables.scss
Normal file
130
layout/style-scss/_variables.scss
Normal file
@@ -0,0 +1,130 @@
|
||||
$cGrayText: #232323;
|
||||
|
||||
$font1: 'Open Sans', sans-serif;
|
||||
$font2: 'Alegreya Sans', sans-serif;
|
||||
|
||||
@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;
|
||||
}
|
||||
279
layout/style-scss/alu-fenster.scss
Normal file
279
layout/style-scss/alu-fenster.scss
Normal file
@@ -0,0 +1,279 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Lato:wght@300;400;700&display=swap');
|
||||
@import 'variables';
|
||||
@import '_mixins';
|
||||
|
||||
.page-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.box-03 {
|
||||
#product-popup-box {
|
||||
.row {
|
||||
&:first-child {
|
||||
transform: translateX(-25%);
|
||||
|
||||
&::before {
|
||||
max-width: 600px;
|
||||
left: 60%;
|
||||
}
|
||||
}
|
||||
.box-data {
|
||||
padding-bottom: 50px;
|
||||
|
||||
ul {
|
||||
li {
|
||||
@include respond-above(lg) {
|
||||
&:nth-child(1) {
|
||||
left: 150px;
|
||||
top: 0px;
|
||||
right: 200px;
|
||||
|
||||
p {
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
left: 10px;
|
||||
top: 100px;
|
||||
right: 350px;
|
||||
p {
|
||||
max-width: 380px;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
left: 270px;
|
||||
top: 200px;
|
||||
right: 130px;
|
||||
p {
|
||||
max-width: 540px;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
left: 60px;
|
||||
top: 265px;
|
||||
right: 350px;
|
||||
p {
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
left: 140px;
|
||||
top: 415px;
|
||||
right: 170px;
|
||||
|
||||
p {
|
||||
max-width: 375px;
|
||||
}
|
||||
}
|
||||
&:nth-child(6) {
|
||||
left: 270px;
|
||||
top: 540px;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 580px;
|
||||
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
padding-top: 120px;
|
||||
padding-left: 25px;
|
||||
text-align: left;
|
||||
|
||||
&::after {
|
||||
right: auto;
|
||||
left: 9px;
|
||||
top: 17.5px;
|
||||
height: calc(100% - 18px);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(7) {
|
||||
left: 40px;
|
||||
top: 560px;
|
||||
right: 300px;
|
||||
p {
|
||||
max-width: 350px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(lg) {
|
||||
&:nth-child(1) {
|
||||
&::before {
|
||||
content: '1';
|
||||
left: 200px;
|
||||
top: 25px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
content: '2';
|
||||
left: 20px;
|
||||
top: 95px;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
&::before {
|
||||
content: '3';
|
||||
left: 280px;
|
||||
top: 160px;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
&::before {
|
||||
content: '4';
|
||||
left: 75px;
|
||||
top: 260px;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
&::before {
|
||||
content: '5';
|
||||
left: 165px;
|
||||
top: 405px;
|
||||
}
|
||||
}
|
||||
&:nth-child(6) {
|
||||
&::before {
|
||||
content: '6';
|
||||
left: 265px;
|
||||
top: 545px;
|
||||
}
|
||||
}
|
||||
&:nth-child(7) {
|
||||
&::before {
|
||||
content: '7';
|
||||
left: 110px;
|
||||
top: 565px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(xs) {
|
||||
&:nth-child(1) {
|
||||
&::before {
|
||||
left: 220px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
left: 20px;
|
||||
top: 80px;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
&::before {
|
||||
left: 270px;
|
||||
top: 125px;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
&::before {
|
||||
left: 80px;
|
||||
top: 190px;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
&::before {
|
||||
left: 150px;
|
||||
top: 405px;
|
||||
}
|
||||
}
|
||||
&:nth-child(6) {
|
||||
&::before {
|
||||
left: 260px;
|
||||
top: 530px;
|
||||
}
|
||||
}
|
||||
&:nth-child(7) {
|
||||
&::before {
|
||||
left: 108px;
|
||||
top: 545px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-05 {
|
||||
.color-tiles {
|
||||
&-data {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
|
||||
column-gap: 50px;
|
||||
row-gap: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-06 {
|
||||
.color_pallet {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 12px;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #6c6d70;
|
||||
}
|
||||
|
||||
.color_pallet_title {
|
||||
position: relative;
|
||||
padding-left: 240px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 213px;
|
||||
height: 1px;
|
||||
background: #6c6d70;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
.color_pallet_data {
|
||||
padding-left: 60px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
@include respond-below(sm) {
|
||||
.color_pallet_title {
|
||||
padding-left: 150px;
|
||||
|
||||
&::before {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include respond-below(xs) {
|
||||
.color_pallet_title {
|
||||
padding-left: 90px;
|
||||
|
||||
&::before {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
394
layout/style-scss/black-week.scss
Normal file
394
layout/style-scss/black-week.scss
Normal file
@@ -0,0 +1,394 @@
|
||||
@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;
|
||||
|
||||
.footer_top_box {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#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: 1200px;
|
||||
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;
|
||||
justify-content: space-between;
|
||||
// margin-bottom: 70px;
|
||||
}
|
||||
&-2 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 30px;
|
||||
justify-content: space-between;
|
||||
// display: flex;
|
||||
// flex-direction: row;
|
||||
// justify-content: flex-end;
|
||||
|
||||
// .c-col {
|
||||
// max-width: 1000px;
|
||||
// }
|
||||
}
|
||||
}
|
||||
h2 {
|
||||
color: #000;
|
||||
font-family: $font1;
|
||||
font-size: 64px;
|
||||
font-weight: 600;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 60px;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
font-size: 50px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
font-size: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: decimal;
|
||||
margin-bottom: 50px;
|
||||
padding-left: 50px;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
li {
|
||||
color: #000;
|
||||
font-family: $font1;
|
||||
font-size: 36px;
|
||||
font-weight: 300;
|
||||
|
||||
@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;
|
||||
font-size: 14px;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
padding: 15px 30px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
color: #000;
|
||||
font-family: $font1;
|
||||
font-size: 18px;
|
||||
|
||||
text-align: right;
|
||||
max-width: 1170px;
|
||||
margin-left: auto;
|
||||
margin-bottom: 0;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
text-align: left;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
.sale-box {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
span {
|
||||
color: #fff;
|
||||
display: inline-flex;
|
||||
font-size: 128px;
|
||||
font-family: $font1;
|
||||
font-weight: 700;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
font-size: 70px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
font-size: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
justify-content: center;
|
||||
flex-direction: row-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.c-row {
|
||||
&-1 {
|
||||
padding-bottom: 100px;
|
||||
margin-bottom: 100px;
|
||||
border-bottom: 1px solid #000;
|
||||
|
||||
@media (max-width: 992px) {
|
||||
padding-bottom: 60px;
|
||||
margin-bottom: 60px;
|
||||
}
|
||||
|
||||
.sale-box {
|
||||
span {
|
||||
&:nth-child(1) {
|
||||
width: 327px;
|
||||
height: 327px;
|
||||
background: #e9ab6e;
|
||||
border-radius: 100%;
|
||||
margin-left: 60px;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
width: 230px;
|
||||
height: 230px;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
margin-left: 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
background: #b79f87;
|
||||
border-radius: 100%;
|
||||
margin-top: -80px;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
margin-top: -50px;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
margin-top: 80px;
|
||||
margin-right: -50px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
width: 140px;
|
||||
height: 140px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
margin-bottom: 60px;
|
||||
|
||||
.sale-box {
|
||||
span {
|
||||
&:nth-child(1) {
|
||||
width: 327px;
|
||||
height: 327px;
|
||||
background: #e9ab6e;
|
||||
border-radius: 100%;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
width: 230px;
|
||||
height: 230px;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
width: 160px;
|
||||
height: 160px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
width: 240px;
|
||||
height: 240px;
|
||||
background: #cccccc;
|
||||
border-radius: 100%;
|
||||
margin-top: -80px;
|
||||
margin-left: 100px;
|
||||
font-size: 96px;
|
||||
|
||||
@media (max-width: 1200px) {
|
||||
width: 180px;
|
||||
height: 180px;
|
||||
font-size: 50px;
|
||||
}
|
||||
@media (max-width: 992px) {
|
||||
margin-top: 80px;
|
||||
margin-right: -50px;
|
||||
margin-left: 0;
|
||||
}
|
||||
@media (max-width: 768px) {
|
||||
width: 130px;
|
||||
height: 130px;
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-3 {
|
||||
}
|
||||
|
||||
@media (max-width: 992px) {
|
||||
flex-direction: column-reverse;
|
||||
row-gap: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-4 {
|
||||
margin-bottom: 100px;
|
||||
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
459
layout/style-scss/fassaden.scss
Normal file
459
layout/style-scss/fassaden.scss
Normal file
@@ -0,0 +1,459 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Lato:wght@300;400;700&display=swap');
|
||||
@import 'variables';
|
||||
@import '_mixins';
|
||||
|
||||
.box-01 {
|
||||
margin-bottom: 35px;
|
||||
.row {
|
||||
&-first {
|
||||
margin-bottom: 35px;
|
||||
|
||||
.tiles {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
column-gap: 70px;
|
||||
padding: 24px;
|
||||
background: #f4f4f4;
|
||||
|
||||
.tile {
|
||||
&-1 {
|
||||
width: 100%;
|
||||
max-width: 415px;
|
||||
p {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
}
|
||||
&-3 {
|
||||
width: 100%;
|
||||
max-width: 315px;
|
||||
h3 {
|
||||
font-weight: 300;
|
||||
font-size: 24px;
|
||||
line-height: 1.1;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
h4 {
|
||||
font-weight: 700;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
p {
|
||||
text-align: left;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
flex-direction: column-reverse;
|
||||
row-gap: 30px;
|
||||
|
||||
.tile {
|
||||
text-align: center;
|
||||
|
||||
&-1 {
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
&-3 {
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-second {
|
||||
position: relative;
|
||||
justify-content: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: $cBlack;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: $cBlack;
|
||||
}
|
||||
|
||||
.tiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(300px, 450px));
|
||||
column-gap: 180px;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
@include respond-below(md) {
|
||||
grid-template-columns: 1fr;
|
||||
row-gap: 100px;
|
||||
column-gap: 50px;
|
||||
}
|
||||
|
||||
.tile {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 35px;
|
||||
align-items: center;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: $cBlack;
|
||||
transform: translateX(-50%);
|
||||
|
||||
@include respond-below(md) {
|
||||
width: 100%;
|
||||
top: 50%;
|
||||
height: 1px;
|
||||
bottom: auto;
|
||||
}
|
||||
}
|
||||
|
||||
&-1 {
|
||||
}
|
||||
&-2 {
|
||||
}
|
||||
|
||||
.img-preview {
|
||||
width: 100%;
|
||||
max-width: 245px;
|
||||
height: 173px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 24px;
|
||||
line-height: 30px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-02 {
|
||||
padding: 50px 0;
|
||||
background: #f4f4f4;
|
||||
.row {
|
||||
.col-12 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
column-gap: 35px;
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0;
|
||||
width: 100%;
|
||||
max-width: 925px;
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
flex-direction: column;
|
||||
row-gap: 35px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-03 {
|
||||
padding: 60px 0;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
box-shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
|
||||
|
||||
ul {
|
||||
width: 100%;
|
||||
max-width: fit-content;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
column-gap: 120px;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding: 28px;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
&:not(:last-child) {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -60px;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: $cBlack;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
ul {
|
||||
flex-direction: column;
|
||||
row-gap: 30px;
|
||||
li {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
&::before {
|
||||
top: auto;
|
||||
bottom: -15px;
|
||||
left: 50%;
|
||||
width: calc(100% - 30px);
|
||||
height: 1px;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-04 {
|
||||
#scontainer-100 {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 11px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(150px / 2 + 20px);
|
||||
background: rgba(231, 220, 208, 0.8);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 11px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(150px / 2);
|
||||
background: #d8d8d8;
|
||||
}
|
||||
|
||||
.scontainer-content {
|
||||
padding-bottom: 150px;
|
||||
position: relative;
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
height: 11px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(150px / 2 - 20px);
|
||||
background: #6c6d70;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tiles {
|
||||
min-height: 760px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr minmax(670px, 1fr);
|
||||
column-gap: 150px;
|
||||
align-items: center;
|
||||
|
||||
@include respond-below(md) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.tile {
|
||||
&-1 {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 360px;
|
||||
background: rgba(244, 244, 244, 0.6);
|
||||
transform: translateX(100%);
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
position: absolute;
|
||||
width: 0;
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
ul {
|
||||
padding: 30px 60px;
|
||||
|
||||
li {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
padding-top: 15px;
|
||||
border-top: 1px solid $cBlack;
|
||||
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-05 {
|
||||
margin-bottom: 80px;
|
||||
|
||||
table {
|
||||
width: 100%;
|
||||
max-width: 1110px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 20px 0 10px 0;
|
||||
border: 1px solid $cBlack;
|
||||
border-collapse: separate;
|
||||
border-spacing: 20px 0;
|
||||
|
||||
thead {
|
||||
tr {
|
||||
border-spacing: 5px 1rem;
|
||||
th {
|
||||
color: $cTxtWhite;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
padding: 20px 15px;
|
||||
|
||||
&:not(:first-child) {
|
||||
background-color: $cBlack;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
tbody {
|
||||
tr {
|
||||
position: relative;
|
||||
|
||||
&:not(:last-child) {
|
||||
th,
|
||||
td {
|
||||
border-bottom: 1px solid $cBlack;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.05em;
|
||||
padding-top: 20px;
|
||||
padding-bottom: 20px;
|
||||
}
|
||||
td {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
th,
|
||||
td {
|
||||
padding-top: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-06 {
|
||||
margin-bottom: 110px;
|
||||
|
||||
.scontainer-content {
|
||||
.row {
|
||||
&:nth-child(3),
|
||||
&:nth-child(4),
|
||||
&:nth-child(5) {
|
||||
.color-tiles {
|
||||
.color-tiles-data {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
|
||||
column-gap: 40px;
|
||||
row-gap: 17px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
.color-tiles {
|
||||
.color-tiles-data {
|
||||
row-gap: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
628
layout/style-scss/fensterabdeckungen.scss
Normal file
628
layout/style-scss/fensterabdeckungen.scss
Normal file
@@ -0,0 +1,628 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Lato:wght@300;400;700&display=swap");
|
||||
@import "variables";
|
||||
@import "_mixins";
|
||||
|
||||
.container {
|
||||
@include respond-above(xl) {
|
||||
max-width: 1300px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.box-01 {
|
||||
margin-bottom: 180px;
|
||||
.box-01-wrapper {
|
||||
padding-top: 20px;
|
||||
display: grid;
|
||||
grid-template-columns: 400px minmax(700px, 1fr);
|
||||
column-gap: 150px;
|
||||
grid-template-areas:
|
||||
"s1 s1"
|
||||
"s4 s4"
|
||||
"s2 s2"
|
||||
"s3 s5";
|
||||
|
||||
.section {
|
||||
&_1 {
|
||||
grid-area: s1;
|
||||
margin-bottom: 60px;
|
||||
|
||||
.tiles {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 130px;
|
||||
row-gap: 50px;
|
||||
width: 100%;
|
||||
max-width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.tile {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
row-gap: 28px;
|
||||
width: 200px;
|
||||
text-align: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: calc(-130px / 2);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: $cBlack;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&_2 {
|
||||
grid-area: s2;
|
||||
padding-top: 80px;
|
||||
padding-bottom: 80px;
|
||||
|
||||
.scontainer-content {
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 32px;
|
||||
}
|
||||
|
||||
#nav_tabs {
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 32px;
|
||||
column-gap: 50px;
|
||||
max-width: unset;
|
||||
padding-bottom: 0;
|
||||
margin-bottom: 0;
|
||||
justify-content: center;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
max-width: 300px;
|
||||
|
||||
a {
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&_3 {
|
||||
grid-area: s3;
|
||||
|
||||
.scontainer-content {
|
||||
.row {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: 80px;
|
||||
width: 100%;
|
||||
max-width: fit-content;
|
||||
}
|
||||
h3 {
|
||||
font-weight: 300;
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 27px;
|
||||
letter-spacing: 0.07em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: initial;
|
||||
padding-left: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&_4 {
|
||||
grid-area: s4;
|
||||
|
||||
.tiles {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
.tile {
|
||||
&_2 {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 110px;
|
||||
background: rgba(#f4f4f4, 0.9);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
|
||||
&_1 {
|
||||
padding: 90px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: rgba(#f4f4f4, 0.9);
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
padding-bottom: 33px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: $cBlack;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 27px;
|
||||
letter-spacing: 0.07em;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.tile {
|
||||
&_1 {
|
||||
padding: 30px;
|
||||
}
|
||||
&_2 {
|
||||
grid-row: 1;
|
||||
|
||||
&::before {
|
||||
top: auto;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 110px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&_5 {
|
||||
grid-area: s5;
|
||||
position: relative;
|
||||
padding-right: 50px;
|
||||
padding-bottom: 15px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 60%;
|
||||
height: 1px;
|
||||
background: #6c6d70;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 1px;
|
||||
height: 90%;
|
||||
background: #6c6d70;
|
||||
}
|
||||
#scontainer-49 {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.scontainer-content {
|
||||
height: 100%;
|
||||
.row {
|
||||
height: 100%;
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
.col-12 {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 27px;
|
||||
letter-spacing: 0.07em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(xxl) {
|
||||
.box-01-wrapper {
|
||||
column-gap: 70px;
|
||||
grid-template-columns: 350px minmax(600px, 1fr);
|
||||
}
|
||||
}
|
||||
@include respond-below(lg) {
|
||||
.box-01-wrapper {
|
||||
grid-template-columns: 350px minmax(600px, 1fr);
|
||||
}
|
||||
}
|
||||
@include respond-below(md) {
|
||||
.box-01-wrapper {
|
||||
grid-template-columns: 1fr;
|
||||
grid-template-areas:
|
||||
"s4"
|
||||
"s2"
|
||||
"s3"
|
||||
"s5";
|
||||
row-gap: 60px;
|
||||
|
||||
.section {
|
||||
&_1 {
|
||||
display: none;
|
||||
}
|
||||
&_3 {
|
||||
.scontainer-content {
|
||||
.row {
|
||||
img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&_5 {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-02 {
|
||||
margin-bottom: 150px;
|
||||
|
||||
.box-02-wrapper {
|
||||
.col-left {
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 80px;
|
||||
row-gap: 15px;
|
||||
|
||||
li {
|
||||
img {
|
||||
margin-bottom: 15px;
|
||||
width: 190px;
|
||||
}
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
ul {
|
||||
column-gap: 55px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col-right {
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
padding-bottom: 28px;
|
||||
margin-bottom: 75px;
|
||||
margin-top: 20px;
|
||||
border-bottom: 1px solid $cBlack;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include respond-below(md) {
|
||||
.box-02-wrapper {
|
||||
.row {
|
||||
flex-direction: column-reverse;
|
||||
gap: 60px;
|
||||
}
|
||||
.col-lg-6 {
|
||||
&:nth-child(2) {
|
||||
img {
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-03 {
|
||||
.box-03-wrapper {
|
||||
.scontainer-content {
|
||||
.row {
|
||||
&:nth-child(1) {
|
||||
margin-bottom: 35px;
|
||||
|
||||
.tiles {
|
||||
.tile {
|
||||
&_1 {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
}
|
||||
&_2 {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
.tiles {
|
||||
.tile {
|
||||
&_1 {
|
||||
&::before {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
&_2 {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.tiles {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
|
||||
.tile {
|
||||
&_1 {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 110px;
|
||||
background: rgba(#f4f4f4, 0.9);
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
&_2 {
|
||||
padding: 90px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
background: rgba(#f4f4f4, 0.9);
|
||||
}
|
||||
img {
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
padding-bottom: 33px;
|
||||
margin-bottom: 40px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: $cBlack;
|
||||
}
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 27px;
|
||||
letter-spacing: 0.07em;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
.box-03-wrapper {
|
||||
.row {
|
||||
&:first-child {
|
||||
.tiles {
|
||||
grid-template-columns: 1fr;
|
||||
.tile {
|
||||
&_1 {
|
||||
grid-row: auto !important;
|
||||
grid-column: auto !important;
|
||||
|
||||
&::before {
|
||||
height: 110px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
&_2 {
|
||||
grid-row: auto !important;
|
||||
grid-column: auto !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.tiles {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.tile {
|
||||
&_1 {
|
||||
&::before {
|
||||
height: 110px;
|
||||
width: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include respond-below(xs) {
|
||||
.box-03-wrapper {
|
||||
&:first-child {
|
||||
.tiles {
|
||||
.tile {
|
||||
&_2 {
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-04 {
|
||||
&#our-catalog {
|
||||
.scontainer-content {
|
||||
& > .row {
|
||||
&:nth-child(1) {
|
||||
.col-12 {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 15px;
|
||||
background-color: $cBlack;
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
a {
|
||||
font-size: 17px;
|
||||
letter-spacing: 0.05em;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
span.line {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
&::before {
|
||||
bottom: 45px;
|
||||
background: rgba(231, 220, 208, 0.8);
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
bottom: 25px;
|
||||
background: #d8d8d8;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
&::before {
|
||||
bottom: 5px;
|
||||
background: #6c6d70;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
608
layout/style-scss/hebeschiebeturen.scss
Normal file
608
layout/style-scss/hebeschiebeturen.scss
Normal file
@@ -0,0 +1,608 @@
|
||||
@import "variables";
|
||||
@import "_mixins";
|
||||
|
||||
.page-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.box-01 {
|
||||
padding-bottom: 150px;
|
||||
|
||||
@include respond-below(md) {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
#product-preview-box {
|
||||
.product-preview-box {
|
||||
.scontainer-content {
|
||||
.product-preview {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-02 {
|
||||
.scontainer-content {
|
||||
.row {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.col-12 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.popup-img {
|
||||
width: calc(50% - 50px);
|
||||
}
|
||||
|
||||
.popup-data {
|
||||
width: calc(50% + 50px);
|
||||
}
|
||||
|
||||
.popup-img {
|
||||
position: relative;
|
||||
min-height: 789px;
|
||||
|
||||
&-wrapper {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 290px;
|
||||
background: rgba(244, 244, 244, 0.9);
|
||||
mix-blend-mode: normal;
|
||||
}
|
||||
|
||||
img {
|
||||
width: auto !important;
|
||||
max-width: fit-content !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-data {
|
||||
padding: 50px 0;
|
||||
|
||||
.popup-schems {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 15px;
|
||||
margin-bottom: 35px;
|
||||
|
||||
li {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
max-width: fit-content;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
line-height: 26px;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-dots {
|
||||
position: absolute;
|
||||
top: auto;
|
||||
left: 0;
|
||||
width: calc(100% - 15px);
|
||||
height: 100%;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
user-select: none;
|
||||
|
||||
li {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
padding-top: 40px;
|
||||
padding-right: 40px;
|
||||
border-right: 1px solid $cBlack;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
left: 0;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border: 1px solid $cBlack;
|
||||
border-radius: 100%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: calc(100% - 19px);
|
||||
height: 1px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
text-align: right;
|
||||
letter-spacing: 0.05em;
|
||||
width: 100%;
|
||||
max-width: 470px;
|
||||
margin-left: auto;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
flex-direction: column;
|
||||
|
||||
.popup-img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.popup-img {
|
||||
min-height: unset;
|
||||
|
||||
&-wrapper {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-data {
|
||||
width: 100%;
|
||||
|
||||
.popup-dots {
|
||||
position: relative;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
padding-top: 20px;
|
||||
padding-right: 10px;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.popup-schems {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-1 {
|
||||
.col-12 {
|
||||
.popup-data {
|
||||
.popup-dots {
|
||||
li {
|
||||
&:nth-child(1) {
|
||||
left: 290px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-2 {
|
||||
.col-12 {
|
||||
.popup-data {
|
||||
.popup-dots {
|
||||
li {
|
||||
&:nth-child(1) {
|
||||
left: 270px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-3 {
|
||||
.col-12 {
|
||||
.popup-data {
|
||||
.popup-dots {
|
||||
li {
|
||||
&:nth-child(1) {
|
||||
left: 480px;
|
||||
padding-bottom: 40px;
|
||||
padding-top: 0;
|
||||
|
||||
&::before {
|
||||
top: auto;
|
||||
bottom: -18px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
top: auto;
|
||||
bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-03 {
|
||||
margin-bottom: 65px;
|
||||
|
||||
.box-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.box-left {
|
||||
width: calc(50% - 50px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
ul {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 40px;
|
||||
padding: 50px;
|
||||
margin: 20px 0;
|
||||
border-left: 1px solid #6c6d70;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 170%;
|
||||
height: 1px;
|
||||
background: #6c6d70;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 30px;
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.07em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-right {
|
||||
position: relative;
|
||||
width: calc(50% + 50px);
|
||||
|
||||
&-text {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
background: rgba(244, 244, 244, 0.9);
|
||||
mix-blend-mode: normal;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
max-width: 330px;
|
||||
padding: 30px;
|
||||
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 35px;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 26px;
|
||||
letter-spacing: 0.07em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
flex-direction: column-reverse;
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.box-left {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
|
||||
ul {
|
||||
border-left: none;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-right {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-04 {
|
||||
#product-colors {
|
||||
.color-tiles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
column-gap: 60px;
|
||||
row-gap: 70px;
|
||||
|
||||
@include respond-below(sm) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.color-tiles-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
column-gap: 60px;
|
||||
row-gap: 70px;
|
||||
}
|
||||
|
||||
.color-tiles-title {
|
||||
padding-left: 60px;
|
||||
|
||||
&::before {
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0.07em;
|
||||
}
|
||||
}
|
||||
|
||||
.vekamotion-82,
|
||||
.inova-smoove {
|
||||
.color-tiles-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 17px;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 126px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.platinum-optima {
|
||||
.color-tile-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 80px;
|
||||
row-gap: 40px;
|
||||
align-items: center;
|
||||
|
||||
@include respond-below(sm) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.color-tiles-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 15px;
|
||||
row-gap: 17px;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
row-gap: 7px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 126px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: initial;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tile-emblem {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 256px;
|
||||
min-width: 256px;
|
||||
height: 256px;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
|
||||
&-black {
|
||||
color: $cTxtWhite;
|
||||
background-color: $cBlack;
|
||||
|
||||
p {
|
||||
&::before {
|
||||
background-color: $cWhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-gray {
|
||||
color: $cTxtBlack;
|
||||
background-color: #ece9e2;
|
||||
|
||||
p {
|
||||
&::before {
|
||||
background-color: $cBlack;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-brown {
|
||||
color: $cTxtWhite;
|
||||
background-color: #69503b;
|
||||
|
||||
p {
|
||||
&::before {
|
||||
background-color: $cWhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
line-height: 35px;
|
||||
letter-spacing: 0.15em;
|
||||
padding-bottom: 35px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
height: 1px;
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-tiles {
|
||||
&:nth-child(2n + 1) {
|
||||
&:not(:first-child) {
|
||||
&::before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.color-tiles-title {
|
||||
text-align: right;
|
||||
padding-left: 0;
|
||||
padding-right: 60px;
|
||||
|
||||
&::before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-tile-content {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.color-tiles-data {
|
||||
justify-content: flex-end;
|
||||
padding-left: 0;
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
@include respond-below(sm) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-05 {
|
||||
&#our-catalog {
|
||||
.scontainer-content {
|
||||
.row {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: flex !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
316
layout/style-scss/holz-alu-fenster.scss
Normal file
316
layout/style-scss/holz-alu-fenster.scss
Normal file
@@ -0,0 +1,316 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Lato:wght@300;400;700&display=swap');
|
||||
@import 'variables';
|
||||
@import '_mixins';
|
||||
|
||||
.page-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.box-03 {
|
||||
#product-popup-box {
|
||||
.row {
|
||||
&:first-child {
|
||||
&::before {
|
||||
max-width: 600px;
|
||||
left: 60%;
|
||||
}
|
||||
}
|
||||
.box-data {
|
||||
ul {
|
||||
li {
|
||||
@include respond-above(lg) {
|
||||
&:nth-child(1) {
|
||||
left: 220px;
|
||||
top: 5px;
|
||||
right: 210px;
|
||||
|
||||
p {
|
||||
max-width: 320px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
left: 120px;
|
||||
top: 120px;
|
||||
right: 60px;
|
||||
|
||||
p {
|
||||
max-width: 480px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
left: 435px;
|
||||
top: 210px;
|
||||
right: 210px;
|
||||
|
||||
p {
|
||||
max-width: 310px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
left: 300px;
|
||||
top: 310px;
|
||||
right: 320px;
|
||||
|
||||
p {
|
||||
max-width: 180px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
left: 80px;
|
||||
top: 370px;
|
||||
right: 210px;
|
||||
|
||||
p {
|
||||
max-width: 230px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
left: 360px;
|
||||
top: 430px;
|
||||
right: 60px;
|
||||
|
||||
p {
|
||||
max-width: 350px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(7) {
|
||||
left: 430px;
|
||||
top: 540px;
|
||||
right: 140px;
|
||||
|
||||
p {
|
||||
max-width: 250px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(8) {
|
||||
left: 290px;
|
||||
top: 525px;
|
||||
right: 470px;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 300px;
|
||||
|
||||
margin-left: 0;
|
||||
padding-top: 50px;
|
||||
padding-left: 25px;
|
||||
padding-top: 60px;
|
||||
text-align: left;
|
||||
|
||||
&::after {
|
||||
left: 9px;
|
||||
top: 18px;
|
||||
height: calc(100% - 18px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(lg) {
|
||||
&:nth-child(1) {
|
||||
&::before {
|
||||
content: '1';
|
||||
left: 230px;
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
content: '2';
|
||||
left: 120px;
|
||||
top: 130px;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
&::before {
|
||||
content: '3';
|
||||
left: 445px;
|
||||
top: 220px;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
&::before {
|
||||
content: '4';
|
||||
left: 335px;
|
||||
top: 300px;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
&::before {
|
||||
content: '5';
|
||||
left: 100px;
|
||||
top: 350px;
|
||||
}
|
||||
}
|
||||
&:nth-child(6) {
|
||||
&::before {
|
||||
content: '6';
|
||||
left: 365px;
|
||||
top: 430px;
|
||||
}
|
||||
}
|
||||
&:nth-child(7) {
|
||||
&::before {
|
||||
content: '7';
|
||||
left: 425px;
|
||||
top: 535px;
|
||||
}
|
||||
}
|
||||
&:nth-child(8) {
|
||||
&::before {
|
||||
content: '8';
|
||||
left: 290px;
|
||||
top: 545px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(xs) {
|
||||
&:nth-child(1) {
|
||||
&::before {
|
||||
left: 150px;
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
left: 65px;
|
||||
top: 100px;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
&::before {
|
||||
left: 263px;
|
||||
top: 140px;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
&::before {
|
||||
left: 210px;
|
||||
top: 190px;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
&::before {
|
||||
left: 80px;
|
||||
top: 220px;
|
||||
}
|
||||
}
|
||||
&:nth-child(6) {
|
||||
&::before {
|
||||
left: 230px;
|
||||
top: 260px;
|
||||
}
|
||||
}
|
||||
&:nth-child(7) {
|
||||
&::before {
|
||||
left: 260px;
|
||||
top: 340px;
|
||||
}
|
||||
}
|
||||
&:nth-child(8) {
|
||||
&::before {
|
||||
left: 170px;
|
||||
top: 340px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-05 {
|
||||
.scontainer-content {
|
||||
.row {
|
||||
&:nth-child(1) {
|
||||
.color-tiles {
|
||||
.color-tiles-data {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||||
gap: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
.color-tiles {
|
||||
.color-tiles-data {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 20px;
|
||||
|
||||
li {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
row-gap: 15px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
.color-tiles {
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 12px;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #6c6d70;
|
||||
}
|
||||
.color-tiles-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-right: 60px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 213px;
|
||||
height: 1px;
|
||||
background: #6c6d70;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
text-align: right;
|
||||
letter-spacing: 0.07em;
|
||||
width: 100%;
|
||||
max-width: 280px;
|
||||
margin-bottom: 0;
|
||||
margin-top: -25px;
|
||||
}
|
||||
|
||||
@include respond-below(sm) {
|
||||
flex-direction: column;
|
||||
|
||||
p {
|
||||
margin-top: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
774
layout/style-scss/holzfenster.scss
Normal file
774
layout/style-scss/holzfenster.scss
Normal file
@@ -0,0 +1,774 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Lato:wght@300;400;700&display=swap');
|
||||
@import 'variables';
|
||||
@import '_mixins';
|
||||
|
||||
.page-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.box-01 {
|
||||
#nav_tabs {
|
||||
max-width: 635px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-03 {
|
||||
#product-popup-box {
|
||||
.row {
|
||||
.box-data {
|
||||
ul {
|
||||
li {
|
||||
@include respond-above(lg) {
|
||||
&:nth-child(1) {
|
||||
left: 230px;
|
||||
top: 15px;
|
||||
right: 150px;
|
||||
|
||||
p {
|
||||
max-width: 310px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
left: 120px;
|
||||
top: 150px;
|
||||
right: 40px;
|
||||
|
||||
p {
|
||||
max-width: 380px;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
left: 445px;
|
||||
top: 260px;
|
||||
right: 100px;
|
||||
p {
|
||||
max-width: 370px;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
left: 0px;
|
||||
top: 340px;
|
||||
right: 40px;
|
||||
p {
|
||||
max-width: 430px;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
left: 440px;
|
||||
top: 490px;
|
||||
right: 40px;
|
||||
|
||||
p {
|
||||
max-width: 270px;
|
||||
}
|
||||
}
|
||||
&:nth-child(6) {
|
||||
left: 300px;
|
||||
top: 505px;
|
||||
right: 200px;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 250px;
|
||||
|
||||
margin-left: 0;
|
||||
text-align: left;
|
||||
padding-top: 55px;
|
||||
padding-left: 25px;
|
||||
padding-right: 0;
|
||||
|
||||
&::after {
|
||||
left: 9px;
|
||||
top: 19px;
|
||||
height: calc(100% - 19px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(lg) {
|
||||
&:nth-child(1) {
|
||||
&::before {
|
||||
content: '1';
|
||||
left: 230px;
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
content: '2';
|
||||
left: 240px;
|
||||
top: 65px;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
&::before {
|
||||
content: '3';
|
||||
left: 120px;
|
||||
top: 150px;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
&::before {
|
||||
content: '4';
|
||||
left: 445px;
|
||||
top: 260px;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
&::before {
|
||||
content: '5';
|
||||
left: 0px;
|
||||
top: 340px;
|
||||
}
|
||||
}
|
||||
&:nth-child(6) {
|
||||
&::before {
|
||||
content: '6';
|
||||
left: 440px;
|
||||
top: 490px;
|
||||
}
|
||||
}
|
||||
&:nth-child(7) {
|
||||
&::before {
|
||||
content: '7';
|
||||
left: 460px;
|
||||
top: 475px;
|
||||
}
|
||||
}
|
||||
&:nth-child(8) {
|
||||
&::before {
|
||||
content: '8';
|
||||
left: 350px;
|
||||
top: 495px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(xs) {
|
||||
&:nth-child(1) {
|
||||
&::before {
|
||||
left: 140px;
|
||||
top: 5px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
left: 150px;
|
||||
top: 60px;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
&::before {
|
||||
left: 80px;
|
||||
top: 125px;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
&::before {
|
||||
left: 280px;
|
||||
top: 160px;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
&::before {
|
||||
left: 10px;
|
||||
top: 185px;
|
||||
}
|
||||
}
|
||||
&:nth-child(6) {
|
||||
&::before {
|
||||
left: 280px;
|
||||
top: 260px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-05 {
|
||||
.scontainer-content {
|
||||
.row {
|
||||
&:nth-child(1) {
|
||||
.color-tiles {
|
||||
.color-tiles-data {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
|
||||
gap: 30px;
|
||||
|
||||
@include respond-below(md) {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
.color-tiles {
|
||||
.color-tiles-data {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
|
||||
gap: 20px;
|
||||
|
||||
li {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
row-gap: 15px;
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-06 {
|
||||
display: none;
|
||||
margin-bottom: 100px;
|
||||
|
||||
.color_tiles_head {
|
||||
padding: 45px 50px 30px;
|
||||
background: #f4f4f4;
|
||||
margin-bottom: 45px;
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
#product-colors {
|
||||
.color_tiles {
|
||||
> h2 {
|
||||
position: relative;
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 30px;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0px;
|
||||
padding-left: 220px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
left: 0;
|
||||
width: 180px;
|
||||
height: 1px;
|
||||
background: #6c6d70;
|
||||
}
|
||||
}
|
||||
|
||||
.color_tiles_data {
|
||||
position: relative;
|
||||
padding-top: 50px;
|
||||
padding-left: 60px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -15px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
background: #6c6d70;
|
||||
}
|
||||
|
||||
.color_box {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 90px;
|
||||
}
|
||||
|
||||
&_1 {
|
||||
h2 {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 30px;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 17px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 0;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background: #6c6d70;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
span {
|
||||
background: $cWhite;
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 15px;
|
||||
width: calc((100% / 5) - 16px);
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 163px;
|
||||
height: 100%;
|
||||
max-height: 44px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(xl) {
|
||||
#product-colors {
|
||||
.color_tiles {
|
||||
.color_tiles_data {
|
||||
.color_box {
|
||||
ul {
|
||||
li {
|
||||
width: calc(100% / 4 - 15px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(lg) {
|
||||
#product-colors {
|
||||
.color_tiles {
|
||||
.color_tiles_data {
|
||||
.color_box {
|
||||
ul {
|
||||
li {
|
||||
width: calc(100% / 3 - 15px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
#product-colors {
|
||||
.color_tiles {
|
||||
.color_tiles_data {
|
||||
.color_box {
|
||||
ul {
|
||||
li {
|
||||
width: calc(100% / 2 - 10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(xs) {
|
||||
#product-colors {
|
||||
.color_tiles {
|
||||
> h2 {
|
||||
padding-left: 100px;
|
||||
|
||||
&::before {
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
.color_tiles_data {
|
||||
.color_box {
|
||||
ul {
|
||||
li {
|
||||
width: 100%;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-07 {
|
||||
display: none;
|
||||
.color_pallet {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 12px;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: #6c6d70;
|
||||
}
|
||||
|
||||
.color_pallet_title {
|
||||
position: relative;
|
||||
padding-left: 240px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 213px;
|
||||
height: 1px;
|
||||
background: #6c6d70;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
|
||||
.color_pallet_data {
|
||||
padding-left: 60px;
|
||||
padding-top: 50px;
|
||||
}
|
||||
|
||||
@include respond-below(sm) {
|
||||
.color_pallet_title {
|
||||
padding-left: 150px;
|
||||
|
||||
&::before {
|
||||
width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(xs) {
|
||||
.color_pallet_title {
|
||||
padding-left: 90px;
|
||||
|
||||
&::before {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-09 {
|
||||
margin-bottom: 50px;
|
||||
|
||||
.scontainer-content {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 100vw;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
.row-first {
|
||||
.col-lg-5 {
|
||||
position: relative;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
max-width: unset !important;
|
||||
width: fit-content !important;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col-7 {
|
||||
&-first {
|
||||
padding-top: 80px;
|
||||
padding-left: 100px;
|
||||
margin-bottom: 75px;
|
||||
|
||||
> .tile {
|
||||
&:nth-child(1) {
|
||||
margin-bottom: 75px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
.tile-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
gap: 30px;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
@include respond-below(xs) {
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-second {
|
||||
padding-bottom: 80px;
|
||||
padding-left: 100px;
|
||||
|
||||
.tile {
|
||||
position: relative;
|
||||
padding-left: 50px;
|
||||
padding-top: 50px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 1px;
|
||||
height: 80%;
|
||||
background: $cBlack;
|
||||
}
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 60%;
|
||||
height: 1px;
|
||||
background: $cBlack;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.col-5 {
|
||||
&-second {
|
||||
padding-top: 50px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
ul {
|
||||
li {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 70px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 300;
|
||||
font-size: 25px;
|
||||
line-height: 30px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tile {
|
||||
&-header {
|
||||
position: relative;
|
||||
padding-left: 60px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 35px;
|
||||
height: 1px;
|
||||
background: $cBlack;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: $cBlack;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
&-data {
|
||||
position: relative;
|
||||
padding-top: 60px;
|
||||
padding-left: 60px;
|
||||
border-left: 1px solid $cBlack;
|
||||
|
||||
ul {
|
||||
&.ul-1 {
|
||||
margin-bottom: 75px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 30px;
|
||||
row-gap: 20px;
|
||||
align-items: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
@include respond-below(xs) {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
&.ul-2 {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
gap: 20px;
|
||||
|
||||
li {
|
||||
max-width: 225px;
|
||||
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(xs) {
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
.tile-data-texts {
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(xs) {
|
||||
padding-top: 30px;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
&::before {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(sm) {
|
||||
.col-7 {
|
||||
&-first {
|
||||
padding-left: 30px;
|
||||
padding-top: 30px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
&-second {
|
||||
padding-left: 30px;
|
||||
padding-bottom: 30px;
|
||||
|
||||
.tile {
|
||||
padding-right: 50px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.col-5 {
|
||||
&-second {
|
||||
padding-left: 80px;
|
||||
padding-right: 80px;
|
||||
|
||||
ul {
|
||||
li {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
451
layout/style-scss/kontakt.scss
Normal file
451
layout/style-scss/kontakt.scss
Normal file
@@ -0,0 +1,451 @@
|
||||
// out: ../style-css/kontakt.css, compress: true, sourceMap: true
|
||||
@import "variables";
|
||||
@import "_mixins";
|
||||
|
||||
footer {
|
||||
&.gap_big_top {
|
||||
padding-top: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.box-data {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(auto, 300px) minmax(500px, 1fr);
|
||||
column-gap: 90px;
|
||||
|
||||
@include respond-below(md) {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.box-1 {
|
||||
.box-data {
|
||||
&-left {
|
||||
background-image: url("/upload/filemanager/Pages/Kontakt/kontakt-2.jpg");
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
#scontainer-113 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
min-height: 600px;
|
||||
padding: 50px;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
|
||||
@include respond-below(md) {
|
||||
padding: 15px;
|
||||
width: 100%;
|
||||
justify-content: flex-start;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.tile-content {
|
||||
width: 100%;
|
||||
max-width: 200px;
|
||||
text-align: right;
|
||||
|
||||
@include respond-below(md) {
|
||||
text-align: left;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
h2 {
|
||||
position: relative;
|
||||
font-weight: 300;
|
||||
font-size: 30px;
|
||||
line-height: 50px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 45px;
|
||||
padding-bottom: 45px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: $cBlack;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
padding-top: 70px;
|
||||
|
||||
@include respond-below(md) {
|
||||
padding-bottom: 50px;
|
||||
}
|
||||
|
||||
@include respond-below(sm) {
|
||||
padding: 25px 0 !important;
|
||||
}
|
||||
|
||||
.contact-box {
|
||||
margin-bottom: 60px;
|
||||
|
||||
.contact-head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 30px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.alert {
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
background: #000;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 300;
|
||||
font-size: 30px;
|
||||
line-height: 50px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.contact-social {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
|
||||
li {
|
||||
a {
|
||||
img {
|
||||
width: 27px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#scontainer-114 {
|
||||
h2 {
|
||||
position: relative;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
color: $cTxtBlack;
|
||||
margin-bottom: 35px;
|
||||
padding-top: 35px;
|
||||
padding-bottom: 35px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 0 0 -90px;
|
||||
background: #f4f4f4;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
|
||||
ul {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 30px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@include respond-below(md) {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
max-width: 60px;
|
||||
|
||||
&:not(:last-child) {
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 30px;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
background: $cBlack;
|
||||
z-index: -1;
|
||||
|
||||
@include respond-below(md) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: 15px;
|
||||
width: 100%;
|
||||
max-width: fit-content;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 9px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#scontainer-115 {
|
||||
.contact-people {
|
||||
position: relative;
|
||||
|
||||
&-head {
|
||||
h2 {
|
||||
position: relative;
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
color: $cTxtBlack;
|
||||
margin-bottom: 35px;
|
||||
padding-top: 35px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
inset: 0 0 0 -90px;
|
||||
background: #f4f4f4;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-email {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
margin-bottom: 78px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: calc(-78px / 2);
|
||||
left: 0;
|
||||
right: 0;
|
||||
height: 1px;
|
||||
background: $cBlack;
|
||||
}
|
||||
|
||||
a {
|
||||
color: $cTxtBlack;
|
||||
font-weight: 700;
|
||||
font-size: 22px;
|
||||
line-height: 30px;
|
||||
letter-spacing: 0.1em;
|
||||
|
||||
img {
|
||||
margin-right: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.people-list {
|
||||
margin-bottom: 70px;
|
||||
.people-item {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
column-gap: 70px;
|
||||
|
||||
@include respond-below(sm) {
|
||||
column-gap: 10px;
|
||||
}
|
||||
|
||||
.people-img {
|
||||
img {
|
||||
@include respond-below(sm) {
|
||||
max-width: 100px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 50px;
|
||||
|
||||
@include respond-below(sm) {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.people-img {
|
||||
img {
|
||||
}
|
||||
}
|
||||
|
||||
.people-data {
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 30px;
|
||||
letter-spacing: 0.07em;
|
||||
|
||||
@include respond-below(sm) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
|
||||
@include respond-below(sm) {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: $cTxtBlack;
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
column-gap: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-2 {
|
||||
margin-bottom: 30px;
|
||||
padding: 95px 0 60px;
|
||||
background: #f4f4f4;
|
||||
|
||||
.box-data {
|
||||
&-left {
|
||||
#scontainer-120 {
|
||||
.scontainer-content {
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
#scontainer-121 {
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
text-transform: capitalize;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
row-gap: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-3 {
|
||||
.box-data {
|
||||
&-left {
|
||||
#scontainer-116 {
|
||||
.scontainer-content {
|
||||
text-align: right;
|
||||
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
text-transform: capitalize;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
#scontainer-117 {
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
row-gap: 60px;
|
||||
}
|
||||
}
|
||||
}
|
||||
329
layout/style-scss/kunststoff-alu-fenster.scss
Normal file
329
layout/style-scss/kunststoff-alu-fenster.scss
Normal file
@@ -0,0 +1,329 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Lato:wght@300;400;700&display=swap');
|
||||
@import 'variables';
|
||||
@import '_mixins';
|
||||
|
||||
.page-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.box-03 {
|
||||
#product-popup-box {
|
||||
.row {
|
||||
.box-data {
|
||||
ul {
|
||||
li {
|
||||
@include respond-above(lg) {
|
||||
&:nth-child(1) {
|
||||
left: 310px;
|
||||
top: -60px;
|
||||
|
||||
&::before {
|
||||
bottom: 0;
|
||||
}
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 600px;
|
||||
|
||||
text-align: left;
|
||||
margin-left: 0;
|
||||
padding-left: 25px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 45px;
|
||||
|
||||
&::after {
|
||||
height: calc(100% - 18px);
|
||||
top: 0;
|
||||
left: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
left: 250px;
|
||||
top: 20px;
|
||||
|
||||
right: 250px;
|
||||
p {
|
||||
max-width: 290px;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
left: 380px;
|
||||
top: 150px;
|
||||
|
||||
right: 260px;
|
||||
p {
|
||||
max-width: 290px;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
left: 265px;
|
||||
top: 270px;
|
||||
right: 50px;
|
||||
p {
|
||||
max-width: 390px;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
left: 190px;
|
||||
top: 370px;
|
||||
right: 180px;
|
||||
p {
|
||||
max-width: 330px;
|
||||
}
|
||||
}
|
||||
&:nth-child(6) {
|
||||
left: 225px;
|
||||
top: 460px;
|
||||
right: 50px;
|
||||
p {
|
||||
max-width: 450px;
|
||||
}
|
||||
}
|
||||
&:nth-child(7) {
|
||||
left: 370px;
|
||||
top: 545px;
|
||||
|
||||
right: 130px;
|
||||
p {
|
||||
max-width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(8) {
|
||||
left: 270px;
|
||||
top: 630px;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 220px;
|
||||
|
||||
margin-left: 0;
|
||||
padding-top: 50px;
|
||||
padding-left: 25px;
|
||||
text-align: left;
|
||||
|
||||
&::after {
|
||||
left: 9px;
|
||||
top: 18px;
|
||||
height: calc(100% - 18px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(lg) {
|
||||
&:nth-child(1) {
|
||||
&::before {
|
||||
content: '1';
|
||||
left: 380px;
|
||||
top: 10px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
content: '2';
|
||||
left: 270px;
|
||||
top: 40px;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
&::before {
|
||||
content: '3';
|
||||
left: 385px;
|
||||
top: 160px;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
&::before {
|
||||
content: '4';
|
||||
left: 270px;
|
||||
top: 240px;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
&::before {
|
||||
content: '5';
|
||||
left: 210px;
|
||||
top: 320px;
|
||||
}
|
||||
}
|
||||
&:nth-child(6) {
|
||||
&::before {
|
||||
content: '6';
|
||||
left: 250px;
|
||||
top: 420px;
|
||||
}
|
||||
}
|
||||
&:nth-child(7) {
|
||||
&::before {
|
||||
content: '7';
|
||||
left: 380px;
|
||||
top: 545px;
|
||||
}
|
||||
}
|
||||
&:nth-child(8) {
|
||||
&::before {
|
||||
content: '8';
|
||||
left: 320px;
|
||||
top: 630px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(xs) {
|
||||
&:nth-child(1) {
|
||||
&::before {
|
||||
left: 250px;
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
left: 175px;
|
||||
top: 40px;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
&::before {
|
||||
left: 275px;
|
||||
top: 115px;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
&::before {
|
||||
left: 200px;
|
||||
top: 170px;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
&::before {
|
||||
left: 130px;
|
||||
top: 240px;
|
||||
}
|
||||
}
|
||||
&:nth-child(6) {
|
||||
&::before {
|
||||
left: 175px;
|
||||
top: 320px;
|
||||
}
|
||||
}
|
||||
&:nth-child(7) {
|
||||
&::before {
|
||||
left: 260px;
|
||||
top: 400px;
|
||||
}
|
||||
}
|
||||
&:nth-child(8) {
|
||||
&::before {
|
||||
left: 150px;
|
||||
top: 460px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-05 {
|
||||
#product-colors {
|
||||
.color-tiles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
column-gap: 60px;
|
||||
row-gap: 70px;
|
||||
|
||||
@include respond-below(sm) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.color-tiles-title {
|
||||
padding-left: 60px;
|
||||
&::before {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
.color-tiles-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 17px;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 126px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-08 {
|
||||
&#our-catalog {
|
||||
.scontainer-content {
|
||||
& > .row {
|
||||
&:nth-child(1) {
|
||||
.col-12 {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0 15px;
|
||||
background-color: $cBlack;
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
}
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
a {
|
||||
font-size: 17px;
|
||||
letter-spacing: 0.05em;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
span.line {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 15px;
|
||||
right: 15px;
|
||||
height: 9px;
|
||||
}
|
||||
|
||||
&:nth-child(1) {
|
||||
&::before {
|
||||
bottom: 45px;
|
||||
background: rgba(231, 220, 208, 0.8);
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
bottom: 25px;
|
||||
background: #d8d8d8;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
&::before {
|
||||
bottom: 5px;
|
||||
background: #6c6d70;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
436
layout/style-scss/kunststofffenster.scss
Normal file
436
layout/style-scss/kunststofffenster.scss
Normal file
@@ -0,0 +1,436 @@
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Lato:wght@300;400;700&display=swap');
|
||||
@import 'variables';
|
||||
@import '_mixins';
|
||||
|
||||
.page-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.box-03 {
|
||||
#product-popup-box {
|
||||
.row {
|
||||
&:first-child {
|
||||
&::before {
|
||||
max-width: 600px;
|
||||
left: 60%;
|
||||
}
|
||||
}
|
||||
.box-data {
|
||||
ul {
|
||||
li {
|
||||
@include respond-above(lg) {
|
||||
&:nth-child(1) {
|
||||
left: 280px;
|
||||
top: -82px;
|
||||
|
||||
&::before {
|
||||
bottom: 0;
|
||||
}
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 720px;
|
||||
|
||||
text-align: left;
|
||||
margin-left: 0;
|
||||
padding-left: 25px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 45px;
|
||||
|
||||
&::after {
|
||||
height: calc(100% - 18px);
|
||||
top: 0;
|
||||
left: 9px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(2) {
|
||||
left: 15px;
|
||||
top: 50px;
|
||||
right: 60px;
|
||||
|
||||
p {
|
||||
max-width: 500px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(3) {
|
||||
left: 25px;
|
||||
top: 110px;
|
||||
right: 280px;
|
||||
|
||||
p {
|
||||
max-width: 450px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
left: 230px;
|
||||
top: 180px;
|
||||
right: 100px;
|
||||
|
||||
p {
|
||||
max-width: 480px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
left: 240px;
|
||||
top: 310px;
|
||||
right: 170px;
|
||||
p {
|
||||
max-width: 670px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
left: 110px;
|
||||
top: 400px;
|
||||
right: 130px;
|
||||
p {
|
||||
max-width: 340px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(7) {
|
||||
left: 450px;
|
||||
top: 490px;
|
||||
|
||||
right: 170px;
|
||||
p {
|
||||
max-width: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
&:nth-child(8) {
|
||||
left: 280px;
|
||||
top: 550px;
|
||||
right: 470px;
|
||||
|
||||
&::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
p {
|
||||
max-width: 240px;
|
||||
|
||||
margin-left: 0;
|
||||
padding-top: 50px;
|
||||
padding-left: 25px;
|
||||
text-align: left;
|
||||
|
||||
&::after {
|
||||
left: 9px;
|
||||
top: 18px;
|
||||
height: calc(100% - 18px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(lg) {
|
||||
&:nth-child(1) {
|
||||
&::before {
|
||||
content: '1';
|
||||
left: 340px;
|
||||
top: 20px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
content: '2';
|
||||
left: 15px;
|
||||
top: 70px;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
&::before {
|
||||
content: '3';
|
||||
left: 30px;
|
||||
top: 150px;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
&::before {
|
||||
content: '4';
|
||||
left: 230px;
|
||||
top: 220px;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
&::before {
|
||||
content: '5';
|
||||
left: 250px;
|
||||
top: 330px;
|
||||
}
|
||||
}
|
||||
&:nth-child(6) {
|
||||
&::before {
|
||||
content: '6';
|
||||
left: 125px;
|
||||
top: 410px;
|
||||
}
|
||||
}
|
||||
&:nth-child(7) {
|
||||
&::before {
|
||||
content: '7';
|
||||
left: 436px;
|
||||
top: 485px;
|
||||
}
|
||||
}
|
||||
&:nth-child(8) {
|
||||
&::before {
|
||||
content: '8';
|
||||
left: 310px;
|
||||
top: 555px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(xs) {
|
||||
&:nth-child(1) {
|
||||
&::before {
|
||||
left: 210px;
|
||||
top: 15px;
|
||||
}
|
||||
}
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
left: 5px;
|
||||
top: 55px;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
&::before {
|
||||
left: 25px;
|
||||
top: 115px;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
&::before {
|
||||
left: 150px;
|
||||
top: 150px;
|
||||
}
|
||||
}
|
||||
&:nth-child(5) {
|
||||
&::before {
|
||||
left: 130px;
|
||||
top: 210px;
|
||||
}
|
||||
}
|
||||
&:nth-child(6) {
|
||||
&::before {
|
||||
left: 70px;
|
||||
top: 280px;
|
||||
}
|
||||
}
|
||||
&:nth-child(7) {
|
||||
&::before {
|
||||
left: 270px;
|
||||
top: 300px;
|
||||
}
|
||||
}
|
||||
&:nth-child(7) {
|
||||
&::before {
|
||||
left: 190px;
|
||||
top: 345px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-05 {
|
||||
#product-colors {
|
||||
.color-tiles-grid {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
column-gap: 60px;
|
||||
row-gap: 70px;
|
||||
|
||||
@include respond-below(sm) {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
.color-tiles-title {
|
||||
padding-left: 60px;
|
||||
&::before {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.color-tiles-data {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 17px;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 126px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-tiles-rows {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
column-gap: 60px;
|
||||
row-gap: 70px;
|
||||
}
|
||||
|
||||
.vp-80 {
|
||||
.color-tile-content {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
column-gap: 80px;
|
||||
row-gap: 40px;
|
||||
align-items: center;
|
||||
|
||||
@include respond-below(sm) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
|
||||
.color-tiles-data {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
column-gap: 15px;
|
||||
row-gap: 17px;
|
||||
align-items: flex-start;
|
||||
overflow: hidden;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
row-gap: 7px;
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 126px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
line-height: 15px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: initial;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tile-emblem {
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 256px;
|
||||
min-width: 256px;
|
||||
height: 256px;
|
||||
border-radius: 100%;
|
||||
text-align: center;
|
||||
|
||||
&-black {
|
||||
color: $cTxtWhite;
|
||||
background-color: $cBlack;
|
||||
p {
|
||||
&::before {
|
||||
background-color: $cWhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-gray {
|
||||
color: $cTxtBlack;
|
||||
background-color: #ece9e2;
|
||||
p {
|
||||
&::before {
|
||||
background-color: $cBlack;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-brown {
|
||||
color: $cTxtWhite;
|
||||
background-color: #69503b;
|
||||
p {
|
||||
&::before {
|
||||
background-color: $cWhite;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-weight: 700;
|
||||
font-size: 25px;
|
||||
line-height: 1.2;
|
||||
letter-spacing: 0.15em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
p {
|
||||
position: relative;
|
||||
font-weight: 300;
|
||||
font-size: 15px;
|
||||
line-height: 35px;
|
||||
letter-spacing: 0.15em;
|
||||
padding-bottom: 35px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
transform: translateX(-50%);
|
||||
height: 1px;
|
||||
width: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.color-tiles {
|
||||
&:nth-child(2n + 1) {
|
||||
&:not(:first-child) {
|
||||
&::before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.color-tiles-title {
|
||||
text-align: right;
|
||||
padding-left: 0;
|
||||
padding-right: 60px;
|
||||
|
||||
&::before {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
.color-tile-content {
|
||||
flex-direction: row-reverse;
|
||||
|
||||
.color-tiles-data {
|
||||
justify-content: flex-end;
|
||||
padding-left: 0;
|
||||
padding-right: 60px;
|
||||
}
|
||||
|
||||
@include respond-below(sm) {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
48
layout/style-scss/ornamentglas.scss
Normal file
48
layout/style-scss/ornamentglas.scss
Normal file
@@ -0,0 +1,48 @@
|
||||
@import 'variables';
|
||||
@import '_mixins';
|
||||
|
||||
#page_hero {
|
||||
.scontainer-content {
|
||||
@include respond-below(sm) {
|
||||
grid-template-columns: 1fr;
|
||||
.left-data {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.right-data {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.box-01 {
|
||||
.ornamentglas-tiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
column-gap: 30px;
|
||||
row-gap: 90px;
|
||||
|
||||
li {
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: 350px;
|
||||
height: 100%;
|
||||
margin-bottom: 30px;
|
||||
max-height: 350px;
|
||||
object-fit: cover;
|
||||
}
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 25px;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(sm) {
|
||||
li {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
1180
layout/style-scss/produktzusatze.scss
Normal file
1180
layout/style-scss/produktzusatze.scss
Normal file
File diff suppressed because it is too large
Load Diff
1254
layout/style-scss/promocja-na-wybrane-powloki.scss
Normal file
1254
layout/style-scss/promocja-na-wybrane-powloki.scss
Normal file
File diff suppressed because it is too large
Load Diff
6497
layout/style-scss/style.scss
Normal file
6497
layout/style-scss/style.scss
Normal file
File diff suppressed because it is too large
Load Diff
420
layout/style-scss/turen.scss
Normal file
420
layout/style-scss/turen.scss
Normal file
@@ -0,0 +1,420 @@
|
||||
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Lato:wght@300;400;700&display=swap");
|
||||
@import "variables";
|
||||
@import "_mixins";
|
||||
|
||||
.page-content {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#nav_tabs {
|
||||
li {
|
||||
a {
|
||||
font-weight: 400;
|
||||
font-size: 31.3px;
|
||||
line-height: 38px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-01 {
|
||||
.turen-info {
|
||||
display: none;
|
||||
|
||||
&.active {
|
||||
display: block;
|
||||
}
|
||||
.tiles {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.tile {
|
||||
&-1 {
|
||||
position: relative;
|
||||
padding: 120px 120px 520px 120px;
|
||||
background: rgba(244, 244, 244, 0.6);
|
||||
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
line-height: 36px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 35px;
|
||||
padding-bottom: 35px;
|
||||
border-bottom: 1px solid $cBlack;
|
||||
}
|
||||
h4 {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
}
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 16px;
|
||||
line-height: 27px;
|
||||
letter-spacing: 0.07em;
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 150px;
|
||||
background: rgba(244, 244, 244, 0.6);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-02 {
|
||||
margin-top: -250px;
|
||||
margin-bottom: 120px;
|
||||
|
||||
.box-data {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
ul {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
li {
|
||||
position: relative;
|
||||
margin-top: 150px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
border: 1px solid #000;
|
||||
border-radius: 100%;
|
||||
right: 150px;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: calc(19px / 2);
|
||||
right: 169px;
|
||||
left: 0;
|
||||
height: 1px;
|
||||
background: #000;
|
||||
}
|
||||
|
||||
p {
|
||||
position: relative;
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0;
|
||||
max-width: 720px;
|
||||
padding: 50px 0 0 50px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-03 {
|
||||
margin-bottom: 60px;
|
||||
|
||||
.tiles {
|
||||
.tile {
|
||||
&-1 {
|
||||
position: absolute;
|
||||
height: 100%;
|
||||
z-index: -1;
|
||||
img {
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
row-gap: 25px;
|
||||
width: 100%;
|
||||
max-width: 1000px;
|
||||
margin-left: auto;
|
||||
padding: 40px 80px 90px 80px;
|
||||
background: rgba(244, 244, 244, 0.9);
|
||||
.row {
|
||||
position: relative;
|
||||
padding-bottom: 25px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 15px;
|
||||
right: 0;
|
||||
width: calc(100% - 30px);
|
||||
height: 1px;
|
||||
background: $cBlack;
|
||||
}
|
||||
&:not(:last-child) {
|
||||
.col-12 {
|
||||
.mini-tile {
|
||||
grid-template-areas:
|
||||
"img1 img2"
|
||||
"img1 text1";
|
||||
column-gap: 15px;
|
||||
img {
|
||||
max-width: 120px;
|
||||
&:nth-child(1) {
|
||||
grid-area: img1;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
grid-area: img2;
|
||||
}
|
||||
}
|
||||
p {
|
||||
grid-area: text1;
|
||||
font-weight: 300;
|
||||
font-size: 19.795px;
|
||||
line-height: 1;
|
||||
color: #1d1d1b;
|
||||
margin-bottom: 0;
|
||||
margin-top: -50px;
|
||||
text-align: right;
|
||||
width: fit-content;
|
||||
padding-left: 30px;
|
||||
|
||||
strong {
|
||||
display: block;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
.col-12 {
|
||||
.mini-tile {
|
||||
position: relative;
|
||||
grid-template-areas:
|
||||
"img1 img2"
|
||||
"img1 text1"
|
||||
"img1 text3"
|
||||
"img1 text2";
|
||||
column-gap: 15px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
left: 118px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
background-image: url("/images/icons/custom-arrow-1.svg");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
bottom: 35px;
|
||||
left: 118px;
|
||||
width: 30px;
|
||||
height: 10px;
|
||||
background-image: url("/images/icons/custom-arrow-2.svg");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
img {
|
||||
&:nth-child(1) {
|
||||
grid-area: img1;
|
||||
min-width: 120px;
|
||||
max-width: 120px;
|
||||
}
|
||||
&:nth-child(2) {
|
||||
grid-area: img2;
|
||||
}
|
||||
&:nth-child(3) {
|
||||
grid-area: img3;
|
||||
}
|
||||
}
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 19.795px;
|
||||
line-height: 1;
|
||||
color: #1d1d1b;
|
||||
margin-bottom: 0;
|
||||
text-align: right;
|
||||
padding-right: 15px;
|
||||
margin-top: 7px;
|
||||
|
||||
&:nth-child(3) {
|
||||
grid-area: text1;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
&:nth-child(5) {
|
||||
grid-area: text2;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.col-12 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
> p {
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
color: #343431;
|
||||
width: 100%;
|
||||
max-width: 390px;
|
||||
}
|
||||
|
||||
.mini-tile {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-04 {
|
||||
margin-bottom: 115px;
|
||||
|
||||
.tiles {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
.tile {
|
||||
&-1 {
|
||||
padding: 70px 30px 70px 80px;
|
||||
background: rgba(244, 244, 244, 0.6);
|
||||
}
|
||||
&-2 {
|
||||
position: relative;
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 150px;
|
||||
background: rgba(244, 244, 244, 0.6);
|
||||
}
|
||||
img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
max-width: fit-content;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-05 {
|
||||
margin-bottom: 300px;
|
||||
h2 {
|
||||
position: relative;
|
||||
font-weight: 400;
|
||||
font-size: 30px;
|
||||
line-height: 1;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
padding-left: 250px;
|
||||
margin-bottom: 95px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 15px;
|
||||
height: 1px;
|
||||
width: 210px;
|
||||
background: $cBlack;
|
||||
}
|
||||
}
|
||||
|
||||
.tiles {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
|
||||
padding-left: 100px;
|
||||
gap: 160px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
top: -110px;
|
||||
width: 1px;
|
||||
background: $cBlack;
|
||||
}
|
||||
.tile {
|
||||
width: 100%;
|
||||
max-width: 320px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
h3 {
|
||||
color: $cTxtBlack;
|
||||
font-weight: 400;
|
||||
font-size: 31.3px;
|
||||
line-height: 38px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
ul {
|
||||
li {
|
||||
padding-bottom: 12px;
|
||||
margin-bottom: 12px;
|
||||
border-bottom: 1px solid $cBlack;
|
||||
a {
|
||||
position: relative;
|
||||
color: $cTxtBlack;
|
||||
font-weight: 400;
|
||||
font-size: 18px;
|
||||
line-height: 22px;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
padding-right: 30px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
width: 19px;
|
||||
height: 19px;
|
||||
background-image: url("/upload/filemanager/Icons/arrow_right_black.svg");
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
transition: all 150ms ease-in;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
797
layout/style-scss/uber-vidok.scss
Normal file
797
layout/style-scss/uber-vidok.scss
Normal file
@@ -0,0 +1,797 @@
|
||||
// out: ../style-css/uber-vidok.css, compress: true, sourceMap: true
|
||||
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&family=Lato:wght@300;400;700&display=swap');
|
||||
@import 'variables';
|
||||
@import '_mixins';
|
||||
|
||||
.container {
|
||||
@include respond-above(xl) {
|
||||
max-width: 1300px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-1 {
|
||||
#page_hero {
|
||||
.scontainer-content {
|
||||
.left-data {
|
||||
}
|
||||
.right-data {
|
||||
background: $cBlack;
|
||||
|
||||
video {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@include respond-below(sm) {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.left-data {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
.right-data {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-2 {
|
||||
padding-top: 120px;
|
||||
#scontainer-9 {
|
||||
.tiles {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
row-gap: 55px;
|
||||
column-gap: 55px;
|
||||
width: 100%;
|
||||
max-width: 970px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.tile {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
max-width: 150px;
|
||||
text-align: center;
|
||||
min-width: 150px;
|
||||
|
||||
&:not(:last-child) {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: calc(-55px / 2);
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
background: $cBlack;
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: 30px;
|
||||
max-height: 80px;
|
||||
}
|
||||
p {
|
||||
color: $cTxtBlack;
|
||||
font-weight: 400;
|
||||
font-size: 15px;
|
||||
line-height: 22px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(lg) {
|
||||
padding: 120px 0;
|
||||
|
||||
.tiles {
|
||||
.tile {
|
||||
&:nth-child(4) {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
#scontainer-9 {
|
||||
.tiles {
|
||||
row-gap: 60px;
|
||||
column-gap: 50px;
|
||||
|
||||
.tile {
|
||||
&:not(:last-child) {
|
||||
&::before {
|
||||
right: -25px;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
&::before {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(sm) {
|
||||
#scontainer-9 {
|
||||
.tiles {
|
||||
.tile {
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
&:nth-child(3) {
|
||||
&::before {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
&:nth-child(4) {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(xs) {
|
||||
#scontainer-9 {
|
||||
.tiles {
|
||||
row-gap: 30px;
|
||||
|
||||
.tile {
|
||||
&::before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-3 {
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
.box-3a {
|
||||
padding-top: 0;
|
||||
padding-bottom: 18px;
|
||||
}
|
||||
|
||||
.box-3b {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#scontainer-10 {
|
||||
h2 {
|
||||
@extend .box_subtitle;
|
||||
font-size: 20px;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.07em;
|
||||
}
|
||||
|
||||
.scontainer-content {
|
||||
> .row {
|
||||
> .col-lg-6:last-child {
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .col-lg-6:first-child {
|
||||
padding-top: 65px;
|
||||
padding-left: 65px;
|
||||
position: relative;
|
||||
margin-left: 15px;
|
||||
max-width: calc(50% - 15px);
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background: #6c6d70;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 80%;
|
||||
background: #6c6d70;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
padding-top: 30px;
|
||||
padding-left: 30px;
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#scontainer-19 {
|
||||
h2 {
|
||||
@extend .box_subtitle;
|
||||
font-size: 20px;
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-weight: 300;
|
||||
font-size: 13px;
|
||||
line-height: 16px;
|
||||
letter-spacing: 0.07em;
|
||||
}
|
||||
|
||||
.scontainer-content {
|
||||
> .row {
|
||||
> .col-lg-6:first-child {
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
> .col-lg-6:last-child {
|
||||
text-align: right;
|
||||
padding-right: 50px;
|
||||
padding-bottom: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-right: 15px;
|
||||
max-width: calc(50% - 15px);
|
||||
|
||||
h2 {
|
||||
margin-top: auto;
|
||||
font-weight: 600;
|
||||
margin-bottom: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 1px;
|
||||
background: #6c6d70;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
display: block;
|
||||
height: 1px;
|
||||
width: 80%;
|
||||
background: #6c6d70;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
padding-right: 30px;
|
||||
padding-bottom: 30px;
|
||||
max-width: unset;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-4 {
|
||||
padding-top: 0;
|
||||
|
||||
.container {
|
||||
> .row {
|
||||
> .col-lg-4 {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background: #f4f4f4;
|
||||
width: 100vw;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#scontainer-11 {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
background: #fff;
|
||||
min-height: 100%;
|
||||
margin-right: -15px;
|
||||
padding-top: 50px;
|
||||
|
||||
.scontainer-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 100%;
|
||||
}
|
||||
|
||||
.logos_slider {
|
||||
.swiper-slide {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: fit-content;
|
||||
filter: grayscale(100%);
|
||||
@include transition;
|
||||
|
||||
&:hover {
|
||||
filter: grayscale(0%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#scontainer-20 {
|
||||
text-align: right;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
padding-top: 50px;
|
||||
padding-right: 50px;
|
||||
padding-bottom: 50px;
|
||||
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 3 0px;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
margin-top: 125px;
|
||||
|
||||
.container {
|
||||
> .row {
|
||||
> .col-lg-6 {
|
||||
&:first-child {
|
||||
&::before {
|
||||
right: auto;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
&::before {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#scontainer-20 {
|
||||
padding-right: 0;
|
||||
|
||||
h2 {
|
||||
text-align: center;
|
||||
|
||||
br {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(sm) {
|
||||
margin-top: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
.box-6 {
|
||||
padding-bottom: 70px;
|
||||
|
||||
.tiles {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(235px, 1fr));
|
||||
gap: 27px;
|
||||
width: 100%;
|
||||
max-width: 1100px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.tile {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&:not(:last-child) {
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: calc(-27px / 2);
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
width: 1px;
|
||||
height: 100%;
|
||||
background: $cBlack;
|
||||
}
|
||||
}
|
||||
h3 {
|
||||
font-weight: 700;
|
||||
font-size: 48px;
|
||||
line-height: 58px;
|
||||
text-transform: uppercase;
|
||||
color: $cSand;
|
||||
}
|
||||
p {
|
||||
font-weight: 400;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
letter-spacing: 0.05em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(lg) {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
|
||||
.tile {
|
||||
&:nth-child(2) {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include respond-below(xs) {
|
||||
grid-template-columns: 1fr;
|
||||
|
||||
.tile {
|
||||
&::before {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#scontainer-21 {
|
||||
.scontainer-content {
|
||||
h2 {
|
||||
// @extend .box_subtitle;
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
|
||||
padding-bottom: 35px;
|
||||
border-bottom: 1px solid #000;
|
||||
margin-bottom: 35px;
|
||||
|
||||
strong {
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
> .row {
|
||||
> .col-lg-6:last-child {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
@include respond-above(md) {
|
||||
padding-left: 100px;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-top: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-icons {
|
||||
.icon-text {
|
||||
display: flex;
|
||||
column-gap: 25px;
|
||||
align-items: center;
|
||||
// justify-content: center;
|
||||
min-width: 310px;
|
||||
|
||||
.icon {
|
||||
max-width: 130px;
|
||||
|
||||
img {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.line-top {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
column-gap: 30px;
|
||||
margin-bottom: 30px;
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.line-bottom {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, max-content);
|
||||
column-gap: 30px;
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.first {
|
||||
justify-content: flex-end;
|
||||
// padding-right: 50px;
|
||||
}
|
||||
|
||||
.second {
|
||||
justify-content: flex-start;
|
||||
// padding-left: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(lg) {
|
||||
.icon-text {
|
||||
.icon {
|
||||
img {
|
||||
max-width: 97px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.line-top {
|
||||
grid-template-columns: 1fr;
|
||||
row-gap: 30px;
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
|
||||
.icon-text {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
.line-bottom {
|
||||
grid-template-columns: 1fr;
|
||||
row-gap: 30px;
|
||||
width: 100%;
|
||||
max-width: 460px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
.icon-text {
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.first {
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
}
|
||||
.second {
|
||||
justify-content: flex-start;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@include respond-below(xs) {
|
||||
.icon-text {
|
||||
.icon {
|
||||
img {
|
||||
max-width: 70px;
|
||||
min-width: 70px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon-text {
|
||||
span {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-einbruchschutz {
|
||||
padding-top: 75px;
|
||||
padding-bottom: 75px;
|
||||
|
||||
#scontainer-24 {
|
||||
.scontainer-content {
|
||||
> .row {
|
||||
background: url('/upload/filemanager/uber-vidok/einbruchschutz-bg.png')
|
||||
no-repeat center;
|
||||
background-size: cover;
|
||||
margin: 0 10px;
|
||||
|
||||
> .col-lg-6:first-child {
|
||||
background: transparentize($color: #f4f4f4, $amount: 0.1);
|
||||
padding: 65px;
|
||||
min-height: 385px;
|
||||
|
||||
.col-head {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
column-gap: 35px;
|
||||
|
||||
padding-bottom: 35px;
|
||||
border-bottom: 1px solid #000;
|
||||
margin-bottom: 35px;
|
||||
h2 {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-realizations {
|
||||
margin-bottom: 100px;
|
||||
}
|
||||
|
||||
.box-windows-header {
|
||||
overflow: hidden;
|
||||
margin-bottom: 95px;
|
||||
&--wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
width: fit-content;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
min-height: 68px;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
height: 68px;
|
||||
background: url('/upload/filemanager/realizations/realizations-stripes.png')
|
||||
no-repeat center;
|
||||
width: 900px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
h2 {
|
||||
font-weight: 300;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
letter-spacing: 0.07em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0;
|
||||
|
||||
strong {
|
||||
font-weight: 800;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box-windows {
|
||||
margin-bottom: 180px;
|
||||
.container {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(335px, 1fr));
|
||||
gap: 5px;
|
||||
max-width: 1400px;
|
||||
|
||||
.window-single {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.image {
|
||||
border: 2px solid #f4f4f4;
|
||||
border-bottom: 0;
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
flex-grow: 1;
|
||||
background: #f4f4f4;
|
||||
padding: 50px;
|
||||
font-family: 'URW Form';
|
||||
font-weight: 300;
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
letter-spacing: 0.05em;
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
line-height: 30px;
|
||||
font-weight: 300;
|
||||
letter-spacing: 0.05em;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
letter-spacing: 0.15em;
|
||||
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include respond-below(md) {
|
||||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||||
gap: 40px;
|
||||
|
||||
.window-single {
|
||||
.text {
|
||||
padding: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user