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

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

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