AVEN is a responsive HTML5 template. Well coded and well documented, this awesome premium website template is the ideal tool to showcase your project, your business or your portfolio. it’s fully responsive design was tested on all major handheld devices. Don’t wait – launch your startup now!

 

Features :-

 

  •     Bootstrap 3.3.1
  •     HTML5 + CSS3
  •     Responsive layout
  •     Google Fonts Support
  •     Background Video
  •     W3C Valid source code
  •     Working Contact Form
  •     Parallax Backgrounds
  •     Crossbrowser Compatible
  •     Easy Customizable
  •     Clean Code, All files are well commented and organized
  •     Sticky Navigation
  •     Dedicated Support

 

All Used Images are preview purpose only. Not Included in download File.

created : 10-September-2016

by : muse-master

email : master002@live.in

Thank you for purchasing AVEN Responsive HTML5 Template. If you have any questions that are beyond the scope of this help file, please feel free to email, via my user page contact form. Thanks so much!

Files Structure

- css (Template CSS)

 

- fonts (Font Faces, Font Awesome, etc..)

 

- imgages (All Images)

 

- js (Template JS)

 

HTML Structure

 The template is based on Bootstrap 3 Framework -

http://getbootstrap.com

Bootstrap includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases.

Basic HTML Markup

<div class="row">

          <div class="col-md-12">

                   Level 1 column

                   <div class="row">

                             <div class="col-md-6">Level 2</div>

                             <div class="col-md-6">Level 2</div>

                   </div>

          </div>

</div>

If you need more information, please visit this site:

http://getbootstrap.com/css/#grid

CSS Structure

The organization of the CSS is one of our priorities.

These are the CSS file we're using in the template:

- css/bootstrap.min.css   - ( Bootstrap Grid & Layout Styles )

 

- css/font-awesome.min.css   - ( Font Awesome Icon Styles )

 

- css/style.css    - ( Contains Theme styles )

 

- css/responsive.css    - ( Responsive styles - This stylesheet contains responsive rules for adapting the template to any resolution,  from desktop to small mobile. )

 

- css/animate.min.css    - ( Contains Animation Effects )

 

- css/prettyPhoto.css    - ( Contains Lightbox Stylings )

 

- css/color.css    - ( Contains Page Backgrounds and Other Stylings for Pages )

 

- css/owl/owl.carousel.css   - ( Contains slider Stylings )

 

- css/owl/owl.transitions.css   - ( Transitions Color Styles... )

 

 To link any .css files, save it in "css" folder and link in head like this

 

     <link href="css/your-file.css" rel="stylesheet" type="text/css">

Javascript

jQuery - is a Javascript library that greatly reduces the amount of code that you must write.

For more information, please visit :

 

The initialization of the elements, libs and features is made by the file main.js, in the JS folder.

http://www.jquery.com/

- js/jquery.min.js     - ( Jquery Library )

 

- js/bootstrap.min.js     - ( Contains Bootstrap Elements Scripts )

 

- js/bootstrapValidator.min.js    - ( Contains Bootstrap form validations )

 

- js/jquery.appear.js     - ( Contains Scripts to view elements with animated when an element becomes visible in browser viewport )

 

- js/jquery.easing.1.3.js    - ( Contains Smooth Effects Scripts )

 

- js/isotope.min.js     - ( Contains Isotope Grid Scripts ( Portfolio & Blog Used ) )

 

- js/SmoothScroll.js     - ( Contains Smoothscroll Effects Scripts )

 

- js/jquery.sticky.js     - ( Contains Sticky Menu )

 

- js/typed.js    - ( Contains Typing Animation Script )

 

- js/jquery.prettyPhoto.js    - ( Contains Lightbox Scripts )

 

- js/owl.carousel.min.js   - ( OWL carousel slider Script )

 

- js/jquery.superslides.js   - ( Super Slider Script )

 

- js/jquery.mixitup.min.js   - ( Portfolio Filter Script )

 

- js/jquery.countTo.js     - ( Contains Number Counting Scritps )

 

- js/jquery.parallax-1.1.3.js    - ( Contains Parallax Background Scritps )

 

- js/jquery.mb.YTPlayer.js          - ( Contains Background Video Scritp )

 

- js/custom.js      - ( Contains all theme Elements and Features Initialization & Customized Scripts )

 

To link any .js files, save it in "js" folder and link before </body> tag like this

 

     <script href="js/your-file.js" type="text/javascript">

Icons

 Font Awesome is a @font-face iconset that you can change size and color of the icons using CSS.

 

If you need more information, please visit this site:

http://fontawesome.io/

HTML Markup :

 

    <i class="fa fa-edit"></i>

    <i class="fa fa-search"></i>

    ...

Slider

Owl Carousel Slider is the slider you'll find in the content.

Owl Carousel Slider is a Touch enabled jQuery plugin that lets you create beautiful responsive carousel slider. You can find more documentaion here :

 

The variations of the slider is defined by data-effect attribute, which extends the default plugin options.

 

http://owlgraphic.com/owlcarousel/

HTML Markup :

 

    <div class="owl-carousel custom-styles" data-effect="fade" data-autoplay="4000">

    <div class="item">

     ...

    </div>

</div>

PrettyPhoto

 The filter is driven by PrettyPhoto script.

 

For more information check the

Documentation

PrettyPhoto

Filtering :

The filter is driven by the Isotope script -

 

Here's an example of usage:

http://isotope.metafizzy.co/

Filter Options :

<ul class="prettyprint lang-html linenums">

    <li><a href="#" data-filter="all" class="filter active">All Works</a></li>

    <li><a href="#" data-filter=".web-design">Web Design</a></li>

    <li><a href="#" data-filter=".graphic-design">Graphic Design</a></li>

    <li><a href="#" data-filter=".ecommerce">eCommerce</a></li>

</ul>

Filter Data :

<div id="mix-container" class="portfolio-grid">

<!-- Item 1 -->

<div class="grids col-xs-12 col-sm-4 col-md-3 mix all web" style="display: inline-block;">

<div class="grid">

<img src="img/sections/portfolio/1.jpg" width="400" height="273" alt="Recent Work" class="img-responsive">

<div class="figcaption">

<div class="caption-block">

<h4>Name Of Work</h4>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

</div>

<!-- Image Popup-->

<a href="img/sections/portfolio/1.jpg" data-rel="prettyPhoto[portfolio]">

<i class="fa fa-search"></i>

</a>

<a href="portfolio-single.html">

<i class="fa fa-link"></i>

</a></div>

</div>

</div>

<!-- Item 1 Ends-->

.....

 

 </div>

</div>

Effects

You can add some Animations / Transitions to the elements which fires when an element scrolls into view, it's pretty simple to use and you can add it in any element.

Usage :

<div data-animation="bounceIn" data-animation-delay="200">

    ...

</div>

Heads up: The Attribute data-appear-animation-delay is Optional and is set in Miliseconds.

 

The animation can be set to:

 

  •     flash
  •     shake
  •     bounce
  •     tada
  •     swing
  •     wobble
  •     wiggle
  •     pulse
  •     fadeIn
  •     fadeInUp
  •     fadeInDown
  •     fadeInLeft
  •     fadeInRight
  •     fadeInUpBig
  •     fadeInDownBig
  •     fadeInLeftBig
  •     fadeInRightBig
  •     bounceIn
  •     bounceInUp
  •     bounceInDown
  •     bounceInLeft
  •     bounceInRight
  •     rotateIn
  •     rotateInUpLeft
  •     rotateInDownLeft
  •     rotateInUpRight
  •     rotateInDownRight

 

To remove animation from an element, just remove data-appear-animation and data-appear-animation-delay attributes.

 

Sources & Credits

The images included in preview are for demonstration purposes and should always be replaced with your own work.

Once again, thank you so much for purchasing this template. As I said at the beginning, I'd be glad to help you if you have any questions.