/home/hdwebsolution/www/new/documentation/index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<head lang="en">
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>SeoBin - SEO, Social Media and Marketing HTML Template</title>
<!-- Framework CSS -->
<link rel="stylesheet" href="assets/blueprint-css/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="assets/blueprint-css/print.css" type="text/css" media="print">
<!--[if lt IE 8]><link rel="stylesheet" href="assets/blueprint-css/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link rel="stylesheet" href="assets/blueprint-css/plugins/fancy-type/screen.css" type="text/css" media="screen, projection">
<style type="text/css" media="screen">
p, table, hr, .box { margin-bottom:25px; }
.box p { margin-bottom:10px; }
</style>
<!-- Syntax Highlighter -->
<link rel="stylesheet" type="text/css" href="syntax-highlighter/styles/shCore.css" media="all">
<link rel="stylesheet" type="text/css" href="syntax-highlighter/styles/shThemeDefault.css" media="all">
</head>
<body>
<div class="container">
<h3 class="center alt">“SeoBin - SEO, Social Media and Marketing HTML Template” Documentation by “Tripples”
v 1.0</h3>
<hr>
<h1 class="center">SeoBin - SEO, Social Media and Marketing HTML Template</h1>
<div class="borderTop">
<div class="span-6 colborder info prepend-1">
<p class="prepend-top">
<strong>
Created: January, 2018<br>
Updated: January, 2018<br>
By: Tripples<br>
Email: tripplesworld@gmail.com
</strong>
</p>
</div><!-- end div .span-6 -->
<div class="span-12 last">
<p class="prepend-top append-0">Thank you for purchasing <strong>SeoBin</strong>. If you have any questions that are beyond the scope of this help file, please feel free to email via profile page contact form or
mail me to tripplesworld@gmail.com</p>
</div>
</div><!-- end div .borderTop -->
<hr>
<h2 id="toc" class="alt">Table of Contents</h2>
<ol class="alpha">
<li><a href="#introduction">Introduction</a></li>
<li><a href="#htmlStructure">HTML Structure</a></li>
<li><a href="#cssFiles">CSS Files and Structure</a></li>
<li><a href="#javascript">JavaScripts</a></li>
<li><a href="#navlogo">Navigation and Logos</a></li>
<li><a href="#fontssused">Fonts used</a></li>
<li><a href="#faqs">FAQs</a></li>
<li><a href="#credits">Sources and Credits</a></li>
</ol>
<hr>
<h3 id="introduction"><strong>A) Introduction</strong> - <a href="#toc">top</a></h3>
<p>SeoBin is a creative and professional template specially designed for SEO, SEM, Business, Corporate, B2B websites. You can use this beautiful theme for your every Marketing-related needs.
It also comes with twitter bootstrap 4, Video Popup, Beautiful Tab, Gallery and more. SeoBin is a solid All-in-One Marketing HTML Template for better experience.</p>
<h2>Template Features</h2>
<ul>
<li>4 Home Variations</li>
<li>2 Different Header Layout</li>
<li>Multipage Design</li>
<li>HTML5 Validated</li>
<li>Based on Twitter Bootstrap 3</li>
<li>Responsive Template</li>
<li>FontAwesomeicons</li>
<li>Isotope</li>
<li>Google Web Fonts</li>
<li>Contact Form</li>
<li>Stylist News Page</li>
<li>Documentation</li>
<li>Counter</li>
<li>Easy to customize and user friendly</li>
</ul>
<hr>
<h3 id="htmlStructure"><strong>B) HTML Structure</strong> - <a href="#toc">top</a></h3>
<h4>HTML Files</h4>
<ul>
<li><em>index.html</em> - Home Page (Slider)</li>
</ul>
<h4>General HTML structure</h4>
<p>This template structure based on Twitter Bootstrap 3. Here is the sample structure.</p>
<pre class="brush: html">
<!-- Page Layout
================================================== -->
<!-- Header start -->
<header id="header">
<div class="container">
<div class="row">
<div class="col-lg-12 col-md-12">
</div>
</div>
</div>
</header>
<!-- Header end -->
</pre>
<hr>
<h3 id="cssFiles"><strong>C) CSS Files and Structure</strong> - <a href="#toc">top</a></h3>
<h4>Styles</h4>
<pre class="brush: html">
<!-- CSS
================================================== -->
<!-- Bootstrap -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<!-- Template styles-->
<link rel="stylesheet" href="css/style.css">
<!-- Responsive styles-->
<link rel="stylesheet" href="css/responsive.css">
<!-- FontAwesome -->
<link rel="stylesheet" href="css/font-awesome.min.css">
<!-- Animation -->
<link rel="stylesheet" href="css/animate.css">
<!-- Colorbox -->
<link rel="stylesheet" href="css/colorbox.css">
</pre>
<p>All css files are separates for improving convenience to edit this template.</p>
<p>Some of stylesheets contain <em>Table of content</em> for easy navigation, for instance <strong>style.css</strong>:</p>
<pre class="brush: css">
/* Table of Content
==================================================
1. Typography
2. Global Styles (body, link color, gap, ul, section-title, preloader, overlay etc)
3. Header area
4. Banner area
5. Slider
6. Countdown
7. Features
8. Facts
9. Schedule
10. Speakers
11. Sponsors
12. Pricing
13. Content area
14. Latest blog
15. Venue
16. Footer
17. Sub Pages
18. Contact Us
19. News Listing
20. News Single
21. Sidebar
22. Error page
*/
</pre>
<hr>
<h3 id="javascript"><strong>D) JavaScript</strong> - <a href="#toc">top</a></h3>
<p>Below is the list of Javascript files.</p>
<pre class="brush: html">
<!-- Javascript Files
================================================== -->
<!-- initialize jQuery Library -->
<script type="text/javascript" src="js/jquery.js"></script>
<!-- Bootstrap jQuery -->
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<!-- Counter -->
<script type="text/javascript" src="js/jquery.counterup.min.js"></script>
<!-- Countdown -->
<script type="text/javascript" src="js/jquery.jCounter.js"></script>
<!-- Waypoints -->
<script type="text/javascript" src="js/waypoints.min.js"></script>
<!-- Color box for Popup-->
<script type="text/javascript" src="js/jquery.colorbox.js"></script>
<!-- Smoothscroll -->
<script type="text/javascript" src="js/smoothscroll.js"></script>
<!-- Google Map -->
<script type="text/javascript" src="//maps.googleapis.com/maps/api/js?key=AIzaSyCsa2Mi2HqyEcEnM1urFSIGEpvualYjwwM"></script>
<script type="text/javascript" src="js/gmap3.min.js"></script>
<!-- Template custom -->
<script type="text/javascript" src="js/custom.js"></script>
</pre>
If you face any difficulites to find source then please knock me to tripplesworld@gmail.com
<hr>
<h3 id="navlogo"><strong>E) Navigation and Logos</strong> - <a href="#toc">top</a></h3>
<h4>Header Logo</h4>
<p>As you can see the logo is : <em>Image based</em> (by default) and you can make it text based if you want.</p>
<pre class="brush: html">
<div class="navbar-header">
<div class="logo">
<a href="index.html">
<img src="images/logo.png" alt="">
</a>
</div><!-- logo end -->
</div><!-- Navbar header end -->
</pre>
<h4>Navigation Menu</h4>
<p>The page navigation links such as Home, Blog, Contacts etc are included.</p>
<pre class="brush: html">
<div class="collapse navbar-collapse justify-content-center" id="navbarSupportedContent">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link active" href="index.html">Home
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" data-toggle="dropdown">
Pages
<span class="tw-indicator"><i class="fa fa-angle-down"></i></span>
</a>
<ul class="dropdown-menu tw-dropdown-menu">
<li><a class="active" href="#">Search Engine Optimization</a></li>
<li><a href="#">Content Marketing</a></li>
<li><a href="#">Data ANalysis</a></li>
<li><a href="#">Digital Marketing</a></li>
<li><a href="#">Web Analytics</a></li>
<li><a href="#">Social Media Marketing</a></li>
</ul>
<!-- End of Dropdown menu -->
</li>
<!-- End Dropdown -->
<li class="nav-item dropdown tw-megamenu-wrapper">
<a class="nav-link" href="#" data-toggle="dropdown">
Services
<span class="tw-indicator">
<i class="fa fa-angle-down"></i>
</span>
</a>
<div id="tw-megamenu" class="dropdown-menu tw-mega-menu">
<div class="row">
<div class="col-md-12 col-lg-3 no-padding">
<ul>
<li class="tw-megamenu-title">
<h3>Standard Pricing</h3>
</li>
<li><a href="#">SEO Pricing</a></li>
<li><a href="#">Ecommerce SEO</a></li>
<li><a href="#">Enterprise SEO</a></li>
<li><a href="#">Local SEO</a></li>
<li><a href="#">SEO Audits</a></li>
<li><a href="#">PPC Management</a></li>
<li><a href="#">SEO Link Buildings</a></li>
</ul>
<!-- End UL -->
</div>
<!-- End Col -->
<div class="col-md-12 col-lg-3 no-padding">
<ul>
<li class="tw-megamenu-title">
<h3>Elements One</h3>
</li>
<li><a href="#">Addon list 1</a></li>
<li><a href="#">Addon list 2</a></li>
<li><a href="#">Addon list 3</a></li>
<li><a href="#">Addon list 4</a></li>
<li><a href="#">Addon list 5</a></li>
<li><a href="#">Addon list 6</a></li>
</ul>
<!-- End UL -->
</div>
<!-- End Col -->
<div class="col-md-12 col-lg-3 no-padding">
<ul>
<li class="tw-megamenu-title">
<h3>Elements Two</h3>
</li>
<li><a href="#">Addon list 7</a></li>
<li><a href="#">Addon list 8</a></li>
<li><a href="#">Addon list 9</a></li>
<li><a href="#">Addon list 10</a></li>
</ul>
<!-- End Ul -->
</div>
<!-- End Col -->
<div class="col-md-12 col-lg-3 no-padding">
<ul>
<li class="tw-megamenu-title">
<h3>Site review</h3>
</li>
<li>
<p>Start working with the best company that provide you everything you need.</p>
</li>
</ul>
<!-- End UL -->
</div>
<!-- End Col -->
</div>
<!-- End Row -->
</div>
<!-- End of Mega menu -->
</li>
<!-- End MegaMenu -->
<li class="nav-item"><a class="nav-link" href="case.html">Case Studies</a></li>
<li class="nav-item"><a class="nav-link" href="#">Features</a></li>
<li class="nav-item dropdown">
<a class="nav-link" href="#" data-toggle="dropdown">
Blog
<span class="tw-indicator"><i class="fa fa-angle-down"></i></span>
</a>
<ul class="dropdown-menu tw-dropdown-menu">
<li><a class="active" href="news-right-sidebar.html">News Right Sidebar</a></li>
<li><a href="news-single.html">News Single</a></li>
</ul>
<!-- End of Dropdown menu -->
</li>
<!-- End Dropdown -->
<li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
</ul>
<!-- End Navbar Nav -->
</div>
</pre>
<br>
<hr>
<h3 id="fontssused"><strong>G) Fonts Used</strong> - <a href="#toc">top</a></h3>
<p>I have used Roboto as body font and Lato heading font in this template. You can change the font from style.css line # 37 and #38</p>
<ol>
<li><em><a href="#">Roboto</a></em> - Google Web Font</li>
<li><em><a href="#">Lato</a></em> - Google Web Font</li>
</ol><br/>
<hr>
<h3 id="faqs"><strong>H) FAQs</strong> - <a href="#toc">top</a></h3>
<h4><strong>How to change Contact Form Email Address for own?</strong></h4>
<ol>
<li>Please, open <em>contact-form.php</em></li>
<li>Find line 4 you will see<br>
<code>$recipient = "yourmail@domain.com";</code>
</li>
<li>You should change 'yourmail@domain.com' with your own.
</li>
</ol>
<h4><strong>How to change Contact Form Email Address for own?</strong></h4>
<ol>
<li>Please, open <em>contact-form.php</em></li>
<li>Find line 4 you will see<br>
<code>$recipient = "yourmail@domain.com";</code>
</li>
<li>You should change 'yourmail@domain.com' with your own.
</li>
</ol>
<h4><strong>How to change Map Address?</strong></h4>
<ol>
<li>Please, open <em>contact.html</em> file >> go at the bottom and see the below screen shot.</li>
<img src="assets/images/contact.jpg" alt="" />
<li>Then Go to <em>main.js</em>, file >> and find this line and see the below screen shot.</li>
<img src="assets/images/map.jpg" alt="" />
<li>Change your Google API key from line # 599. Here is the link how to get <a target="_blank" href="https://developers.google.com/maps/documentation/javascript/get-api-key">Google MAP API KEY</a></li>
<li>Latitude and Longitude from line # 200</li>
</ol>
<hr>
<h3 id="credits"><strong>I) Sources and Credits</strong> - <a href="#toc">top</a></h3>
<ul>
<li>Twitter Bootstrap</li>
<li>jQuery</li>
<li>FontAwesome Icons</li>
<li>Jcounter, Gmap3 and Colorbox</li>
<li>Images used from Pixabay, Photopin</li>
</ul>
<hr>
<p>Once again, thank you so much for purchasing this template. I'd be glad to help you if you have any questions relating to this template. I'll do my best to assist.</p>
<p class="append-bottom alt large"><strong>Tripples</strong>, tripplesworld@gmail.com</p>
<p><a href="#toc">Go To Table of Contents</a></p>
<hr class="space">
</div><!-- end div .container -->
<script type="text/javascript" src="syntax-highlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="syntax-highlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="syntax-highlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="syntax-highlighter/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="syntax-highlighter/scripts/shBrushPhp.js"></script>
<script type="text/javascript">
SyntaxHighlighter.all()
</script>
</body>
</html>