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

navbar v1

Browse Source
This commit is contained in:
Paul Martin
2023-11-13 16:00:04 +01:00
parent bdf410665f
commit 1c53436675
2 changed files with 95 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
index.html
View File

@ -1,13 +1,26 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="de"> <html lang="de">
<head> <head>
<title>DAIALECT</title> <title>DAIALECT LOCAL</title>
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="resources/jquery-3.7.1.min.js"></script> <script type="text/javascript" src="resources/jquery-3.7.1.min.js"></script>
<script type="text/javascript" src="blob-animation.js"></script> <script type="text/javascript" src="blob-animation.js"></script>
</head> </head>
<body> <body>
<div id="navbar-top">
<div id="navbar">
<ul>
<li><a href="index.html">HOME</a></li>
<li>|</li>
<li><a href="about.html">ABOUT</a></li>
<li>|</li>
<li><a href="pricing.html">API Pricing</a></li>
<li>|</li>
<li><a href="try.html">TRY NOW!</a></li>
</ul>
</div>
</div>
<div class="start"> <div class="start">
<div class="main-title"> <div class="main-title">
<h1>DAIA<br>LECT</h1> <h1>DAIA<br>LECT</h1>
@ -32,5 +45,18 @@
<h2> MIT HILFE VON <br> KI ALLE <br> <small> MENSCHEN VERSTEHEN </small></h2> <h2> MIT HILFE VON <br> KI ALLE <br> <small> MENSCHEN VERSTEHEN </small></h2>
</div> </div>
</div> </div>
<div id="navbar-bottom">
<div id="navbar">
<ul>
<li><a href="index.html">HOME</a></li>
<li>|</li>
<li><a href="about.html">ABOUT</a></li>
<li>|</li>
<li><a href="pricing.html">API Pricing</a></li>
<li>|</li>
<li><a href="try.html">TRY NOW!</a></li>
</ul>
</div>
</div>
</body> </body>
</html> </html>

72
style.css
View File

@ -8,8 +8,64 @@ body
font-family: "League Spartan"; 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 { .start {
display: flex; display: flex;
margin-top: -100px;
} }
b { b {
@ -38,7 +94,6 @@ h2 {
position: relative; position: relative;
text-align: justify; text-align: justify;
text-align-last: justify; text-align-last: justify;
} }
#eins h2 { #eins h2 {
@ -155,6 +210,17 @@ body::before {
animation: appear 0.4s -0.15s ease-in; 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 { @keyframes appear {
0% {transform: scale(0); opacity: 0%} 0% {transform: scale(0); opacity: 0%}
@ -213,6 +279,4 @@ body::before {
75% {right: 400px} 75% {right: 400px}
90% {opacity: 100%; transform: scale(1);} 90% {opacity: 100%; transform: scale(1);}
100% {top: 2150px; right: 200px; opacity: 20%; transform: scale(0.2);} 100% {top: 2150px; right: 200px; opacity: 20%; transform: scale(0.2);}
} }