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

Finish assignment 1

parent 5486ba59
Branches
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 @@ ...@@ -5,7 +5,6 @@
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<script src="functions.js"></script> <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" /> <link rel="stylesheet" type="text/css" href="styles.css" />
</head> </head>
<body onload=""> <body onload="">
...@@ -99,10 +98,11 @@ ...@@ -99,10 +98,11 @@
<img class="article-image" src="img/astronaut.jpg"></img> <img class="article-image" src="img/astronaut.jpg"></img>
<div class="article-content"> <div class="article-content overlay">
<div class="overlay"> <h4 class="overlay-title">Expedition 48</h4>
<h4 class="overlay-title">Expedition 48</h4> <div class="overlay-description">
<h4 class="overlay-description">NASA's Record-braking Astronaut Crewmates Safely Return to Earth</h4> <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> </div>
</div> </div>
......
styles.css
+ 35
− 4
View file @ 11418de5
...@@ -333,6 +333,7 @@ main { ...@@ -333,6 +333,7 @@ main {
font-size: 0.8rem; font-size: 0.8rem;
} }
.overlay { .overlay {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -356,11 +357,40 @@ main { ...@@ -356,11 +357,40 @@ main {
opacity: 0.85; opacity: 0.85;
margin: 0; margin: 0;
padding: 0.5rem; padding: 0.5rem;
font-weight: 500; }
.overlay-description > * {
color: #111111; color: #111111;
margin: 0;
font-size: 0.9rem; 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 { .nasa-launch {
background-color: #eeeeee; background-color: #eeeeee;
} }
...@@ -399,6 +429,7 @@ main { ...@@ -399,6 +429,7 @@ main {
height: 100%; height: 100%;
} }
/*.content-small div div, .content-medium div div, .content-large div div { /*.content-small div div, .content-medium div div, .content-large div div {
background-color: blue; background-color: blue;
}*/ }*/
...@@ -434,7 +465,7 @@ main { ...@@ -434,7 +465,7 @@ main {
font-size: 0.7rem; font-size: 0.7rem;
} }
.overlay > .overlay-description { .overlay-description > * {
font-size: 0.7rem; font-size: 0.7rem;
} }
...@@ -509,7 +540,7 @@ main { ...@@ -509,7 +540,7 @@ main {
font-size: 0.8rem; font-size: 0.8rem;
} }
.overlay > .overlay-description { .overlay-description > * {
font-size: 0.8rem; font-size: 0.8rem;
} }
...@@ -570,7 +601,7 @@ main { ...@@ -570,7 +601,7 @@ main {
font-size: 0.9rem; font-size: 0.9rem;
} }
.overlay > .overlay-description { .overlay-description > * {
font-size: 0.9rem; font-size: 0.9rem;
} }
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment