Skip to content
Snippets Groups Projects
Commit 11418de5 authored by Silas Meister's avatar Silas Meister
Browse files

Finish assignment 1

parent 5486ba59
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
index.html
+ 5
− 5
View file @ 11418de5
......@@ -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>
......
styles.css
+ 35
− 4
View file @ 11418de5
......@@ -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;
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment