Alpha Dot Multi Purpose HTML5 Template


Thank you very much for purchasing our theme! If you have any questions that aren't covered in this documentation, please feel free to email us.

Alpha Dot High Quality Multi Purpose HTML5 template based on bootstrap 3. With 20+ different home page variations, 75+ Html files included Best Idea for small Business, creative Agencies, corporate web solution, personal resume, weddings, restaurant, fitness, web hosting, advertising, travel agency, construction and business agencies. High Resolution Images and google fonts.

It will be fit any mobile or tablet devices. This is a flexible template uses fresh and clean design.

  1. Modern, Clean & Elegant Design,
  2. Built With HTML5 and CSS3,
  3. Bootstrap 3 in core,
  4. Fully responsive,
  5. Fresh and Clean Code,
  6. Working PHP Contact Form with a Simple Email Template,
  7. Includes Entire Font Awesome,
  8. Includes Google Material Icons,
  9. Cross browser support,
  10. Responsive toggle menu for small devices, sticky menu when scrolling down,
  11. CSS3 animations,
  12. Google Fonts Used,
  13. Google Map integrated,
  14. Sixteen different homepage variations,
  15. Awesome single page for single product view, 
  16. Excellent Customer Support – We care about your site as much as you and will help in anyway possible.

Folders

-assets (all assets/required file of this template)
--bootstrap (bootstrap core files)
--css (all css files)
--flexSlider (all flex slider files)
--fonts (material icons and font-awesome font icon set )
--images (all images)
--js (all javascript files)
--magnific-popup (all files for image popup)
--owl-carousel (owl-carousel core files)
--simple-text-rotator (text rotator plugin)
--videos (html5 video formats)
--YTPlayer (youtube video player plugin)
- email-templates (a basic email template functional with contact form)
-and all other html files

 

HTML Structure

Being based on Twitter Bootstrap, Alpha Dot inherits its awesome grid system. It's a responsive, mobile first  grid that appropriately scales up to 12 columns as the device or view port size increases.

Example 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>

 

CSS Files

<link rel="stylesheet" href="assets/css/master.css'>
<link rel="stylesheet" href="assets/css/responsive.css'>

@import url('https://fonts.googleapis.com/css?family=Droid+Serif:400,700|Great+Vibes|Montserrat|Raleway:200,300,400,700|Roboto:300,400,700');
@import url("../css/bootstrap.min.css");
@import url("../css/font-awesome.min.css");
@import url("../css/custom-icons.min.css");
@import url("../css/transitions.css");
@import url("../css/flexslider.css");
@import url("../css/bootsnav.css");
@import url("../css/owl.carousel.css");
@import url("../css/animate.css");

 

JavaScripts Files


<!-- jQuery Javascript Plugins -->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBv7LYRzyivt-k-4wMEENhy-cMR_KMO_8A"></script>

<script src="assets/js/jquery.min.js"></script>

<script src="assets/js/plugins.js"></script>

<script src="assets/js/validator.js"></script>

<script src="assets/js/jquery.magnific-popup.js"></script>

<script src="assets/js/master.js"></script>

<script src="assets/js/bootsnav.js"></script>
 

There are two kinds of font icons used in this template.

  1. FontAwesome
  2. Material Icons

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

To add an icon, simply create an empty element with class 'fa fa-[icon name]', for example: 

<i class="fa fa-file"></i>
<i class="fa fa-home"></i>
<i class="fa fa-envelope"></i>

 

Flaticon is also a @font-face iconset that allows you to change size and color of the icons just using CSS.

To add an icon, simply create an empty element with class 'mdi-[icon name]', for example:

<i class="mdi-anchor"></i>
<span class="mdi-fingerprint"></span>

You can use all hero units (slider sections) at any pages. Just copy the Intro Section or Video Section or Slider section and past it in any pages. You can create new pages with this bolcks.

Example:
If you wish to make your homepage with html video slider just copy this code and past it on your new page.

<!------ Video Start ------>
<section class="pt-0 pb-0">
<div class="hero-text-wrap overlay-bg">
<div class="hero-text white-color">
<div class="container text-center">
<h3 class="white-color raleway-font text-uppercase font-700">Start your future today</h3>
<h1 class="white-color">Alpha Dot</h1>
<p class="text-center mt-30"><a class="btn btn-white btn-circle">See Our Work</a><a class="btn btn-color btn-circle">Buy Alpha</a></p>
</div>
</div>
</div>
<div class="homepage-hero-module">
<div class="video-container">
<div class="filter"></div>
<video autoplay loop class="fillWidth">
<source src="assets/images/video/alpha-video.mp4" type="video/mp4" />
<source src="assets/images/video/alpha-video.webm" type="video/webm" />
</video>
<div class="poster hidden"> <img src="assets/images/video/alpha-video.jpg" alt="video-img"> </div>
</div>
</div>
</section>
<!------ Video End ------>

Important: Dont forget to add required CSS files and Javascript files at header and footer.

You will get lots of shortcodes with this template. We made all shortcodes clean and re useable. 
You can use all shortcodes  at anywhere and in any pages of this template. Just copy any block you like and past it any where you wish.

Example:

<!------ Who We Are Start ------>
<section class="first-ico-box">
<div class="container">
<div class="row">
<div class="col-sm-8 section-heading">
<h2>We Are Aplha Dot</h2>
<h4 class="mt-10 raleway-font font-300">Devoted to Design Agency Excellence</h4>
<div class="mt-30">
<p>Objectively innovate empowered manufactured products whereas parallel platforms. Holisticly predominate extensible testing procedures for reliable supply chains. Dramatically engage top-line web services vis-a-vis cutting-edge deliverables. </p>
</div>
</div>
</div>
<div class="row mt-50">
<div class="col-md-4 feature-box text-center"> <i class="mdi mdi-anchor font-50px blue-icon"></i>
<h5>Creative &amp; Clean Design</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur congue erat ac molestie.</p>
</div>
<div class="col-md-4 feature-box text-center"> <i class="mdi mdi-fingerprint font-50px blue-icon"></i>
<h5>Multiple Demos</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur congue erat ac molestie.</p>
</div>
<div class="col-md-4 feature-box text-center"> <i class="mdi mdi-food-apple font-50px blue-icon"></i>
<h5>100+ Free Icons</h5>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce efficitur congue erat ac molestie.</p>
</div>
</div>
</div>
</section>
<!------ Who We Are End ------>

Just copy this block and past anywhere of any page of this template. You can youse all individual blocks along with this template. 

The HTML5 <video> element specifies a standard way to embed a video in a web page. You can play a video in your webpage background or any section.  You can host video form root server or can add link form other server. 

For browser support you have to provide two format video(.webm/.ogg and .mp4)

The markup:

<div class="homepage-hero-module">
    <div class="video-container">
      <div class="filter"></div>
      <video autoplay loop class="fillWidth">
        <source src="assets/images/video/alpha-video.mp4" type="video/mp4" />
        <source src="assets/images/video/alpha-video.webm" type="video/webm" />
      </video>
      <div class="poster hidden"> <img src="assets/images/video/alpha-video.jpg" alt="video-img"> </div>
    </div>
  </div>
jquery.mb.YTPlayer - use a custom youtube player for a video as background on jQuery framework.
 
This is a jQuery component that let you play a Youtube® movie in a chromeless player.
You can even use a movie as background of your HTML page.
 
Important notice!
The plug in works only if used under a web server. It doesn’t work if you run the HTML page as file (file://…).
 
If you want to run it locally on your computer you need a web server installed (for ex: MAMP for Mac, XAMP for Windows,LAMP for linux) and reach the file from http://localhost… or whatever you mapped in the Host file as localhost.
 
HTML Markup:
<a id="bgndVideo" class="player" data-property="{videoURL:'http://youtu.be/BsekcY04xvQ',containment:'body',autoPlay:true, mute:true, startAt:0, opacity:1}">My video</a>

 

data-property:
*data-property is an attribute of the TAG where you can pass the settings of the player.
 

 

js markup:

 $(function(){
    $(".player").YTPlayer();
  });

 

For more customization go to the link: "https://github.com/pupunzi/jquery.mb.YTPlayer/wiki

We used a dynamic google map in this template. You can easily change your location, address, map marker, map color and almost everything.
 
First open script.js from assets/js/scripts.js find out  /* ======= GOOGLE MAP ======= */  wrapper.  
Put your latitude longitude, put your map marker at $marker_url.
Write your address in "contentString".  
You can also change map color form "stylers"  zoom options form "map_zoom"
 
 In html put the map "id" in any section and give it a min-height(your desired height)
 
JS Markup: 
 
/* ==================================================================
     GOOGLE MAPS 
     ================================================================== */
	    if ($('#myMap').length > 0) {
        //set your google maps parameters
        var $latitude = 40.716304, //If you unable to find latitude and longitude of your address. Please visit http://www.latlong.net/convert-address-to-lat-long.html you can easily generate.
            $longitude = -73.995763,
            $map_zoom = 16 /* ZOOM SETTING */

        //google map custom marker icon 
        var $marker_url = 'assets/images/pin.png';

        //we define here the style of the map
        var style = 
            [
		  {
			"elementType": "geometry",
			"stylers": [
			  {
				"color": "#f5f5f5"
			  }
			]
		  },
		  {
			"elementType": "labels.icon",
			"stylers": [
			  {
				"visibility": "off"
			  }
			]
		  },
		  {
			"elementType": "labels.text.fill",
			"stylers": [
			  {
				"color": "#616161"
			  }
			]
		  },
		  {
			"elementType": "labels.text.stroke",
			"stylers": [
			  {
				"color": "#f5f5f5"
			  }
			]
		  },
		  {
			"featureType": "administrative.country",
			"elementType": "geometry.fill",
			"stylers": [
			  {
				"color": "#1ec0ff"
			  }
			]
		  },
		  {
			"featureType": "administrative.land_parcel",
			"elementType": "labels.text.fill",
			"stylers": [
			  {
				"color": "#bdbdbd"
			  }
			]
		  },
		  {
			"featureType": "poi",
			"elementType": "geometry",
			"stylers": [
			  {
				"color": "#eeeeee"
			  }
			]
		  },
		  {
			"featureType": "poi",
			"elementType": "labels.text.fill",
			"stylers": [
			  {
				"color": "#757575"
			  }
			]
		  },
		  {
			"featureType": "poi.park",
			"elementType": "geometry",
			"stylers": [
			  {
				"color": "#e5e5e5"
			  }
			]
		  },
		  {
			"featureType": "poi.park",
			"elementType": "labels.text.fill",
			"stylers": [
			  {
				"color": "#9e9e9e"
			  }
			]
		  },
		  {
			"featureType": "road",
			"elementType": "geometry",
			"stylers": [
			  {
				"color": "#ffffff"
			  }
			]
		  },
		  {
			"featureType": "road.arterial",
			"elementType": "labels.text.fill",
			"stylers": [
			  {
				"color": "#757575"
			  }
			]
		  },
		  {
			"featureType": "road.highway",
			"elementType": "geometry",
			"stylers": [
			  {
				"color": "#dadada"
			  }
			]
		  },
		  {
			"featureType": "road.highway",
			"elementType": "labels.text.fill",
			"stylers": [
			  {
				"color": "#616161"
			  }
			]
		  },
		  {
			"featureType": "road.local",
			"elementType": "labels.text.fill",
			"stylers": [
			  {
				"color": "#9e9e9e"
			  }
			]
		  },
		  {
			"featureType": "transit.line",
			"elementType": "geometry",
			"stylers": [
			  {
				"color": "#e5e5e5"
			  }
			]
		  },
		  {
			"featureType": "transit.station",
			"elementType": "geometry",
			"stylers": [
			  {
				"color": "#eeeeee"
			  }
			]
		  },
		  {
			"featureType": "water",
			"elementType": "geometry",
			"stylers": [
			  {
				"color": "#c9c9c9"
			  }
			]
		  },
		  {
			"featureType": "water",
			"elementType": "labels.text.fill",
			"stylers": [
			  {
				"color": "#9e9e9e"
			  }
			]
		  }
		];

        //set google map options
        var map_options = {
            center: new google.maps.LatLng($latitude, $longitude),
            zoom: $map_zoom,
            panControl: true,
            zoomControl: true,
            mapTypeControl: true,
            streetViewControl: true,
            mapTypeId: google.maps.MapTypeId.ROADMAP,
            scrollwheel: false,
            styles: style
        }
        //inizialize the map
        var map = new google.maps.Map(document.getElementById('myMap'), map_options);
        //add a custom marker to the map                
        var marker = new google.maps.Marker({
            position: new google.maps.LatLng($latitude, $longitude),
            map: map,
            visible: true,
            icon: $marker_url
        });

        var contentString = '<div id="mapcontent">' + '<p>Alpha Dot</p></div>';
        var infowindow = new google.maps.InfoWindow({
            maxWidth: 320,
            content: contentString
        });

        google.maps.event.addListener(marker, 'click', function() {
            infowindow.open(map, marker);
        });
       
    }
	 });

 

HTML Markup:

<!------ Google Maps Start ------>
<section class="pt-0 pb-0 map-section">
	<div id="myMap" class="wide"></div>
</section>
<!------ Google Maps End ------>

 

In 69Studio HTML5 template there is full functional working contact form. We have also added a simple email template with this contact form.

To customize/change the email address please open  "sendemail.php" file from root folder in any code editor .  

Go to the line number 9.  There is a line: 

$to         = 'youremail@gmail.com'; //put your email here

Replace the existing email address with your own mailing address.

Thats it! your template is ready now for receive message from others via mail.

HTML/CSS

Twitter Bootstraphttp://getbootstrap.com/

animate.csshttp://daneden.github.io/animate.css/

 

Fonts

Google Fonts: http://www.google.com/webfonts

Font Awesome: http://fontawesome.io/

Google Materail Icons: https://materialdesignicons.com/

 

JavaScripts

jQuery: https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js

jQuery Easing: http://gsgd.co.uk/sandbox/jquery/easing/

megamenu: http://bootsnav.danurstrap.com/

smoothscroll: http://cferdinandi.github.io/smooth-scroll/

countTo: https://github.com/mhuggins/jquery-countTo

stellar: http://markdalgleish.com/projects/stellar.js/

Shuffle: http://vestride.github.io/Shuffle/

inview: https://github.com/protonet/jquery.inview

owl.carousel: http://owlgraphic.com/owlcarousel/

YTPlayer: https://github.com/pupunzi/jquery.mb.YTPlayer

 

Photos and Videos

Important! 

The images used on the demo site are for demonstration purposes only and are not included in the download file. We have included placeholder images for each instance.
 
Slider Images: https://unsplash.com/ ,  http://www.shutterstock.com/,  http://www.pexels.com/
Once again, thank you very much for purchasing this template;  we'll be glad to help you if you have any questions.
If you have a more general question relating to the templates on ThemeForest, please consider visiting the forums and asking your question in the "Item Discussion" section.
 
Thanks,
Incognito Themes