Template Structure

To get to know what you've bought.

Ben template

  • index.html (overview)
  • index-classic.html (classic portfolio)
  • index-full.html (unique full portfolio)
  • index-classic-space.html (classic portfolio, but spacious)
  • index-titan.html (Titan Slider portfolio)
  • index-masonry.html (Masonry style portfolio)
  • index-masonry-space.html (Masonry portfolio - but spacious)
  • /css/ (all the styles)
  • /fonts/ (font icons)
  • /images/ (your images)
  • /js/
    • functions.js (template functions)
    • vendor.js (all vendor scripts combined)
  • /plugins/
    • tera-lightbox
    • titan-slider
  • /pages/
    • about.html
    • blog-single.html
    • blog.html
    • contact.html
    • work-single.html
  • /php/ (mail script)

HTML Structure

Most pages have a structure like this:

<html> // Optionally add the "dark" class for a dark version
    <body> // Add your favorite helper classes here
        <div class="container-fluid"> 
            <header> 
                // Logo and main navigation
            </header> 
            <section class="x"> 
                // Section - can be a portfolio grid or content
            </section> 
            <footer class="bottom"> 
                // The copyright footer (on the very bottom)
            </footer> 
        </div> 
        // Scripts
    </body>
</html> 
/*----------------------

    Ben - CSS 1.0
    By ThemeVillain

    Table of Contents

    00.  Header
    01.  About
    02.  Contact
    03.  Navigation
    04.  Work
    05.  Footer
    06.  Blog
    07.  Modules

-----------------------*/

CSS Structure

The Elements.css file has all the styled elements used in Ben. You can modify this stylesheet at your own risk.

To adjust styles, it's better to override them using the custom.css file, also included with Ben.

Next upPortfolio