Documentation

Maxwell - Multipurpose Responsive HTML5 Template with modern and clean designed.

Created: 25/01/2017
By: Webmechanicx
Email: varendrasoft@gmail.com

Thank you for purchasing our template. If you have any questions that are beyond the scope of this help file, please feel free to contact us for further support. Thanks you so much!

Table of Contents

  1. Introduction
  2. HTML Structure
  3. CSS Files and Structure
  4. JavaScripts
  5. Navigation and Logos
  6. Change google Map
  7. Contact Form Setup
  8. Fonts used
  9. Sources and Credits

A) Introduction - top

Maxwell is a Multipurpose Responsive HTML5 Template with modern and clean designed. By using Maxwell you can quickly create unique websites for different needs, for example: business/corporate, Company, individual or agencies, landing page, product or service selling and more!. It has designed carefully, in order to create a seamless and wonderful user experience across all devices.

Template Features

B) HTML Structure - top

Here just Home "index.hthml" HTML structure

This template is a Bootstrap based responsive layout and index.html file seperated by Seven (7) Sections. Here is the general structure.

C) CSS Files and Structure - top

Styles

We're using 8 CSS files in this template. "style.css" is base css file which contains additional css files. we have separated styles for improving convenience to edit this template. If you're going to use this template in production we recommend you merge all stylesheets in one file (for decreasing http queries).

Lets take a look closely at our stylesheet files.

  1. bootstrap.min.css

    This Stylesheet contains responsive grid system ,default element style based on bootstrap. It is bootstrap framework main css file

  2. font-awesome.min.css

    Base styles for FontAwesome icon fonts.

  3. et-line-font.css

    Base styles for ET Line icon fonts.

  4. animate.css

    Styles for smooth animation.

  5. owl.carousel.min.css

    Styles for carousel slider.

  6. owl.theme.default.min.css

    Default styles for carousel slider.

  7. responsive.css

    Handling additional Responsiveness.

  8. style.css

    Common css style and structures for this template.


		/* Table of Content
		==================================================
			#01. Web Fonts
			#02. Common CSS
			#03. Preloader CSS
			#04. Header CSS
			#05. Slideshow CSS
			#06. About CSS
			#07. Service CSS
			#08. Project CSS
			#09. Team CSS
			#10. Price and Plan CSS
			#11. Feedback CSS
			#12. Contact CSS
			#13. Footer CSS
		*/

Adjust colors and other customization from "style.css" file rather than editing core files.

D) JavaScript - top

This template imports 11 Javascript files.

Lets take a look closely at our javascript files.

  1. jquery-2.2.4.min.js

    Initialize Latest jQuery Library

  2. bootstrap.min.js

    Load Bootstrap framework Library

  3. owl.carousel.min.js

    OWL Carousel for Slideshow and Slider

  4. validator.js

    For Bootstrap validation Plugin

  5. ajax-contact.js

    For Ajax integration for Contact form

  6. jquery.easing.js

    jQuery Plugin for easing effects

  7. jquery.countTo.js

    jQuery Plugin for Stat Counter

  8. jquery.inview.min.js

    jQuery Plugin for invent particular section on scrolling

  9. wow.min.js

    For Smooth animation jQuery file

  10. googlemap.js

    For Google map initialize and style

  11. custom.js

    We put initialisation of many plugins here.

The navigation bootstrap based menu.It will show different view for desktop and mobile device

The Logo is nested within a tag with class of navbar-brand. As you can see there are two kind of logos: First logo used to perform better visibility on slideshow and second one for white background of the header.

Here shown structure layout of Navigation and logos

F) Change Google Map - top

Find googlemap.js form js directory, then find your google Latitude and Longitude on this link MAP LINKS and simply replace. Please see below for easily Understand

Google Map Settings

G) Contact Form Setup - top

Contact form will use php to send emails. you need to a change, So just open contact.php file inside php folder. Change the current email info@yourdomain.com to your email address. Your form is ready!

NOTE: Contact form require web server to send email. Emails can go to your spam / junk folder. Some hosting providers may block php send mail. In that case, you should contact host company to enable it. Please see below for easily Understand

		/***********************************************
		 **** Contact Form Configuration
		 ***********************************************/
		
		// Email ID from where the message sent. It used to be an email id from your domain
		$from = 'no-reply@yourdomain.com';
		
		// Email ID Where to send message 
		$sendTo = 'info@yourdomain.com';
		
		// Message Subject
		$subject = 'New message from contact form';
		
		$fields = array( 
		  'name' => 'Name', 
		  'surname' => 'Surname', 
		  'phone' => 'Phone', 
		  'email' => 'Email', 
		  'message' => 'Message' 
		  ); // array variable name => Text Message to appear in email
		
		// Alert Message After Success 
		$okMessage = 'Contact successfully submitted. Thank you, We will get back to you soon!';
		
		// Alert Message if any error
		$errorMessage = 'There was an error while submitting the form. Please try again later';

H) Fonts Used - top

We have used three Google Fonts in this template.

  1. Fjalla One
  2. Poppins
  3. Shadows Into Light

I) Sources and Credits - top

Once again, thank you so much for purchasing our template. As we said at the beginning, we would be glad to help you if you have any questions relating to this Template. If you have a more general question relating to the Template, you might consider asking your question in the "Item Discussion" Section.

- WebMechanicx Team

Go To Table of Contents