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