diff --git a/img/astronaut.jpg b/img/astronaut.jpg new file mode 100644 index 0000000000000000000000000000000000000000..a4515611f82fa11be991409a09a4fab21093ac1d Binary files /dev/null and b/img/astronaut.jpg differ diff --git a/img/astronaut_landing.jpg b/img/astronaut_landing.jpg new file mode 100644 index 0000000000000000000000000000000000000000..35b942db90bc010f6d9fa9d405d487e15f06b528 Binary files /dev/null and b/img/astronaut_landing.jpg differ diff --git a/index.html b/index.html index 9ac818e8f967998f569932de97492ce84c13c2ad..591888fa6bd4c4f49b6781663668db2c3d7eeb33 100644 --- a/index.html +++ b/index.html @@ -43,5 +43,70 @@ </ul> </nav> </header> + + <section class="main"> + <div class="content content-large"> + <a href="#"> + <img class="slide-img" src="img/astronaut_landing.jpg" /> + </a> + </div> + <div class="content 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="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 class="content content-small"> + <div> + <a href="#">Link</a> + </div> + </div> + <div class="content content-medium"> + <div> + <a href="#">Link</a> + </div> + </div> + <div class="content content-small"> + <div> + <a href="#">Link</a> + </div> + </div> + <div class="content content-medium"> + <div> + <a href="#">Link</a> + </div> + </div> + <div class="content content-small"> + <div> + <a href="#">Link</a> + </div> + </div> + </section> </body> </html> \ No newline at end of file diff --git a/styles.css b/styles.css index c655d1066460e9aa3fecaa1381717d4aad4e53b9..8c011f2e44fea035a6c63ac6ec0752e87b461fbb 100644 --- a/styles.css +++ b/styles.css @@ -16,7 +16,6 @@ body { background-repeat: repeat; background-position: center; background-size: auto 100%; - height: auto; background-color: #666666; } @@ -163,6 +162,118 @@ nav ul li a { border-right: 0.1em solid #eeeeee; } +.main { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-content: flex-start; + width: 100%; + padding-top: 1em; +} + +.content-small { + position: relative; + display: block; +} + +.content-small { + flex: 0 0 25%; +} + +.content-small:after { + content: ""; + display: block; + padding-bottom: 100%; +} + +.content-medium { + flex: 0 0 50%; +} + +.content-medium:after { + content: ""; + display: block; + padding-bottom: 50%; +} + +.content-large { + flex: 0 0 100%; +} + +.content-large:after { + content: ""; + display: block; + padding-bottom: 25%; + background-color: yellow; +} + +.slide-img { + width: 100%; + object-fit: cover; + height: 100%; +} + +.content-small > div { + padding: 0.5em; + position: absolute; + width: 100%; + height: 100%; + display: block; +} + +.content-small > div > a { + display: block; + width: 100%; + height: 100%; + text-decoration: none; +} + +.nasa-events-container { + display: flex; + flex-direction: column; + justify-content: space-between; + background-color: #39719e; + padding: 0.3em 0.5em 0; + width: 100%; + height: 100%; +} + +.nasa-events-title { + font-size: 0.8em; + padding: 0.2em 0; + margin: 0; +} + +.news { + font-size: 0.7em; + padding: 0.2em 0; +} + +.nasa-events-container a { + text-decoration: none; +} + +.nasa-events-container a:hover { + text-decoration: underline; +} + +.nasa-events-bottom-horizontal { + display: flex; + flex-direction: row; + justify-content: space-evenly; + font-size: 0.8rem; +} + +.line { + height: 0.05em; + background-color: #eeeeee; +} + +/*.content-small div div, .content-medium div div, .content-large div div { + background-color: blue; +}*/ + /* Extra small devices (phones, 600px and down) */ @media only screen and (max-width: 600px) { body {