diff --git a/img/nasa_launch.jpg b/img/nasa_launch.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..c81af2c24ed4f248c2a574595dc358ffeff29b1f
Binary files /dev/null and b/img/nasa_launch.jpg differ
diff --git a/img/ocean_worlds.jpg b/img/ocean_worlds.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..7288d601ce8487b50863a7cbf524c843d30ec7b5
Binary files /dev/null and b/img/ocean_worlds.jpg differ
diff --git a/index.html b/index.html
index 51d5f7c51451a6be434e957dcd3c5f1047cc6afe..f7eadecb27b402ae245be7698f533dd46cf985f9 100644
--- a/index.html
+++ b/index.html
@@ -69,25 +69,23 @@
<div class="article-content-container">
<a class="article-link" href="#"></a>
- <div class="article-content">
- <div class="nasa-events-container">
- <div class="nasa-events-top">
- <p class="nasa-events-title">NASA Events</p>
-
- <div class="line"></div>
-
- <a class="news" 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="news" href="#">Thursday, Sept. 8: Launch of OSIRIS-REx, 7:05 p.m. EDT</a>
- <a class="news" 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 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="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="event" href="#">Thursday, Sept. 8: Launch of OSIRIS-REx, 7:05 p.m. EDT</a>
+ <a class="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>
@@ -103,8 +101,8 @@
<div class="article-content">
<div class="overlay">
- <h4>Expedition 48</h4>
- <h4>NASA's Record-braking Astronaut Crewmates Safely Return to Earth</h4>
+ <h4 class="overlay-title">Expedition 48</h4>
+ <h4 class="overlay-description">NASA's Record-braking Astronaut Crewmates Safely Return to Earth</h4>
</div>
</div>
</div>
@@ -115,10 +113,19 @@
<div class="article-content-container">
<a class="article-link" href="#"></a>
- <img class="article-image" src="img/astronaut.jpg"></img>
+ <img class="article-half-image" src="img/nasa_launch.jpg"></img>
- <div class="article-content">
+ <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>
@@ -126,12 +133,10 @@
<article class="content-small">
<div>
<div class="article-content-container">
- <a class="article-link" href="#"></a>
-
- <img class="article-image" src="img/astronaut.jpg"></img>
+ <a class="article-link" href="#"></a>
<div class="article-content">
-
+ <iframe src="https://www.youtube.com/watch?v=XY6idnRlPsU"></iframe>
</div>
</div>
</div>
@@ -141,11 +146,7 @@
<div class="article-content-container">
<a class="article-link" href="#"></a>
- <img class="article-image" src="img/astronaut.jpg"></img>
-
- <div class="article-content">
-
- </div>
+ <img class="article-image" src="img/ocean_worlds.jpg"></img>
</div>
</div>
</article>
@@ -157,7 +158,7 @@
<img class="article-image" src="img/astronaut.jpg"></img>
<div class="article-content">
-
+ <iframe src="https://twitter.com/NASA?ref_src=twsrc%5Egoogle%7Ctwcamp%5Eserp%7Ctwgr%5Eauthor"></iframe>
</div>
</div>
</div>
diff --git a/styles.css b/styles.css
index 68bc7d3c1a5632146ef1d5328db107aa687262a5..9a9df52ec9dbc572ed192b567968d30d550a3a6b 100644
--- a/styles.css
+++ b/styles.css
@@ -19,6 +19,10 @@ body {
background-color: #666666;
}
+a {
+ text-decoration: none;
+}
+
nav ul {
list-style-type: none;
margin: 0;
@@ -143,7 +147,6 @@ main {
content: "";
display: block;
padding-bottom: 100%;
- background-color: yellow;
}
.content-medium {
@@ -155,7 +158,6 @@ main {
content: "";
display: block;
padding-bottom: 50%;
- background-color: #555555;
}
.content-large {
@@ -176,7 +178,7 @@ main {
}
.content-small > div, .content-medium > div, .content-large > div {
- padding: 0.5em;
+ padding: 0.3em;
position: absolute;
width: 100%;
height: 100%;
@@ -207,6 +209,13 @@ main {
object-fit: cover;
}
+.article-content-container > .article-half-image {
+ position: absolute;
+ width: 50%;
+ height: 100%;
+ object-fit: cover;
+}
+
.article-content-container > .article-content {
position: absolute;
top: 0;
@@ -215,20 +224,14 @@ main {
height: 100%;
}
-/*.content-small > div > a, .content-medium > div > a, .content-large > div > a {
- display: block;
- position: relative;
- width: 100%;
+.article-content-container > .article-content-second-half {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ width: 50%;
height: 100%;
- text-decoration: none;
}
-.astronaut-landing {
- background-image: url('img/astronaut_landing.jpg');
- background-size: cover;
- background-repeat: no-repeat;
-}*/
-
.news-headline {
position: absolute;
bottom: 1em;
@@ -280,21 +283,25 @@ main {
height: 100%;
}
+.nasa-events-container a:hover {
+ text-decoration: underline;
+}
+
.nasa-events-title {
font-size: 0.8em;
padding: 0.2em 0;
margin: 0;
}
-a.news {
+.line {
+ height: 0.05em;
+ background-color: #eeeeee;
+}
+
+.event {
display: block;
font-size: 0.7em;
padding: 0.2em 0;
- text-decoration: none;
-}
-
-a.news:hover {
- text-decoration: underline;
}
.nasa-events-bottom-horizontal {
@@ -304,23 +311,68 @@ a.news:hover {
font-size: 0.8rem;
}
-.line {
- height: 0.05em;
+.overlay {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: flex-start;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+}
+
+.overlay > .overlay-title {
+ margin: 0;
+ padding: 0.5em;
+ background-color: #39719e;
+ opacity: 0.85;
+ font-size: 0.9rem;
+}
+
+.overlay > .overlay-description {
background-color: #eeeeee;
+ opacity: 0.85;
+ margin: 0;
+ padding: 0.5em;
+ font-weight: 500;
+ color: #111111;
+ font-size: 0.9rem;
+}
+
+.nasa-launch h4 {
+ color: #39719e;
+ font-size: 1.2em;
+ font-weight:lighter;
+}
+
+.nasa-launch p {
+ color: #111111;
+ font-size: 0.7rem;
}
-/*.news-image {
+.nasa-launch a {
+ color: #39719e;
+ font-size: 0.7rem;
+}
+
+.nasa-launch a:hover {
+ text-decoration: underline;
+}
+
+.nasa-launch > * {
+ margin: 0;
+ padding: 0.5rem;
+}
+
+.nasa-launch-links > a {
+ display: block;
+}
+
+iframe {
width: 100%;
height: 100%;
- object-fit: cover;
}
-.overlay {
- position: absolute;
- top: 0;
- left: 0;
-}*/
-
/*.content-small div div, .content-medium div div, .content-large div div {
background-color: blue;
}*/