<!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 class="nasa-body">
<header class="nasa-header">
<img class="nasa-img" src="img/nasa.png" alt="" />
<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" value="" />
</form>
</li>
<li><img src="img/share_icon.png" alt="" /></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" alt="" />
<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" alt="" />
</div>
</div>
</div>
</article>
<article class="content-small">
<div>
<div class="article-content-container">
<div class="article-background"></div>
<a class="article-link" href="#"></a>
<div class="article-content nasa-events-container">
<div class="nasa-events-top">
<p class="nasa-events-title">NASA Events</p>
<div class="line"></div>
<a class="nasa-event" href="#">Wednesday, Sept. 7: OSIRIS-REx Science and Engineering Talk (12 p.m. EDT), Asteroid Panel Discussion (1 p.m. EDT), NASA TV</a>
<a class="nasa-event" href="#">Thursday, Sept. 8: Launch of OSIRIS-REx, 7:05 p.m. EDT</a>
<a class="nasa-event" href="#">Registration Open: NASA Social GOES-R Weather Satellite Launch, Nov. 3-4 at Cape Canaveral</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">
<div class="article-background"></div>
<a class="article-link" href="#"></a>
<img class="article-image" src="img/astronaut.jpg" alt="" />
<div class="article-content">
<div class="overlay">
<h4 class="overlay-title">Expedition 48</h4>
<h4 class="overlay-description">NASA's Record-braking Astronaut Crewmates Safely Return to Earth. Here is some additional information to the article where you can read more!</h4>
</div>
</div>
</div>
</div>
</article>
<article class="content-medium">
<div>
<div class="article-content-container">
<div class="article-background"></div>
<a class="article-link" href="#"></a>
<img class="article-half-image" src="img/nasa_launch.jpg" alt="" />
<div class="article-triangle"></div>
<div class="article-content-second-half nasa-launch">
<h4>NASA to Launch First U.S. Asteroid Sample Return Mission</h4>
<p><a href="#">Launching on Sept. 8, 2016,</a> OSIRIS-REx will travel to a near-Earth asteroid called Bennu and bring a small sample back for study.</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">
<div class="article-background"></div>
<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">
<div class="article-background"></div>
<a class="article-link" href="#"></a>
<img class="article-image" src="img/ocean_worlds.jpg" alt="" />
</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" alt="" />
</div>
</div>
</article>
</main>
</body>
</html>