paul/DAIALECT
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fonts + seite 3

Browse Source
This commit is contained in:
Paul Martin
2023-11-10 15:41:41 +01:00
parent 765dc77f0a
commit bdf410665f
6 changed files with 222 additions and 107 deletions
Download Patch File Download Diff File Expand all files Collapse all files

270
style.css
View File

@ -1,3 +1,6 @@
@font-face { font-family: "League Spartan"; src: url("resources/LeagueSpartan.ttf");}
@font-face { font-family: "League Spartan Black"; src: url("resources/LeagueSpartan-Black.ttf");}
body
{
background-color: #FFE49F;
@ -6,129 +9,210 @@ body
}
.start {
display: flex;
display: flex;
}
b {
text-align: right;
}
#eins {
display: flex;
justify-content: right;
display: flex;
justify-content: right;
}
#zwei {
height: 100%;
width: 100%;
z-index: 10;
}
.text-rechts {
width: 46%;
margin-right: 100px;
width: 46%;
margin-right: 100px;
}
h2 {
font-weight: bold;
font-size: 150px;
position: relative;
text-align: justify;
text-align-last: justify;
}
#eins h2 {
font-weight: bold;
font-size: 150px;
position: relative;
text-align: justify;
text-align-last: justify;
display: flex;
line-height: 0.3;
display: flex;
line-height: 0.3;
}
#zwei h2 {
font-size: 180px;
line-height: 1.8;
}
.text-mittig {
display: flex;
justify-content: center;
width: 90%;
margin-left: 5%;
margin-right: 5%;
}
.text-mittig small {
font-size: 155px;
}
p {
position: relative;
font-size: 20px;
text-align: right;
z-index: 60;
position: relative;
font-size: 20px;
text-align: right;
z-index: 60;
}
.main-title
{
font-family: "League Spartan Black";
font-size: 170px;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
width: 60%;
height: 100%;
z-index: 100;
position: relative;
flex-direction: column;
opacity: 90%;
animation: raise 0.5s ease-in;
font-family: "League Spartan Black";
font-size: 170px;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
width: 60%;
height: 100%;
z-index: 100;
position: relative;
flex-direction: column;
opacity: 90%;
animation: raise 0.5s ease-in;
}
@keyframes raise {
0% {z-index: 0; opacity: 0%;}
70% {opacity: 50%;}
100% {z-index: 100; opacity: 90%;}
0% {z-index: 0; opacity: 0%;}
70% {opacity: 50%;}
100% {z-index: 100; opacity: 90%;}
}
body::before,
body::after {
position: absolute;
left: 0;
top: 0;
content: '';
width: 2048px;
height: 2048px;
z-index: 50;
opacity: 80%;
position: absolute;
left: 0;
top: 0;
content: '';
width: 2048px;
height: 2048px;
z-index: 50;
opacity: 80%;
}
body::before {
background: url("noise-texture.svg");
mix-blend-mode: soft-light;
background: url("noise-texture.svg");
mix-blend-mode: soft-light;
}
#blobs {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: -2;
height: 100%;
width: 40%;
position: relative;
}
.blob {
border-radius: 200px;
filter: blur(60px);
width: 400px;
height: 350px;
top: 250px;
}
.blue {
background-color: rgb(80, 80, 244);
position: relative;
right: 200px;
animation: appear 0.4s 0s ease-in;
}
.green {
background-color: rgb(48, 227, 48);
position: relative;
top: -200px;
right: 150px;
animation: appear 0.4s -0.075s ease-in;
}
.red {
background-color: rgb(255, 63, 63);
position: relative;
left: 60px;
top: -45px;
animation: appear 0.4s -0.15s ease-in;
}
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: -2;
height: 100%;
width: 40%;
position: relative;
}
@keyframes appear {
0% {transform: scale(0); opacity: 0%;}
60% {transform: scale(0.8)}
80% {transform: scale(1.1); opacity: 100%;}
100% {transform: scale(1)}
}
.blob {
border-radius: 200px;
filter: blur(60px);
width: 400px;
height: 350px;
top: 250px;
}
#blue {
background-color: rgb(80, 239, 244);
position: relative;
right: 200px;
animation: appear 0.4s 0s ease-in;
}
#green {
background-color: #86ec4f;
position: relative;
top: -200px;
right: 150px;
animation: appear 0.4s -0.075s ease-in;
}
#red {
background-color: rgb(240, 75, 193);
position: relative;
left: 60px;
top: -45px;
animation: appear 0.4s -0.15s ease-in;
}
@keyframes appear {
0% {transform: scale(0); opacity: 0%}
60% {transform: scale(0.8)}
80% {transform: scale(1.1); opacity: 100%}
100% {transform: scale(1)}
}
@keyframes move-down-1 {
0% {top: 0px; right: 0px}
100% {top: 0px; right: 1000px}
}
@keyframes green-move-down-1 {
0% {top: 0px; right: 0px }
50% {right: 400px}
90% {top: 750px; opacity: 100%; right: 190px; transform: scale(1);}
100% {top: 1000px; right: 200px; opacity: 20%; transform: scale(0.2);}
}
@keyframes red-move-down-1 {
0% {top: 0px; right: 0px }
90% {top: 850px; opacity: 100%; transform: scale(1);}
100% {top: 1000px; right: 0px; opacity: 20%; transform: scale(0.2);}
}
@keyframes blue-move-down-1 {
0% {top: 0px; right: 0px }
40% {right: 400px}
75% {right: 300px}
90% {opacity: 100%; transform: scale(1);}
100% {top: 1100px; right: 0px; opacity: 20%; transform: scale(0.2);}
}
@keyframes move-down-2 {
0% {top: 0px; right: 1000px}
100% {top: 0px; right: 600px}
}
@keyframes green-move-down-2 {
0% {top: 1000px; right: 0px }
50% {right: 400px}
90% {top: 1750px; opacity: 100%; right: 190px; transform: scale(1);}
100% {top: 2050px; right: 0px; opacity: 20%; transform: scale(0.2);}
}
@keyframes red-move-down-2 {
0% {top: 1000px; right: 0px }
90% {top: 1850px; opacity: 100%; transform: scale(1);}
100% {top: 2050px; right: 0px; opacity: 20%; transform: scale(0.2);}
}
@keyframes blue-move-down-2 {
0% {top: 1100px; right: 200px }
40% {right: 500px}
75% {right: 400px}
90% {opacity: 100%; transform: scale(1);}
100% {top: 2150px; right: 200px; opacity: 20%; transform: scale(0.2);}
}
@keyframes move-down-1 {
0% {top: 0px; right: 0px}
100% {top: 1000px; right: 1000px}
}