diff --git a/img/return.jpg b/img/return.jpg new file mode 100644 index 0000000000000000000000000000000000000000..517a24ead089a6e827f7644cc6a0c6fb2c611b6b Binary files /dev/null and b/img/return.jpg differ diff --git a/index.html b/index.html index 1f4fa72f129cfc5c33424d8d28d0748f15fef3e9..51d5f7c51451a6be434e957dcd3c5f1047cc6afe 100644 --- a/index.html +++ b/index.html @@ -44,77 +44,124 @@ </nav> </header> - <section class="main"> - <div class="content content-large"> + <main> + <article class="content-large"> <div> - <a class="astronaut-landing" href="#"> - <div class="news-headline"> - <h3>Space Station</h3> - <h2>Expedition 48 Crew Lands Safely on Earth</h2> - </div> + <div class="article-content-container"> + <a class="article-link" href="#"></a> + + <img class="article-image" src="img/astronaut_landing.jpg" /> - <div class="camera-triangle"></div> - <img class="camera-img" src="img/camera.png" /> - </a> + <div class="article-content"> + <div 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> - </div> - <div class="content content-small"> + </article> + <article class="content-small"> <div> - <div class="nasa-events-container"> - <div class="nasa-events-top"> - <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="article-content-container"> + <a class="article-link" href="#"></a> - <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 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> </div> </div> </div> </div> - </div> - <div class="content content-small"> + </article> + <article class="content-small"> <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 class="content content-medium"> + </article> + <article class="content-medium"> <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 class="content content-small"> + </article> + <article class="content-small"> <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 class="content content-medium"> + </article> + <article class="content-medium"> <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 class="content content-small"> + </article> + <article class="content-small"> <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> + </article> </section> </body> </html> \ No newline at end of file diff --git a/styles.css b/styles.css index b1bab06c54e906e9ab4141dd7263e0ee30428c92..68bc7d3c1a5632146ef1d5328db107aa687262a5 100644 --- a/styles.css +++ b/styles.css @@ -19,14 +19,6 @@ body { background-color: #666666; } -/*nav ul li a { - text-decoration: none; - display: inline-block; - padding: 1em; - background-color: white; - margin: 0; -}*/ - nav ul { list-style-type: none; margin: 0; @@ -37,36 +29,6 @@ nav ul li a { 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 { position: absolute; left: 0; @@ -162,7 +124,7 @@ nav ul li a { border-right: 0.1em solid #eeeeee; } -.main { +main { display: flex; flex-direction: row; flex-wrap: wrap; @@ -181,6 +143,7 @@ nav ul li a { content: ""; display: block; padding-bottom: 100%; + background-color: yellow; } .content-medium { @@ -212,7 +175,7 @@ nav ul li a { height: 100%; } -.content-small > div { +.content-small > div, .content-medium > div, .content-large > div { padding: 0.5em; position: absolute; width: 100%; @@ -220,23 +183,39 @@ nav ul li a { display: block; } -.content-medium > div { - padding: 0.5em; - position: absolute; +.article-content-container { + display: block; + position: relative; width: 100%; - height: 100%; + height: 100%; + background-color: white; +} + +.article-content-container > .article-link { display: block; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; } -.content-large > div { - padding: 0.5em; +.article-content-container > .article-image { position: absolute; width: 100%; + height: 100%; + object-fit: cover; +} + +.article-content-container > .article-content { + position: absolute; + top: 0; + left: 0; + width: 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; position: relative; width: 100%; @@ -248,7 +227,7 @@ nav ul li a { background-image: url('img/astronaut_landing.jpg'); background-size: cover; background-repeat: no-repeat; -} +}*/ .news-headline { position: absolute; @@ -307,16 +286,14 @@ nav ul li a { margin: 0; } -.news { +a.news { + display: block; font-size: 0.7em; padding: 0.2em 0; -} - -.nasa-events-container a { text-decoration: none; } -.nasa-events-container a:hover { +a.news:hover { text-decoration: underline; } @@ -332,6 +309,18 @@ nav ul li a { 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 { background-color: blue; }*/