From 11418de5dc2234f48d2a495628b3ca23c08f1a16 Mon Sep 17 00:00:00 2001
From: Silas Meister <silas.meister@stud.h-da.de>
Date: Sun, 17 Sep 2023 15:09:35 +0200
Subject: [PATCH] Finish assignment 1
---
index.html | 10 +++++-----
styles.css | 39 +++++++++++++++++++++++++++++++++++----
2 files changed, 40 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index 0d5d755..8c939ca 100644
--- a/index.html
+++ b/index.html
@@ -5,7 +5,6 @@
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="functions.js"></script>
- <script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body onload="">
@@ -99,10 +98,11 @@
<img class="article-image" src="img/astronaut.jpg"></img>
- <div class="article-content">
- <div class="overlay">
- <h4 class="overlay-title">Expedition 48</h4>
- <h4 class="overlay-description">NASA's Record-braking Astronaut Crewmates Safely Return to Earth</h4>
+ <div class="article-content overlay">
+ <h4 class="overlay-title">Expedition 48</h4>
+ <div class="overlay-description">
+ <h4>NASA's Record-braking Astronaut Crewmates Safely Return to Earth</h4>
+ <p>Here is some additional information to the article where you can read more!</p>
</div>
</div>
</div>
diff --git a/styles.css b/styles.css
index cf7ed2a..4b9f455 100644
--- a/styles.css
+++ b/styles.css
@@ -333,6 +333,7 @@ main {
font-size: 0.8rem;
}
+
.overlay {
display: flex;
flex-direction: column;
@@ -356,11 +357,40 @@ main {
opacity: 0.85;
margin: 0;
padding: 0.5rem;
- font-weight: 500;
+}
+
+.overlay-description > * {
color: #111111;
+ margin: 0;
font-size: 0.9rem;
}
+.overlay-description > h4 {
+ font-weight: 500;
+}
+
+.overlay-description > p {
+ display: none;
+}
+
+.overlay-description:hover > p {
+ display: block;
+}
+
+.overlay > .overlay-additional-information {
+ display: none;
+ background-color: #eeeeee;
+ opacity: 0.85;
+ margin: 0;
+ padding: 0.5rem;
+ font-size: 0.9em;
+ color: #111111;
+}
+
+.overlay > .overlay-description:hover + .overlay-additional-information {
+ display: block;
+}
+
.nasa-launch {
background-color: #eeeeee;
}
@@ -399,6 +429,7 @@ main {
height: 100%;
}
+
/*.content-small div div, .content-medium div div, .content-large div div {
background-color: blue;
}*/
@@ -434,7 +465,7 @@ main {
font-size: 0.7rem;
}
- .overlay > .overlay-description {
+ .overlay-description > * {
font-size: 0.7rem;
}
@@ -509,7 +540,7 @@ main {
font-size: 0.8rem;
}
- .overlay > .overlay-description {
+ .overlay-description > * {
font-size: 0.8rem;
}
@@ -570,7 +601,7 @@ main {
font-size: 0.9rem;
}
- .overlay > .overlay-description {
+ .overlay-description > * {
font-size: 0.9rem;
}
--
GitLab