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 {