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

Save

Browse Source
This commit is contained in:
Roman Pyrih
2024-11-06 15:54:22 +01:00
parent 1feb6f94d0
commit 6995513a28
32 changed files with 1126 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

756
layout/style-scss/tuzzer.scss
View File

@@ -507,6 +507,7 @@ header {
.box-3 {
@extend .gap-t-120;
@extend .gap-b-90;
.content {
@extend .main_content;
@@ -518,6 +519,7 @@ header {
margin-left: auto;
margin-right: auto;
text-align: center;
margin-bottom: 60px;
h2 {
margin-bottom: 26px;
@@ -601,24 +603,48 @@ header {
align-items: flex-start;
row-gap: 5px;
p {
text-align: left;
display: flex;
flex-direction: row;
align-items: center;
column-gap: 30px;
.tile-text {
p {
text-align: left;
}
span {
font-size: 13px;
font-weight: 400;
line-height: 1;
margin-bottom: 20px;
display: inline-block;
}
}
span {
font-size: 13px;
font-weight: 400;
line-height: 1;
margin-bottom: 10px;
.tile-img {
img {
margin-top: -90px;
}
}
}
&-5 {
grid-area: t5;
max-width: unset;
align-items: flex-start;
align-items: center;
display: flex;
flex-direction: row;
column-gap: 28px;
p {
text-align: left;
}
.tile-img {
height: 100%;
padding: 10px 0;
}
}
}
@@ -648,27 +674,717 @@ header {
p {
position: relative;
&::after {
content: '';
display: inline-block;
width: 15px;
height: 15px;
background-image: url('/upload/filemanager/new-2024/assets/Star.svg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
margin-left: 5px;
}
color: $cBlack;
text-align: center;
width: 100%;
}
}
&-4 {
grid-area: ta4;
p {
position: relative;
color: $cBlack;
text-align: center;
width: 100%;
}
}
}
}
.btn {
display: flex;
margin: 0 auto;
max-width: fit-content;
}
}
}
}
.box-4 {
@extend .gap-t-120;
background: $cBlack;
.c-row {
&-1 {
display: grid;
grid-template-columns: 5fr 7fr;
column-gap: 45px;
.c-col {
&-1 {
h2 {
color: $cWhite;
margin-bottom: 25px;
span {
display: block;
color: $cYellow;
}
}
p {
color: $cWhite;
margin-bottom: 30px;
}
}
&-2 {
}
}
}
}
}
.box-5 {
@extend .gap-t-120;
@extend .gap-b-120;
background: $cBlack;
.c-row {
&-1 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 30px;
.c-col {
position: relative;
border-radius: 33px;
background: #22211e;
padding: 54px;
display: flex;
flex-direction: column;
justify-content: center;
h2 {
color: $cYellow;
margin-bottom: 24px;
font-weight: 400;
font-size: 83px;
font-family: $fAnton;
text-transform: uppercase;
}
p {
color: $cWhite;
}
img {
position: absolute;
top: 30px;
right: 0;
}
}
}
}
}
.box-6 {
@extend .gap-b-120;
background: $cBlack;
.c-row {
&-1 {
display: grid;
grid-template-columns: 5fr 7fr;
column-gap: 45px;
align-items: center;
.c-col {
&-1 {
}
&-2 {
h2 {
color: $cYellow;
margin-bottom: 25px;
span {
color: $cWhite;
}
}
ul {
padding: 0;
margin: 0 0 40px 0;
list-style: none;
li {
color: $cWhite;
position: relative;
padding-left: 30px;
&:not(:last-child) {
margin-bottom: 22px;
}
&::before {
content: '';
position: absolute;
top: 3px;
left: 0;
width: 17px;
height: 17px;
background-image: url('/layout/images/tuzzer/mini-star.svg');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
}
}
.buttons {
display: flex;
column-gap: 20px;
.btn {
&-transparent {
border: 1px solid #fffbee;
color: $cWhite;
}
}
}
}
}
}
}
}
.box-7 {
@extend .gap-t-90;
@extend .gap-b-120;
.c-row {
&-1 {
.box-title {
color: $cBlack;
text-align: center;
margin-bottom: 32px;
span {
color: $cYellow;
}
}
p {
margin-bottom: 50px;
text-align: center;
max-width: 570px;
margin-left: auto;
margin-right: auto;
}
}
&-2 {
.swiper {
padding-bottom: 70px;
.swiper-slide {
img {
width: 100%;
}
}
.swiper-button-next {
top: auto;
bottom: 10px;
left: 50%;
transform: translateX(calc(-50% + 40px));
&::after {
content: url('/layout/images/tuzzer/arrow-r.svg');
}
}
.swiper-button-prev {
top: auto;
bottom: 10px;
left: 50%;
transform: translateX(calc(-50% - 40px));
&::after {
content: url('/layout/images/tuzzer/arrow-l.svg');
}
}
}
}
}
}
.box-8 {
@extend .gap-t-90;
@extend .gap-b-120;
.c-row {
&-1 {
text-align: center;
margin-bottom: 90px;
h2 {
color: $cBlack;
font-size: 32px;
font-weight: 800;
font-size: $fProxima;
span {
color: $cYellow;
display: block;
}
}
}
&-2 {
display: grid;
grid-template-columns: 5fr 7fr;
column-gap: 80px;
align-items: center;
.c-col {
&-1 {
.box-title {
span {
color: $cYellow;
}
}
ul {
padding: 0;
margin: 0 0 40px 0;
list-style: none;
li {
color: $cBlack;
position: relative;
padding-left: 30px;
&:not(:last-child) {
margin-bottom: 22px;
}
&::before {
content: '';
position: absolute;
top: 5px;
left: 0;
width: 17px;
height: 17px;
background-image: url('/layout/images/tuzzer/mini-star.svg');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
}
}
}
&-2 {
img {
width: 100%;
max-width: fit-content;
}
}
}
}
}
}
.box-9 {
@extend .gap-t-90;
@extend .gap-b-90;
background: $cBlack;
position: relative;
&::before {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 378px;
height: 161px;
background-image: url('/layout/images/tuzzer/start-2.svg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
&::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 205px;
height: 205px;
background: $cYellow;
border-radius: 100%;
filter: blur(100px);
}
.c-row {
position: relative;
z-index: 1;
&-1 {
margin-bottom: 40px;
.c-col {
&-1 {
.box-title {
color: $cWhite;
span {
color: $cYellow;
}
}
}
}
}
&-2 {
margin-bottom: 60px;
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 34px;
.c-col {
ul {
padding: 0;
margin: 0;
list-style: none;
li {
position: relative;
color: $cWhite;
padding: 16px 24px 16px 48px;
border-radius: 10px;
display: block;
&::before {
content: '✅';
position: absolute;
top: 16px;
left: 16px;
}
&:nth-child(2n + 1) {
background-color: #22211e;
}
}
}
&-1 {
}
&-2 {
}
}
}
&-3 {
margin-bottom: 40px;
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 32px;
.c-col {
border-radius: 10px;
padding: 30px;
background-color: #22211e;
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: space-between;
.col-text {
> span {
color: $cYellow;
font-size: 64px;
font-family: $fProxima;
font-weight: 700;
margin-bottom: 16px;
line-height: 1;
display: inline-block;
sup {
top: -1.5rem;
font-size: 24px;
font-weight: 800;
}
}
p {
color: #fffbee;
margin: 0;
}
}
.col-tag {
display: inline-block;
color: $cBlack;
font-size: 14px;
font-weight: 700;
padding: 10px 17px;
border-radius: 5px;
background: $cYellow;
}
&-1 {
}
&-2 {
}
&-3 {
}
}
}
&-4 {
.c-col {
&-1 {
text-align: center;
}
}
}
}
}
.box-10 {
@extend .gap-t-90;
@extend .gap-b-90;
.c-row {
&-1 {
display: grid;
grid-template-columns: 1fr 1fr;
row-gap: 100px;
align-items: center;
.c-col {
&-1 {
.box-title {
color: $cBlack;
margin-bottom: 45px;
span {
color: $cYellow;
}
}
ul {
padding: 0;
margin: 0 0 32px 0;
list-style: none;
li {
color: $cBlack;
position: relative;
padding-left: 42px;
&:not(:last-child) {
margin-bottom: 10px;
}
&::before {
content: '';
position: absolute;
top: 5px;
left: 0;
width: 17px;
height: 17px;
background-image: url('/layout/images/tuzzer/mini-star.svg');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
}
}
}
&-2 {
img {
width: 100%;
max-width: fit-content;
}
}
}
}
}
}
.box-11 {
@extend .gap-t-120;
@extend .gap-b-90;
background: $cWhite;
.c-row {
&-1 {
.c-col {
&-1 {
.box-title {
color: $cBlack;
margin-bottom: 50px;
text-align: center;
}
ul {
list-style: none;
padding: 0;
margin: 0 0 70px 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 40px 30px;
li {
flex: 0 0 calc(20% - 30px);
display: flex;
align-items: center;
justify-content: center;
}
}
p {
margin: 0;
text-align: center;
}
}
}
}
}
}
.box-12 {
@extend .gap-t-90;
@extend .gap-b-90;
.content {
border-radius: 30px;
padding: 60px 80px;
background: $cYellow;
}
.c-row {
&-1 {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 50px;
.c-col {
&-1 {
display: flex;
flex-direction: column;
.box-11-logo {
flex-direction: 1;
margin-bottom: 40px;
span {
display: inline-block;
padding: 30px 40px 25px;
border-radius: 14px;
background: $cWhite;
}
}
h2 {
color: $cWhite;
font-size: 48px;
font-family: $fProxima;
font-weight: 800;
margin-bottom: 40px;
span {
display: block;
color: $cBlack;
}
}
.contact-box {
display: flex;
flex-direction: row;
column-gap: 20px;
align-items: center;
&-img {
img {
width: 100%;
max-width: 137px;
}
}
&-data {
span {
display: block;
color: $cWhite;
font-weight: 700;
font-family: $fProxima;
font-size: 16px;
line-height: 1;
}
p {
color: $cBlack;
font-size: 20px;
font-weight: 800;
font-family: $fProxima;
margin-bottom: 10px;
line-height: 1;
}
ul {
padding: 0;
margin: 0;
list-style: none;
display: flex;
flex-direction: row;
column-gap: 20px;
flex-wrap: wrap;
li {
font-size: 14px;
a {
color: $cBlack;
}
}
}
}
}
}
&-2 {
.form-box {
border-radius: 24px;
padding: 40px;
background: $cWhite;
h3 {
font-size: 30px;
font-family: $fProxima;
font-weight: 700;
margin-bottom: 0;
}
}
}
}
}
}
}
footer {
padding: 20px 0;
background: $cBlack;
.c-row {
&-1 {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
.c-col {
span,
a {
color: rgba(#fffbee, 0.7);
font-size: 12px;
line-height: 1;
font-weight: 400;
}
&-1 {
display: flex;
flex-direction: row;
align-items: center;
column-gap: 25px;
}
}
}
}