diff --git a/index.html b/index.html index 8cca5c0..b069ea6 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,26 @@ - DAIALECT + DAIALECT LOCAL +

DAIA
LECT

@@ -32,5 +45,18 @@

MIT HILFE VON
KI ALLE
MENSCHEN VERSTEHEN

+ \ No newline at end of file diff --git a/style.css b/style.css index 828cab5..a8dfca0 100644 --- a/style.css +++ b/style.css @@ -8,8 +8,64 @@ body 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 { @@ -38,7 +94,6 @@ h2 { position: relative; text-align: justify; text-align-last: justify; - } #eins h2 { @@ -155,6 +210,17 @@ body::before { animation: appear 0.4s -0.15s ease-in; } +@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%} @@ -213,6 +279,4 @@ body::before { 75% {right: 400px} 90% {opacity: 100%; transform: scale(1);} 100% {top: 2150px; right: 200px; opacity: 20%; transform: scale(0.2);} -} - - +} \ No newline at end of file