Create NASA Events section

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

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 {