<!DOCTYPE html>
<html>
<head>
...
</head>
<body>
<!-- Navigation -->
...
<!-- Page backgrounds (optional) -->
<img alt class="bg" src="images/placeholders/1920x1200img1.jpg"/>
<img alt class="bg" src="images/placeholders/1920x1200img2.jpg"/>
<!-- Section -->
<section id="sec1">
<!-- View (subsection) -->
<div class="view section-header">
<!-- Multiple backgrounds (slideshow) -->
<img alt class="bg" src="images/placeholders/1920x1200img3.jpg"/>
<img alt class="bg" src="images/placeholders/1920x1200img4.jpg"/>
<!-- Content -->
<div class="content colors-a">
<h2>Section Header</h2>
...
</div>
</div>
<!-- View (subsection) -->
<div class="view section-footer">
<!-- Single background (no slideshow) -->
<img alt class="bg" src="images/placeholders/1920x1200img1.jpg"/>
<!-- Content -->
<div class="content colors-c">
<h2>Section Footer</h2>
...
</div>
</div>
</section>
<!-- Next section -->
<section id="sec2">
...
</section>
...
</body>
</html>
The template has the following structure:
If a view or page body has more than one background image, images are shown as an animated slide show.
Page body may have background video:
<section id="sec1">
<div class="view">
<img alt class="bg" src="images/placeholders/1920x1200img1.jpg"/>
<div class="content colors-f">
<h3>Section 1 View</h3>
</div>
</div>
<div class="view">
<div class="content colors-g background-100">
<h3>Section 1 View</h3>
</div>
</div>
</section>
<section id="sec2">
<div class="view">
<img alt class="bg" src="images/placeholders/1920x1200img2.jpg"/>
<div class="content colors-d">
<h3>Section 2 View</h3>
</div>
</div>
<div class="view">
<img alt class="bg" src="images/placeholders/1920x1200img3.jpg"/>
<div class="content colors-f">
<h3>Section 2 View</h3>
</div>
</div>
<div class="view">
<img alt class="bg" src="images/placeholders/1920x1200img4.jpg"/>
<div class="content colors-c">
<h3>Section 2 View</h3>
</div>
</div>
</section><img alt class="bg" src="images/placeholders/1920x1200img1.jpg"/>
<img alt class="bg" src="images/placeholders/1920x1200img2.jpg"/>
<section id="sec1">
<div class="view">
<div class="content full-size colors-c">
<h3>Section 1 View</h3>
</div>
</div>
<div class="view">
<div class="content colors-b">
<h3>Section 1 View</h3>
</div>
</div>
</section>
<section id="sec2">
<div class="view">
<img alt class="bg" src="images/placeholders/1920x1200img3.jpg"/>
<div class="content colors-f">
<h3>Section 2 View</h3>
</div>
</div>
<div class="view">
<div class="content colors-d">
<h3>Section 2 View</h3>
</div>
</div>
</section><div class="vimeo-bg" data-video="75124475" data-volume="0" data-alternative="images/placeholders/1920x1200img3.jpg"></div>
<section id="sec1">
<div class="view">
<div class="content colors-b">
<h3>Section 1</h3>
</div>
</div>
</section>
<section id="sec2">
<div class="view">
<img alt class="bg" src="images/placeholders/1920x1200img1.jpg"/>
<img alt class="bg" src="images/placeholders/1920x1200img2.jpg"/>
<div class="content colors-c">
<h3>Section 2 View</h3>
</div>
</div>
<div class="view">
<div class="content colors-f">
<h3>Section 2 View</h3>
</div>
</div>
<div class="view">
<div class="content colors-d">
<h3>Section 2 View</h3>
</div>
</div>
</section>