diff --git a/Assignment 1.pdf b/Assignments/Assignment 1.pdf
similarity index 100%
rename from Assignment 1.pdf
rename to Assignments/Assignment 1.pdf
diff --git a/Assignments/Assignment 2.pdf b/Assignments/Assignment 2.pdf
new file mode 100644
index 0000000000000000000000000000000000000000..c35416bddd3c9094fac1153d965a993bec45be52
Binary files /dev/null and b/Assignments/Assignment 2.pdf differ
diff --git a/data/news_01.json b/data/news_01.json
new file mode 100644
index 0000000000000000000000000000000000000000..19e79202179aab8088a2a86d548305e027b3f60a
--- /dev/null
+++ b/data/news_01.json
@@ -0,0 +1,19 @@
+{
+ "news":[
+ {
+ "title":"SpaceX's Next Starship Prototype Taking Shape ",
+ "imgurl":"",
+ "content":"Construction of the test craft is proceeding apace, as two new photos posted on Twitter today (Sept. 17) by company founder and CEO Elon Musk reveal."
+ },
+ {
+ "title":"NASA's Juno Mission Cheks Out Eclipse on Jupiter",
+ "imgurl":"img/astronaut.jpg",
+ "content":"All is well on our largest neighbor; NASA's Juno spacecraft just managed to spot the shadow of Jupiter's moon, Io, passing over its marbled clouds."
+ },
+ {
+ "title":"Europe Wants Ideas for Cave-Spelumking Moon Robots",
+ "imgurl":"img/nasa_launch.jpg",
+ "content":"As NASA makes a big push to land humans on the moon's surface by 2024, the European Space Agency (ESA) wants to learn more about the lunar caves that lie beneath."
+ }
+ ]
+}
\ No newline at end of file
diff --git a/data/news_02.json b/data/news_02.json
new file mode 100644
index 0000000000000000000000000000000000000000..fa5438e7d04ba60867aaef1b8e2c56ea8e5e521f
--- /dev/null
+++ b/data/news_02.json
@@ -0,0 +1,19 @@
+{
+ "news":[
+ {
+ "title":"NASA Events",
+ "imgurl":"",
+ "content":"Wednesday, Sept. 7: OSIRIS-REx Science and Engineering Talk (12 p.m. EDT), Asteroid Panel Discussion (1 p.m. EDT), NASA TV"
+ },
+ {
+ "title":"Expedition 48",
+ "imgurl":"img/astronaut.jpg",
+ "content":"NASA's Record-braking Astronaut Crewmates Safely Return to Earth"
+ },
+ {
+ "title":"NASA to Launch First U.S. Asteroid Sample Return Mission",
+ "imgurl":"img/nasa_launch.jpg",
+ "content":"Launching on Sept. 8, 2016 OSIRIS-REx will travel to a near-Earth asteroid called Bennu and bring a small sample back for study."
+ }
+ ]
+}
\ No newline at end of file
diff --git a/first.php b/first.php
new file mode 100644
index 0000000000000000000000000000000000000000..b95842750c1f0ef1ec7ed28c603deb0a01300e47
--- /dev/null
+++ b/first.php
@@ -0,0 +1,13 @@
+<html>
+<?php
+ ini_set("display_errors", 0);
+ ini_set("display_startup_errors", 0);
+?>
+
+<head></head>
+<body>
+ <?php
+ echo "Hello World, this is my first PHP";
+ ?>
+</body>
+</html>
\ No newline at end of file
diff --git a/index.php b/index.php
new file mode 100644
index 0000000000000000000000000000000000000000..a86d1fbbc769a8a4edbb8fc817730749ebc7cb7a
--- /dev/null
+++ b/index.php
@@ -0,0 +1,197 @@
+<?php declare(strict_types=1);
+ ini_set("display_errors", 1);
+ ini_set("display_startup_errors", 1);
+
+ $fileContents = file_get_contents('data/news_01.json');
+
+ if ($fileContents === NULL)
+ return;
+
+ $json = json_decode($fileContents, true);
+ $newsList = $json["news"];
+?>
+<!DOCTYPE html>
+<html lang="de">
+ <head>
+ <title>NASA</title>
+ <meta charset="UTF-8" />
+ <meta name="viewport" content="width=device-width, initial-scale=1">
+ <script src="functions.js"></script>
+ <link rel="stylesheet" type="text/css" href="styles.css" />
+ </head>
+ <body onload="">
+ <header>
+ <img class="nasa-img" src="img/nasa.png" />
+
+ <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" placeholder="Search" />
+ <input type="button" />
+ </form>
+ </li>
+ <li><img src="img/share_icon.png" /></li>
+ </ul>
+
+ <ul class="center-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>
+
+ <main>
+ <article class="content-large">
+ <div>
+ <div class="article-content-container">
+ <a class="article-link" href="#"></a>
+
+ <img id="slide-image" class="article-image" src="img/nasa_news_1.jpg" />
+
+ <div class="article-content">
+ <div id="slide-container" class="news-headline">
+ <h3>Space Station</h3>
+ <h2>Expedition 48 Crew Lands Safely on Earth</h2>
+ </div>
+
+ <div class="camera-triangle"></div>
+ <img class="camera-img" src="img/camera.png" />
+ </div>
+ </div>
+ </div>
+ </article>
+ <article class="content-small">
+ <div>
+ <div class="article-content-container">
+ <a class="article-link" href="#"></a>
+
+ <div class="article-content nasa-events-container">
+ <div class="nasa-events-top">
+ <?php
+ $news = $newsList[0];
+
+ $title = htmlspecialchars($news["title"]);
+ $imageurl = htmlspecialchars($news["imgurl"]);
+ $content = htmlspecialchars($news["content"]);
+ ?>
+
+ <p class="nasa-events-title"><?= $title ?></p>
+
+ <div class="line"></div>
+
+ <a class="nasa-event" href="#"><?= $content ?></a>
+ </div>
+
+ <div class="nasa-events-bottom">
+ <div class="line"></div>
+
+ <div class="nasa-events-bottom-horizontal">
+ <a href="#">Calendar</a>
+ <a href="#">Launches and Landings</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </article>
+ <article class="content-small">
+ <div>
+ <div class="article-content-container">
+ <?php
+ $news = $newsList[1];
+
+ $title = htmlspecialchars($news["title"]);
+ $imageurl = htmlspecialchars($news["imgurl"]);
+ $content = htmlspecialchars($news["content"]);
+ ?>
+
+ <a class="article-link" href="#"></a>
+
+ <img class="article-image" src="<?= $imageurl ?>"></img>
+
+ <div class="article-content overlay">
+ <h4 class="overlay-title"><?= $title ?></h4>
+ <h4 class="overlay-description"><?= $content ?></h4>
+ </div>
+ </div>
+ </div>
+ </article>
+ <article class="content-medium">
+ <div>
+ <div class="article-content-container">
+ <?php
+ $news = $newsList[2];
+
+ $title = htmlspecialchars($news["title"]);
+ $imageurl = htmlspecialchars($news["imgurl"]);
+ $content = htmlspecialchars($news["content"]);
+ ?>
+
+ <a class="article-link" href="#"></a>
+
+ <img class="article-half-image" src="<?= $imageurl ?>"></img>
+
+ <div class="article-triangle"></div>
+
+ <div class="article-content-second-half nasa-launch">
+ <h4><?= $title ?></h4>
+
+ <p><?= $content ?></p>
+
+ <div class="nasa-launch-links">
+ <a href="#">Mission Site</a>
+ <a href="#">Briefing Schedule</a>
+ <a href="#">Launch Updates</a>
+ <a href="#">Video to Bennu and Back</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ </article>
+ <article class="content-small">
+ <div>
+ <div class="article-content-container">
+ <a class="article-link" href="#"></a>
+
+ <div class="article-content">
+ <iframe src="https://www.youtube.com/embed/XY6idnRlPsU?si=HnFL8-if6-zB6tU2" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+ </div>
+ </div>
+ </div>
+ </article>
+ <article class="content-medium">
+ <div>
+ <div class="article-content-container">
+ <a class="article-link" href="#"></a>
+
+ <img class="article-image" src="img/ocean_worlds.jpg"></img>
+ </div>
+ </div>
+ </article>
+ <article class="content-small">
+ <div>
+ <div class="article-content-container">
+ <a class="article-link" href="#"></a>
+
+ <img class="article-image article-image-full" src="img/tweet.png"></img>
+ </div>
+ </div>
+ </article>
+ </section>
+ </body>
+</html>
\ No newline at end of file
diff --git a/styles.css b/styles.css
index 4b9f455a904862e89283da9f4620b50a3d25d69e..0a7e700b06fcf29a2be15817b8e9bbbcdaad136e 100644
--- a/styles.css
+++ b/styles.css
@@ -357,24 +357,17 @@ main {
opacity: 0.85;
margin: 0;
padding: 0.5rem;
-}
-
-.overlay-description > * {
+ font-weight: 500;
+ max-height: 2.9rem;
+ line-height: 1.1rem;
+ overflow: hidden;
color: #111111;
- margin: 0;
font-size: 0.9rem;
}
-.overlay-description > h4 {
- font-weight: 500;
-}
-
-.overlay-description > p {
- display: none;
-}
-
-.overlay-description:hover > p {
- display: block;
+.overlay > .overlay-description:hover {
+ max-height: 100%;
+ overflow: visible;
}
.overlay > .overlay-additional-information {