350 lines
6.9 KiB
CSS
350 lines
6.9 KiB
CSS
@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;
|
|
background-image: url("resources/noise-texture.svg");
|
|
color: #E07A31;
|
|
font-family: "League Spartan";
|
|
}
|
|
|
|
#navbar-top {
|
|
justify-content: center;
|
|
display: flex;
|
|
margin-top: 20px;
|
|
animation: float-in 0.3s ease-out;
|
|
position: relative;
|
|
z-index: 110;
|
|
}
|
|
|
|
#navbar-bottom {
|
|
justify-content: center;
|
|
display: flex;
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
#navbar {
|
|
text-align: center;
|
|
width: 40%;
|
|
background-color: #E07A31;
|
|
z-index: 55;
|
|
border-radius: 20px;
|
|
opacity: 90%;
|
|
height: 60px;
|
|
}
|
|
|
|
ul {
|
|
vertical-align: middle;
|
|
list-style-type: none;
|
|
margin: 8px;
|
|
overflow: hidden;
|
|
display: inline-block;
|
|
padding-right: 5%;
|
|
padding-left: 5%;
|
|
}
|
|
|
|
li {
|
|
float: left;
|
|
color: #FFE49F;
|
|
text-align: center;
|
|
padding: 10px;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
font-size: 30px;
|
|
}
|
|
|
|
li a {
|
|
color: #FFE49F;
|
|
text-decoration: none;
|
|
}
|
|
|
|
li a:hover {
|
|
animation: highlight-text 0.4s ease-in-out;
|
|
}
|
|
|
|
|
|
.start {
|
|
display: flex;
|
|
margin-top: -100px;
|
|
}
|
|
|
|
b {
|
|
text-align: right;
|
|
}
|
|
|
|
#eins {
|
|
display: flex;
|
|
justify-content: right;
|
|
}
|
|
|
|
#zwei {
|
|
height: 100%;
|
|
width: 100%;
|
|
z-index: 10;
|
|
}
|
|
|
|
.text-rechts {
|
|
width: 46%;
|
|
margin-right: 100px;
|
|
}
|
|
|
|
h2 {
|
|
font-weight: bold;
|
|
font-size: 150px;
|
|
position: relative;
|
|
text-align: justify;
|
|
text-align-last: justify;
|
|
}
|
|
|
|
#eins h2 {
|
|
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;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.title h2{
|
|
font-size: 150px;
|
|
text-align: right;
|
|
text-align-last: right;
|
|
padding-right: 140px;
|
|
padding-top: 150px;
|
|
font-family: "League Spartan";
|
|
}
|
|
|
|
.button-rechts {
|
|
height: 1000px;
|
|
position: relative;
|
|
top: 275px;
|
|
width: 46%;
|
|
margin-right: 100px;
|
|
justify-content: center;
|
|
display: block;
|
|
}
|
|
|
|
button {
|
|
background-color: transparent;
|
|
border-style: dotted;
|
|
border-color: #E07A31;
|
|
border-width: 10px;
|
|
border-radius: 32px;
|
|
color: #E07A31;
|
|
padding-left: 25px;
|
|
padding-right: 25px;
|
|
padding-top: 25px;
|
|
padding-bottom: 20px;
|
|
text-decoration: none;
|
|
font-family: "League Spartan Black";
|
|
font-size: 100px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
@keyframes raise {
|
|
0% {z-index: 0; opacity: 0%;}
|
|
70% {opacity: 50%;}
|
|
100% {z-index: 100; opacity: 90%;}
|
|
}
|
|
|
|
#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, 239, 244);
|
|
position: relative;
|
|
right: 200px;
|
|
z-index: 0;
|
|
animation: appear 0.4s 0s ease-in;
|
|
animation: idle-blue s 0.4s infinite;
|
|
}
|
|
|
|
#green {
|
|
background-color: #86ec4f;
|
|
position: relative;
|
|
top: -200px;
|
|
right: 150px;
|
|
z-index: 2;
|
|
animation: appear 0.4s -0.075s ease-in;
|
|
animation: idle-green 5s 0.3s infinite;
|
|
}
|
|
|
|
#red {
|
|
background-color: rgb(240, 75, 193);
|
|
position: relative;
|
|
left: 60px;
|
|
top: -45px;
|
|
z-index: 1;
|
|
animation: appear 0.4s -0.15s ease-in;
|
|
animation: idle-red 7s 0.3s infinite;
|
|
}
|
|
|
|
@keyframes text-in-out {
|
|
0% {color: inherit}
|
|
40% {color: transparent}
|
|
60% {color: transparent}
|
|
100% {color: inherit}
|
|
}
|
|
|
|
@keyframes border-in-out {
|
|
0% {border-radius: 32px}
|
|
10%{border-radius: 32px}
|
|
40% {border-radius: 125px}
|
|
60% {border-radius: 125px}
|
|
90%{border-radius: 32px}
|
|
100% {border-radius: 32px}
|
|
}
|
|
|
|
@keyframes float-in {
|
|
0% {transform: translateY(-100px); opacity: 0%}
|
|
100% {transform: translateY(0px); opacity: 90%;}
|
|
}
|
|
|
|
@keyframes highlight-text {
|
|
0% {font-size: 30px;}
|
|
40% {font-size: 38px;}
|
|
80% {font-size: 38px;}
|
|
100% {font-size: 30px;}
|
|
}
|
|
|
|
@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 idle-blue {
|
|
0% {transform: scale(1); }
|
|
20% {transform: scale(1.4); }
|
|
40% {transform: scale(1.1); transform: translateY(40px);}
|
|
60% {transform: scale(0.8); transform: translateX(50px)}
|
|
80% {transform: scale(0.9); ;}
|
|
95% {transform: scale(1); ; transform: translateY(-40px); transform: translateX(-50px);}
|
|
}
|
|
|
|
@keyframes idle-green {
|
|
0% {transform: scale(1); }
|
|
20% {transform: scale(0.8); }
|
|
40% {transform: scale(1.1); transform: translateY(70px);}
|
|
60% {transform: scale(0.9); transform: translateX(-20px)}
|
|
80% {transform: scale(1.3); }
|
|
95% {transform: scale(1); ; transform: translateY(60px); transform: translateX(45px);}
|
|
}
|
|
|
|
@keyframes idle-red {
|
|
0% {transform: scale(1); ;}
|
|
20% {transform: scale(1.3); z-index: 3;}
|
|
40% {transform: scale(1.2); z-index: 2; transform: translateY(-60px);}
|
|
60% {transform: scale(0.7); z-index: 0; transform: translateX(-45px)}
|
|
80% {transform: scale(0.9); z-index: 0;}
|
|
95% {transform: scale(1); ; transform: translateY(60px); transform: translateX(45px);}
|
|
}
|
|
|
|
@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);}
|
|
} |