Sections

The main content (<main class="page-main ...">...) of an HTML page is a mixture of multiple sections.

A section is represented by a div with a section class. Arrange them, add one, remove one or even, you can create your owns.

Important : A section must have an attribute called data-section which represents the id of this section (after JavaScript processing). It must be unique per HTML file.

To remove one of these section, just remove the corresponding line of code.

To add a new fullscreen section , duplicate one of them, and edit it.

Here are all the sections available to you, select one of them to see the details :

Helper Class

Add class section-text-bright to a section to force white text color, or section-text-dark for black text color

In index.html, to disable the fullpage.js plugin by just rename the id of the main tag page-main. Use a different value other than mainpage.

Section Background Color

Add the following HTML code just at the begining of the opening tag of a section :

Background Color
<div class="section-cover-full fit bg-color" data-bgcolor="rgb(255,0,0)"></div>

Section Background Image

Add the following HTML code just at the begining of the opening tag of a section to add background image :

Background Image
<div class="section-cover-full bg-img" data-image-src="IMAGE_URL"></div>

Use section-cover-tier class for 1/3 cover size, and add class left or right to change its position.