<header class="hero"></header>
<article>
<h1>Hero Article Title <span class="byline">by Jeff Goldblum</span></h1>
<p>Checkmate... Did he just throw my cat out of the window? You really think you can fly that thing? Life finds a way. We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this planet enough, they won't want it anymore!</p>
<p>This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Jaguar shark! So tell me - does it really exist? Life finds a way.</p>
<p>You really think you can fly that thing? I gave it a cold? I gave it a virus. A computer virus. Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Eventually, you do plan to have dinosaurs on your dinosaur tour, right? I gave it a cold? I gave it a virus. A computer virus.</p>
<p>Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? What do they got in there? King Kong? Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Life finds a way. Yes, Yes, without the oops! Hey, you know how I'm, like, always trying to save the planet? Here's my chance.</p>
<p>Yes, Yes, without the oops! Remind me to thank John for a lovely weekend. Remind me to thank John for a lovely weekend. Jaguar shark! So tell me - does it really exist? Must go faster... go, go, go, go, go! I was part of something special. God help us, we're in the hands of engineers.</p>
<p>Checkmate... Did he just throw my cat out of the window? You really think you can fly that thing? Life finds a way. We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this planet enough, they won't want it anymore!</p>
<p>This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Jaguar shark! So tell me - does it really exist? Life finds a way.</p>
<p>You really think you can fly that thing? I gave it a cold? I gave it a virus. A computer virus. Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Eventually, you do plan to have dinosaurs on your dinosaur tour, right? I gave it a cold? I gave it a virus. A computer virus.</p>
<p>Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? What do they got in there? King Kong? Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Life finds a way. Yes, Yes, without the oops! Hey, you know how I'm, like, always trying to save the planet? Here's my chance.</p>
<p>Yes, Yes, without the oops! Remind me to thank John for a lovely weekend. Remind me to thank John for a lovely weekend. Jaguar shark! So tell me - does it really exist? Must go faster... go, go, go, go, go! I was part of something special. God help us, we're in the hands of engineers.</p>
<p>Checkmate... Did he just throw my cat out of the window? You really think you can fly that thing? Life finds a way. We gotta burn the rain forest, dump toxic waste, pollute the air, and rip up the OZONE! 'Cause maybe if we screw up this planet enough, they won't want it anymore!</p>
<p>This thing comes fully loaded. AM/FM radio, reclining bucket seats, and... power windows. God creates dinosaurs. God destroys dinosaurs. God creates Man. Man destroys God. Man creates Dinosaurs. Jaguar shark! So tell me - does it really exist? Life finds a way.</p>
<p>You really think you can fly that thing? I gave it a cold? I gave it a virus. A computer virus. Eventually, you do plan to have dinosaurs on your dinosaur tour, right? Eventually, you do plan to have dinosaurs on your dinosaur tour, right? I gave it a cold? I gave it a virus. A computer virus.</p>
<p>Is this my espresso machine? Wh-what is-h-how did you get my espresso machine? What do they got in there? King Kong? Hey, you know how I'm, like, always trying to save the planet? Here's my chance. Life finds a way. Yes, Yes, without the oops! Hey, you know how I'm, like, always trying to save the planet? Here's my chance.</p>
<p>Yes, Yes, without the oops! Remind me to thank John for a lovely weekend. Remind me to thank John for a lovely weekend. Jaguar shark! So tell me - does it really exist? Must go faster... go, go, go, go, go! I was part of something special. God help us, we're in the hands of engineers.</p>
</article>html,
body {
margin: 0;
}
body {
font-family: "Helvetica Neue", "Helvetica", "Arial", sans-serif;
}
header {
background-image: url(https://images.unsplash.com/photo-1502218808493-e5fd26249efc?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
background-size: cover;
background-repeat: no-repeat;
height: 500px;
position: sticky;
top: 0;
z-index: 0;
}
article {
position: relative;
z-index: 1;
background: white;
padding: 20px;
h1 {
margin-top: -100px;
margin-left: -20px;
margin-bottom: 20px;
width: 100%;
padding: 20px 20px 10px 20px;
font-size: 40px;
line-height: 40px;
position: sticky;
top: 0px;
backdrop-filter: blur(20px);
background-image: linear-gradient(
to top,
rgba(black, 0.75),
rgba(black, 0.6)
);
color: white;
text-shadow: 3px 3px 10px rgba(black, 0.5);
.byline {
font-size: 14px;
}
}
p {
margin: 0 0 20px 0;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.