<main>
<header>
<video autoplay loop>
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/forest-fire.webm">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/forest-fire.mp4">
</video>
<h1>A world Aflame</h1>
<a href="#maincontent">▼</a>
</header>
<div id="maincontent">
<p>Wildfires continue to rage across California, fed by high temperatures and years of drought. More than 23,000 people are homeless tonight in the north of the state, driven before walls of flame that have consumed towns in the Napa and Lake counties.
<p>The <a href="http://www.redcross.org/">Red Cross is accepting donations</a>: money provided to the Western Wildfire fund also go to relief efforts in Washington State, Utah, and other western states that have suffered an unprecedented wave of fires.
</div>
</main>@keyframes downwardprompt {
to { transform: translateY(2rem); opacity: 0; }
}
* {
box-sizing: border-box;
}
body {
background: #222;
margin: 0;
font-family: Avenir, Helvetica, sans-serif;
}
main {
width: 80%;
max-width: 750px;
margin: 0 auto;
background: #ffe;
}
main > header {
position: relative;
}
main > header video {
width: 100%;
height: auto;
}
main > header h1 {
position: absolute;
bottom: 40%;
left: 1rem;
font-size: 4rem;
text-transform: uppercase;
mix-blend-mode: overlay;
line-height: 1;
}
main > header a {
display: block;
text-decoration: none;
font-size: 2rem;
color: #fff;
opacity: .5;
position: absolute;
bottom: 1.5rem;
width: 100%;
text-align: center;
transition: .3s;
animation: downwardprompt 2s 1s;
}
main > header a:hover {
opacity: 1;
}
#maincontent {
padding: 2rem;
}
@media all and (max-width: 750px) {
main {
width: 100%;
}
}
@media all and (max-width: 500px) {
main > header h1 {
bottom: 20%;
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.