From e1608702616e8b2a58356ac290fd590784703b35 Mon Sep 17 00:00:00 2001
From: Silas Meister <silas.meister@stud.h-da.de>
Date: Sun, 10 Sep 2023 20:10:46 +0200
Subject: [PATCH] Finish banner
---
img/camera.png | Bin 0 -> 1801 bytes
index.html | 14 ++++++++--
styles.css | 74 +++++++++++++++++++++++++++++++++++++++++++++----
3 files changed, 79 insertions(+), 9 deletions(-)
create mode 100644 img/camera.png
diff --git a/img/camera.png b/img/camera.png
new file mode 100644
index 0000000000000000000000000000000000000000..4b2537f5dafdeb0600690b80c7729f3b6fd0f109
GIT binary patch
literal 1801
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
literal 0
HcmV?d00001
diff --git a/index.html b/index.html
index 591888f..1f4fa72 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 8c011f2..b1bab06 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;
--
GitLab