Created
February 22, 2017 19:24
-
-
Save stuartpearman/0b1ed12a912b66c04f381cc11d21518c to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<header class="hero"> | |
<div class="hero--backdrop backdrop"></div> <!-- This div only exists to hold background image --> | |
<div class="hero--content container"> | |
<h1>A Quirky new product</h1> | |
<p class="tagline">Our product does something <strong>slightly different</strong> than its competitors</p> | |
<button>BUY! DON'T THINK, BUY IMMEDIATELY.</button> | |
</div> <!-- /.hero--content --> | |
</header> | |
<div style="text-align: center; margin-top: 50px;"> <!-- Filler content to show scroll effect --> | |
<h2>more content</h2> | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.hero { | |
height: 100vh; | |
background: #0ac; /* Adjust this to change filter color */ | |
color: #fff; | |
overflow: hidden; | |
} | |
.hero--content { | |
margin-top: 25vh; | |
text-align: center; | |
} | |
.backdrop { /* backdrop general styles */ | |
position: absolute; | |
top: 0; | |
bottom: 0; | |
left: 0; | |
right: 0; | |
} | |
.hero--backdrop { /* specific backdrop styles */ | |
background-image: url(https://upload.wikimedia.org/wikipedia/commons/e/e8/Neuschwanstein_Castle_LOC_print_rotated.jpg); | |
background-size: cover; | |
background-attachment: fixed; | |
opacity: 0.3; /* Adjust this to change filter density */ | |
} | |
/* extra styles to make things pretty */ | |
body { | |
margin: 0; | |
height: 180vh; | |
} | |
.hero--content h1 { | |
font-weight: 900; | |
font-size: 2.8em; | |
text-transform: uppercase; | |
} | |
.hero--content button { | |
color: #fff; | |
border-color: #fff; | |
} | |
.hero--content p.tagline { | |
font-size: 1.2em; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment