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 class main-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 class section. It contains one or several section, represented by div with class section
  • 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.
HTML Page Structure
<!doctype html>
<html class="no-js" lang="en">

<head>
  ... head tag
</head>

<body id="menu" class="body-black">
  
  <!-- BEGIN OF site header Menu -->
  <header class="page-header navbar page-header-alpha scrolled-white menu-right topmenu-right">
    ...

    <!-- begin of menu wrapper -->
    <div class="all-menu-wrapper" id="navbarMenu">

      <!-- Begin of hamburger mainmenu menu -->
      <nav class="navbar-mainmenu">
        ... menu content
      </nav>
      <!-- End of hamburger mainmenu menu -->

      <!-- Begin of sidebar nav menu params class: text-only / icon-only-->
      <nav class="navbar-sidebar ">
        ... sidebar nav content
      </nav>
      <!-- End of sidebar nav menu -->
    </div>
    <!-- end of menu wrapper -->

  </header>
  <!-- END OF site header Menu-->

  <!-- BEGIN OF page cover -->
  <div class="page-cover">
    ...
  </div>
  <!--END OF page cover -->

  <!-- BEGIN OF page main content -->
  <main class="page-main ..." id="...">
    <div class="section ..." data-section="home">
      ... A section
    </div>
    ... Another section
  </main>
  <!-- END OF page main content -->

  <!-- BEGIN OF page footer -->
  <footer id="site-footer" class="page-footer">
    ...
  </footer>
  <!-- END OF site footer -->

  <!-- scripts -->
  <!-- All Javascript plugins goes here -->
  ...
</body>

</html>

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 :

HTML Head tag
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <!-- Page Title Here -->
  <title>Simpleux - A portfolio / onepage template</title>

  <!-- Meta -->
  <!-- Page Description Here -->
  <meta name="description" content="A beautiful and creative portfolio template. It is mobile friend (responsive) and comes with smooth animations">

  <!-- Disable screen scaling-->
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, user-scalable=0">

  <!-- Web fonts and Web Icons -->
  <link rel="stylesheet" href="./fonts/opensans/stylesheet.css">
  <link rel="stylesheet" href="./fonts/ionicons.min.css">
  <link rel="stylesheet" href="./fonts/font-awesome.min.css">

  <!-- Vendor CSS style -->
  <link rel="stylesheet" href="./css/pageloader.css">

  <!-- Uncomment below to load individualy vendor CSS -->
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./js/vendor/swiper.min.css">
  <link rel="stylesheet" href="./js/vegas/vegas.min.css">

  <!-- Main CSS files -->
  <link rel="stylesheet" href="./css/main.css">

  <!-- alt layout -->
  <link rel="stylesheet" href="./css/style-tech-centered.css">

  <script src="./js/vendor/modernizr-2.7.1.min.js"></script>
</head>
HTML Structure

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 :

HTML Page Header
<!-- BEGIN OF site header Menu -->
<header class="page-header navbar page-header-alpha menu-right 

scrolled-white topmenu-right no-menu-icon">

  <!-- Begin of menu icon toggler -->
  <button class="navbar-toggler site-menu-icon" id="navMenuIcon">
    <span class="menu-icon">
      <span class="bars">
        <span class="bar1"></span>
        <span class="bar2"></span>
        <span class="bar3"></span>
      </span>
    </span>
  </button>
  <!-- End of menu icon toggler -->

  <!-- Begin of logo/brand -->
  <a class="navbar-brand" href="#">
    <span class="logo">
      <img class="light-logo" src="img/logo_white.png" alt="Logo">
      <img class="dark-logo" src="img/logo_dark.png" alt="Logo">
    </span>
    <span class="text">
      <span class="line">Landeux</span>
      <span class="line sub">Landing page template</span>
    </span>
  </a>
  <!-- End of logo/brand -->

  <!-- begin of menu wrapper -->
  <div class="all-menu-wrapper" id="navbarMenu">
    <!-- Begin of top menu -->
    <nav class="navbar-topmenu" id="topBarMenu">
      <ul class="navbar-nav navbar-nav-menu">
        <li class="nav-item active">
          <a class="nav-link" href="#home">About</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#features">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#use-case">Use case</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#pricing">Pricing</a>
        </li>
      </ul>


      <!-- Begin of CTA Actions, & Icons menu -->
      <ul class="navbar-nav navbar-nav-actions">
        <li class="nav-item">
          <a class="btn btn-outline-white btn-round" href="#download">
            Free Version
          </a>
        </li>
        <li class="nav-item cta">
          <a class="btn btn-primary bg-gradient-primary no-border btn-shadow btn-round" href="#download">
            Pro Version
          </a>
        </li>
      </ul>
      <!-- End of CTA & Icons menu -->
    </nav>
    <!-- End of top menu -->


    <nav class="navbar-action">
    </nav>
  </div>
  <!-- end of menu wrapper -->

