Tutorial

This is a picture heavy template. Some techniques have been applied to ensure the pictures blends well into the background color.

Vignette effect of #hero

This one works better than the box-shadow technique or the gradient technique. https://stackoverflow.com/a/27634201/1922857

Animation of #hero

A staggering effect by increasing the delay of each line of text. And after that a fade in up effect of the background image to simulate someone is rising in the water

Background image gradient overlay of #contact & #footer

The techniques used to add gradient overlay to background image https://stackoverflow.com/a/16590040/1922857

The responsive #footer background image

1. click the first container of the #footer Slide
2. right side bar -> advanced background
3. you can see different aspect ratio of the image under different dimensions.
4. "backgroundImage" is for all dimensions. "md.backgroundImage" is when dimension is larger than medium, meaning desktop.

Credits

Photo by Jeremy Bishop on Unsplash

Photo by guille pozzi on Unsplash

Photo by Levi Arnold on Unsplash

Photo by Szabo Viktor on Unsplash

Photo by Alvaro Uribe on Unsplash

Photo by David Billings on Unsplash