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

first commit

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

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

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