To Top

### Credits

- Photos by:
  - Katya Alagich, CC BY 2.0 License
  - Jim Lukach, CC BY 2.0 License
  - Johan Larsson, CC BY 2.0 License
  - John Kraus, CC BY 2.0 License
  - THOR, CC BY 2.0 License
  - stephane, CC BY 2.0 License
  - Pexels, CC0 License
  - Stocksnap, CC0 License
  - Picjumbo, Picjumbo License
- Video by:
  - Mazwai, CC BY 3.0 License
- Icons by:
  - Designmodoh, License

## Page Layout

Skrollex Documentation

### Page Representation

    <!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>

#### Page Structure

The template has the following structure:

- body
  - background image (optional)
  - background image (optional)
  - section
    - view
      - background image (optional)
      - background image (optional)
      - ...
      - content
    - view
      - ...
    - ...
  - section
    - ...
  - ...

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:

- body
  - background video (optional)
  - section
  - section
  - ...

### Layout Examples

#### Source 1

    <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>

#### Result 1

Show

#### Source 2

    <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>

#### Result 2

Show

#### Source 3

    <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>

#### Result 3

Show
Table of contents Next: Color Schemes