Aries Multipurpose, Corporate Responsive HTML5 Template

  • Version: 1.0.0
  • Last Updated: 06/30/2016
  • Author: Themesflat
Thank you so much for your interests. Your comments and ratings would be much appreciated. If you purchase this template, you will get support. We will update this template time by time and we want to hear your wishes for the future updates or for complete new templates. You need file PSD or images please contact via skyper:ghp_c1 or email themesflat@gmail.com we will send this for you. If you like this template, don’t forget to rate it 5 stars

Template features:

  • Bootstrap 3 Framework
  • jQuery 1.11.2
  • HTML5 & CSS3
  • Responsive Template
  • Free Fonts used
  • Pixel Perfect
  • Clean & Unique Design
  • Developer Friendly Code
  • Working PHP Contact Form
  • Custom Shortcodes
  • Multi-Pages
  • Easy Customizer
  • Fully Customizable
  • Browser Compatibility
  • Responsive Carousel
  • Clean Code
  • Clean Design
  • W3C Validation
  • Parallax Section
  • Documentation
  • & much more...

HTML Structure

Aries is a Powerfull HTML5 template, that both works great on your Personal Computer, or on your tablet and mobile devices. It's got some powerfull and eye cathing features, such as animates boxes, filterable portfolio, fullwidth and boxed version and much more. Other than that you get working contact form, responsive design, valid HTML5 and hacks for older browser which don't support HTML5. You can use template for your Multipurpose, coporate, portfolio, personal, blog, shop and business website.

Below is Aries basic structure:

<!DOCTYPE html>
	<head>
	    <meta charset="utf-8">
	    <title>Aries - Construction HTML Templates  & Building Business</title>

	    <!-- Mobile Specific Metas -->

	    <!-- Bootstrap  -->

	    <!-- Theme Style -->

	    <!-- Responsive -->	    
	   
	    <!-- Animation Style -->    

	    <!-- Favicon and touch icons  -->
	</head>

	<body>

		<!-- Top -->
		<div class="top"> </div>

		<!-- Header -->
		<div class="header"> </div>

		<!-- Slide -->
		<div class="tp-banner-container"> </div>

	    <!-- Section -->
	    <section class="flat-row"> </section>

	    <!-- Footer -->
	    <footer class="footer"> </footer>

	   	<!-- Bottom -->
	   	<div class="bottom"> </div>

	   	<!-- Go Top -->
	    <a class="go-top">
	     	<i class="fa fa-angle-up"></i>
	    </a>
	   
	   	<!-- Javascript -->
	   	<script type="text/javascript" src="javascript/jquery.min.js"></script>
	   	<script type="text/javascript" src="javascript/bootstrap.min.js"></script>
	   	<script type="text/javascript" src="javascript/jquery.easing.js"></script>
	   	<script type="text/javascript" src="javascript/jquery.isotope.min.js"></script>
	   	<script type="text/javascript" src="javascript/imagesloaded.min.js"></script>
	   	<script type="text/javascript" src="javascript/owl.carousel.js"></script>
	   	<script type="text/javascript" src="javascript/jquery.flexslider-min.js"></script>
	   	<script type="text/javascript" src="javascript/jquery-waypoints.js"></script>   
	   	<script type="text/javascript" src="javascript/jquery.tweet.min.js"></script>   
	    <script type="text/javascript" src="javascript/jquery.cookie.js"></script>
	    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>   
	   	<script type="text/javascript" src="javascript/gmap3.min.js"></script>
	   	<script type="text/javascript" src="javascript/jquery.fitvids.js"></script>   
	   	<script type="text/javascript" src="javascript/parallax.js"></script>   
	   	<script type="text/javascript" src="javascript/jquery-countTo.js"></script>
	   	<script type="text/javascript" src="javascript/switcher.js"></script>
	   	<script type="text/javascript" src="javascript/jquery-validate.js"></script>
	   	<script type="text/javascript" src="javascript/jquery.mb.YTPlayer.js"></script>
	   	<script type="text/javascript" src="javascript/main.js"></script>	

		<!-- Revolution Slider -->
		<script type="text/javascript" src="javascript/jquery.themepunch.tools.min.js"></script>
		<script type="text/javascript" src="javascript/jquery.themepunch.revolution.min.js"></script>
		<script type="text/javascript" src="javascript/slider.js"></script>

	</body>
	</html>

CSS System

The Aries CSS System contains 3 parts:
  • Theme style
  • Shortcodes style
  • Responsive style
  • Javascript - Fonts - Animation - Bootstrap style

Style.css ( Theme style )


/**
  * Reset
  * Repeatable Patterns
  * Header
  * Page title
  * Breadcrumbs
  * Blog
  * Widget
  * Footer
  * Pagination
  * Flat Grid
  * Comment
  * GoTop Button
  * Bottom
  * Parallax
  * Boxed
  * Switcher
  * Revolution Slider
*/
				

Shortcodes.css ( Shortcodes - Elements style )

You can easily use the shortcodes to create your own page.


/** 
  *	Row
  *	Button
  *	Title section
  *	Flat divider
  *	Iconbox
  *	Icon box left
  *	Flat contact us
  *	Flat list
  *	Flat title box
  *	Flat price table
  *	Flat accordion
  *	Flat tabs
  *	Content box
  *	Flat information box
  *	Contact form
  *	flat-counter
  *	flat portfolio
  *	Portfolio Detail
  *	Related-portfolio
  *	flat-testimonials
  *	Progress Bar
  *	flat-team
  *	flat-socials
*/
				

Javascript - Fonts - Animation - Bootstrap style

/**  
  * icomoon.css
  * flexslider.css
  * font-awesome.css

  * owl.carousel.css
  * revolution-slider.css

  * animate.css
  * shortcodes.css
  * responsive.css

  * bootstrap.css 
  * woocommerce.css
*/
				

Javascript Custom

Here you can modify any settings for ( Retina Logos, Animations, Testimonials, Sliders, Twitter, Flickr Widget & Progress bar and more..)
Change Icon for map go to Main.js ( javascript/main.js ) find line 682 icon: 'http://themesflat.com/html/aries/images/map.png' replace url images

Main.js ( javascript/main.js )


/**
  * isMobile
  * responsiveMenu
  * headerFixed
  * scrollBtn
  * onepage_nav 
  * ajaxAppointmentl
  * ajaxContactForm
  * alertBox
  * detectViewport
  * counter
  * tabs
  * flatPricingCarousel
  * flatTestimonials
  * simpleSlider
  * datepicker
  * sectionVideo
  * googleMap  
  * responsiveVideo
  * flatAnimation
  * goTop
  * retinaLogos
  * parallax
  * removePreloader
*/
				

Shortcodes System

You can easily use the shortcodes to create your own page. Details at here

    
/**  
    * Row
    * Button
    * Flat divider
    * Flat services
    * Flat title
    * Flat iconbox
    * Testimoniasl
    * Rencent post
    * Flat team
    * Flat socials 
    * Services iconbox
    * Gallery
    * Contact
    * Flat contact us
    * Flat map 
    * Flat accordion
    * Flat client
    * Flat preloader 
*/
				

Contact Form

To edit the contact form to send mails to your email box, you can look for the config.php. You need to edit yourname@yourdomain.com to your email.

Config.php ( contact/config.php )


$address = "themesflat@gmail.com";
				

Photoshop files included



    1.01-Home-v1.psd
    2.02-Home-v2.psd
    3.03-Album-Gallery-v1.psd
    4.04-Album-Gallery-v2.psd
    5.05-Gallery-Page-3Colum.psd
    6.06-Gallery-Page-Creative.psd
    7.07-Gallery-Preview.psd
    8.08-Gallery-Detail.psd
    9.09-Blog-v1.psd
    10.10-Blog-v2.psd
    11.11-Blog-v3.psd
    12.12-Blog-v4.psd
    13.13-Blog-v5.psd
    14.14-Blog-v6.psd
    15.15-Blog-v7.psd
    16.16-Blog-Single-v1.psd
    17.17-Blog-Single-v2.psd
    18.18-Blog-Single-v3.psd
    19.19-Contact.psd
    20.20-Services-v1.psd
    21.21-Services-v2.psd
    22.22-Services-Single.psd
    
				

Credits