diff --git a/img/background.png b/img/background.png
new file mode 100644
index 0000000000000000000000000000000000000000..d57144d8cac9b53b579b73cdf74051498caec711
Binary files /dev/null and b/img/background.png differ
diff --git a/img/nasa.svg b/img/nasa.svg
new file mode 100644
index 0000000000000000000000000000000000000000..ee3edbdaef3b6bbe7af6af4c7af58427c7b746b7
Binary files /dev/null and b/img/nasa.svg differ
diff --git a/img/search_icon.png b/img/search_icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..79ee99e1377a6d611bef3a85fdda0973bb81ef4f
Binary files /dev/null and b/img/search_icon.png differ
diff --git a/index.html b/index.html
index ccf5bd5d8cb47e7452edeaa71a527890e9ee1ee9..fd67e48c5df15c2e55a54e40ef93c608215a5d20 100644
--- a/index.html
+++ b/index.html
@@ -1,12 +1,47 @@
<!DOCTYPE html>
<html lang="de">
<head>
- <meta charset="UTF-8" />
<title>NASA</title>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="functions.js"></script>
+ <script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
- <p>Hello World</p>
+ <header>
+ <img class="nasa-img" src="img/nasa.svg" />
+
+ <nav>
+ <ul class="top-nav">
+ <li><a href="#">Missions</a></li>
+ <li><a href="#">Galleries</a></li>
+ <li><a href="#">NASA TV</a></li>
+ <li><a href="#">Follow NASA</a></li>
+ <li><a href="#">Downloads</a></li>
+ <li><a href="#">About</a></li>
+ <li><a href="#">NASA Audiences</a></li>
+ <li>
+ <form class="search-form" method="post" accept-charset="UTF-8">
+ <input type="search" size="15" placeholder="Search" />
+ <img class="search-icon" src="img/search_icon.png" />
+ </form>
+ </li>
+ <li><img src="" /></li>
+ </ul>
+
+ <ul class="centered-nav">
+ <li><a href="#">International Space Station</a></li>
+ <li><a href="#">Journey to Mars</a></li>
+ <li><a href="#">Earth</a></li>
+ <li><a href="#">Technology</a></li>
+ <li><a href="#">Aeronautics</a></li>
+ <li><a href="#">Solar System and Beyond</a></li>
+ <li><a href="#">Education</a></li>
+ <li><a href="#">History</a></li>
+ <li><a href="#">Benefits to You</a></li>
+ </ul>
+ </nav>
+ </header>
</body>
</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 2ee4d6d0e884a4cfa8450be964087f5bb1c0fc6a..9f9cab865a2e81d970982e89e5dbdbc9fd08cacc 100644
--- a/styles.css
+++ b/styles.css
@@ -1,3 +1,118 @@
* {
font-family: Verdana, Geneva, Tahoma, sans-serif;
+ box-sizing: border-box;
+ color: #eeeeee;
+}
+
+body, html {
+ margin: 0;
+ height: 100%;
+ width: 100%;
+}
+
+body {
+ background-image: url('img/background.png');
+ background-repeat: repeat;
+ background-position: center;
+ background-size: auto 100%;
+ width: 75%;
+ height: auto;
+ margin: auto;
+ background-color: #666666;
+}
+
+/*nav ul li a {
+ text-decoration: none;
+ display: inline-block;
+ padding: 1em;
+ background-color: white;
+ margin: 0;
+}*/
+
+nav ul {
+ list-style-type: none;
+ margin: 0;
+ padding: 0;
+}
+
+nav ul li a {
+ text-decoration: none;
+}
+
+/*.sub-nav ul {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-content: flex-start;
+ height: 100%;
+ width: 100%;
+}
+
+.sub-nav ul li {
+ padding: 0.5em 0;
+ background-color: #777777;
+}
+
+.sub-nav ul li a {
+ font-size: 0.6em;
+ font-weight: 500;
+ display: block;
+ border-right: 0.1em solid #eeeeee;
+ padding: 0.5em 1em;
+}
+
+.sub-nav ul li:last-child a {
+ border-right: none;
+}
+
+.sub-nav ul li a {
+ background-color: #777777;
+}*/
+
+.nasa-img {
+ width: 7em;
+ float: left;
+}
+
+.top-nav li {
+ font-size: 1em;
+ padding: 0.5em 0;
+}
+
+.top-nav li a {
+ display: block;
+ border-right: 0.05em solid #eeeeee;
+ padding: 0.5em;
+}
+
+.top-nav li:nth-child(n+7) a {
+ border: none;
+}
+
+.top-nav {
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-end;
+}
+
+.search-form {
+ display: flex;
+ align-items: center;
+ column-gap: 0.5em;
+ border-radius: 0.1em;
+ padding: 0 0.5em;
+ height: 100%;
+ background-color: #66666688;
+}
+
+.search-form input[type="search"] {
+ border: none;
+ outline: none;
+ display: inline-block;
+ background-color: transparent;
+ font-size: 1em;
+}
+
+.search-form .search-icon {
+ height: 1.5em;
}
\ No newline at end of file