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-05 15:58:16 +01:00
parent 546cc34310
commit 1feb6f94d0
13 changed files with 862 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

675
layout/style-scss/tuzzer.scss Normal file
View File

@@ -0,0 +1,675 @@
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');
@import '_variables';
@import '_mixins';
@font-face {
font-family: 'Proxima Nova Bl';
src: url('/layout/fonts/ProximaNova/ProximaNova-Black.eot');
src: local('Proxima Nova Black'), local('ProximaNova-Black'),
url('/layout/fonts/ProximaNova/ProximaNova-Black.eot?#iefix')
format('embedded-opentype'),
url('/layout/fonts/ProximaNova/ProximaNova-Black.woff2') format('woff2'),
url('/layout/fonts/ProximaNova/ProximaNova-Black.woff') format('woff'),
url('/layout/fonts/ProximaNova/ProximaNova-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.eot');
src: local('Proxima Nova Extrabold'), local('ProximaNova-Extrabld'),
url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.eot?#iefix')
format('embedded-opentype'),
url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.woff2') format('woff2'),
url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.woff') format('woff'),
url('/layout/fonts/ProximaNova/ProximaNova-Extrabld.ttf') format('truetype');
font-weight: 800;
font-style: normal;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.eot');
src: local('Proxima Nova Semibold Italic'), local('ProximaNova-SemiboldIt'),
url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.eot?#iefix')
format('embedded-opentype'),
url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.woff2')
format('woff2'),
url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.woff') format('woff'),
url('/layout/fonts/ProximaNova/ProximaNova-SemiboldIt.ttf')
format('truetype');
font-weight: 600;
font-style: italic;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.eot');
src: local('Proxima Nova Thin'), local('ProximaNovaT-Thin'),
url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.eot?#iefix')
format('embedded-opentype'),
url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.woff2') format('woff2'),
url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.woff') format('woff'),
url('/layout/fonts/ProximaNova/ProximaNovaT-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/layout/fonts/ProximaNova/ProximaNova-Light.eot');
src: local('Proxima Nova Light'), local('ProximaNova-Light'),
url('/layout/fonts/ProximaNova/ProximaNova-Light.eot?#iefix')
format('embedded-opentype'),
url('/layout/fonts/ProximaNova/ProximaNova-Light.woff2') format('woff2'),
url('/layout/fonts/ProximaNova/ProximaNova-Light.woff') format('woff'),
url('/layout/fonts/ProximaNova/ProximaNova-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.eot');
src: local('Proxima Nova Black Italic'), local('ProximaNova-BlackIt'),
url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.eot?#iefix')
format('embedded-opentype'),
url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.woff2') format('woff2'),
url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.woff') format('woff'),
url('/layout/fonts/ProximaNova/ProximaNova-BlackIt.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.eot');
src: local('Proxima Nova Bold Italic'), local('ProximaNova-BoldIt'),
url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.eot?#iefix')
format('embedded-opentype'),
url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.woff2') format('woff2'),
url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.woff') format('woff'),
url('/layout/fonts/ProximaNova/ProximaNova-BoldIt.ttf') format('truetype');
font-weight: bold;
font-style: italic;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.eot');
src: local('Proxima Nova Thin Italic'), local('ProximaNova-ThinIt'),
url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.eot?#iefix')
format('embedded-opentype'),
url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.woff2') format('woff2'),
url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.woff') format('woff'),
url('/layout/fonts/ProximaNova/ProximaNova-ThinIt.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/layout/fonts/ProximaNova/ProximaNova-Bold.eot');
src: local('Proxima Nova Bold'), local('ProximaNova-Bold'),
url('/layout/fonts/ProximaNova/ProximaNova-Bold.eot?#iefix')
format('embedded-opentype'),
url('/layout/fonts/ProximaNova/ProximaNova-Bold.woff2') format('woff2'),
url('/layout/fonts/ProximaNova/ProximaNova-Bold.woff') format('woff'),
url('/layout/fonts/ProximaNova/ProximaNova-Bold.ttf') format('truetype');
font-weight: bold;
font-style: normal;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.eot');
src: local('Proxima Nova Regular Italic'), local('ProximaNova-RegularIt'),
url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.eot?#iefix')
format('embedded-opentype'),
url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.woff2') format('woff2'),
url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.woff') format('woff'),
url('/layout/fonts/ProximaNova/ProximaNova-RegularIt.ttf')
format('truetype');
font-weight: normal;
font-style: italic;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.eot');
src: local('Proxima Nova Extrabold Italic'), local('ProximaNova-ExtrabldIt'),
url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.eot?#iefix')
format('embedded-opentype'),
url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.woff2')
format('woff2'),
url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.woff') format('woff'),
url('/layout/fonts/ProximaNova/ProximaNova-ExtrabldIt.ttf')
format('truetype');
font-weight: 800;
font-style: italic;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/layout/fonts/ProximaNova/ProximaNova-Regular.eot');
src: local('Proxima Nova Regular'), local('ProximaNova-Regular'),
url('/layout/fonts/ProximaNova/ProximaNova-Regular.eot?#iefix')
format('embedded-opentype'),
url('/layout/fonts/ProximaNova/ProximaNova-Regular.woff2') format('woff2'),
url('/layout/fonts/ProximaNova/ProximaNova-Regular.woff') format('woff'),
url('/layout/fonts/ProximaNova/ProximaNova-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/layout/fonts/ProximaNova/ProximaNova-LightIt.eot');
src: local('Proxima Nova Light Italic'), local('ProximaNova-LightIt'),
url('/layout/fonts/ProximaNova/ProximaNova-LightIt.eot?#iefix')
format('embedded-opentype'),
url('/layout/fonts/ProximaNova/ProximaNova-LightIt.woff2') format('woff2'),
url('/layout/fonts/ProximaNova/ProximaNova-LightIt.woff') format('woff'),
url('/layout/fonts/ProximaNova/ProximaNova-LightIt.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
@font-face {
font-family: 'Proxima Nova';
src: url('/layout/fonts/ProximaNova/ProximaNova-Semibold.eot');
src: local('Proxima Nova Semibold'), local('ProximaNova-Semibold'),
url('/layout/fonts/ProximaNova/ProximaNova-Semibold.eot?#iefix')
format('embedded-opentype'),
url('/layout/fonts/ProximaNova/ProximaNova-Semibold.woff2') format('woff2'),
url('/layout/fonts/ProximaNova/ProximaNova-Semibold.woff') format('woff'),
url('/layout/fonts/ProximaNova/ProximaNova-Semibold.ttf') format('truetype');
font-weight: 600;
font-style: normal;
}
$cWhite: #f9f9f9;
$cGreen: #2bac25;
$cYellow: #ffc400;
$cYellowLight: #fffbee;
$cBlack: #000;
$fProxima: 'Proxima Nova', sans-serif;
$fAnton: 'Anton', sans-serif;
//* ~~~ Global ~~~ *//
.gap-t-160 {
padding-top: 160px;
}
.gap-b-160 {
padding-bottom: 160px;
}
.gap-t-120 {
padding-top: 120px;
}
.gap-b-120 {
padding-bottom: 120px;
}
.gap-t-90 {
padding-top: 90px;
}
.gap-b-90 {
padding-bottom: 90px;
}
.gap-t-60 {
padding-top: 60px;
}
.gap-b-60 {
padding-bottom: 60px;
}
.main_content {
margin: auto;
padding-left: 0;
padding-right: 0;
}
.container {
@media screen and (min-width: 1300px) {
max-width: 1240px;
}
}
.btn {
display: inline-flex;
gap: 5px;
padding: 20px 28px;
height: 53px;
align-items: center;
justify-content: center;
border-radius: 12px;
color: #fff;
font-family: 'Proxima Nova';
font-size: 14px;
font-weight: 600;
&-green {
background: $cGreen;
&:hover {
color: $cWhite;
}
}
&-transparent {
color: $cBlack;
border: 1px solid rgba(0, 0, 0, 0.24);
&:hover {
color: $cBlack;
}
}
}
.box-title {
font-size: 40px;
font-family: $fProxima;
font-weight: 700;
line-height: 1;
}
//* ~~~~~~~~~~~~~~ *//
body {
background: $cYellowLight;
}
header {
position: sticky;
top: 0;
height: 93px;
margin-bottom: -93px;
z-index: 1;
.content {
@extend .main_content;
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 40px;
@media (max-width: 500px) {
flex-direction: column;
align-items: center;
gap: 30px;
}
.logo {
width: 150px;
img {
width: 100%;
}
}
}
}
.box-1 {
@extend .gap-b-160;
.content {
@extend .main_content;
}
.c-row {
display: grid;
grid-template-columns: minmax(300px, 580px) minmax(300px, 1fr);
column-gap: 80px;
align-items: flex-end;
.c-col {
&-1 {
padding-bottom: 100px;
.title-tag {
position: relative;
color: $cWhite;
padding: 8px 12px;
border-radius: 7px;
background: $cBlack;
display: inline-block;
margin-bottom: 40px;
&::after {
content: '';
width: 11px;
height: 11px;
display: inline-block;
background-image: url('/layout/images/tuzzer/mini-star.svg');
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
span {
font-size: 16px;
font-family: $fProxima;
line-height: normal;
margin: 0;
text-transform: uppercase;
}
}
h2 {
color: $cBlack;
font-size: 53px;
font-family: $fProxima;
line-height: 1;
font-weight: 900;
span {
color: $cYellow;
}
}
.buttons {
display: flex;
flex-direction: row;
gap: 24px;
}
}
&-2 {
position: relative;
&::before {
content: '';
position: absolute;
top: 130px;
left: -100px;
width: 70px;
height: 70px;
background-image: url('/layout/images/tuzzer/yellow-star.svg');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
opacity: 0.5;
}
&::after {
content: '';
position: absolute;
top: 230px;
left: -70px;
width: 194px;
height: 194px;
background-image: url('/layout/images/tuzzer/yellow-star.svg');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
opacity: 0.5;
}
}
}
}
}
.box-2 {
@extend .gap-b-60;
.content {
@extend .main_content;
}
.c-row {
&-1 {
margin-bottom: 30px;
.box-title {
position: relative;
&::after {
content: '';
display: inline-block;
width: 28px;
height: 28px;
margin-left: 10px;
background-image: url('/layout/images/tuzzer/star-2.svg');
background-position: center;
background-size: contain;
background-repeat: no-repeat;
}
}
}
&-2 {
display: grid;
grid-template-columns: 5fr 7fr;
column-gap: 50px;
.c-col {
> img {
margin-bottom: 40px;
}
h3 {
color: $cBlack;
font-size: 24px;
font-family: $fProxima;
font-weight: 700;
line-height: 1;
margin-bottom: 34px;
}
ul {
list-style: none;
padding: 0;
margin: 0;
li {
position: relative;
padding-left: 33px;
&::before {
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
}
}
}
&-1 {
ul {
li {
&::before {
content: '❌';
}
}
}
}
&-2 {
padding: 70px 100px 50px;
background: #f3f0e0;
border-radius: 40px;
ul {
margin-bottom: 40px;
li {
&::before {
content: '✅';
}
}
}
.buttons {
display: flex;
flex-direction: row;
gap: 24px;
}
}
}
}
}
}
.box-3 {
@extend .gap-t-120;
.content {
@extend .main_content;
}
.c-row {
&-1 {
max-width: 690px;
margin-left: auto;
margin-right: auto;
text-align: center;
h2 {
margin-bottom: 26px;
span {
color: $cYellow;
display: block;
}
}
p {
color: $cBlack;
font-size: 16px;
font-family: $fProxima;
text-align: center;
strong {
font-weight: 700;
}
}
}
&-2 {
.tiles {
display: grid;
grid-template-areas:
't1 ta1 t3 ta3 t4'
't2 ta2 t3 ta4 t5';
gap: 15px;
margin-bottom: 70px;
.tile {
background: $cYellow;
border-radius: 10px;
padding: 20px 26px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
row-gap: 12px;
width: 100%;
max-width: 232px;
p {
color: $cBlack;
font-size: 16px;
font-family: $fProxima;
line-height: 1.5;
font-weight: 700;
text-align: center;
margin-bottom: 0;
}
.empty-box {
display: block;
background: $cWhite;
border-radius: 10px;
width: 100%;
height: 100%;
}
&-1 {
grid-area: t1;
}
&-2 {
grid-area: t2;
}
&-3 {
grid-area: t3;
max-width: unset;
padding-bottom: 0;
overflow: hidden;
img {
box-shadow: -1px 2px 11.4px 0px #0000002b;
}
}
&-4 {
grid-area: t4;
max-width: unset;
align-items: flex-start;
row-gap: 5px;
p {
text-align: left;
}
span {
font-size: 13px;
font-weight: 400;
line-height: 1;
margin-bottom: 10px;
}
}
&-5 {
grid-area: t5;
max-width: unset;
align-items: flex-start;
p {
text-align: left;
}
}
}
.tile-arrow {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
row-gap: 5px;
p {
color: $cWhite;
font-family: $fProxima;
font-size: 16px;
font-weight: 700;
margin-bottom: 0;
}
&-1 {
grid-area: ta1;
}
&-2 {
grid-area: ta2;
}
&-3 {
grid-area: ta3;
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;
}
}
}
&-4 {
grid-area: ta4;
}
}
}
.btn {
}
}
}
}