Finish banner

index.html

@@ -46,9 +46,17 @@
 
         <section class="main">
             <div class="content content-large">
-                <a href="#">
-                    <img class="slide-img" src="img/astronaut_landing.jpg" />
-                </a>
+                <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="camera-triangle"></div>
+                        <img class="camera-img" src="img/camera.png" />
+                    </a>
+                </div>
             </div>
             <div class="content content-small">
                 <div>

styles.css

@@ -174,10 +174,6 @@ nav ul li a {
 
 .content-small {
     position: relative;
-    display: block;
-}
-
-.content-small {
     flex: 0 0 25%;
 }
 
@@ -188,6 +184,7 @@ nav ul li a {
 }
 
 .content-medium {
+    position: relative;
     flex: 0 0 50%;
 }
 
@@ -195,9 +192,11 @@ nav ul li a {
     content: "";
     display: block;
     padding-bottom: 50%;
+    background-color: #555555;
 }
 
 .content-large {
+    position: relative;
     flex: 0 0 100%;
 }
 
@@ -205,7 +204,6 @@ nav ul li a {
     content: "";
     display: block;
     padding-bottom: 25%;
-    background-color: yellow;
 }
 
 .slide-img {
@@ -222,13 +220,77 @@ nav ul li a {
     display: block;
 }
 
-.content-small > div > a {
+.content-medium > div {
+    padding: 0.5em;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
+.content-large > div {
+    padding: 0.5em;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: block;
+}
+
+.content-small > div > a, .content-medium > div > a, .content-large > div > a {
     display: block;
+    position: relative;
     width: 100%;
     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;
+    left: 1em;
+}
+
+.news-headline > h3 {
+    display: inline-block;
+    background-color: #39719e;
+    opacity: 0.85;
+    padding: 0.5em;
+    font-size: 1.2em;
+    margin: 0;
+}
+
+.news-headline > h2 {
+    background-color: #eeeeee;
+    opacity: 0.85;
+    padding: 0.5em;
+    color: #111111;
+    font-size: 1.3em;
+    margin: 0;
+}
+
+.camera-triangle {
+    position: absolute;
+    top: 0;
+    right: 0;
+    border-left: 2em solid transparent;
+    border-top: 2em solid #111111;
+}
+
+.camera-img {
+    position: absolute;
+    top: 0;
+    right: 0;
+    object-fit: cover;
+    width: 1em;
+    height: 1em;
+}
+
 .nasa-events-container {
     display: flex;
     flex-direction: column;