Bezel - Multi-Purpose HTML Template

Thank you for purchasing my theme! If you have any questions that are beyond the scope of this help file, please feel free to email me via my user page contact form.

Get Support

Author: HodyLab	Contact: support@hody.co
Template version: 1.0	Documentation version: 1.0

Bezel is based on Bootstrap 3.3.7. If you need to learn more about the grid structure or any other element, visit the official documentation.

General Page Skeleton

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Bezel | Multi-Purpose Creative HTML Template</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <!-- Stylesheets Here -->
  </head>

  <body>
    <!-- Preloader -->
    <div id="loader">
      ...
    </div>

    <!-- Navbar -->
    <nav id="navbar">
      ...
    </nav>

    <!-- Home Section -->
    <section id="home">
      ...
    </section>

    <!-- Content Sections Here -->

    <!-- Footer -->
    <footer id="footer">
      ...
    </footer>

    <!-- Scripts Here -->

  </body>
</html>

Sections

Bezel comes with 7 type of sections:

Type	Description
Default	A full-width section, available with white, grey, colored, gradient and black backgrounds.
Split	A split section with an image background.
Parallax	A section with an image background and parallax effect.
Gradient	A section with a gradient background.
Skewed	A section with skewed angles.
Bordered	A section with borders.
Animated	A section with an animated background.

Default Section:

<section> <!-- You can use .grey-bg, .colored-bg, .gradient-bg or .dark-bg class to change BG color -->
  <div class="container">
    <div class="title">
      ...
    </div>
    <div class="row">
      ...
    </div>
  </div>
</section>

Split Section With Image

<section> <!-- You can use .grey-bg, .colored-bg, .gradient-bg or .dark-bg class to change BG color -->
  <div class="col-md-6 col-sm-4 img-side img-left"> <!-- You can use .img-right t place the image at right -->
    <div class="img-holder">
      <img src="images/bg/4.jpg" alt="" class="bg-img">
    </div>
  </div>
  <div class="container">
    <div class="col-md-5 col-md-offset-7 col-sm-8 col-sm-offset-4">
    </div>
  </div>
</section>

If you want the image at left you have to give the class "img-left" to the "img-side" div and create a div with offset margin inside the container, for example "col-md-offset-7 col-sm-offset-4".

If you want the image at right, add the class "img-right" to the "img-side" div and remove the offset classes from the div inside the container.

Parallax Section

<section class="parallax-bg">
  <div class="row-parallax-bg">
     <div class="parallax-wrapper">
       <div class="parallax-bg-element">
         <img src="images/bg-image-72.jpg" alt=""> <!-- Set your BG image here -->
       </div>
     </div>
     <div class="parallax-overlay"></div>
  </div>
  <div class="container">
     ...
  </div>
</section>

Gradient Section:

<section class="gradient-bg" data-gradients="#ff795f,#ce1768">
  <div class="container">
    <div class="title">
      ...
    </div>
    <div class="row">
      ...
    </div>
  </div>
</section>

In the data-gradients attribute, you can choose the two color of the gradient background. If not set, default colors specified in the CSS will be used.

Skewed Section:

<section class="section-skewed">
  <div class="container">
  	...  
  </div>
</section>

Bordered Section:

<section class="section-bordered">
  <div class="container">
  	...  
  </div>
</section>

Animated Section:

<section class="dark-bg">
		<div id="particle-canvas" data-dot-color="#00c3da" data-line-color="#2f2f2f"></div>
  <div class="container">
  	...  
  </div>
</section>

You can set the lines and dots colors in the data attributes.

Bezel includes several CSS classes that help you to style elements without touching CSS files. Here's the list:

