diff --git a/img/camera.png b/img/camera.png new file mode 100644 index 0000000000000000000000000000000000000000..4b2537f5dafdeb0600690b80c7729f3b6fd0f109 Binary files /dev/null and b/img/camera.png differ diff --git a/index.html b/index.html index 591888fa6bd4c4f49b6781663668db2c3d7eeb33..1f4fa72f129cfc5c33424d8d28d0748f15fef3e9 100644 --- a/index.html +++ b/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> diff --git a/styles.css b/styles.css index 8c011f2e44fea035a6c63ac6ec0752e87b461fbb..b1bab06c54e906e9ab4141dd7263e0ee30428c92 100644 --- a/styles.css +++ b/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;