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

Nowa strona

Browse Source
This commit is contained in:
Roman Pyrih
2025-04-09 16:01:15 +02:00
parent 892c0c9d3f
commit dc9d6f288a
21 changed files with 429 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

311
layout/style-scss/o-nas.scss Normal file
View File

@@ -0,0 +1,311 @@
@import 'variables';
@import '_mixins';
html {
scroll-behavior: smooth;
scroll-padding-top: 105px;
}
strong {
font-weight: 700;
}
p {
&:last-child {
margin-bottom: 0;
}
}
.main-page {
padding: 0;
}
.breadcrumbs {
margin: 24px 0;
}
.box-1 {
display: flex;
flex-direction: column;
._row {
&-1 {
display: flex;
flex-direction: row;
align-items: center;
gap: 30px;
._col {
&-1 {
width: 100%;
max-width: 430px;
h1 {
position: relative;
color: $cTxtBlack;
font-family: $font3;
font-size: 64px;
letter-spacing: 2px;
line-height: 1.1;
font-weight: 700;
text-transform: uppercase;
margin-bottom: 25px;
padding-bottom: 15px;
&::before {
content: '';
position: absolute;
left: 0;
bottom: 0;
width: 100%;
max-width: 390px;
height: 2px;
background: $cTxtBlack;
}
}
h2 {
color: $cTxtBlack;
font-family: $font3;
font-size: 30px;
letter-spacing: 2px;
line-height: 1.2;
font-weight: 300;
text-transform: uppercase;
}
}
&-2 {
line-height: 0;
video {
width: 100%;
height: 100%;
}
}
}
}
&-2 {
margin-top: 34px;
margin-bottom: 72px;
._col {
&-1 {
position: relative;
height: 64px;
&::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: calc(50% - 50px);
height: 1px;
background: #878787;
}
&::after {
content: '';
position: absolute;
top: 50%;
right: 0;
width: calc(50% - 50px);
height: 1px;
background: #878787;
}
.img_box {
position: relative;
width: 56px;
height: 64px;
border-radius: 100%;
box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
z-index: 1;
display: flex;
align-items: center;
justify-content: center;
background: $cWhite;
margin-left: auto;
margin-right: auto;
img {
}
}
}
}
}
}
}
.box-2 {
background-image: url('/upload/filemanager/Pages/O-nas/box-bg-1.png');
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 86px 0 90px;
._row {
&-1 {
margin-bottom: 50px;
._col {
&-1 {
width: 100%;
max-width: 850px;
p {
color: $cTxtBlack;
font-family: $font3;
font-size: 22px;
font-weight: 300;
letter-spacing: -0.04px;
line-height: 1.5;
strong {
font-weight: 600;
}
}
}
&-2 {
}
}
}
&-2 {
._col {
&-1 {
display: flex;
flex-direction: row;
column-gap: 70px;
align-items: flex-end;
margin-left: 70px;
._col-img {
}
._col-data {
p {
color: $cTxtBlack;
font-family: $font3;
font-size: 20px;
font-weight: 600;
letter-spacing: 2px;
line-height: 1;
text-transform: uppercase;
margin-bottom: 10px;
margin-left: 44px;
}
h3 {
color: $cWhite;
font-size: 32px;
font-family: $font3;
font-weight: 700;
letter-spacing: 2px;
line-height: 1;
margin-bottom: 0;
text-transform: uppercase;
display: inline-block;
padding: 16px 44px 9px;
border-radius: 50px;
background: rgba(#2e2d2c, 0.8);
}
}
}
}
}
}
}
.box-3 {
margin-top: -50px;
margin-bottom: 130px;
._row {
&-1 {
._col {
&-1 {
ol {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
gap: 32px;
li {
border-radius: 20px;
background: $cWhite;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px 10px;
box-shadow: 4px 3px 22px 3px rgba(0, 0, 0, 0.25);
width: calc(100% / 4);
img {
width: 100%;
max-width: fit-content;
margin-bottom: 17px;
}
h3 {
color: $cTxtBlack;
font-size: 18px;
font-family: $font3;
font-weight: 600;
margin-bottom: 3px;
text-transform: uppercase;
}
p {
color: $cTxtBlack;
font-size: 18px;
font-family: $font3;
font-weight: 300;
text-transform: uppercase;
}
}
}
}
}
}
}
}
.box-4 {
._row {
&-1 {
._col {
&-1 {
position: relative;
&::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 50%;
height: 1px;
background: #878787;
transform: translateY(-50%);
}
h2 {
position: relative;
display: inline-block;
color: $cTxtBlack;
font-size: 32px;
font-family: $font3;
font-weight: 500;
letter-spacing: 2px;
margin-bottom: 0;
text-transform: uppercase;
padding-right: 30px;
padding-top: 3px;
background: $cWhite;
}
}
}
}
}
}