Class	Description
`.centrize` and `.v-center`	Center an element vertically. .v-center must be inside the .centrize element.
`.serif-font`	Use a sans serif font family.
`.cursive-font`	Use a cursive font family.
`.alt-serif-font`	Use an alternative sans serif font family.
`.upper`	Make the text uppercase.
`.b-0`	Remove the borders.
`.white-text` `.black-text` `.colored-text` `.red-text` `.rose-text` `.gold-text` `.gradient-text`	Change the color of the text.
`.m-0` `.mb-0` `.mt-0` `.mr-0` `.ml-0` `.mb-15` `.mr-15` `.ml-15` `.mt-15` `.mb-25` `.mr-25` `.ml-25` `.mt-25` `.mb-50` `.mr-50` `.ml-50` `.mt-50`	Set the margins.
`.p-0` `.pb-0` `.pt-0` `.pr-0` `.pl-0` `.pb-15` `.pr-15` `.pl-15` `.pt-15` `.pb-25` `.pr-25` `.pl-25` `.pt-25` `.pb-50` `.pr-50` `.pl-50` `.pt-50`	Set the padding.

Navbar and Side Menu

Bezel includes two styles for the top and side menus: light and dark. If you want to use the dark version, you just need to add the class .dark-menu to #navbar or #aside-nav div.

Sliders

To setup an image slider, you just need to create a .images-gallery div and pass the options in the data-slick attribute, like this:

<div class="images-gallery" data-slick='{"dots": false, "arrows": true}'>
  <img src="images/portfolio-single-1.jpg" alt="">
  <img src="images/portfolio-single-2.jpg" alt="">
  <img src="images/portfolio-single-3.jpg" alt="">
</div>

Carousels

To setup a carousel, you just need to create a .carousel div and pass the options in the data-slicl attribute, like this:

<div class="carousel" data-slick="{"slidesToShow": 6, "dots": false}">
  <div class="carousel-item"><img src="images/clients-1.png" alt=""></div>
  ...
</div>

Both carousels and slider are based on Slick library. You can view all options available for the data-slick attribute here

Maps

You can add a map by simply adding a #map div and pass two options: latitude and longitude. Like this:

<div id="map" data-lat="40.773328" data-lang="-73.960088" class="full-width"></div>

You can use the .full-width class if you want a full width map. If you want to place it inside a split section be sure to wrap the map div inside the .img-side

To enable the map, you need to obtain a Google Maps API key from this link (you will see the button "Get a Key").

You can find your latitude and longitude here.

At the bottom of the HTML file, there's this line:

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&key=YOUR_API_KEY"></script>

Replace YOUR_API_KEY with your actual API key.

Anchor Links

If you want to use an anchor link to scroll smoothly to an element of the page, you just need to set the data-scroll attribute to true. Like this:

<a href="#demos" data-scroll="true" class="btn btn-light-out">Select a demo</a>

In the home section you can use images slider, YouTube video, HTML5 video and animated graphics as background. You can also use it as a parallax section and add a text rotator.

Image Slider

<section>
  <div id="home-slider">
    <div class="slide-item">
      <img src="images/bg-image-1.jpg" alt=""> <!-- You can remove the <img> tag if you just want text slider -->
      <div class="slide-wrap">
        <div class="slide-content">
          <div class="container">
              ...
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

Video Background

If you want to use a YouTube video you just need to pass the video URL to the "data-property" attribute of the .player div. You can also set a fallback background image for mobile devices with the data-fallback-bg attribute. (The jquery.mb.YTPlayer.js plugin does not support mobile devices).

<section>
  <div class="video-wrapper" data-fallback-bg="images/bg/5.jpg">
    <div class="video-player" data-property="{videoURL: '9No-FiEInLA'}"></div>
  </div>
  <div id="home-slider">
    ...
  </div>
</section>

If you want to use a local video, the .video-wrapper div should look like this:

<div class="video-wrapper">
  <div class="video-player">
    <video autoplay loop preload="auto">
      <source src="video/video.mp4" type="video/mp4">
      <source src="video/video.webm" type="video/webm">
    </video>
  </div>
</div>

If you want to change the video, change the value of the src attribute.

The portfolio page is split into 2 parts: filters and projects grid:

1) Filters

<ul id="filters">
  <li data-filter="*" class="active">All</li>
  <li data-filter=".branding">Branding</li>
  <li data-filter=".graphic">Graphic</li>
  <li data-filter=".printing">Printing</li>
  <li data-filter=".video">Video</li>
</ul>

If you want to change the filters you just need to change the text and the 'data-filter' attribute.

2) Grid

<div id="works-grid" class="two-col">
  <div class="work-item branding video">
    <div class="work-detail">
      <a href="portfolio-single-1.html">
        <img src="images/portfolio/1.jpg" alt="">
        <div class="work-info">
          <div class="centrize">
            <div class="v-center">
              <h3>Neleman Cava</h3>
              <p>Branding, Video</p>
            </div>
          </div>
        </div>
      </a>
    </div>
  </div>
  <!-- Other Items Here -->
</div>

Each element is composed of:

.work-item	To work with the filters every '.work-item' div tag must have the filter class (one or more), for example graphic and printing
	The 'href' attribute of this tag must link to an existing html file, in this case portfolio-single-1.html
Project Image	Located in images/portfolio folder.
.work-info	Contains name and category of the project.

You can use .two-col, .three-col or .four-col class to style the grid. If you want to use the wide style, be sure to unwrap the #works-grid div from the .container.

Warning! Unless you are familiar with CSS, I strongly advise you not to play around with these files.

All css files are in /css/ folder.

Files:

bundle.css	Contains all the third-party CSS libraries minified.
hody-icons.css	Icon font.
style.css	The main CSS file.
less/style.less	The main LESS file. Other LESS files are called from there.

The bundle.css file contains these libraries that are located in the /css/lib/ folder:

bootstrap.css	Bootstrap Framework.
slick.css	Slick Carousel style.
justifies-gallery.css	Gallery style.

If, for example, you want to change the primary color, you have two ways:

Open the file "style.css" and replace all occurrences of #00c3da with the color that you want.
Compile the less file and change the value of the @primary variable.

Warning! Compile the LESS file only if you are an advanced user. If you don't know what is a LESS file, ignore this procedure.

If you choose the second option, I strongly advise you to use Gulp, but only if you are familiar with Node.js. You can read a guide here.

Warning! Unless you are familiar with JavaScript, I strongly advise you not to play around with these files.

All scripts are in /js/ folder and they are called at the bottom of the page to make website load faster.

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bundle.min.js"></script>
<script type="text/javascript" src="js/SmoothScroll.js"></script>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=YOUR_APY_KEY"></script>

<script type="text/javascript" src="js/main.js"></script>

The bundle.js file contains these libraries that are located in the /js/lib/ folder:

bootstrap.js	Bootstrap Framework.
jquery.countTo.js	A jQuery plugin that will count up (or down) to a target number at a specified speed.
isotope.js	Portfolio filtering plugin.
jquery.appear.js	jQuery plugin to call a function when an element appears.
jquery.fullPage.js	jQuery full page navigation plugin.
jquery.justifiedGallery.js	jQuery plugin for justified galleries.
slick.min.js	jQuery carousel plugin.
typed.js	A jQuery typing animation script.
vivus.min.js	JavaScript library to make drawing animation on SVG
zoom.js	Medium's Image Zoom in vanilla JS.

If you want to add custom JavaScript code you can enter it inside the initCustom() function, at the end of the file "main.js", just before the init() function.

Please note: If you don't want to use a single, minified file (the one named bundle.js), you can call the JS file sepearately from the HTML.

The contact form is submitted without page refresh (AJAX), you just need to set your email address in the mail.php file.

$to = "email@yourdomain.com"; # <--- Your Email

Replace email@yourdomain.com with your email address. That's it.

Fonts

Bootstrap

JavaScript

How to change the version of the template?

Bezel has different homepage versions. In almost all hosting providers, the main page must be named index.html. So, if you want to use the a different version, you need to rename it to index.html, but first, remember to rename the existing 'index.html' to not lose the default version.

How to change the icons?

Bezel includes 600+ custom icons. The structure of an icon is the following:

<i class="hc-star"></i>

If you want to change an icon on this theme, just find it in the file "elements-icons.html", and, in this case, replace the 'hc-star' class, with the class of the icon you want.