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

Enhance "O Nas" page layout with new sections and improved styling

Browse Source
This commit is contained in:
Roman Pyrih
2025-04-18 15:58:02 +02:00
parent b9e1d00008
commit b83b7cea3b
4 changed files with 574 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

327
layout/style-scss/o-nas.scss
View File

@@ -308,11 +308,109 @@ p {
._row {
&-1 {
margin-bottom: 100px;
._col {
&-1 {
}
}
}
&-2 {
#history-timeline {
#timeline-nav {
position: relative;
padding-left: 80px;
padding-right: 80px;
margin-bottom: 60px;
.timeline-nav--wrapper {
&::before {
content: '';
position: absolute;
bottom: 17px;
height: 3px;
width: 100%;
background: #000000;
transform: translateY(-50%);
}
.swiper-wrapper {
align-items: end;
min-height: 140px;
}
.swiper-slide {
cursor: pointer;
flex: 0 0 calc(100% / 8);
transition: all 0.3s ease;
&.active {
flex: 0 0 calc((100% / 8) * 2);
// flex: 0 0 200px;
span {
font-size: 64px;
}
.slide-dot {
background: #fff246;
border-color: #fff246;
}
}
span {
color: #181c1d;
font-size: 36px;
font-weight: 700;
font-family: $font3;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 30px;
transition: all 0.3s ease;
}
.slide-dot {
width: 40px;
height: 40px;
display: block;
border: 2px solid #181c1d;
background: #fff;
border-radius: 100px;
transition: all 0.3s ease;
}
}
}
.timeline-next,
.timeline-prev {
position: absolute;
width: 44px;
min-width: 44px;
height: 44px;
background: #181c1d;
display: flex;
align-items: center;
justify-content: center;
border-radius: 100%;
bottom: 47px;
}
.timeline-prev {
left: 0;
}
.timeline-next {
right: 0;
img {
transform: scale(-1);
}
}
}
.timeline-content {
width: 100%;
max-width: 900px;
margin-left: auto;
margin-right: auto;
}
}
}
}
}
@@ -678,6 +776,7 @@ p {
}
.box-9 {
margin-bottom: 70px;
}
.box-10 {
@@ -890,3 +989,231 @@ p {
}
}
}
.box-13 {
margin-bottom: 100px;
._row {
&-1 {
margin-bottom: 70px;
._col {
&-1 {
}
}
}
&-2 {
display: flex;
flex-direction: row;
gap: 25px;
._col {
width: 50%;
&-1 {
}
&-2 {
}
.preview_box {
.preview_img {
margin-bottom: 50px;
img {
width: 100%;
max-width: fit-content;
height: 400px;
object-fit: cover;
}
}
.preview_data {
h3 {
color: $cTxtBlack;
font-family: $font3;
font-weight: 300;
letter-spacing: 2px;
text-transform: uppercase;
position: relative;
margin-bottom: 45px;
padding-bottom: 45px;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 90%;
height: 1px;
background-color: #000000;
}
}
ul {
padding: 0;
margin: 0;
list-style: none;
li {
&.mini {
font-size: 16px;
text-transform: uppercase;
}
color: $cTxtBlack;
font-size: 20px;
font-family: $font3;
font-weight: 300;
}
}
}
}
}
}
}
}
.box-14 {
margin-bottom: 150px;
._row {
&-1 {
margin-bottom: 70px;
}
&-2 {
._col {
&-1 {
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
flex-wrap: wrap;
column-gap: 60px;
row-gap: 30px;
}
}
}
}
}
}
.box-15 {
margin-bottom: 150px;
._row {
&-1 {
._col {
&-1 {
h2 {
color: #1d1d1e;
font-family: $font3;
font-weight: 300;
font-size: 34px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
margin-bottom: 35px;
}
p {
color: #1d1d1e;
font-family: $font3;
font-weight: 300;
font-size: 20px;
letter-spacing: 2px;
text-align: center;
text-transform: uppercase;
margin-bottom: 35px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
li {
&:nth-child(1) {
a {
color: #ffffff;
background: #1d1d1e;
}
}
&:nth-child(2) {
a {
color: #1d1d1e;
background: #fff246;
}
}
a {
font-family: $font3;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
padding: 20px 36px 16px;
border-radius: 5px;
line-height: 1;
text-transform: uppercase;
display: flex;
flex-direction: row;
align-items: end;
justify-content: center;
gap: 10px;
}
}
}
}
}
}
}
}
.box-16 {
padding-top: 120px;
border-top: 1px solid $cBlack;
margin-bottom: 80px;
._row {
&-1 {
._col {
&-1 {
h2 {
color: $cTxtBlack;
font-family: $font3;
font-weight: 300;
font-size: 34px;
letter-spacing: 2px;
margin-bottom: 40px;
text-transform: uppercase;
}
p {
color: $cTxtBlack;
font-size: 20px;
font-family: $font3;
font-weight: 300;
margin-bottom: 40px;
}
a {
color: $cTxtBlack;
font-size: 14px;
font-family: $font3;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: underline;
}
}
}
}
}
}