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 {