Skip to content
Snippets Groups Projects
Commit d889651d authored by Silas Meister's avatar Silas Meister
Browse files

Replace square contents with pictures and article

parent fcf0adc0
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
img/nasa_launch.jpg 0 → 100644
+ 0
− 0
View file @ d889651d
img/nasa_launch.jpg

40.2 KiB

img/ocean_worlds.jpg 0 → 100644
+ 0
− 0
View file @ d889651d
img/ocean_worlds.jpg

166 KiB

index.html
+ 34
− 33
View file @ d889651d
......@@ -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>
......
styles.css
+ 82
− 30
View file @ d889651d
......@@ -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;
}*/
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment