AppsLand is a responsive HTML Template for iPhone, iPad, Android, tablet, PC and desktops.
This is powerful App Landing HTML Template with full of customization options and features.
AppsLand is based on Bootstrap 1170px grid system. All files are clearly organised we believe it will be easy to use and edit them.
Design is very clean, elegant and modern. Any one can customize this template as his wishes
Thank you for purchasing our App Landing HTML 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 here. Thanks so much!
• 1170 px bootstrap grid.
• Easy to customize.
• Fully Responsive.
• Modern and unique design.
• index.html
• index-slider.html
• index-video.html
• index-image.html
• index-gradient.html
• index-particles.html
• index-typing.html
• index-iphone7.html
• index-half-header.html
• index-x1.html
• index-x1-slider.html
• index-x1-video.html
• index-x1-image.html
• index-x1-gradient.html
• index-x1-particles.html
• index-x1-typing.html
• index-x1-iphone7.html
• index-x1-half-header.html
• index-x2.html (v1.1)
• index-x2-slider.html (v1.1)
• index-x2-video.html (v1.1)
• index-x2-image.html (v1.1)
• index-x2-gradient.html (v1.1)
• index-x2-particles.html (v1.1)
• index-x2-typing.html (v1.1)
• index-x2-flat.html (v1.1)
• index-x2-half-header.html (v1.1)
• index-x3.html (v1.2)
• index-x3-slider.html (v1.2)
• index-x3-video.html (v1.2)
• index-x3-image.html (v1.2)
• index-x3-gradient.html (v1.2)
• index-x3-particles.html (v1.2)
• index-x3-typing.html (v1.2)
• index-x3-flat.html (v1.2)
• index-x3-half-header.html (v1.2)
• index-x4.html (v1.2)
• index-x4-slider.html (v1.2)
• index-x4-video.html (v1.2)
• index-x4-image.html (v1.2)
• index-x4-gradient.html (v1.2)
• index-x4-particles.html (v1.2)
• index-x4-typing.html (v1.2)
• index-x4-flat.html (v1.2)
• index-x4-half-header.html (v1.2)
• index-x5.html (v1.3)
• index-x5-slider.html (v1.3)
• index-x5-video.html (v1.3)
• index-x5-image.html (v1.3)
• index-x5-particles.html (v1.3)
<body> <!-- Start .header-section --> <div id="home" class="header-section gradiant-background"> <div class="navigation" id="navigation" data-spy="affix" data-offset-top="20"> </div> <div class="header-content"> </div> <!-- .header-content --> </div> <!-- .header-section --> <div class="header-features"> </div> <!-- .header-features --> <!-- Start .about-section --> <div id="about" class="about-section white-bg"> </div> <!-- .about-section --> <!-- Start .features-section --> <div id="features" class="features-section gradiant-background"> </div> <!-- .features-section --> <!-- Start .screenshots-section --> <div id="screenshots" class="screenshots-section white-bg"> </div> <!-- .screenshots-section --> <!-- Start .pricing-section --> <div id="pricing" class="pricing-section"> </div> <!-- .pricing-section --> <!-- Start .statistics-section --> <div class="statistics-section gery-background"> </div> <!-- .statistics-section --> <!-- Start .testimonial-section --> <div id="testimonial" class="testimonial-section white-bg"> </div> <!-- .testimonial-section --> <!-- Start .contact-section --> <div id="contacts" class="contact-section gradiant-background"> </div> <!-- .contact-section --> <!-- Start .footer-section --> <div class="footer-section "> </div> <!-- .footer-section --> </body>
All CSS are located in the "css" folder of the template. Each CSS File is well commented and easy to use and customize to your own needs. Here's the list of the CSS files:
Third-Party Vendor
01. animate.css
02. bootstrap.min.css
03. font-awesome.min.css
04. owl.carousel.css
05. magnific-popup.css
---
Used Files
01. vendor.bundle.css
02. style.css
03. theme.css
---
Also we have also more (9) pre made color preset. you just need to replace one of those file with our theme file.
Here is those file list
01. theme-blue.css
02. theme-blue-green.css
03. theme-dark-blue.css
04. theme-green-blue.css
05. theme-orange.css
06. theme-pink-orange.css
07. theme-purple.css
08. theme-purple-red.css
09. theme-royel-teal.css
---
/*
Template : AppsLand - App Landing Template
Author : Softnio
Version : 1.0.0
Updated : 12.30.2017
1. RESET CSS
2. Fonts CSS
3. Common CSS
4. Navigation
5. Header Section
6. Features Box Section
7. Features Section
8. Screenshots Section
9. Statistics Section
10. Pricing Section
11. Faq Section
12. Testimonial Section
13. Contact Section
14. Footer Section
15. Fix Media Query
*/
/* ##################### RESET CSS ##################### */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, q, s, samp,
small, strike, strong, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
vertical-align: baseline;
background: transparent;
}
/* Fonts CSS */
@import url('https://fonts.googleapis.com/css?family=Quicksand:300,400,500,700');
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i');
body {
font-family: 'Open Sans', sans-serif;
font-size: 16px;
line-height: 1.7;
color: #333;
}
/* Common CSS */
.no-padding{
padding:0;
}
.no-margin{
margin:0;
}
...........
...........
...........
...........
/*Fix Media Query*/
@media only screen and (min-width: 768px) and (max-width: 991px) {
.tab-center{
text-align:center;
}
.tab-left{
text-align:left;
}
}
@media only screen and (max-width: 767px) {
.mobile-left{
text-align:left;
}
.mobile-center{
text-align:center;
}
}
All javascript are located in the "js" folder of the template
Third-Party Vendor
01. jquery.js
02. jquery.easing.min.js
03. bootstrap.min.js
04. form.plugins.js
05. magnific-popup.min.js
06. owl.carousel.min.js
07. particles.min.js
08. wow.min.js
---
Used Files
01. jquery.bundle.js
02. script.js
03. googleMap.js
All javascript code are located in script.js file
;(function($){
'use strict';
var $body = $('body')
// Smooth scrolling using jQuery easing
$('a.nav-item[href*="#"]:not([href="#"])').on("click",function() {
if (location.pathname.replace(/^\//, '') === this.pathname.replace(/^\//, '') && location.hostname === this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html, body').animate({
scrollTop: (target.offset().top - 70)
}, 1000, "easeInOutExpo");
return false;
}
}
});
// navigation collapse
$('.nav-item').on("click",function() {
$('.navbar-collapse').collapse('hide');
});
/*Bootstrap Dropdown*/
var $dropdown_menu = $('.dropdown');
if ($dropdown_menu.length > 0 ) {
$dropdown_menu.on("mouseover",function(){
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).fadeIn("400");
$(this).addClass('open');
});
$dropdown_menu.on("mouseleave",function(){
$('.dropdown-menu', this).not('.in .dropdown-menu').stop(true,true).fadeOut("400");
$(this).removeClass('open');
});
})(jQuery);
To change your location And change style of your google map, just follow those comments
Also you need change our Google map api key with yours. Get your api key from this link (Map API) then, go to bottom of your html page. replace your key with our key. note: if you don't do this then your file will work fine with your local page but you will be geting problem when you upload it on a web server.
// When the window has finished loading create our google map below
google.maps.event.addDomListener(window, 'load', init);
function init() {
// Basic options for a simple Google Map
// For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
var mapOptions = {
// How zoomed in you want the map to start at (always required)
zoom: 14,
// The latitude and longitude to center the map (always required)
center: new google.maps.LatLng(40.6700, -73.9400), // New York
// How you would like to style the map.
// This is where you would paste any style found on Snazzy Maps.
styles: []
};
// Get the HTML DOM element that will contain your map
// We are using a div with id="gMap" seen below in the <body>
var mapElement = document.getElementById('gMap');
var map = new google.maps.Map(mapElement, mapOptions);
// Let's also add a marker while we're at it
marker = new google.maps.Marker({
map:map,
draggable:true,
animation: google.maps.Animation.DROP,
position: new google.maps.LatLng(40.6700, -73.9400), // Change those co-ordinates to yours.
icon: '' // null = default icon
});
}
First open the php file located into form folder. Files are 'contact.php' and 'get-app.php'. On the file you will saw bellow code. Just update your sitename, your email and name. If you want to add multiple email then just duplicate the line '$emailTO[] = array...' and add another email
// Enter Your Sitename $sitename = 'your site'; // Enter your email addresses: @required $emailTO[] = array( 'email' => 'your mail', 'name' => 'your name' );
If you want to add BCC / CC email address then just enable below line and update same way as email too.
//$emailBCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' ); //$emailCC[] = array( 'email' => 'email@yoursite.com', 'name' => 'Your Name' );
In this template have 6 defferent prebuilt stylesheet which is helps you to use different color on your site. So you just need to update stylesheet link from each html head section.
Example as bellow.
<link rel="stylesheet" type="text/css" href="css/theme.css"> to <link rel="stylesheet" type="text/css" href="css/theme-blue.css">
This template support 2 different theme, default and pro/light. So you can control this by change class name. Example as bellow.
Default Theme
<body class="theme-default">
Switch to Pro Theme (theme accent color)
In body class add or remove the class name [theme-pro]. Shown bellow.
<header class="theme-pro">
jQuery :- https://jquery.com/
jQuery Easing:- http://gsgd.co.uk/sandbox/jquery/easing/
Owl Carousel 2 :- https://owlcarousel2.github.io/OwlCarousel2/
jQuery Form :- http://malsup.com/jquery/form/
jQuery Validation :- http://jqueryvalidation.org/
Wow :- https://github.com/graingert/WOW/
particles :- http://vincentgarreau.com/particles.js/
Animated Headlines :- https://codyhouse.co/demo/animated-headlines/
Magnific Popup :- https://github.com/dimsemenov/Magnific-Popup/
PHPMailer :- https://github.com/PHPMailer/PHPMailer/
Pexel :- https://www.pexels.com/
Caution:
If you have order version, you can upgrade to newer version. Must aware upgrade process overwrite your custom code if you have already. So must keep backup before any process. Contact us if you face any problem.
+ Bug Fix : Scroll bar on mobile fix for header.
@ stylesheet update regarding new Fix.
+ New Landing page add for Web application.
New File Added and Update code:
+ index-x5.html
+ index-x5-slider.html
+ index-x5-video.html
+ index-x5-image.html
+ index-x5-particles.html
@ javascript and stylesheet update regarding new design.
For updating your template to new version, you need to update javascript (script.js) and style sheet (style.css and theme.css).
+ New Landing page add for Web application.
New File Added and Update code:
+ index-x3.html
+ index-x3-slider.html
+ index-x3-video.html
+ index-x3-image.html
+ index-x3-gradient.html
+ index-x3-particles.html
+ index-x3-typing.html
+ index-x3-flat.html
+ index-x3-half-header.html
+ index-x4.html
+ index-x4-slider.html
+ index-x4-video.html
+ index-x4-image.html
+ index-x4-gradient.html
+ index-x4-particles.html
+ index-x4-typing.html
+ index-x4-flat.html
+ index-x4-half-header.html
@ javascript and stylesheet update regarding new design.
For updating your template to new version, you need to update javascript (script.js) and style sheet (style.css).
+ New Landing page add for Desktop apps.
+ Lightbox content feature for team profile.
+ Dropdown menu feature.
New File Added and Update code:
+ index-x2.html
+ index-x2-slider.html
+ index-x2-video.html
+ index-x2-image.html
+ index-x2-gradient.html
+ index-x2-particles.html
+ index-x2-typing.html
+ index-x2-flat.html
+ index-x2-half-header.html
@ javascript and stylesheet update regarding new design.
For updating your template to new version, you need to update javascript (script.js) and style sheet (style.css, theme.css, vendor.bundle.css).
Initial Released Template