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-07 14:30:33 +01:00
parent 6995513a28
commit fd277357d0
17 changed files with 769 additions and 453 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -202,21 +202,45 @@ $fAnton: 'Anton', sans-serif;
//* ~~~ Global ~~~ *//
.gap-t-160 {
padding-top: 160px;
@include respond-below(sm) {
padding-top: 100px;
}
}
.gap-b-160 {
padding-bottom: 160px;
@include respond-below(sm) {
padding-bottom: 100px;
}
}
.gap-t-120 {
padding-top: 120px;
@include respond-below(xs) {
padding-top: 90px;
}
}
.gap-b-120 {
padding-bottom: 120px;
@include respond-below(xs) {
padding-bottom: 90px;
}
}
.gap-t-90 {
padding-top: 90px;
@include respond-below(xs) {
padding-top: 50px;
}
}
.gap-b-90 {
padding-bottom: 90px;
@include respond-below(xs) {
padding-bottom: 50px;
}
}
.gap-t-60 {
padding-top: 60px;
@@ -278,15 +302,20 @@ $fAnton: 'Anton', sans-serif;
body {
background: $cYellowLight;
.page-content {
overflow: hidden;
}
}
header {
position: sticky;
top: 0;
height: 93px;
margin-bottom: -93px;
z-index: 1;
@include respond-above(sm) {
margin-bottom: -93px;
height: 93px;
}
.content {
@extend .main_content;
display: flex;
@@ -294,6 +323,10 @@ header {
align-items: center;
padding-top: 40px;
@include respond-below(sm) {
padding-bottom: 40px;
}
@media (max-width: 500px) {
flex-direction: column;
align-items: center;
@@ -312,6 +345,7 @@ header {
.box-1 {
@extend .gap-b-160;
.content {
@extend .main_content;
}
@@ -322,10 +356,21 @@ header {
column-gap: 80px;
align-items: flex-end;
@include respond-below(sm) {
grid-template-columns: 1fr;
row-gap: 40px;
}
.c-col {
&-1 {
padding-bottom: 100px;
@include respond-below(sm) {
order: 2;
text-align: center;
padding-bottom: 0px;
}
.title-tag {
position: relative;
color: $cWhite;
@@ -362,6 +407,15 @@ header {
line-height: 1;
font-weight: 900;
@include respond-below(sm) {
font-size: 46px;
margin-bottom: 20px;
}
@include respond-below(xs) {
font-size: 32px;
}
span {
color: $cYellow;
}
@@ -369,13 +423,24 @@ header {
.buttons {
display: flex;
flex-direction: row;
gap: 24px;
column-gap: 24px;
row-gap: 10px;
flex-wrap: wrap;
@include respond-below(sm) {
justify-content: center;
}
}
}
&-2 {
position: relative;
@include respond-below(sm) {
order: 1;
text-align: center;
}
&::before {
content: '';
position: absolute;
@@ -388,6 +453,11 @@ header {
background-size: contain;
background-repeat: no-repeat;
opacity: 0.5;
@include respond-below(sm) {
left: 10%;
transform: translateX(-50%);
}
}
&::after {
content: '';
@@ -401,6 +471,21 @@ header {
background-size: contain;
background-repeat: no-repeat;
opacity: 0.5;
@include respond-below(sm) {
top: 200px;
left: 90%;
transform: translateX(-50%);
}
}
img {
@include respond-below(sm) {
position: relative;
width: 100%;
max-width: 300px;
z-index: 1;
}
}
}
}
@@ -409,6 +494,7 @@ header {
.box-2 {
@extend .gap-b-60;
.content {
@extend .main_content;
}
@@ -431,6 +517,10 @@ header {
background-size: contain;
background-repeat: no-repeat;
}
@include respond-below(md) {
text-align: center;
}
}
}
@@ -439,7 +529,20 @@ header {
grid-template-columns: 5fr 7fr;
column-gap: 50px;
@include respond-below(lg) {
grid-template-columns: 1fr 1fr;
}
@include respond-below(md) {
display: flex;
flex-direction: column;
row-gap: 40px;
}
.c-col {
@include respond-below(md) {
text-align: center;
}
> img {
margin-bottom: 40px;
}
@@ -457,6 +560,10 @@ header {
padding: 0;
margin: 0;
@include respond-below(md) {
text-align: left;
}
li {
position: relative;
padding-left: 33px;
@@ -471,6 +578,9 @@ header {
}
&-1 {
@include respond-below(md) {
padding: 20px;
}
ul {
li {
&::before {
@@ -485,6 +595,13 @@ header {
background: #f3f0e0;
border-radius: 40px;
@include respond-below(lg) {
padding: 70px 50px 50px;
}
@include respond-below(xs) {
padding: 40px 20px 30px;
}
ul {
margin-bottom: 40px;
li {
@@ -498,6 +615,11 @@ header {
display: flex;
flex-direction: row;
gap: 24px;
flex-wrap: wrap;
@include respond-below(lg) {
justify-content: center;
}
}
}
}
@@ -543,13 +665,35 @@ header {
}
&-2 {
.tiles-wrapper {
margin-bottom: 70px;
@include respond-below(lg) {
overflow-x: scroll;
overflow-y: hidden;
padding-bottom: 30px;
margin-right: 20px;
margin-left: 20px;
&::-webkit-scrollbar {
height: 8px;
background: rgba($cYellow, 0.5);
border-radius: 4px;
}
&::-webkit-scrollbar-thumb {
background-color: $cBlack;
border-radius: 4px;
}
}
}
.tiles {
display: grid;
grid-template-areas:
't1 ta1 t3 ta3 t4'
't2 ta2 t3 ta4 t5';
gap: 15px;
margin-bottom: 70px;
min-width: 1140px;
.tile {
background: $cYellow;
@@ -592,6 +736,7 @@ header {
max-width: unset;
padding-bottom: 0;
overflow: hidden;
min-width: 225px;
img {
box-shadow: -1px 2px 11.4px 0px #0000002b;
@@ -711,6 +856,11 @@ header {
grid-template-columns: 5fr 7fr;
column-gap: 45px;
@include respond-below(md) {
grid-template-columns: 1fr;
row-gap: 40px;
}
.c-col {
&-1 {
h2 {
@@ -727,8 +877,25 @@ header {
color: $cWhite;
margin-bottom: 30px;
}
@include respond-below(md) {
order: 2;
}
}
&-2 {
@include respond-below(md) {
order: 1;
text-align: center;
img {
width: 100%;
max-width: 500px;
}
}
@include respond-below(sm) {
img {
max-width: 300px;
}
}
}
}
}
@@ -746,6 +913,10 @@ header {
grid-template-columns: 1fr 1fr;
gap: 30px;
@include respond-below(sm) {
grid-template-columns: 1fr;
}
.c-col {
position: relative;
border-radius: 33px;
@@ -756,6 +927,10 @@ header {
flex-direction: column;
justify-content: center;
@include respond-below(xs) {
padding: 30px;
}
h2 {
color: $cYellow;
margin-bottom: 24px;
@@ -763,6 +938,10 @@ header {
font-size: 83px;
font-family: $fAnton;
text-transform: uppercase;
@include respond-below(xs) {
font-size: 50px;
}
}
p {
color: $cWhite;
@@ -789,8 +968,26 @@ header {
column-gap: 45px;
align-items: center;
@include respond-below(md) {
grid-template-columns: 1fr;
row-gap: 40px;
}
.c-col {
&-1 {
text-align: center;
@include respond-below(md) {
img {
width: 100%;
max-width: 500px;
}
}
@include respond-below(sm) {
img {
max-width: 300px;
}
}
}
&-2 {
@@ -835,6 +1032,8 @@ header {
.buttons {
display: flex;
column-gap: 20px;
row-gap: 10px;
flex-wrap: wrap;
.btn {
&-transparent {
@@ -853,6 +1052,10 @@ header {
@extend .gap-t-90;
@extend .gap-b-120;
@include respond-below(xs) {
padding-bottom: 40px;
}
.c-row {
&-1 {
.box-title {
@@ -917,6 +1120,10 @@ header {
text-align: center;
margin-bottom: 90px;
@include respond-below(md) {
margin-bottom: 20px;
}
h2 {
color: $cBlack;
font-size: 32px;
@@ -928,6 +1135,12 @@ header {
display: block;
}
}
img {
@include respond-below(md) {
max-width: 300px;
}
}
}
&-2 {
display: grid;
@@ -935,8 +1148,17 @@ header {
column-gap: 80px;
align-items: center;
@include respond-below(md) {
grid-template-columns: 1fr;
row-gap: 40px;
}
.c-col {
&-1 {
@include respond-below(md) {
order: 2;
}
.box-title {
span {
color: $cYellow;
@@ -973,9 +1195,18 @@ header {
}
}
&-2 {
@include respond-below(md) {
order: 1;
text-align: center;
}
img {
width: 100%;
max-width: fit-content;
@include respond-below(md) {
max-width: 500px;
}
}
}
}
@@ -988,6 +1219,7 @@ header {
@extend .gap-b-90;
background: $cBlack;
position: relative;
overflow: hidden;
&::before {
content: '';
@@ -1029,6 +1261,10 @@ header {
span {
color: $cYellow;
}
@include respond-below(sm) {
text-align: center;
}
}
}
}
@@ -1040,6 +1276,10 @@ header {
grid-template-columns: 1fr 1fr;
column-gap: 34px;
@include respond-below(lg) {
grid-template-columns: 1fr;
}
.c-col {
ul {
padding: 0;
@@ -1069,6 +1309,19 @@ header {
&-1 {
}
&-2 {
ul {
@include respond-below(lg) {
li {
&:nth-child(2n + 1) {
background-color: transparent;
}
&:nth-child(2n) {
background-color: #22211e;
}
}
}
}
}
}
}
@@ -1079,6 +1332,16 @@ header {
grid-template-columns: 1fr 1fr 1fr;
gap: 32px;
@include respond-below(md) {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
@include respond-below(sm) {
flex-direction: column;
}
.c-col {
border-radius: 10px;
padding: 30px;
@@ -1089,6 +1352,13 @@ header {
align-items: flex-start;
justify-content: space-between;
@include respond-below(md) {
width: calc(50% - 16px);
}
@include respond-below(sm) {
width: 100%;
}
.col-text {
> span {
color: $cYellow;
@@ -1152,6 +1422,11 @@ header {
row-gap: 100px;
align-items: center;
@include respond-below(md) {
grid-template-columns: 1fr;
row-gap: 40px;
}
.c-col {
&-1 {
.box-title {
@@ -1163,6 +1438,11 @@ header {
}
}
img {
width: 100%;
max-width: fit-content;
}
ul {
padding: 0;
margin: 0 0 32px 0;
@@ -1194,9 +1474,17 @@ header {
}
&-2 {
@include respond-below(md) {
text-align: center;
}
img {
width: 100%;
max-width: fit-content;
@include respond-below(md) {
width: 100%;
max-width: 500px;
}
}
}
}
@@ -1254,6 +1542,10 @@ header {
border-radius: 30px;
padding: 60px 80px;
background: $cYellow;
@include respond-below(xs) {
padding: 40px;
}
}
.c-row {
&-1 {
@@ -1261,6 +1553,11 @@ header {
grid-template-columns: 1fr 1fr;
column-gap: 50px;
@include respond-below(md) {
grid-template-columns: 1fr;
row-gap: 40px;
}
.c-col {
&-1 {
display: flex;
@@ -1289,6 +1586,13 @@ header {
display: block;
color: $cBlack;
}
@include respond-below(sm) {
font-size: 32px;
}
@include respond-below(xxxs) {
font-size: 26px;
}
}
.contact-box {
@@ -1297,6 +1601,11 @@ header {
column-gap: 20px;
align-items: center;
@include respond-below(xs) {
flex-direction: column;
row-gap: 20px;
}
&-img {
img {
width: 100%;
@@ -1339,6 +1648,10 @@ header {
}
}
}
@include respond-below(xs) {
text-align: center;
}
}
&-2 {
.form-box {