</header>
<!-- END OF site header Menu-->

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 left
  • menu-right : Put the menu icon at right
  • topmenu-left : Put the menu logo at right
  • topmenu-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

HTML Menu contents
<!-- Begin of top menu -->
<nav class="navbar-topmenu" id="topBarMenu">
  <ul class="navbar-nav navbar-nav-menu">
    <li class="nav-item active">
      <a class="nav-link" href="#home">About</a>
    </li>
    <!-- Add another menu here -->
  </ul>


  <!-- Begin of CTA Actions, & Icons menu -->
  <ul class="navbar-nav navbar-nav-actions">
    <li class="nav-item">
      <a class="btn btn-outline-white btn-round" href="#download">
        Free Version
      </a>
    </li>
    <li class="nav-item cta">
      <a class="btn btn-primary bg-gradient-primary no-border btn-shadow btn-round" href="#download">
        Pro Version
      </a>
    </li>
  </ul>
  <!-- End of CTA & Icons menu -->
</nav>
<!-- End of top menu -->

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

HTML Background cover
<!-- BEGIN OF page cover -->
<div class="page-cover">
    ...
</div>
<!-- END OF 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 :

HTML static image
<div class="cover-bg pos-abs full-size bg-img" data-image-src="img/bg_default.jpg"></div>

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:

HTML solid background
<div class="cover-bg pos-abs full-size bg-color" data-bgcolor="rgba(55,55,55,1)" />

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:

HTML Particles
<div
  id="particles-js"
  class="cover-bg pos-abs full-size bg-color"
  data-bgcolor="rgba(37, 38, 42, 0.81)"
/>

Also, in the script emplacement (at the bottom of the body tag), add the following lines :

HTML Particles
<script src="./js/particlejs/particles.min.js"></script>
<script src="./js/particlejs/particles-init.js"></script>

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:

HTML Slideshow
<div class="cover-bg pos-abs full-size slide-show">
  <i class="img" data-src="./img/bg-default1.jpg" />
  <i class="img" data-src="./img/bg-default2.jpg" />
  <i class="img" data-src="./img/bg-default3.jpg" />
  <i class="img" data-src="./img/bg-default4.jpg" />
</div>

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

HTML Video
<div id="container" class="video-container d-none d-md-block">
  <video autoplay="autoplay" loop="loop" autobuffer="autobuffer" muted="muted"
       width="640" height="360">
    <source src="vid/flower_loop.mp4" type="video/mp4">
  </video>
</div>

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

HTML Youtube Video
<div class="youtube-container video-container">
  <iframe
    frameborder="0"
    src="https://youtube.com/embed/ID_OF_VIDEO?autoplay=1&controls=0&showinfo=0&autohide=1"/>
</div>

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

HTML Page Main content
<!-- BEGIN OF site main content content here -->
<main class="page-main  ..." id="...">
    <div class="section ..." ...>
        ... A section
    </div>
    ... Another section
</main>
<!-- END OF site main content content here -->

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 :

Section List