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

Restructure news section

parent e1608702
Branches
Tags
No related merge requests found
Hide whitespace changes
Inline Side-by-side
img/return.jpg 0 → 100644
+ 0
− 0
View file @ fcf0adc0
img/return.jpg

52.4 KiB

index.html
+ 99
− 52
View file @ fcf0adc0
...@@ -44,77 +44,124 @@ ...@@ -44,77 +44,124 @@
</nav> </nav>
</header> </header>
<section class="main"> <main>
<div class="content content-large"> <article class="content-large">
<div> <div>
<a class="astronaut-landing" href="#"> <div class="article-content-container">
<div class="news-headline"> <a class="article-link" href="#"></a>
<h3>Space Station</h3>
<h2>Expedition 48 Crew Lands Safely on Earth</h2> <img class="article-image" src="img/astronaut_landing.jpg" />
</div>
<div class="camera-triangle"></div> <div class="article-content">
<img class="camera-img" src="img/camera.png" /> <div class="news-headline">
</a> <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> </div>
</div> </article>
<div class="content content-small"> <article class="content-small">
<div> <div>
<div class="nasa-events-container"> <div class="article-content-container">
<div class="nasa-events-top"> <a class="article-link" href="#"></a>
<p class="nasa-events-title">NASA Events</p>
<div class="line"></div>
<section>
<article class="news">
<a href="#">Wednesday, Sept. 7: OSIRIS-REx Science and Engineering Talk (12 p.m. EDT), Asteroid Panel Discussion (1 p.m. EDT), NASA TV</a>
</article>
<article class="news">
<a href="#">Thursday, Sept. 8: Launch of OSIRIS-REx, 7:05 p.m. EDT</a>
</article>
<article class="news">
<a href="#">Registration Open: NASA Social GOES-R Weather Satellite Launch, Nov. 3-4 at Cape Canaveral</a>
</article>
</section>
</div>
<div class="nasa-events-bottom"> <div class="article-content">
<div class="line"></div> <div class="nasa-events-container">
<div class="nasa-events-top">
<div class="nasa-events-bottom-horizontal"> <p class="nasa-events-title">NASA Events</p>
<a href="#">Calendar</a>
<a href="#">Launches and Landings</a> <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>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </article>
<div class="content content-small"> <article class="content-small">
<div> <div>
<a href="#">Link</a> <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 class="overlay">
<h4>Expedition 48</h4>
<h4>NASA's Record-braking Astronaut Crewmates Safely Return to Earth</h4>
</div>
</div>
</div>
</div> </div>
</div> </article>
<div class="content content-medium"> <article class="content-medium">
<div> <div>
<a href="#">Link</a> <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>
</div>
</div> </div>
</div> </article>
<div class="content content-small"> <article class="content-small">
<div> <div>
<a href="#">Link</a> <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>
</div>
</div> </div>
</div> </article>
<div class="content content-medium"> <article class="content-medium">
<div> <div>
<a href="#">Link</a> <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>
</div>
</div> </div>
</div> </article>
<div class="content content-small"> <article class="content-small">
<div> <div>
<a href="#">Link</a> <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>
</div>
</div> </div>
</div> </article>
</section> </section>
</body> </body>
</html> </html>
\ No newline at end of file
styles.css
+ 43
− 54
View file @ fcf0adc0
...@@ -19,14 +19,6 @@ body { ...@@ -19,14 +19,6 @@ body {
background-color: #666666; background-color: #666666;
} }
/*nav ul li a {
text-decoration: none;
display: inline-block;
padding: 1em;
background-color: white;
margin: 0;
}*/
nav ul { nav ul {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
...@@ -37,36 +29,6 @@ nav ul li a { ...@@ -37,36 +29,6 @@ nav ul li a {
text-decoration: none; text-decoration: none;
} }
/*.sub-nav ul {
display: flex;
flex-direction: row;
justify-content: center;
align-content: flex-start;
height: 100%;
width: 100%;
}
.sub-nav ul li {
padding: 0.5em 0;
background-color: #777777;
}
.sub-nav ul li a {
font-size: 0.6em;
font-weight: 500;
display: block;
border-right: 0.1em solid #eeeeee;
padding: 0.5em 1em;
}
.sub-nav ul li:last-child a {
border-right: none;
}
.sub-nav ul li a {
background-color: #777777;
}*/
.nasa-img { .nasa-img {
position: absolute; position: absolute;
left: 0; left: 0;
...@@ -162,7 +124,7 @@ nav ul li a { ...@@ -162,7 +124,7 @@ nav ul li a {
border-right: 0.1em solid #eeeeee; border-right: 0.1em solid #eeeeee;
} }
.main { main {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
...@@ -181,6 +143,7 @@ nav ul li a { ...@@ -181,6 +143,7 @@ nav ul li a {
content: ""; content: "";
display: block; display: block;
padding-bottom: 100%; padding-bottom: 100%;
background-color: yellow;
} }
.content-medium { .content-medium {
...@@ -212,7 +175,7 @@ nav ul li a { ...@@ -212,7 +175,7 @@ nav ul li a {
height: 100%; height: 100%;
} }
.content-small > div { .content-small > div, .content-medium > div, .content-large > div {
padding: 0.5em; padding: 0.5em;
position: absolute; position: absolute;
width: 100%; width: 100%;
...@@ -220,23 +183,39 @@ nav ul li a { ...@@ -220,23 +183,39 @@ nav ul li a {
display: block; display: block;
} }
.content-medium > div { .article-content-container {
padding: 0.5em; display: block;
position: absolute; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: white;
}
.article-content-container > .article-link {
display: block; display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
} }
.content-large > div { .article-content-container > .article-image {
padding: 0.5em;
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 100%;
object-fit: cover;
}
.article-content-container > .article-content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%; height: 100%;
display: block;
} }
.content-small > div > a, .content-medium > div > a, .content-large > div > a { /*.content-small > div > a, .content-medium > div > a, .content-large > div > a {
display: block; display: block;
position: relative; position: relative;
width: 100%; width: 100%;
...@@ -248,7 +227,7 @@ nav ul li a { ...@@ -248,7 +227,7 @@ nav ul li a {
background-image: url('img/astronaut_landing.jpg'); background-image: url('img/astronaut_landing.jpg');
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
} }*/
.news-headline { .news-headline {
position: absolute; position: absolute;
...@@ -307,16 +286,14 @@ nav ul li a { ...@@ -307,16 +286,14 @@ nav ul li a {
margin: 0; margin: 0;
} }
.news { a.news {
display: block;
font-size: 0.7em; font-size: 0.7em;
padding: 0.2em 0; padding: 0.2em 0;
}
.nasa-events-container a {
text-decoration: none; text-decoration: none;
} }
.nasa-events-container a:hover { a.news:hover {
text-decoration: underline; text-decoration: underline;
} }
...@@ -332,6 +309,18 @@ nav ul li a { ...@@ -332,6 +309,18 @@ nav ul li a {
background-color: #eeeeee; background-color: #eeeeee;
} }
/*.news-image {
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 { /*.content-small div div, .content-medium div div, .content-large div div {
background-color: blue; background-color: blue;
}*/ }*/
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment