by author

Created: 01/12/2016

By: JoveThemes

Thank you that bought our theme, we always welcome our customers! On this page you will find detailed information about the details of our theme. Good luck!

Intro

We would like to bring to your attention a creative HTML template, which can be an excellent basis for the portfolio of creative photographer, a designer or a small agency. The project is created using flexbox technologies, as well with as a large number of up-to-date animation effects. Moreover, all basic cascading style sheets are presented with source codes for .Less preprocessor.

Quick start

There are two types of pages - standard and pages with section-by-section content change. The first type of pages is used for interior information pages, the second type of pages is used to create the home pages and posts.

Default page

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Default page</title>

    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="apple-touch-icon" href="touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">


     <!--BOOTSTRAP CSS-->
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">
    <!--MAIN CSS-->
    <link rel="stylesheet" href="css/style.css">
    <!--GLOBAL COLOR SCHEME CSS-->
    <link rel="stylesheet" href="css/default.css">
    <!--LOCAL COLOR SCHEME CSS-->
    <link rel="stylesheet" href="css/color-schemes/violet-scheme.css">
    <!-- OWL CAROUSEL STYLE -->
    <link href="css/owl.carousel.css" rel="stylesheet">
    <!--RESPONSIVE CSS-->
    <link rel="stylesheet" href="css/responsive.css">
    <!--FONT-->
    <link rel="stylesheet" href="fonts/font.css">
    <!-- MATERIAL ICON FONTS -->
    <link href="fonts/material-design-iconic-font.css" rel="stylesheet">
    <link href="fonts/material-icons-google.css" rel="stylesheet">

</head>


<body>
    <div class="jt-nav transparency-nav"><!--NAVIGATION PANEL  -->
      <header>
        <a class="target-burger"><!--navigation toggle -->
            <div  class="ripple-box" ><!--ripple effect  -->
                <span class="c-ripple js-ripple">
                    <span class="c-ripple__circle"></span>
                </span>
            </div><!--end ripple effect  -->
            <ul class="buns"><!--buns-->
                <li class="bun"></li>
                <li class="bun"></li>
            </ul><!--end buns-->
        </a><!--end navigation toggle -->
        <!--target-burger-->
        <div class="jt-logo"><!--logo-->
            <a href="index.html">Clover</a>
        </div><!--end logo-->
      </header>
          <nav class="jt-nav-list" ><!--blurred nav-->
            <ul>
                <li><a href="page1.html" class="line-across"><span>Page 1</span></a></li>
                <li><a href="page2.html" class="line-across"><span>Page 2</span></a></li>
                <li><a href="page3.html" class="line-across"><span>Page 3</span></a></li>
                <li><a href="page4.html" class="line-across"><span>Page 4</span></a></li>
                <li><a href="page5.html" class="line-across"><span>Page 5</span></a></li>
            </ul>
          </nav><!--end blurred nav-->
    </div><!--END NAVIGATION PANEL  -->

    <div class="box-3d blur-box"><!--3d CONTAINER-->
        <div  class="intro-bg jt-cover-image"><!--background holder-->
            <img src="images/about-me.jpg" alt="" class="img-cover"><!--background image-->
            <div class="overlaybg black50 "></div><!--background color-->
        </div><!--end background holder-->
        
        <div class="box-3d-tagline"><!--static box-->
            <div class="box-3d-content">
                <h1 class="jumbo-title"><span class="typist-element" data-typist="Some title">Some title</span></h1>
            </div>
            <div class="to-bottom"><!--to bottom anchor-->
                <a href="#content" class="scrollto scroll-button">
                    <img src="images/arrow-scroll-light-inverse.png" alt="img">           
                </a>
            </div><!--end to bottom anchor-->
        </div><!--end static box-->
    </div> <!--END 3d CONTAINER-->
        
    <div class="jt-content blur-box" id="content"><!--CONTENT  CONTAINER-->
        <div class="content-3d"><!--3d CONTENT-->
            <div class="container-fluid"><!--container fluid -->

            ...

                
            </div><!--end container fluid -->

            <footer class="static-footer"><!--static page footer -->
                <div class="footer-holder ">
                    <div class="backend-layout">
                        Newsletter
                    </div>
                    <div class="container-fluid">
                        <div class="row">
                            <div class="col-md-12 side-padding-100">
                                <div class="jt-subscribe">
                                    <div class="subscribe-box">
                                        <div class="subscribe-content">
                                            <span class="subtitle">Be the first and get weekly updates</span>
                                            <div class="input-group">
                                                <form>
                                                    <div class="jt-input">
                                                <input class="input-field " type="text" id="subscribe" name="subscribe" placeholder="Enter your e-mail" />
                                                <label class="input-label" for="subscribe"></label>
                                                </div>
                                                </form>
                                                <span class="input-group-btn">
                                                   <button class="jt-btn bg-btn accent-bg" type="button">
                                                        <span class="c-ripple js-ripple">
                                                            <span class="c-ripple__circle"></span>
                                                        </span>Subscribe
                                                    </button>
                                                </span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="jt-bottom-panel"><!--bottom panel body-->
                    <div class="copyright">
                        <span>Copyright © 2016 <a href="https://somedomain.com" class="line-hover">someDomain</a>. All rights reserved.</span>
                    </div>

                        <a href="#top" class="scrollto scroll-button">
                            <img src="images/arrow-scroll-light.png" alt="img">           
                        </a>
                    <div class="right-bottom-side"><!--the right side panel -->
                        <div class="social-panel-btn" ></div>
                        <div class="social-box"><!--social  container-->
                            <a class="line-hover line-uppercase" href="#">Facebook</a> <span>/</span>
                            <a class="line-hover line-uppercase" href="#">Behance</a>  <span>/</span>
                            <a class="line-hover line-uppercase" href="#">Instagram</a> 
                        </div><!--end social  container-->
                    </div><!--the end of the right side panel -->
                </div><!--end bottom panel body-->
            </footer><!--end static page footer -->
        </div><!--END 3d CONTENT-->
    </div><!--END CONTENT CONTAINER-->
    
    <div id="preloader"><!--PRELOADER -->
        <div id="preloader-inner"></div>
    </div><!--END PRELOADER -->

     <!--LIBRARY-->
    <script src="js/jquery-2.2.0.min.js"></script>
    <!--BOOTSTRAP JS-->
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <!--CLASSIE LIBRARY-->
    <script src="js/plugins/classie.js"></script>
    <!-- APPEAR JS-->
     <script src="js/plugins/appear.min.js"></script>
    <!--IMAGELOADED JS -->
    <script src="js/plugins/jquery.imagesloaded.min.js"></script>
    <!--IMAGEFILL JS -->
    <script src="js/plugins/jquery-imagefill.js"></script>
    <!--  PROGRESSBAR-->
    <script src="js/plugins/jquery.progressbar.min.js"></script>
    <!--SMOOTH SCROLL JS -->
    <script src="js/plugins/SmoothScroll.js"></script>
    <!-- OWL CAROUSEL JS -->
    <script src="js/plugins/owl.carousel.js"></script>
    <!--MODERNIZR-->
    <script src="js/plugins/modernizr.js"></script> 
    <!--PRELOADER-->
    <script type="text/javascript" src="js/plugins/jquery.preloader.js"></script>
    <!--GOOGLE MAP API-->
    <script src="https://ditu.google.cn/maps/api/js"></script>
    <!--GOOGLE MAP SETTINGS-->
    <script src="js/plugins/gmap3.js"></script>
    <!--TYPIST SCRIPT -->
    <script src="js/plugins/typist.js"></script> 
    <!--CUSTOM JS -->
    <script src="js/custom.js"></script>
</body>

</html>

Scroll section page

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Scroll section page</title>

    <link rel="icon" type="image/png" href="favicon.png" />
    <link rel="apple-touch-icon" href="touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">


     <!--BOOTSTRAP CSS-->
    <link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.css">
    <!--MAIN CSS-->
    <link rel="stylesheet" href="css/style.css">
    <!--GLOBAL COLOR SCHEME CSS-->
    <link rel="stylesheet" href="css/default.css">
    <!--LOCAL COLOR SCHEME CSS-->
    <link rel="stylesheet" href="css/color-schemes/violet-scheme.css">
    <!--HORIZONTAL SCROLL-->
    <link rel="stylesheet" href="css/jquery.pagepiling.css">
    <!-- OWL CAROUSEL STYLE -->
    <link href="css/owl.carousel.css" rel="stylesheet">
    <!--RESPONSIVE CSS-->
    <link rel="stylesheet" href="css/responsive.css">
    <!--FONT-->
    <link rel="stylesheet" href="fonts/font.css">
    <!-- MATERIAL ICON FONTS -->
    <link href="fonts/material-design-iconic-font.css" rel="stylesheet">
    <link href="fonts/material-icons-google.css" rel="stylesheet">

</head>


<body>
    <div class="jt-nav"><!--NAVIGATION PANEL  -->
      <div class="nav-panel-btn" ></div><!--CLOSE/OPEN PANEL  -->
      <header>
        <a class="target-burger"><!--navigation toggle -->
            <div  class="ripple-box" ><!--ripple effect  -->
                <span class="c-ripple js-ripple">
                    <span class="c-ripple__circle"></span>
                </span>
            </div><!--end ripple effect  -->
            <ul class="buns"><!--buns-->
                <li class="bun"></li>
                <li class="bun"></li>
            </ul><!--end buns-->
        </a><!--end navigation toggle -->
        <!--target-burger-->
        <div class="jt-logo"><!--logo-->
            <a href="index.html">Clover</a>
        </div><!--end logo-->
      </header>
          <nav class="jt-nav-list" ><!--blurred nav-->
            <ul>
                <li><a href="page1.html" class="line-across"><span>Page 1</span></a></li>
                <li><a href="page2.html" class="line-across"><span>Page 2</span></a></li>
                <li><a href="page3.html" class="line-across"><span>Page 3</span></a></li>
                <li><a href="page4.html" class="line-across"><span>Page 4</span></a></li>
                <li><a href="page5.html" class="line-across"><span>Page 5</span></a></li>
            </ul>
          </nav><!--end blurred nav-->
    </div><!--END NAVIGATION PANEL  -->

    <div id="jt-project-container"><!--GLOBAL PROJECT CONTAINER -->
        <div class="project-item blur-box " ><!--layer item -->
        ...
        </div><!--end layer item -->
        <div class="project-item blur-box " ><!--layer item -->
        ...
        </div><!--end layer item -->
    </div><!--END GLOBAL PROJECT CONTAINER -->

    
    <div id="preloader"><!--PRELOADER -->
        <div id="preloader-inner"></div>
    </div><!--END PRELOADER -->

    <!--LIBRARY-->
    <script src="js/jquery-2.2.0.min.js"></script>
    <!--BOOTSTRAP JS-->
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <!--CLASSIE LIBRARY-->
    <script src="js/plugins/classie.js"></script>
    <!-- APPEAR JS-->
     <script src="js/plugins/appear.min.js"></script>
    <!--HORIZONTAL SCROLL--> 
    <script src="js/plugins/jquery.pagepiling.js"></script>
    <!--IMAGELOADED JS -->
    <script src="js/plugins/jquery.imagesloaded.min.js"></script>
    <!--IMAGEFILL JS -->
    <script src="js/plugins/jquery-imagefill.js"></script>
    <!--  PROGRESSBAR-->
    <script src="js/plugins/jquery.progressbar.min.js"></script>
    <!--SMOOTH SCROLL JS -->
    <script src="js/plugins/SmoothScroll.js"></script>
    <!-- OWL CAROUSEL JS -->
    <script src="js/plugins/owl.carousel.js"></script>
    <!--MODERNIZR-->
    <script src="js/plugins/modernizr.js"></script> 
    <!--PRELOADER-->
    <script type="text/javascript" src="js/plugins/jquery.preloader.js"></script>
    <!--GOOGLE MAP API-->
    <script src="https://ditu.google.cn/maps/api/js"></script>
    <!--GOOGLE MAP SETTINGS-->
    <script src="js/plugins/gmap3.js"></script>
    <!--TYPIST SCRIPT -->
    <script src="js/plugins/typist.js"></script> 
    <!--CUSTOM JS -->
    <script src="js/custom.js"></script>
</body>
</html>

General Typography

h1. header - 3.571em

h2. header - 2.571em

h3. header - 1.714em

h4. header - 1.286em

h5. header - 1.286em

h6. header - 1em

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec aliquet magna ac tortor faucibus aliquam. Nam sagittis porta dolor, vulputate aliquam est tincidunt non.

Fonts

Oswald

This font is used for all types of headers, contained in the project. Its peculiarity: all letters are capital, narrow and high.

A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z

Raleway

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

Icon font

Two types of icon fonts are used. Both fonts are included locally, i.e. the catalogues are present in main fonts folder. You may see the links to the resources, which are presented below for descriptive reasons. The fonts are slightly different in appearance and classes, but their general concept is similar. In both cases they are inserted by routine way – through <i> tag.

Material Design Iconic Font - click here

Font insert is perfomed by such line:

<i class="zmdi zmdi-android"></i>

Material Icons by Google - click here

Font insert is the following:

<i class="material-icons">android</i>

Color schemes

There are 10 color schemes for template design. All main color settings are in default.css. File, containing custom colors, are in color-schemes folder of css stylesheet directory. You need just to link the necessary file, and setting will come into effect. color scheme is set by default violet-scheme.

To set the accent color of the content (e.g. for hyperlinks) assign .accent-colorclass to the tag, to set the accent background (e.g. for buttons), you should assign accent-bg class.

Setting of animation effect of hyperliks is performed by adding of .line-hover class to the tag, and if the tag has text-transform:uppercase;, stylesheet property, then you should add one more additional class .line-uppercase

Section

To create the page with section-by-section change of content you should use the phrase with wrapper, having #jt-project-containeridentifier, and internal section tabs with .project-item major class, which are assigned as selectors for initialization script. All the further content is added to the container with .jt-flex class, moreover, it centers content vertically.
Wrapper structure (please, see the blur-box class assignment description in Navigation Section):

<div id="jt-project-container"><!--GLOBAL PROJECT CONTAINER -->
    <div class="project-item blur-box " ><!--layer item -->
        <div class="jt-flex " ><!--flex container -->
            <div class="container"><!--container -->
                <div class="row">
                    <div class="col-md-12">
                    ...
                    </div>
                </div>
            </div><!--end container -->
        </div><!--end flex container -->
    </div><!--end layer item -->
    <div class="project-item blur-box " ><!--layer item -->
    ...
    </div><!--end layer item -->
</div><!--END GLOBAL PROJECT CONTAINER -->

Moreover, you will need to link the following files to the page:

<!--HORIZONTAL SCROLL CSS-->
<link rel="stylesheet" href="css/jquery.pagepiling.css">
<!--HORIZONTAL SCROLL--> 
<script src="js/plugins/jquery.pagepiling.js"></script>

initialization script looks like that:

<script>
    $('#jt-project-container').pagepiling({
        menu: '.jt-anchor',
        anchors: ['page1','page2','page3','page4'],
        sectionSelector: '.project-item',
        direction: 'horizontal',
        verticalCentered: false
    });
</script>

The setting of horizontal scrolling is assigned to the template by default, but you may change it to vertical using direction parameter: change direction: 'horizontal', to direction: 'vertical',.

The sections imply jumping by anchors “next / previous section”. There is a special element for this; it has an easy structure and should be added right after the block which closes the tag and has .jt-flex class:

<ul class="jt-prev-page jt-anchor"><!--page anchor -->
    <li data-menuanchor="page1"><a href="#page1" class="line-across">Prev</a></li>
</ul><!--end page anchor -->
<ul class="jt-next-page jt-anchor"><!--page anchor -->
    <li data-menuanchor="page3"><a href="#page3" class="line-across">Next post</a></li>
</ul><!--end page anchor -->

If we remove .jt-anchor class and data-menuanchor="" data-parameter from ul element then it may be used as jump to the external page, e.g.:

<ul class="jt-prev-page"><!--page anchor -->
    <li><a href="page.html" class="line-across">Prev</a></li>
</ul><!--end page anchor -->

Complete section structure

<div class="project-item blur-box"><!--layer item -->
    <div class="zoom-box"><!--zoom on hover -->
        <div class=" jt-cover-image"><!--background holder -->
            <img src="images/image.jpg" alt="" class="img-cover"><!--background image -->
        </div><!--end background holder -->
    </div><!--end zoom on hover -->
    <div class="overlaybg dark-gradient"></div> <!--background gradient -->
    <div class="jt-flex " ><!--flex container -->
        <div class="container"><!--container -->
            <div class="row">
                <div class="col-md-12">
                    <div class="jt-heading heading-right"><!--item heading-->
                        <a href="page.html"><!--item title-->
                            <h2 class="jumbo-title " >Some title</h2>
                        </a><!--end item title-->
                        <p class="subtitle "> Quos a voluptatibus quae odio. Fugiat omnis dolores. Culpa eligendi necessitatibus nobis consequatur</p><!--item subtitle-->
                        <div class="project-meta"><!--project meta -->
                            <span class="project-date">posted / october 14, 2016</span><!--project date -->
                            <span class="project-like"><!--project like -->
                               <button  class="jt-btn icon-btn" >
                                    <span class="c-ripple js-ripple"><!--ripple effect -->
                                        <span class="c-ripple__circle"></span>
                                    </span><!--end ripple effect -->
                                     <i class="material-icons">favorite</i> 301
                                </button>
                            </span><!--end project like -->
                            <span class="project-views"><i class="material-icons">visibility</i> 14 000</span>
                        </div><!--end project meta -->
                        <form action="page.html"><!--reference button -->
                            <button  class="jt-btn line-btn " >
                                <span class="c-ripple js-ripple"><!--ripple effect -->
                                    <span class="c-ripple__circle"></span>
                                </span><!--end ripple effect -->
                                  Take a look
                                  <i class="material-icons">trending_flat</i>
                            </button>
                        </form><!--end reference button -->
                    </div><!--end item heading-->
                </div>
            </div>
        </div>
        <ul class="jt-prev-page jt-anchor"><!--page anchor -->
            <li data-menuanchor="page1"><a href="#page1" class="line-across">Prev</a></li>
        </ul><!--end page anchor -->
        <ul class="jt-next-page jt-anchor"><!--page anchor -->
            <li data-menuanchor="page3"><a href="#page3" class="line-across">Next</a></li>
        </ul><!--end page anchor -->
    </div><!--end flex container -->
</div><!--end layer item -->

Navigation

When the menu is opened, effect of the lower content blurring gets activated. For this, assign .blur-box class to the blocks, the contents of which should be blurred. In addition, there is a script, which is responsible for the activation of the effect if the button is clicked.

$('a.target-burger').click(function(e){
    $('#pp-nav, .blur-box, nav.jt-nav-list, .nav-panel-btn, a.target-burger, header, .jt-logo').toggleClass('toggled');
    e.preventDefault();
});//target-burger-click

As is seen from the script, there are some classes, which are assigned with .toggled class when the navigation button is clicked and each class is assigned a different style.

Navigation structure:

<div class="jt-nav"><!--NAVIGATION PANEL  -->
  <div class="nav-panel-btn" ></div><!--CLOSE/OPEN PANEL  -->
  <header>
    <a class="target-burger"><!--navigation toggle -->
        <div  class="ripple-box" ><!--ripple effect  -->
            <span class="c-ripple js-ripple">
                <span class="c-ripple__circle"></span>
            </span>
        </div><!--end ripple effect  -->
        <ul class="buns"><!--buns-->
            <li class="bun"></li>
            <li class="bun"></li>
        </ul><!--end buns-->
    </a><!--end navigation toggle -->
    <!--target-burger-->
    <div class="jt-logo"><!--logo-->
        <a href="index.html">Clover</a>
    </div><!--end logo-->
  </header>
      <nav class="jt-nav-list" ><!--blurred nav-->
        <ul>
            <li><a href="page.html" class="line-across"><span>Page</span></a></li>
            <li><a href="page2.html" class="line-across"><span>Page 2</span></a></li>
            <li><a href="page3.html" class="line-across"><span>Page 3</span></a></li>
        </ul>
      </nav><!--end blurred nav-->
</div><!--END NAVIGATION PANEL  -->

The block with .nav-panel-btn class appears only in small device resolution; and its application gives the opportunity to hide the navigation bar or to open it. This bar is opened by default. To hide the panel on small resolutions should be uncommented part of the styles in the responsive.css file, which has a table of contents /* Settings hide panels */, and block with nav-panel-btn class.

If necessary, there’s an opportunity to add dropdown element. Then the menu structure will be the following:

<div class="jt-nav"><!--NAVIGATION PANEL  -->
  <div class="nav-panel-btn" ></div><!--CLOSE/OPEN PANEL  -->
  <header>
    <a class="target-burger"><!--navigation toggle -->
        ...
    </a><!--end navigation toggle -->
    <!--target-burger-->
    <div class="jt-logo"><!--logo-->
        <a href="index.html">Clover</a>
    </div><!--end logo-->
  </header>
      <nav class="jt-nav-list" ><!--blurred nav-->
        <ul>
            <li><a href="page.html" class="line-across"><span>Page</span></a></li>
            <li class="dropdown">
                <a href="#" class="dropdown-toggle line-across" data-toggle="dropdown"><span>Project</span><i class="material-icons">arrow_drop_down</i></a>
                <ul class="dropdown-menu"><!--dropdown-->
                  <li><a href="project-1.html" class="line-across"><span>project 1</span></a></li>
                  <li><a href="project-2.html" class="line-across"><span>project 2</span></a></li>
                </ul><!--end dropdown-->
            </li>
            <li><a href="page3.html" class="line-across"><span>Page 3</span></a></li>
        </ul>
      </nav><!--end blurred nav-->
</div><!--END NAVIGATION PANEL  -->

Bottom panel

The lower bar is fixed at the foot of the page by default, but its positioning is not fixed for the pages of standard type. The bar structure:

<div class="bottom-panel-holder blur-box"><!--BOTTOM PANEL-->
   <div class="bottom-panel-btn" ></div> <!--bottom panel toggle-->
    <div class="jt-bottom-panel"><!--bottom panel body-->
        <div class="copyright">
            <span>Copyright © 2016 <a href="https://somedomain.com" class="line-hover">Somedomain</a>. All rights reserved.</span>
        </div>
        <div class="right-bottom-side"><!--the right side panel -->
            <div class="social-panel-btn" ></div>
            <div class="social-box"><!--social  container-->
                <a class="line-hover line-uppercase" href="#">Facebook</a> <span>/</span>
                <a class="line-hover line-uppercase" href="#">Behance</a>  <span>/</span>
                <a class="line-hover line-uppercase" href="#">Instagram</a> 
            </div><!--end social  container-->
        </div><!--the end of the right side panel -->
    </div><!--end bottom panel body-->
</div><!--END BOTTOM PANEL-->

Similarly to navigation, the lower bar contains the button with .bottom-panel-btn class, and it is hidden in lower resolutions it is opened, but may be hidden like the navigation panel. Moreover, the structure of the right part of the bar is changed. Social button are hidden and called by clicking the button with .social-panel-btn class.

Standard type pages contain added external bearing block, which contains also subscription information, and the bottom panel is added with a button of jumping to the page top (if you want, bottom panel may not be used in such footer). The external structure of the static footer:

<footer class="static-footer"><<!--static page footer -->
    <div class="footer-holder ">
        <div class="backend-layout"><<!-- subscribe's background -->
            Newsletter
        </div><<!-- end subscribe's background -->
        <div class="container-fluid">
            <div class="row">
                <div class="col-md-12 side-padding-100">
                    <div class="jt-subscribe"><<!--subscribe-->
                        <div class="subscribe-box">
                            <div class="subscribe-content">
                                <span class="subtitle">Be the first and get weekly updates</span>
                                <div class="input-group">
                                    <form>
                                        <div class="jt-input"><<!--input holder-->
                                            <input class="input-field " type="text" id="subscribe" name="subscribe" placeholder="Enter your e-mail" />
                                            <label class="input-label" for="subscribe"></label>
                                        </div><<!--end input holder-->
                                    </form>
                                    <span class="input-group-btn">
                                       <button class="jt-btn bg-btn accent-bg" type="button">
                                            <span class="c-ripple js-ripple"><<!--ripple effect-->
                                                <span class="c-ripple__circle"></span>
                                            </span>Subscribe<<!--end ripple effect-->
                                        </button>
                                    </span>
                                </div>
                            </div>
                        </div>
                    </div><<!--end subscribe-->
                </div>
            </div>
        </div>
    </div>
</footer><<!--end static page footer -->

bottom panel itself is added before the closing </footer> tag:

<footer class="static-footer"><<!--static page footer -->
    <div class="footer-holder ">
       ...
    </div>
    <div class="jt-bottom-panel"><!--bottom panel body-->
        <div class="copyright">
            ...
        </div>
        <a href="#top"   class="scrollto scroll-button">
            <img src="images/arrow-scroll-light.png" alt="img">           
        </a>
        <div class="right-bottom-side"><!--the right side panel -->
           ...
        </div><!--the end of the right side panel -->
    </div><!--end bottom panel body-->
</footer><<!--end static page footer -->

Headings

Heading with line

To make headings of the simple titles, add one of the classes to the title tag:

.before-line - line before the heading
.after-line - line after the heading (in such a case you will need one more class – .text-right – to right-align the text).

To create centered heading with the bottom line you should place the title with .after-line class to the additional shell:

<div class="under-line"><!--heading with bottom line-->
    <h2 class="accent-color after-line ">Headings</h2>
</div><!--end heading with bottom line-->

Detailed heading

Such heading type is applied on the home page, and contains the brief information on the internal post / portfolio, such as the name, metadata, jump to the post. It has the major block with .jt-heading class and two additional classes, which define left or right alignment of the content:

.heading-right - content with right alignment
.heading-left - content with left alignment

<div class="jt-heading heading-right"><!--item heading-->
    <a href="page.html"><!--item title-->
        <h2 class="jumbo-title " >Some title</h2>
    </a><!--end item title-->
    <p class="subtitle "> Quos a voluptatibus quae odio. Fugiat omnis dolores. Culpa eligendi necessitatibus nobis consequatur</p><!--item subtitle-->
    <div class="project-meta"><!--project meta -->
        <span class="project-date">posted / october 14, 2016</span><!--project date -->
        <span class="project-like"><!--project like -->
           <button  class="jt-btn icon-btn" >
                <span class="c-ripple js-ripple"><!--ripple effect -->
                    <span class="c-ripple__circle"></span>
                </span><!--end ripple effect -->
                 <i class="material-icons">favorite</i> 301
            </button>
        </span><!--end project like -->
        <span class="project-views"><i class="material-icons">visibility</i> 14 000</span>
    </div><!--end project meta -->
    <form action="page.html"><!--reference button -->
        <button  class="jt-btn line-btn " >
            <span class="c-ripple js-ripple"><!--ripple effect -->
                <span class="c-ripple__circle"></span>
            </span><!--end ripple effect -->
              Take a look
              <i class="material-icons">trending_flat</i>
        </button>
    </form><!--end reference button -->
</div><!--end item heading-->

jumbo-title class sets the definite uppercase font size for any title tag.

Project caption

The element is used for summary of internal posts/ portfolio content. It has the structure, which is visually similar to Detailed heading structure, but it differs by wrappers structures. It is positioned in container with .jt-flex class.

It has the major block with .project-caption class and two additional classes, which define left or right alignment of the content:

.caption-right - content with right alignment
.caption-left - content with left alignment

<div class="project-caption caption-right"><!--project caption -->
    <h1class="dark-color" >Nature Project</h1>
    <div class="project-content"><!--project content -->
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, corrupti, illum. Culpa eligendi necessitatibus nobis consequatur hic eaque laborum laudantium tempora, doloremque natus iusto adipisci explicabo asperiores molestias, deleniti voluptatem.</p>
    </div><!--end project content -->
    <div class="project-meta"><!--project meta -->
        <span class="project-date">posted / october 14, 2016</span><!--project date -->
        <span class="project-like"><!--project like -->
           <button  class="jt-btn icon-btn" >
                <span class="c-ripple js-ripple"><!--ripple effect -->
                    <span class="c-ripple__circle"></span>
                </span><!--end ripple effect -->
                 <i class="material-icons">favorite</i> 301
            </button>
        </span><!--end project like -->
        <span class="project-views"><i class="material-icons">visibility</i> 14 000</span>
    </div><!--end project meta -->
</div><!--end project caption -->

Page header

Standard pages use header with 3D effect when they are scrolled. The additional and essential condition is script of effect initiation:

function Header3D() {
    var introSection = $('.intro-bg'),
        introSectionHeight = introSection.height(),
    //change scaleSpeed if you want to change the speed of the scale effect
        scaleSpeed = 0.3,
    //change opacitySpeed if you want to change the speed of opacity reduction effect
        opacitySpeed = 1;

    //update this value if you change this breakpoint in the style.css file 
    var MQ = 1170;

    triggerAnimation();
    $(window).on('resize', function(){
        triggerAnimation();
    });

    //bind the scale event to window scroll if window width > $MQ (unbind it otherwise)
    function triggerAnimation(){
        if($(window).width()>= MQ) {
            $(window).on('scroll', function(){
                //The window.requestAnimationFrame() method tells the browser that you wish to perform an animation- the browser can optimize it so animations will be smoother
                window.requestAnimationFrame(animateIntro);
            });
        } else {
            $(window).off('scroll');
        }
    }
    //assign a scale transformation to the introSection element and reduce its opacity
    function animateIntro () {
        var scrollPercentage = ($(window).scrollTop()/introSectionHeight).toFixed(5),
            scaleValue = 1 - scrollPercentage*scaleSpeed;
        //check if the introSection is still visible
        if( $(window).scrollTop() < introSectionHeight) {
            introSection.css({
                '-moz-transform': 'scale(' + scaleValue + ') translateZ(0)',
                '-webkit-transform': 'scale(' + scaleValue + ') translateZ(0)',
                '-ms-transform': 'scale(' + scaleValue + ') translateZ(0)',
                '-o-transform': 'scale(' + scaleValue + ') translateZ(0)',
                'transform': 'scale(' + scaleValue + ') translateZ(0)',
                'opacity': 1 - scrollPercentage*opacitySpeed
            });
        }
    }
}

Structure of the header itself:

<div class="box-3d blur-box"><!--3d CONTAINER-->
    <div  class="intro-bg jt-cover-image"><!--background holder-->
        <img src="images/image.jpg" alt="" class="img-cover"><!--background image-->
        <div class="overlaybg black50 "></div><!--background color-->
    </div><!--end background holder-->
    
    <div class="box-3d-tagline"><!--static box-->
        <div class="box-3d-content">
            <h1 class="jumbo-title"><span class="typist-element" data-typist="Some title">Some title</span></h1>
        </div>
        <div class="to-bottom"><!--to bottom anchor-->
            <a href="#content" class="scrollto scroll-button">
                <img src="images/arrow-scroll-light-inverse.png" alt="img">           
            </a>
        </div><!--end to bottom anchor-->
    </div><!--end static box-->
</div> <!--END 3d CONTAINER-->

Block with .box-3d-tagline class contains all the content, which is in the header.

However, for correct effect displaying, the other page content, which is below this element should be included to the following blocks:

<div class="jt-content blur-box" id="content"><!--CONTENT  CONTAINER-->
    <div class="content-3d"><!--3d CONTENT-->
    ...
    </div><!--END 3d CONTENT-->
</div><!--END CONTENT  CONTAINER-->

Type effect

It is rather easy to apply the text typing effect. For this you should only use typist.js script and call it:

<script>
    var typist;
    typist = document.querySelector(".typist-element");
    new Typist(typist, {
      letterInterval: 60,
      textInterval: 3000
});
</script>

HTML-structure of the element with such an effect is the following: (the example of the first sections of the homepage):

<h2 class="jumbo-title">I'm 
    <strong class="typist-element" data-typist="a love creative web design">a photographer</strong>
</h2>

<strong> tag will include the dynamic part, which will be “written”. The content between these tegs is set by default, and data-typist="" attribute is assigned with the content, which will replace the text by default. Everything beyond the <strong>, tag is not changed.

Ripple effect

The effect is applied on buttons and is performed by the following script:

<script>
    var $ripple = $('.js-ripple');

        $ripple.on('click.ui.ripple', function(e) {

            var $this = $(this);
            var $offset = $this.parent().offset();
            var $circle = $this.find('.c-ripple__circle');

            var x = e.pageX - $offset.left;
            var y = e.pageY - $offset.top;

            $circle.css({
                top: y + 'px',
                left: x + 'px'
            });

            $this.addClass('is-active');

        });

        $ripple.on('animationend webkitAnimationEnd oanimationend MSAnimationEnd', function(e) {
            $(this).removeClass('is-active');
        });
</script>

HTML structure:

<span class="c-ripple js-ripple"><!--ripple effect -->
    <span class="c-ripple__circle"></span>
</span><!--end ripple effect -->

Background image

Template background images are added to through the stylesheets style.css, but using HTML-phrase and two scripts; it makes usage of images as a background much more convenient and functional.

Use jquery-imagefill.js

Add scripts

<script src="jquery.imagesloaded.min.js"></script>
<script src="jquery-imagefill.js"></script>

before the closing </body> tag. Initiate the libraries by the simple script:

<script>
    $('.jt-cover-image').imagefill({
        throttle: 100 / 60
    });
</script>

The element itself is the following:

<div class="jt-cover-image"><!--background holder -->
    <img src="images/image.jpg" alt="" class="img-cover"><!--background image -->
</div><!--end background holder -->

If it is required to image transition effect i.e. this effect should be included to the shell with .zoom-box class:

<div class="zoom-box"><!--zoom on hover -->
    <div class=" jt-cover-image"><!--background holder -->
        <img src="images/image.jpg" alt="" class="img-cover"><!--background image -->
    </div><!--end background holder -->
</div><!--end zoom on hover -->

Overlay background

The purpose is to perform superficial correction of background images to avoid every time usage of graphic editors (like Photoshop). E.g., if you have a nice image, which you want to use as a background for some header, but this image is a bit light or too bright. So, using this rather simple element, the image may be faded (or made darker or lighter). In fact, this is simply an empty block, which is assigned with custom classes with half-transparent black, dark grey or light background. These are three main tones, which are subdivided to several transparency gradations. The main basic class is .overlaybg. It is added immediately after tag of the block, containing the image.

Class	Description
Example code <div class="overlaybg black40"></div>
Black overlay
`.overlaybg.black30`	background-color: rgba(0, 0, 0, 0.3);
`.overlaybg.black40`	background-color: rgba(0, 0, 0, 0.4);
`.overlaybg.black50`	background-color: rgba(0, 0, 0, 0.5);
`.overlaybg.black60`	background-color: rgba(0, 0, 0, 0.6);
`.overlaybg.black70`	background-color: rgba(0, 0, 0, 0.7);
`.overlaybg.black80`	background-color: rgba(0, 0, 0, 0.8);
Light overlay
`.overlaybg.light30`	background-color: rgba(255, 255, 255, 0.3);
`.overlaybg.light40`	background-color: rgba(255, 255, 255, 0.4);
`.overlaybg.light50`	background-color: rgba(255, 255, 255, 0.5);
`.overlaybg.light60`	background-color: rgba(255, 255, 255, 0.6);
`.overlaybg.light70`	background-color: rgba(255, 255, 255, 0.7);
`.overlaybg.light80`	background-color: rgba(255, 255, 255, 0.8);
`.overlaybg.light90`	background-color: rgba(255, 255, 255, 0.8);

Spacers and side paddings

Designed to create vertical and horizontal margins , which are regulated by the presence of a large number of gradations of options. Vertical spacers are created in step 20px and are responsible for the top and bottom margins. Horizontal indents are 10px step and used to create a sides.

Spacers

They have a view of the unit with the class that indicates the height and put a fart element in its end and if necessary within it

Class	Description
Example code <div class="jt-spacer-100"></div><!--spacer 100-->
`.jt-spacer-20`	height 20px
`.jt-spacer-30`	height 30px
`.jt-spacer-40`	height 40px
`.jt-spacer-50`	height 50px
`.jt-spacer-60`	height 60px
`.jt-spacer-70`	height 70px
`.jt-spacer-80`	height 80px
`.jt-spacer-90`	height 90px
`.jt-spacer-100`	height 100px
`.jt-spacer-110`	height 110px
`.jt-spacer-120`	height 120px
`.jt-spacer-130`	height 130px
`.jt-spacer-140`	height 140px
`.jt-spacer-150`	height 150px
`.jt-spacer-160`	height 160px
`.jt-spacer-170`	height 170px
`.jt-spacer-180`	height 180px

Sides

This element has the shape of a conventional auxiliary class that you want to add the edited block.

Class	Description
`.side-padding-20`	padding 20px
`.side-padding-40`	padding 40px
`.side-padding-60`	padding 60px
`.side-padding-80`	padding 80px
`.side-padding-100`	padding 100px
`.side-padding-120`	padding 120px
`.side-padding-140`	padding 140px
`.side-padding-160`	padding 160px

Border side

The flex-rows contain a small structure, which is a dingbat, playing the role of border for information blocks; it is hidden, if the screen resolution is lower than 991px. It looks like this:

<div class="border-holder"><!--border box (hidden on mobile) -->
     <div class="side-border"></div>
</div><!--end border box (hidden on mobile) -->

Progress bar

For their performance you should use jquery.progressbar.min.js and appear.min.js script. The element may occupy the entire page width, but by default, it is located on the side content at the flex-side sections.

Variations of header design are determined by helper classes, which are added to span tag with .progress-title class:
- .title-bold - title type;
- .title-italic - italic type;
- .title-light - light type;
Progress bar line width is determined by classes, which are added to the block with .progress class:
- .progress-thin - thin, width is 1px;
- .progress-medium - moderate, width is 2px;
- .progress-bold - wide, width is 3px;
- .progress-extra-bold - very wide, width is 4px;

Block with .progress class is a basic track, and the block having .progress-bar class is just a drawing element. It is assigned with role="progressbar" and data-width="". The second attribute shows the percentage of drawing performance.

the block structure looks like that:

<div class="progress-box"><!-- Progress Box -->
    <span class="progress-title title-light">Photography <span class="pull-right">24%</span></span>
    <div class="progress progress-thin">
        <div class="progress-bar" role="progressbar" data-width="24"></div>
    </div>
</div><!-- End Progress Box -->

Flex sides

Putting the content on the standard pages is implemented in half blocks, the content of which is vertically aligned relative to each other. It is achieved due to flexbox technology, which allows making it easily and does not require such limitations as fixed height of outer boxes. The main structure of the standard flex-row with static picture:

<div class="jt-flex-side"><!--flex side-->
    <div class="col-md-6 side-content side-padding-100"> <!--side content -->
        ...
    </div><!--end side content -->
    <div class="col-md-6 jt-empty-block zoom-box no-padding"><!--side block-->
        <div class="jt-cover-image"><!--background holder-->
            <img src="images/image.jpg" alt="image"><!--background image-->
        </div><!--end background holder-->
    </div><!--end side block-->
</div><!--end flex side-->

Block with .side-content class contains the information part – headings, text, quotes, progress bars etc. the block with .jt-empty-block class is graphic one – it contains background images carousel elements, map etc.

By default the graphic block is placed after the content block, but to conform with design aesthetics, the sections are chequer-wise. In such a case, the row with inverted blocks is assigned with .reverse class, and blocks with .side-content and .jt-empty-block classes are changed over:

<div class="jt-flex-side reverse"><!--flex side-->
    <div class="col-md-6 jt-empty-block zoom-box no-padding"><!--side block-->
        <div class="jt-cover-image"><!--background holder-->
            <img src="images/image.jpg" alt="image"><!--background image-->
        </div><!--end background holder-->
    </div><!--end side block-->
    <div class="col-md-6 side-content side-padding-100"> <!--side content -->
        ...
    </div><!--end side content -->
</div><!--end flex side-->

Owl carousel

This carousel operates with two linked files – owl.casrousel.js and owl.carousel.css – it is called by such a way:

$('#some-carousel').owlCarousel({
    
})

You may learn more about carousel settings, having followed the link to the official web-site of the plug-in. The carousel is applied for several different elements in the project, and it is customized, depending on the appearance of this element.

Customer carousel

Having a standard carousel structure, it is included to the wrapper with .customer-carousel class:

<div class="customer-carousel"><!--customer carousel  -->
    <div id="jt-customer-carousel" class="owl-carousel jt-owl-carousel"><!-- carousel owl-->
        <div class="item"><!--owl item-->
            <div class="carousel-item">
                <img src="images/logo.png" alt="">
            </div>
        </div><!--end owl item-->
        <div class="item"><!--owl item-->
            ...
        </div><!--end owl item-->
        <div class="item"><!--owl item-->
            ...
        </div><!--end owl item-->
    </div><!-- end carousel owl-->
</div><!--end customer carousel  -->

Side carousel

It is added to the graphic side block of the flex row; the slides play the role of hyperlinks to the internal posts/ projects. It has the following structure:

<div class="side-carousel"><!--side carousel-->
    <div id="side-carousel" class="owl-carousel jt-owl-carousel"><!-- carousel owl-->
        <div class="item"><!--owl item-->
             <div class="carousel-item">
                <a href="page1.html"></a>
                <div class="jt-cover-image"><!--background holder-->
                    <img src="images/image1.jpg" alt="image"><!--background image-->
                </div><!--end background holder-->
             </div>
        </div>
        <div class="item"><!--owl item-->
            <div class="carousel-item">
            <a href="page2.html"></a>
                <div class="jt-cover-image"><!--background holder-->
                    <img src="images/image2.jpg" alt="image"><!--background image-->
                </div><!--end background holder-->
             </div>
        </div>
    </div><!--end carousel owl-->
</div><!--end side carousel-->

Depending on the positioning of the side block with carousel, one of the classes is added:

.left-slider - left alignment of the carousel;
.right-slider - right alignment of the carousel;

Adding of this carousel to the side block looks like that:

<div class=" jt-flex-side "><!--flex side-->
    <div class="col-md-6 jt-empty-block left-slider side-slider"><!--side slider-->
        <div class="side-carousel">
            <div id="side-carousel" class="owl-carousel jt-owl-carousel"><!-- carousel owl-->
                
                ...

            </div><!--end carousel owl-->
        </div>
    </div>
    <div class="col-md-6 side-content side-padding-100"><!--side content-->
    ...
    </div><!--end side content-->
</div><!--end flex side-->

Testimonial carousel

<div class="testimonial-carousel"><!--testimonial carousel -->
    <div id="testimonial-carousel" class="owl-carousel jt-owl-carousel"><!-- carousel owl-->
        <div class="item"><!--owl item-->
             <div class="carousel-item">
                <div class="testimonial-avatar jt-cover-image">
                    <img src="images/testimonials/item1.jpg">
                </div>
                <div class="testimonial-content"><!--testimonail content-->
                    <p>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                        quis nostrud exercitation ullamco
                    </p>
                    <span>Liz Tailor</span>
                </div><!--end testimonail content-->
             </div>
        </div>  
        <div class="item"><!--owl item-->
             ...
        </div>
        <div class="item"><!--owl item-->
             ...
        </div>
    </div>
</div><!--end testimonial carousel -->

The block with .carousel-item class plays a role of the flex row; it centers the image of the element and the content part vertically.

Feedback

The Feedback is in information block of standard pages, and it is divided into two main parts – the part with contact information and the part with the form. Contacts are included in the container with .jt-address-holder class. The contact form itself contains of set of blocks with .jt-input class, to which the input boxes and <label> with the mandatory for="message" parameter are added. It is essential that the input box has the identifier with the same name, as this parameter’s. The external wrapper has .jt-form-holder class.

Form a working connection, for its operation from the availability of contact.php file, and the script of the query, which is registered in custom.js file.

<div class="feedback"><!--feedback -->
    <div class="jt-address-holder">
        <div class=" feed-item"><!--feedback line-->
            <div class=" feed-icon">
                <i class="material-icons accent-color">location_on</i>
            </div>
            <address>
                Rembrandtplein 17,<br/> 123 CT Amsterdam, Netherlands
            </address>
        </div><!--end feedback line-->
        <div class=" feed-item"><!--feedback line-->
            ...
        </div><!--end feedback line-->
        <div class=" feed-item"><!--feedback line-->
            ...
        </div><!--end feedback line-->
        <div class=" feed-item"><!--feedback line-->
            ...
        </div><!--end feedback line-->
    </div>
    <div class="jt-spacer-30"></div><!--spacer 60-->
    <div class="jt-form-holder"><!--feedback form container-->
        <form id="contact-form" method="post" novalidate>
          <div class="jt-input"><!--input holder-->
              <input class="input-field " type="text" id="name" name="name" placeholder="Your name" required=""/>
              <label class="input-label" for="name"></label>
              <p class="help-block text-danger"></p>
          </div><!--end input holder-->
          <div class="jt-input"><!--input holder-->
              <input class="input-field " type="text" id="lastname" name="lastname" placeholder="Your lastname" required=""/>
              <label class="input-label" type="text" for="lastname"></label>
              <p class="help-block text-danger"></p>
          </div><!--end input holder-->
          <div class="jt-input"><!--input holder-->
              <input class="input-field " type="email" name="email" id="email" placeholder="Your email" required=""/>
              <label class="input-label" for="email"></label>
              <p class="help-block text-danger"></p>
          </div><!--end input holder-->
          <div class="jt-input"><!--input holder-->
              <textarea class="input-field " name="message"  id="message" placeholder="Your message" required=""></textarea>
              <label class="input-label" for="message"></label>
              <p class="help-block text-danger"></p>
          </div><!--end input holder-->
          <button class="jt-btn bg-btn accent-bg" type="submit">
              <span class="c-ripple js-ripple"><!--ripple effect-->
                  <span class="c-ripple__circle"></span>
              </span><!--end ripple effect-->
              Send message
          </button>
      </form>
      <!-- Ajax response-->
      <div class="ajax-response text-center" id="contact-response"></div>
    </div>
</div><!--end feedback -->

Settings form in the assets/php/contact.php file:

// Mail settings
  $to      = "somemail@domain.com";
  $subject = "Node Contact Form";

// You can put here your email
  $header = "From: noreply@yoursite.com\r\n";

Google Map

The map is both the stand-alone element and the part of flex-row with contact. This template includes the second option. To display the map you should use two scripts: gmap3.js, which is included in the template, and the second script from API of the map; in such case this is a hyperlink.

<script src="https://ditu.google.cn/maps/api/js"></script>

gmap3.js contains all map settings, and one of them is possibility to use draggable map, it is true by default, but there’s an opportunity to change it to false. Latitude, longitude and enlargement are assigned through data parameters in html.

HTML structure:

<div class="map-wrap"><!--google map container-->
   <div id="map-canvas" data-addresses="[40.722690, -73.981735]" data-info="[Rembrandtplein 17, 123 CT Amsterdam, Netherlands]" data-icon="images/marker.png" data-zoom="13"></div>
    </div><!--end map -->
</div><!--end google map container-->

Project Grid

Project Grid element is positioned in sections of post/ portfolio; this element is a set of four preview columns. The major shell has .jt-project-grid class. Each column has rather complicated structure. The grid, when it is inserted to the section, does not have the shell with .jt-flex class. The main type of section with Project Grid:

<div class="project-item blur-box" ><!--layer item -->
    <div class="jt-project-grid"><!--project grid -->
        <div class="project-col"><!--project column -->
        ...
        </div>
        <div class="project-col"><!--project column -->
        ...
        </div>
        <div class="project-col"><!--project column -->
        ...
        </div>
        <div class="project-col"><!--project column -->
        ...
        </div>
    </div>
</div><!--end layer item -->

The structure of the column itself:

<div class="project-col"><!--project column -->
    <div class="hover cross-hover"><!--hover element-->
        <div class=" jt-cover-image"><!--background holder-->
            <img src="images/item15.jpg" alt="" class="img-cover"><!--background image-->
        </div><!--end background holder-->
        <div class="overlay">
            <div class="hover-holder">
                <p class="set1"><!--top icon panel-->
                    <a href="#modal-project1"  data-toggle="modal"><i class="material-icons">zoom_in</i></a><!--modal link-->
                    <button  class="jt-btn icon-btn" >
                        <span class="c-ripple js-ripple"><!--ripple effect-->
                            <span class="c-ripple__circle"></span>
                        </span><!--end ripple effect-->
                         <i class="material-icons">favorite</i> 301
                    </button>
                </p><!--end top icon panel-->
                <hr><hr>
                <p class="set2"><!--bottom icon panel-->
                    <button  class="jt-btn icon-btn" >
                        <span class="c-ripple js-ripple"><!--ripple effect-->
                            <span class="c-ripple__circle"></span>
                        </span><!--end ripple effect-->
                         <i class="material-icons">mode_comment</i> 576
                    </button>
                    <a><i class="material-icons">burst_mode</i></a>
                </p><!--end bottom icon panel-->
            </div>
        </div>
    </div><!--end hover element-->
</div>

<p> tag with .set1 class the upper bar of the top of the Hover element, in which the hyperlink, having data-toggle="modal" attribute, when it is clicked, calls the modal window with the project itself.

Modal project

The modal window of this post option is a mini-portfolio and it contains of two main parts: pictures and content. The graphic block may contain images, it has an easy structure.

<div class="modal-img-holder"><!--modal image container-->
   <div class="jt-cover-image"><!--background holder-->
        <img src="images/item1.jpg" class="img-cover" alt="img"><!--background image-->
    </div> <!--end background holder-->
</div><!--end modal image container-->

General structure of the project modal window:

<div class="modal fade modal-holder" id="modal-project1" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"><!-- modal window -->
    <div class="modal-dialog" role="document">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">X</button>
        <div  class="modal-content">
            <div class="jt-modal-project"><!-- modal content -->
                <div class="modal-img-holder"><!--modal image container-->
                   <div class="jt-cover-image"><!--background holder-->
                        <img src="images/image.jpg" class="img-cover" alt="img"><!--background image-->
                    </div> <!--end background holder-->
                </div><!--end modal image container-->
                <div class="jt-modal-content"><!--content container-->
                    <div class="jt-modal-top">
                        <div class="jt-modal-body"><!--content body-->
                            <div class="jt-modal-head">
                                <div class="mod-author-img"><!--author avatar-->
                                    <a href="#">
                                        <img src="images/author.jpg" alt="img">
                                    </a>
                                </div><!--end author avatar-->
                                <div class="mod-author-caption">
                                    <a href="#" class="author-name">Jack Daniels</a>
                                    <a href="#" class="line-hover"><i class="material-icons">public</i> http://somedomain</a>
                                </div>
                            </div>
                            <div class="jt-modal-text"><!--modal post-->
                                <span>posted / october 14,2016</span>
                                <p>Consectetur adipisicing elit, sed do eiusmod
                                tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
                                quis nostrud exercitation ullamco laboris nisi ut aliquip. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
                            </div><!--end modal post-->
                            <div class="jt-modal-comment-section"><!--modal comments-->
                                <div class="add-comment">
                                    <h5 class="comment-title">Comments</h5>
                                    <div class="button-comment"><!--add comment's button-->
                                        <button class="jt-btn bg-btn accent-bg hidden-trigger" >
                                            <span class="c-ripple js-ripple"><!--ripple effect-->
                                                <span class="c-ripple__circle"></span>
                                            </span><!--end ripple effect-->
                                            Add comment
                                        </button>
                                    </div><!--end add comment's button-->

                                </div>
                                <div class="shortcode-hidden">
                                    <form><!--form-->
                                        <div class="jt-input"><!--input holder-->
                                            <textarea class="input-field " id="input-modal4" placeholder="Your comment" ></textarea>
                                            <label class="input-label" for="input-modal4"></label>
                                        </div><!--end input holder-->
                                    </form><!--end form-->
                                        <button type="submit" class="jt-btn bg-btn md-close accent-bg">
                                            <span class="c-ripple js-ripple"><!--ripple effect-->
                                                <span class="c-ripple__circle"></span>
                                            </span>Send<!--end ripple effect-->
                                        </button>
                                    </div>
                                <div class="jt-modal-scroll-box"><!--scroll box-->
                                    <div class="jt-modal-comments">
                                        <div  class="comment-box"><!--comment item-->
                                            <div  class="comment-head">
                                                <div  class="avatar"><!--comment avatar-->
                                                    <a href="#">
                                                         <img src="images/author.jpg" alt="avatar"/>
                                                    </a>
                                                </div><!--end comment avatar-->
                                                <div  class="comment-content"><!--comment content-->
                                                    <div  class="comment-meta">
                                                        <a href="#"  class="comment-name">Jonathan Doe</a>
                                                        <span>April 14,2015  at 11:48</span>
                                                    </div>
                                                    <span>At vero eos et accusam et justo duo dolores et ea rebum in voluptate.</span>
                                                </div><!--end comment content-->
                                            </div>
                                        </div><!--end comment item-->
                                        <div class="comment-box"><!--comment item-->
                                            ...
                                        </div><!--end comment item-->
                                        <div class="comment-box"><!--comment item-->
                                            ...
                                        </div><!--end comment item-->
                                    </div>
                                </div><!--end scroll box-->
                            </div><!--end modal comments-->
                        </div><!--end content body-->
                    </div>
                    <div class="jt-modal-bottom"><!--modal bottom panel-->
                        <div class="project-icons"><!--modal bottom icons-->
                            <div class="icon-holder">
                                <button  class="jt-btn icon-btn" >
                                    <span class="c-ripple js-ripple"><!--ripple effect-->
                                        <span class="c-ripple__circle"></span>
                                    </span><!--end ripple effect-->
                                     <i class="material-icons">favorite</i> 301
                                </button>
                            </div>
                            <div class="icon-holder">
                                <button  class="jt-btn icon-btn" >
                                    <span class="c-ripple js-ripple"><!--ripple effect-->
                                        <span class="c-ripple__circle"></span>
                                    </span><!--end ripple effect-->
                                     <i class="material-icons">mode_comment</i> 576
                                </button>
                            </div>
                            <div class="icon-holder">
                                <button  class="jt-btn icon-btn" >
                                    <span class="c-ripple js-ripple"><!--ripple effect-->
                                        <span class="c-ripple__circle"></span>
                                    </span><!--end ripple effect-->
                                     <i  class="material-icons">visibility</i> 14 248
                                </button>
                            </div>
                        </div><!--end modal bottom icons-->
                    </div><!--end modal bottom panel-->
                </div><!--end content container-->
            </div>
        </div>
    </div>
</div><!-- end modal window -->

Outro

Less

CLOVER provides an opportunity to change styles by Less pre-processor; all the main configurations are included to the files with .less extension, which are in the less. directory.

variable.less - contains all unique value of variables, defining colors, font sizes, fonts families inside the custom CSS styles. Furthermore, there are the main media requests for grid system control points, with which the adjustment of the positioning for the main devices is performed (i.e. guarantee of layout adaptability).
mixins.less - contains set of features from one or several rules; it is very convenient in cases, when it consists of several lines, and it is often used in custom styles. It saves time and place in the main less file.
style.less - global stylesheet.
default.less - global stylesheet of color.
Исходники стилевых настроек цветовых схем.

Sources and Credits

Used plugins

Bootstrap framework by Twitter Bootstrap
Imagefill plugin by John Polacek
Owl carousel by Bartosz Wojciechowski
SmoothScroll by Balazs Galambosi
Appear js by Michael Hixson
Minimalist Loading Indicator Plugin bycore-themes
Progress bar by Kimmo Brunfeldt
Bootstrap Animated Progress bar by Monzurul Haque
ImagesLoaded by Desandro
Classie by Desandro
Typist by EagerApps
Chocolat lightbox Nicolas Turlais
pagePiling plugin by Alvaro Trigo
Modernizr by Faruk Ates, Paul Irish, Alex Sexton
jQuery Style Switcher Immortal Wolf
GMAP3 Plugin for jQuery DEMONTE Jean-Baptiste
jqBootstrapValidation David Godfrey

Style Switcher

Documentation

by author

Intro

Quick start

Default page

Scroll section page

General Typography

h1. header - 3.571em

h2. header - 2.571em

h3. header - 1.714em

h4. header - 1.286em

h5. header - 1.286em

h6. header - 1em

Fonts

Oswald

Raleway

Icon font

Color schemes

Section

Complete section structure

Navigation

Bottom panel

Headings

Heading with line

Detailed heading

Project caption

Page header

Type effect

Ripple effect

Background image

Overlay background

Example code

Spacers and side paddings

Spacers

Example code

Sides

Border side

Progress bar

Flex sides

Owl carousel

Customer carousel

Side carousel

Testimonial carousel

Feedback

Google Map

Project Grid

Modal project

Outro

Less

Sources and Credits

Used plugins

Media content