HTML Structure
Here is the general structure of the HTML pages (index and item.html) :
- The HTML head Tag contains meta data for SEO, CSS include and social networks meta data.
- The header (at top) of a page is nested within a tag with class
page-header
. It includes the logo (left), the menu icon (right), the menu contents and the side bar naav. - The navigation menu (Sidebar Menu), located within the
page-header
is nested within a nav tag with a classmain-menu
. - The background cover of the page is nested within a div tag with a class
page-cover
. -
The main content of the page is nested within a tag with a class
page-main
. Inside, each section (slide) is embeded within a div tag with a classsection
. It contains one or several section, represented by div with classsection
- And the footer of the page, containing basic information such as copyright notice or social networks links. It is located within the footer tag with class
page-footer
.
Title and description for SEO - top
The <head>
tag contains the Title and description of the tag, used
by search engine to identify your website. It may also include, third-party meta,
such as social network meta (mainly Facebook and Twitter) helping them to describe your website.
Change the title and the description of your page by editing the title
tag value, and the content
value of the tag <meta name="description" content="YOUR DESCRIPTION">
.
Additionaly, you can add Facebook Opengraph data or Twitter metadata for better compatibility with these social networks.
Required CSS are also included within the <head>
tag with <link rel="stylesheet" href="...">
.
Here is the structure of the <head>
tag :
Page Header - top
The header , positioned at the top of the screen, are located within the div with a
header-top
class.
It contains the menu icon (the
button
tag with class
site-menu-icon
), the logo (within the a tag with
nav-brand
class), the main menu (within a nav with class
navbar-mainmenu
) and the sidebar menu (The nav with class
navbar-sidebar
).
Here is the structure of the
<header class="page-header ...">
tag :
Replace your
img/logo.png
by your logo URL or go to img folder and replace logo.png sample image with yours.
The
button
tag with class
site-menu-icon
displays the menu icon. Within it, there is a span tag with class
menu-icon
. Add class
menu-icon-thick
,
menu-icon-random
,
menu-icon-dot
or
menu-icon-default
to change its appearance.
You can change the position of menu icon and the logo image position by adding the following classes to the page-header
:
menu-left
: Put the menu icon at leftmenu-right
: Put the menu icon at righttopmenu-left
: Put the menu logo at righttopmenu-right
: Put the menu icon at left
The main menu content is located within a nav with class navbar-mainmenu
located under the all-menu-wrapper
div.
Duplicate the li
content to add more navigation items and links
The nav with class navbar-sidebar
represent the sidebar menu positioned at left.
It is explained below :
Background cover of the page - top
This part represents the fullscreen background image, background video or particles animations of the page. It is located within the tag with a class page-cover
It can embed layers of ;
Static image background
Edit the data-image-src
attribute of the cover-bg
div to match to your background image url or source such as :
Replace bg_default.jpg
by yours or with an image url
Solid color as filter or background
To add a solid color layer as mask or as background of the page, add the following code within the page-cover
div tag, and replace the data-bgcolor
with a color value:
Check out index-solidcolor.html
for a demo.
Particle as filter or background
To add a particle layer as mask or as background of the page, add the following code within the page-cover
div tag:
Also, in the script emplacement (at the bottom of the body tag), add the following lines :
You can edit the data-bgcolor="rgba(37, 38, 42, 0.81)
value to change background or filter color.
Check out index-particlebg.html
or index-snowbg.html
for demo.
Slideshow images background
To add slideshow images as background of the page, add the following code within the page-cover
div tag:
The <i class='img' data-src='./img/bg-defaultURL.jpg'></i>
line represents a picture slide.
Check out index-slideshow.html
for a demo.
Video as background
Add the following code within the previous page-cover
div tag and edit the source url <source src="..." >
to match to your video (replace the flower_loop.mp4 video under the vid folder by another one) :
Check out index-video.html
for a demo.
Video background are deactivated on mobile device for performance reason. To activate it, just remove the d-none
class.
Youtube, Vimeo Video as background
Add the following code within the previous page-cover
div tag and edit the source url <iframe src="..." >
to match to your youtube video url (just replace the ID_OF_VIDEO
by the youtube video ID) :
For Vimeo or facebook video, replace the iframe by provided Vimeo or Facebook embed code.
Main content of the Page - top
The main content of the page is located within the div with a class page-main
For the main index.html file or index-XXX.html file, this main tag should have an id="mainpage"
. Class main-anim
will enable animation on page scroll.
For the page item.html, the id of the main tag should be id="itempage"
.
And For the page gallery.html, this id should be id="itempage"
.
The >main class="page-main ..." id="..."<
is a combination of multiple components called Section.
A section is represented with a div or section tag with class section
.
Check out the section list to see all available sections layout :