Simpleux - A portfolio / onepage template

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>

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 :

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

  <!-- Twitter Meta Here -->

  <!-- Facebook Meta Here -->

  <!-- Place favicon.ico and apple-touch-icon(s) in the root directory -->
  <!-- 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.css">
  <link rel="stylesheet" href="./js/vendor/swiper.min.css">
  <link rel="stylesheet" href="./js/vendor/jquery.fullpage.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-color5.css"> -->

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

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 scrolled-white menu-right topmenu-right">
    
    <!-- Begin of menu icon toggler -->
    <button class="navbar-toggler site-menu-icon" id="navMenuIcon">
        <span class="menu-icon menu-icon-random">
        <div class="bars">
            <div class="bar1"></div>
            <div class="bar2"></div>
            <div class="bar3"></div>
        </div>
        </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.png" alt="Logo">
        </span>
        <span class="text">
        <span class="line">Simpleux</span>
        <span class="line sub">Portfolio Template</span>
        </span>
    </a>
    <!-- End of logo/brand -->

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

        <!-- Begin of hamburger mainmenu menu -->
        <nav class="navbar-mainmenu">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
            <a class="nav-link" href="./#home">Home
                <span class="sr-only">(current)</span>
            </a>
            </li>
            <!-- add another link here -->
        </ul>
        </nav>
        <!-- End of hamburger mainmenu menu -->

        <!-- Begin of sidebar nav menu params class: text-only / icon-only-->
        <nav class="navbar-sidebar ">
        <ul class="navbar-nav" id="qmenu">
            <li class="nav-item" data-menuanchor="home">
            <a href="#home">
                <i class="icon ion-ios-home-outline"></i>
                <span class="txt">Home</span>
            </a>
            </li>
            <!-- add another link here -->
        </ul>
        </nav>
        <!-- End of sidebar nav menu -->
        
    </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 hamburger mainmenu menu -->
<nav class="navbar-mainmenu">
<ul class="navbar-nav mr-auto">
    <li class="nav-item active">
    <a class="nav-link" href="./#home">Home
        <span class="sr-only">(current)</span>
    </a>
    </li>
    <!-- add another li item and link here -->
</ul>
</nav>
<!-- End of hamburger mainmenu menu -->

The nav with class navbar-sidebar represent the sidebar menu positioned at left. It is explained below :

Sidebar Navigation codes are located within the nav tag with a class navbar-sidebar (which is embedded within the header page-header).

HTML Sidebar navigation

<!-- Begin of sidebar nav menu params class: text-only / icon-only-->
<nav class="navbar-sidebar ">
<ul class="navbar-nav" id="qmenu">
    <li class="nav-item" data-menuanchor="home">
    <a href="#home">
        <i class="icon ion-ios-home-outline"></i>
        <span class="txt">Home</span>
    </a>
    </li>
    ... another nav item
</ul>
</nav>
<!-- End of sidebar nav menu -->

Each menu item is represented by a li element with the following structure :

HTML nav-item

<li class="nav-item" data-menuanchor="SECTION_ID">
    <a href="#SECTION_ID OR_AN_URL">
        <i class="icon ion-ios-home-outline"></i>
        <span class="txt">Home</span>
    </a>
</li>

The tag  represents the icon.

This template uses Ionicons by Ionic Webfont for these icons. Check out their Website for more information.

And Your text represents the text content.

li data-menuanchor= should have the same value as a href= but without the #. This value will refer to a section with a data-section of the same value.
You can anyway use external URL for the link.

Icon and text visibility

To show only icons, add class icon-only to the navbar-sidebar nav.

And to hide icons and show only text, add class text-only to the navbar-sidebar nav.

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,
solid rgba color,
particle animation,
slideshow image animation,
and video

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

At bottom of the page, the div with class site-footer embeds the subscription form ,within the form with class send_email_form, the social links (div with class contact), the website footer notice and the scroll down button.

HTML Navigation menu

<!-- BEGIN OF page footer -->
<footer id="site-footer" class="page-footer">
<!-- Left content -->
<div class="footer-left">
    <p>PORTFOLIO BY
    <a href="http://highhay.com">
        <span class="marked">BRAND</span>
    </a>
    <a href="mailto://contact@highhay.com">
    </p>
</div>

<!-- Right content -->
<div class="footer-right">
    <ul class="social">
    <li>
        <a href="">
        <i class="icon fa fa-facebook"></i>
        </a>
    </li>
    <li>
        <a href="">
        <i class="icon fa fa-twitter"></i>
        </a>
    </li>
    <li>
        <a href="">
        <i class="icon fa fa-linkedin"></i>
        </a>
    </li>
    <li>
        <a href="">
        <i class="icon fa fa-instagram"></i>
        </a>
    </li>
    </ul>
</div>
</footer>
<!-- END OF site footer -->

Social networks and legal notice text

Social links icons use ionicons and Font awesome icons.

Fontawesome icons are presented by a <a href="..."></a> line.SOCIALNET value can be "facebook", "twitter", ...

For Ionicons, they are presented by a <a href="..."></a> line.SOCIALNET value can be "facebook", "twitter", ...

Duplicate these line and edit SOCIALNET by a custom one (pinterest, tumblr, ...) if you add more than the defaults links in the template.

Legal notice are located withini the div with class footer-left.

Home Page

About

Services

Slider

Pictures

Picture and Text

Subscription

Contact Info

Message

Item Page