Thank you for purchasing our product. 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!
GEO is Responsive HTML5 App Landing Onepage Template built with Bootstrap v3.3.7, HTML5 and CSS3. Well Organized and valid Code. This Documentation provide you a clear guideline for how to use and customize template. If you facing any problem, please don't forget to ask any question or contact with us for support. Thank You for Purchasing our Product.
GEO is fully responsive HTML5 Template followed HTML5 Structure. Every section is seperated with Comments. We maintain all Coding Procedure.
Head Section Structure: Here is the example code of
section
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>GEO - Onepage Responsive App Landing Template | Bootstrap HTML5 Landing Page</title>
<meta name="description" content="">
<meta name="author" content="">
<!-- Mobile Specific Meta -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--[if IE]><meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'><![endif]-->
<!-- Bootstrap -->
<link href="assets/css/bootstrap.css" rel="stylesheet">
<!-- Magnific Popup style -->
<link rel="stylesheet" href="assets/css/magnific-popup.css">
<!-- Animate.css style -->
<link rel="stylesheet" href="assets/css/animate.css">
<!-- Owl-carousel style -->
<link rel="stylesheet" href="assets/css/owl.carousel.css">
<link rel="stylesheet" href="assets/css/owl.theme.css">
<!-- Custom stylesheet-->
<link rel="stylesheet" href="assets/css/style.css">
<link rel="stylesheet" href="assets/css/responsive.css">
<!-- Font awesome -->
<link rel="stylesheet" href="assets/font-awesome-4.2.0/css/font-awesome.min.css">
<!-- Added google font -->
<link href='http://fonts.googleapis.com/css?family=Raleway:400,700,800%7CRoboto:200,400,700' rel='stylesheet' type='text/css'>
<!--Fav and touch icons-->
<link rel="shortcut icon" href="images/icons/favicon.ico">
<link rel="apple-touch-icon" href="images/icons/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="72x72" href="images/icons/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="114x114" href="images/icons/apple-touch-icon-114x114.png">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
<![endif]-->
</head>
Body Section Structure: Here is the example code of <body> section
<body>
<!-- Preloader -->
<div id="faceoff">
<div id="preloader"></div>
<div class="preloader-section"></div>
</div>
<!-- Preloader end -->
<!-- header start -->
<header id="header" class="navbar-fixed-top">
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<div class="row">
<div class="col-sm-3">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<h1 class="nav-logo"><a class="nav-brand" href=""> GEO</a></h1>
</div>
</div>
<div class="col-sm-7 text-center">
<!-- Collect the nav toggling -->
<div class="collapse navbar-collapse navbar-geo" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li><a href="#intro">Intro</a></li>
<li><a href="#feature">Feature</a></li>
<li><a href="#description">Description</a></li>
<li><a href="#screenshot">Screenshots</a></li>
<li><a href="#download">Download</a></li>
<li><a href="#contact">contact</a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
<div class="col-sm-2 mob-right">
<ul class="app pull-right">
<li><a href=""><i class="fa fa-apple"></i></a></li>
<li><a href=""><i class="fa fa-android"></i></a></li>
<li><a href=""><i class="fa fa-windows"></i></a></li>
</ul>
</div>
</div>
</div><!-- /.container -->
</nav>
</header>
<!-- header end -->
<!-- banner start -->
<section id="banner" class="banner-area">
<div class="color-overlay">
<div class="container">
<div class="row">
<div class="logo col-sm-12">
<a href="#" title="geo"><img src="images/logo.png" alt="Logo" /></a>
</div>
</div>
<div class="row showcase">
<div class="col-sm-7">
<h2>SHOWCASE YOUR MOST GORGEOUS AND <br> BEAUTIFUL APP WITH GEO</h2>
<p>GEO Is One Of The Creative And Clean App Landing Page To Present <br> your app. It's now available in app stores and also in play stores.</p>
<ul class="apps-icon">
<li><a href="#"><i class="fa fa-android"></i></a></li>
<li><a href="#"><i class="fa fa-apple"></i></a></li>
<li><a href="#"><i class="fa fa-windows"></i></a></li>
</ul>
<!--/.apps-icon end-->
<div class="download-block">
<a class="btn" href="#">download now</a>
<a class="btn extra" href="#">take a tour</a>
</div>
</div>
<div class="col-sm-5">
<div class="mockup hidden-xs hidden-sm wow animated fadeInUp">
<img class="img-responsive" src="images/mockup.png" alt="mockup" />
</div>
<!-- /.mockup end -->
</div>
</div>
</div>
<!-- /.container end -->
</div>
<!-- /.color-overlay end -->
</section>
<!-- banner end -->
We are using latest CSS coding standard. Custom Style writeen into style.css which is override Bootstrap style somewhere else. An Responsive style written into responsive.css.
style.css file contains all of the specific styling for the template. Here is an example of general style which is specify using following label:
/* ======================================================================== Index ------------------------------------------------------------------------ # - 1.0 - General section styles # - 2.0 - Header section styles # - 3.0 - Banner section styles # - 4.0 - Trial section styles # - 5.0 - Intro setion styles # - 6.0 - Feature section styles # - 7.0 - More feature section styles # - 8.0 - Download section styles # - 9.0 - Description section styles # - 10.0 - Video section styles # - 11.0 - Screenshot section styles # - 12.0 - Review section styles # - 13.0 - Pricing section styles # - 14.0 - Downloading section styles # - 15.0 - Team section styles # - 16.0 - Purchase section styles # - 17.0 - Faq section styles # - 18.0 - Subscription section styles # - 19.0 - Contact section styles # - 20.0 - Footer section styles # - 21.0 - Preloader styles */
If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.
If you change the navigation style of Header section, find the following section in the style sheet:
/*
========================================================================
# 2 - Header styles
------------------------------------------------------------------------
*/
#header {
display: none;
padding: 20px 0;
background-color: #fff;
-webkit-box-shadow:0 0 9px -5px #000;
-moz-box-shadow:0 0 9px -5px #000;
box-shadow:0 0 9px -5px #000;
}
#header2 .navbar-default {
background: transparent;
height: 90px;
padding: 20px 0;
margin-top: 20px;
}
#header2 .nav > li > a {
color: #fff;
}
#header2 .addbg .nav > li > a {
color: #424242;
}
#header2 .addbg .nav > li.current > a,
#header2 .addbg .nav > li > a:hover,
#header2 .addbg .nav > li.current > a:focus {
color: #fff;
background-color: #00a7dd;
}
#header2 .addbg {
background: #fff;
margin-top: 0;
-webkit-box-shadow: 0 0 9px -5px #000;
-moz-box-shadow: 0 0 9px -5px #000;
box-shadow: 0 0 9px -5px #000;
}
header .navbar-default {
background-color: #fff;
border-color: transparent;
}
header .navbar-default .navbar-toggle {
border-color: #00a7dd;
border: 0;
border-radius: 2px;
margin: 0;
}
header .navbar-default .navbar-toggle .icon-bar {
width: 30px;
height: 3px;
}
header .navbar-default .navbar-toggle:hover,
header .navbar-default .navbar-toggle:focus {
background: transparent;
}
header .navbar-default .navbar-toggle .icon-bar {
background: #00a7dd;
}
header .navbar {
border-radius: 0;
margin-bottom: 0;
}
header ul > li {
margin-bottom: 0px;
}
header ul > li a {
font-family: 'Raleway', sans-serif;
font-weight: 400;
text-transform: capitalize;
}
header .app li {
float: left;
margin-left: 10px;
}
.app {
padding: 0;
text-align: center;
}
.nav-logo {
font-family: 'Roboto', sans-serif;
font-weight: 700;
font-size: 34px;
margin: 0;
}
#header2 .nav-logo a, #header2 .app li a {
color: #fff;
}
#header2 .addbg .nav-logo a, #header2 .addbg .app li a {
color: #00a7dd;
}
header .navbar-default .navbar-nav > .current > a,
header .navbar-default .navbar-nav > .current > a:hover,
header .navbar-default .navbar-nav > .current > a:focus {
background-color: #00a7dd;
color: #fefefe;
}
.navbar-nav > li > a {
padding-top: 10px;
padding-bottom: 10px;
}
GEO imports following Javascript files.
All code are beautifully written. You can customize easily. Just look the js code.
Example: If you want to Configure Mailchimp, just find the following block and change the post url:
// --------------Newsletter-----------------------
$(".newsletter-signup").ajaxChimp({
callback: mailchimpResponse,
url: "http://codepassenger.us10.list-manage.com/subscribe/post?u=6b2e008d85f125cf2eb2b40e9&id=6083876991" // Replace your mailchimp post url inside double quote "".
});
function mailchimpResponse(resp) {
if(resp.result === 'success') {
$('.newsletter-success').html(resp.msg).fadeIn().delay(3000).fadeOut();
} else if(resp.result === 'error') {
$('.newsletter-error').html(resp.msg).fadeIn().delay(3000).fadeOut();
}
};
We followed the standard technique and latest PHP coding structure.
PHP File included:
Mail Configuration:
In email.php, find the following line:
// receiver email address $to = 'receiver_email@domain.com';
Replace the receiver_email@domain.com to your receiver email address.
Once again, thank you so much for purchasing this product. As I said at the beginning, I'd be glad to help you if you have any questions relating to this product. No guarantees, but I'll do my best to assist. If you have a more general question relating to this product on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
CodePassenger Team