Aries Multipurpose, Corporate Responsive HTML5 Template
- Version: 1.0.0
- Last Updated: 06/30/2016
- Author: Themesflat
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
-
Photos
- The images used on the demo site are for demonstration purposes only and are not included in the download file.
- Fonts & Icons
-
Javascript
- jQuery (http://jquery.com/)
- Bootstrap (http://getbootstrap.com)
- Easing (http://gsgd.co.uk/sandbox/jquery/easing/)
- WayPoints (http://imakewebthings.com/jquery-waypoints/)
- Flexslider (http://flexslider.woothemes.com)
- owl.carousel (http://owlgraphic.com/owlcarousel/)
- Parallax (http://www.ianlunn.co.uk/plugins/jquery-parallax/)
- Cookie (https://github.com/carhartl/jquery-cookie)
- Validate (https://github.com/jzaefferer/jquery-validation)
- Isotope (http://isotope.metafizzy.co/)
- Imagesloaded (http://imagesloaded.desandro.com/)
- Gmap3 (http://gmap3.net)
- Twitter (http://coda.co.za/content/projects/jquery.twitter/)
- Counter (http://www.jqueryscript.net/time-clock/Simple-jQuery-Animated-Counter-With-Easing-Support-SimpleCounter-js.html)
- Fitvids (http://www.jqueryscript.net/layout/Fluid-Width-Video-Embeds-with-jQuery-FitVids.html)
- Video (https://plugins.jquery.com/jquery.mb.YTPlayer/)