Fullscreen
A full-height landing section with a blurred background and a centred title. Set the background image on background yourself.
| Class | Description |
|---|---|
fullscreen | Section as tall as its container, usually the whole window |
fullscreen.half | Shorter background and smaller title |
background | The blurred, darkened background image |
center-object | Centres its content over the background |
me | Title block, stacked vertically |
me.unset | Puts the image beside the text instead of above it, wrap the text in another unset |
image-title | Round avatar image |
image-title.large-border | Large rounded corners instead of a circle |
image-title.medium-border | Medium rounded corners |
image-title.small-border | Small rounded corners |
image-title.no-border | Square image |
title | Large heading |
undertitle | Smaller line below the title |
arrow | Scroll hint pinned to the bottom of the section |
arrow--scrolled | Fades the arrow out, add it with JavaScript once the visitor scrolls |
bounce | Makes an element bounce forever |
<div class="fullscreen">
<div class="background" style="background-image: linear-gradient(135deg, #7289da, #1abc9c)"></div>
<div class="center-object">
<div class="me">
<div class="image-title sun-flower-bg"></div>
<h1 class="title">Hello</h1>
<p class="undertitle">Welcome to my site</p>
</div>
</div>
<div class="arrow bounce" style="text-align: center; font-size: 2em">↓</div>
</div>