625 lines
31 KiB
HTML
625 lines
31 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
<head>
|
||
<!-- set the encoding of your site -->
|
||
<meta charset="utf-8">
|
||
<!-- set the viewport width and initial-scale on mobile devices -->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<!-- set the title of your site -->
|
||
<title>ThisOne - Documentation</title>
|
||
<!-- include the site stylesheet of bootstrap -->
|
||
<link rel="stylesheet" href="css/bootstrap.css">
|
||
<!-- include the font awesome stylesheet -->
|
||
<link rel="stylesheet" href="css/font-awesome.min.css">
|
||
<!-- include the site stylesheet -->
|
||
<link rel="stylesheet" type="text/css" href="css/all.css">
|
||
<!-- include the site animation stylesheet -->
|
||
<link rel="stylesheet" href="css/animate.css" type="text/css"/>
|
||
<link href='https://fonts.googleapis.com/css?family=Open+Sans:400,300,300italic,400italic,600,600italic,700,700italic,800,800italic%7CDroid+Sans:400,700' rel='stylesheet' type='text/css'>
|
||
<!-- include jQuery library -->
|
||
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
|
||
<!-- include bootstrap JavaScript -->
|
||
<script type="text/javascript" src="js/bootstrap.min.js"></script>
|
||
<!-- include custom JavaScript -->
|
||
<script type="text/javascript" src="js/jquery.main.js"></script>
|
||
</head>
|
||
<body class="stretched">
|
||
<div id="wrapper">
|
||
<div class="top-bar">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-sm-6">
|
||
<p><strong>Version:</strong> 2.0 | <strong>Dated:</strong> 15 Feb 2021</p>
|
||
</div>
|
||
<div class="col-sm-6">
|
||
<ul>
|
||
<li><a href="https://themeforest.net/user/alia">Get Support</a></li>
|
||
<li><a href="https://themeforest.net/user/alia">Contact</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="top-banner">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-xs-12">
|
||
<strong class="main-title"><span class="add">ThisOne - </span> Documentation</strong>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<main id="main">
|
||
<div class="container-fluid">
|
||
<div class="row">
|
||
<div class="col-xs-12">
|
||
<nav id="nav">
|
||
<div class="win-height">
|
||
<ul class="tabset">
|
||
<li class="active">
|
||
<a href="#tab1">Start</a>
|
||
<ul class="smooth-links">
|
||
<li><a class="smoothanchor" href="#docs-installation">Installation</a></li>
|
||
<li><a class="smoothanchor" href="#docs-html">HTML Structure</a></li>
|
||
<li><a class="smoothanchor" href="#docs-logo">Logo Settings</a></li>
|
||
<li><a class="smoothanchor" href="#docs-fonts">Changing Fonts</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#tab2">Menu</a>
|
||
<ul class="smooth-links">
|
||
<li><a class="smoothanchor" href="#docs-h-megamenu">Main Navigation</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#tab3">Page Elements</a>
|
||
<ul class="smooth-links">
|
||
<li><a class="smoothanchor" href="#docs-page-titles">Page Title</a></li>
|
||
<li><a class="smoothanchor" href="#docs-page-grid">Grid</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#tab4">Sliders</a>
|
||
<ul class="smooth-links">
|
||
<li><a class="smoothanchor" href="#docs-slider">Types & Options</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#tab5">Blog</a>
|
||
<ul class="smooth-links">
|
||
<li><a class="smoothanchor" href="#docs-b-setup">Setup</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#tab6">Portfolio</a>
|
||
<ul class="smooth-links">
|
||
<li><a class="smoothanchor" href="#docs-port-setup">Setup</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#tab7">Shortcodes</a>
|
||
<ul class="smooth-links">
|
||
<li><a class="smoothanchor" href="#docs-sc-tabs">Tabs & Accordions</a></li>
|
||
<li><a class="smoothanchor" href="#docs-sc-lightbox">Lightbox & Notifications</a></li>
|
||
<li><a class="smoothanchor" href="#docs-sc-gmap">Google Maps</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#tab8">Contact AJAX Form</a>
|
||
<ul class="smooth-links">
|
||
<li><a class="smoothanchor" href="#docs-wid-setup">Contact Form</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#tab9">Credits</a>
|
||
<ul class="smooth-links">
|
||
<li><a class="smoothanchor" href="#docs-c-images">Images</a></li>
|
||
<li><a class="smoothanchor" href="#docs-c-jquery">jQuery</a></li>
|
||
<li><a class="smoothanchor" href="#docs-c-css">CSS</a></li>
|
||
</ul>
|
||
</li>
|
||
<li>
|
||
<a href="#tab10">Changelog</a>
|
||
<ul class="smooth-links">
|
||
<li><a class="smoothanchor" href="#docs-changelog-v0">Version 2.0</a></li>
|
||
</ul>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</nav>
|
||
<div class="tab-content">
|
||
<div id="tab1" class="tab-box">
|
||
<div class="introduction">
|
||
<h1 class="heading1">introduction</h1>
|
||
<strong class="title">Before setting up the theme, it is imperative to realize it's capabilities, scope and potential usage.</strong>
|
||
<p>While developing this theme our main focus was to make it user friendly and easy to use for non-technical users requiring their less input or otherwise minimal expertise.</p>
|
||
<p>This theme is 100% (highly) customizable, each block is portable and can be moved to another page hence producing a new design/layout.</p>
|
||
<p>Also by simply adding classes in code, user can get variations in styles.</p>
|
||
<p>We have optimized the code for load speed and extensively used CSS for effects etc.</p>
|
||
<p>The code is 100% bug free and follows W3C standards. </p>
|
||
<p>We have used latest tools for development e.g., HTML5/CSS3, BootStrap that will give you powerful and innovative experience for your projects. The theme is fully responsive and retina ready, compatible with all browsers and mobile-devices.</p>
|
||
<p class="margin-bottom-40">It has passed highest standards of Quality Assurance, giving you freedom and enjoyment of a well-managed, error free code that you can use in any project.</p>
|
||
<h2 class="heading5 margin-bottom-10"><strong><span class="first-letter">This</span>One</strong> is a multipupose Template that has following feature</h2>
|
||
<h5 class="heading5 margin-zero">Home & Inner Pages</h5>
|
||
<ul>
|
||
<li><strong>25+</strong> Home Pages</li>
|
||
<li><strong>25+</strong> Sliders</li>
|
||
<li><strong>03 </strong> About Us Section</li>
|
||
<li><strong>03 </strong> Services Section</li>
|
||
<li><strong>04 </strong> Blog Section</li>
|
||
<li><strong>01 </strong> Portfolio Section</li>
|
||
<li><strong>01 </strong> Contact Us</li>
|
||
</ul>
|
||
<h5 class="heading5 margin-zero">Some Extra Feature</h5>
|
||
<ul>
|
||
<li><strong>15+ </strong> Revolution Slider Headers</li>
|
||
</ul>
|
||
</div>
|
||
<div id="docs-installation" >
|
||
<h2 class="heading2">Setting up ThisOne - Theme</h2>
|
||
<p>Follow these guide lines below to get started with your Site:</p>
|
||
<ol>
|
||
<li>Open the <code>ThisOne - /HTML</code> Folder to find all the Templates Files</li>
|
||
<li>You will need to Upload these files to your Web Server using FTP in order to use it on your Website.</li>
|
||
<li>Make sure you upload the required files/folders listed below:
|
||
<ul>
|
||
<li><code>HTML/index.html</code> - Index File/Homepage</li>
|
||
<li><code>HTML/assets/css</code> - Required css files</li>
|
||
<li><code>HTML/process.php</code> - Required PHP file</li>
|
||
<li><code>HTML/assets/lib/revolution</code> - Revolution Slider</li>
|
||
<li><code>HTML/assets/imgs</code> - Required images files</li>
|
||
<li><code>HTML/assets/js</code> - Required Javacripts files</li>
|
||
<li><code>HTML/assets/lib/fontawesome</code> - Required fonts files</li>
|
||
</ul>
|
||
<ul>
|
||
<li>The other files can be used according to your requirement.</li>
|
||
</ul>
|
||
</li>
|
||
<li>After adding all these folder on server you're now good to go..! just add your Content and you will have awesome Template.</li>
|
||
</ol>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div id="docs-html" >
|
||
<h1>HTML Structure</h1>
|
||
<p>We have Developed <strong>ThisOne - </strong> with a simple coding structure. here is the sample:</p>
|
||
<pre><code class="language-html" data-lang="html"><!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<!-- Required meta tags -->
|
||
<meta charset="utf-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||
|
||
<!-- Bootstrap CSS -->
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
|
||
|
||
<title>Hello, world!</title>
|
||
</head>
|
||
<body>
|
||
<h1>Hello, world!</h1>
|
||
|
||
<!-- Optional JavaScript; choose one of the two! -->
|
||
|
||
<!-- Option 1: Bootstrap Bundle with Popper -->
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
|
||
|
||
<!-- Option 2: Separate Popper and Bootstrap JS -->
|
||
<!--
|
||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.6.0/dist/umd/popper.min.js" integrity="sha384-KsvD1yqQ1/1+IA7gi3P0tyJcT3vR+NdBTt13hSJ2lnve8agRGXTTyNaBYmCR/Nwi" crossorigin="anonymous"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.min.js" integrity="sha384-nsg8ua9HAw1y0W1btsyWgBklPnCUAFLuTMS2G72MMONqmOymq585AcH49TLBQObG" crossorigin="anonymous"></script>
|
||
-->
|
||
</body>
|
||
</html>/code></pre>
|
||
|
||
|
||
<div class="divider"></div>
|
||
<div id="docs-logo" >
|
||
<h1>Logo Settings</h1>
|
||
<p>The Logo can be found in the Nav Section - <code>nav</code></p>
|
||
<pre><a class="navbar-brand black-logo" href="#"><img src="assets/imgs/logo.png" class="img-fluid" alt=""></a></pre>
|
||
<p><span class="label label-danger">Note</span> The Logo Image's width/ height can be <strong>150px/ 30px [optional]</strong></p>
|
||
<div class="divider"></div>
|
||
<h2>Retina Logo</h2>
|
||
<p>If you wish to use a Retina Logo, make sure that you use double the size of your Standard Logo.
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div id="docs-fonts" >
|
||
<h1>Changing Fonts</h1>
|
||
<p>Changing Fonts in ThisOne - is very easy. By default, ThisOne - uses <code>Karla & Lato</code> from the <a href="http://www.google.com/fonts" target="_blank">Google Fonts Library</a>. </p>
|
||
<p>1- Add this code to your website, "css/all-stylesheets.css" file.</p>
|
||
<pre><span class="f-color"><Font Poppins ></span>
|
||
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
|
||
</pre>
|
||
|
||
<p>2- Integrate the fonts into your CSS:</p>
|
||
<pre>
|
||
font-family: 'Poppins', sans-serif;
|
||
</pre>
|
||
</div>
|
||
</div></div>
|
||
<div id="tab2" class="tab-box">
|
||
|
||
<div class="divider"></div>
|
||
<div id="docs-h-megamenu" >
|
||
<h1>Main Navigation</h1>
|
||
<p>You can start using the Menu. Try using the Following code:</p>
|
||
<pre>
|
||
<nav id="navigation" class="navbar navbar-expand-lg navbar-light fixed-top bg-light">
|
||
<div class="container-fluid">
|
||
<a class="navbar-brand white-logo" href="#"><img src="assets/imgs/logo-white.png" class="img-fluid" alt=""></a>
|
||
<a class="navbar-brand black-logo" href="#"><img src="assets/imgs/logo.png" class="img-fluid" alt=""></a>
|
||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
<div class="collapse navbar-collapse" id="navbarSupportedContent">
|
||
<ul class="nav navbar-nav ms-auto">
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#home">Home </a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#about" >About</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#services">Services</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#portfolio">Portfolio</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#team">team</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#pricing">Pricing</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#blog">Blog</a>
|
||
</li>
|
||
<li class="nav-item">
|
||
<a class="nav-link" href="#contact">Contact</a>
|
||
</li>
|
||
</ul>
|
||
<span class="ps-3 d-none d-lg-block">
|
||
<a href="https://themeforest.net/item/this-one-one-page-responsive-website-template/7236268?ref=alia" class="btn btn-primary" target="_blank">BUY NOW</a>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
</pre>
|
||
|
||
</div>
|
||
</div>
|
||
<div id="tab3" class="tab-box">
|
||
<div id="docs-page-titles" >
|
||
<h1>Page Titles</h1>
|
||
<p><strong>ThisOne - </strong> has following base HTML structure for page title.</p>
|
||
<p> Images classes, inner-banner-style, banner-img-01 </p>
|
||
|
||
<pre><div class="inner-banner-style banner-img-01" id="top">
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-lg-12">
|
||
<div class="info text-center">
|
||
<h6 class="shuffletext">/ Standard Blog</h6>
|
||
<h2>
|
||
We Move The Digital<br class="d-none d-md-block" />
|
||
Industry Forward
|
||
</h2>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div></pre>
|
||
|
||
|
||
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div id="docs-page-grid" class="content-inner">
|
||
<h1>Columns & Grid</h1>
|
||
<h3>Bootstrap Grid</h3>
|
||
<div class="show-grid">
|
||
<div class="col-md-1">.col-md-1</div>
|
||
<div class="col-md-1">.col-md-1</div>
|
||
<div class="col-md-1">.col-md-1</div>
|
||
<div class="col-md-1">.col-md-1</div>
|
||
<div class="col-md-1">.col-md-1</div>
|
||
<div class="col-md-1">.col-md-1</div>
|
||
<div class="col-md-1">.col-md-1</div>
|
||
<div class="col-md-1">.col-md-1</div>
|
||
<div class="col-md-1">.col-md-1</div>
|
||
<div class="col-md-1">.col-md-1</div>
|
||
<div class="col-md-1">.col-md-1</div>
|
||
<div class="col-md-1">.col-md-1</div>
|
||
</div>
|
||
<div class="show-grid">
|
||
<div class="col-md-2">.col-md-2</div>
|
||
<div class="col-md-2">.col-md-2</div>
|
||
<div class="col-md-2">.col-md-2</div>
|
||
<div class="col-md-2">.col-md-2</div>
|
||
<div class="col-md-2">.col-md-2</div>
|
||
<div class="col-md-2">.col-md-2</div>
|
||
</div>
|
||
<div class="show-grid">
|
||
<div class="col-md-3">.col-md-3</div>
|
||
<div class="col-md-3">.col-md-3</div>
|
||
<div class="col-md-3">.col-md-3</div>
|
||
<div class="col-md-3">.col-md-3</div>
|
||
</div>
|
||
<div class="show-grid">
|
||
<div class="col-md-4">.col-md-4</div>
|
||
<div class="col-md-4">.col-md-4</div>
|
||
<div class="col-md-4">.col-md-4</div>
|
||
</div>
|
||
<div class="show-grid">
|
||
<div class="col-md-5">.col-md-5</div>
|
||
<div class="col-md-5">.col-md-5</div>
|
||
<div class="col-md-2">.col-md-2</div>
|
||
</div>
|
||
<div class="show-grid">
|
||
<div class="col-md-6">.col-md-6</div>
|
||
<div class="col-md-6">.col-md-6</div>
|
||
</div>
|
||
<div class="show-grid">
|
||
<div class="col-md-1">.col-md-1</div>
|
||
<div class="col-md-11">.col-md-11</div>
|
||
</div>
|
||
<div class="show-grid">
|
||
<div class="col-md-2">.col-md-2</div>
|
||
<div class="col-md-10">.col-md-10</div>
|
||
</div>
|
||
<div class="show-grid">
|
||
<div class="col-md-3">.col-md-3</div>
|
||
<div class="col-md-9">.col-md-9</div>
|
||
</div>
|
||
<div class="show-grid">
|
||
<div class="col-md-4">.col-md-4</div>
|
||
<div class="col-md-8">.col-md-8</div>
|
||
</div>
|
||
<div class="show-grid">
|
||
<div class="col-md-5">.col-md-5</div>
|
||
<div class="col-md-7">.col-md-7</div>
|
||
</div>
|
||
</div>
|
||
<div class="divider"></div>
|
||
|
||
</div>
|
||
<div id="tab4" class="tab-box">
|
||
<div id="docs-slider" >
|
||
<h1>Slider Types & their Options</h1>
|
||
<p><strong>ThisOne - </strong> includes 2 Unique Sliders & Pre-Built Slider Templates for you to be used on any Page with 10s of Options. The List of all the Sliders included are mentioned as follows:</p>
|
||
<ul>
|
||
<li>Revolution Slider</li>
|
||
<li>Owl Slider</li>
|
||
</ul>
|
||
<br><br>
|
||
<h2>Revolution Slider</h2>
|
||
<p>You can find the Revolution Slider related Documentation here.<br><br><a target="_blank" href="Revolution%20Slider%20Documentation/documentation.html" class="btn btn-danger">Read Revolution Slider Docs</a></p>
|
||
<br><br>
|
||
</div>
|
||
</div>
|
||
<div id="tab5" class="tab-box">
|
||
<div id="docs-b-setup">
|
||
<h1>Blog Setup</h1>
|
||
<p><strong>ThisOne - </strong> Blog Post. Use the Code Sample below:</p>
|
||
<h3 class="heading4">Blog post</h3>
|
||
<pre><div class="col-12 col-md-6">
|
||
<div class="blog-post pb-md-2">
|
||
<div class="pic pb-4">
|
||
<img src="assets/imgs/blog/1.jpg" class="img-fluid" alt="" />
|
||
</div>
|
||
<h4><a href="#">/TECHNOLOGY</a></h4>
|
||
<h2><a href="single-blog-post-left-sidebar.html">3 Four-Star Resorts Bolster Costa Rica’s Luxury Reputation</a></h2>
|
||
<p>
|
||
Cepteur sint occaecat cupidatat proident, taken possession
|
||
of my entire soul, like these sweet mornings of
|
||
springCepteur sint occaecat cupidt proident, taken
|
||
possession of my entire soul ...
|
||
</p>
|
||
<ul class="meta">
|
||
<li>
|
||
<a href=""><i class="las la-user-alt"></i> John</a>
|
||
</li>
|
||
<li>
|
||
<a href=""><i class="las la-calendar"></i> 10 Jan, 2020</a>
|
||
</li>
|
||
<li>
|
||
<a href=""><i class="lar la-comment"></i> 3</a>
|
||
</li>
|
||
<li>
|
||
<a href=""><i class="lar la-eye"></i> 5.5K</a>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
</div></pre>
|
||
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<div id="tab6" class="tab-box">
|
||
<div id="docs-port-setup" class="content-inner">
|
||
<h1>Portfolio Setup</h1><br>
|
||
<p><strong>ThisOne - </strong> provides a very elegant way to showcase your work.</p><br>
|
||
<h3 class="heading3">Setting up Portfolio Item:</h3>
|
||
<p>Following block of code is for all categories All, webdesign, branding & Videos, you can remove any category by removing its class.</p>
|
||
<br>
|
||
<pre><figure class="item webdesign">
|
||
<div class="picture">
|
||
<img src="assets/imgs/portfolio/dev-3.jpg" alt=""/>
|
||
<!-- Picture Overlay Starts -->
|
||
<div class="text-overlay">
|
||
<div class="category">webdesign</div>
|
||
<h1><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/dev-3.jpg" title="Product Name">Product Name</a></h1>
|
||
</div>
|
||
<div class="icon-overlay">
|
||
<div class="icon"><a class="image-popup-vertical-fit" href="assets/imgs/portfolio/dev-3.jpg" title="Product Name"><i class="las la-expand-arrows-alt"></i></a></div>
|
||
</div>
|
||
<!-- Picture Overlay Ends -->
|
||
</div>
|
||
</figure>
|
||
</pre>
|
||
|
||
|
||
<div class="divider"></div>
|
||
</div>
|
||
</div>
|
||
<div id="tab7" class="tab-box">
|
||
|
||
<div class="divider"></div>
|
||
<div id="docs-sc-tabs" >
|
||
<h1>Toggles & Accordions</h1>
|
||
<p>You can use Tabs, Toggles & Accordions in Various Styles and with Different Options to display Below the Fold content.</p>
|
||
<div class="line line-sm"></div>
|
||
<h3>Accordion</h3>
|
||
<p>Use this code to display accordion:</p>
|
||
<pre><div class="accordion" id="accordionExample">
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingOne">
|
||
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
|
||
Accordion Item #1
|
||
</button>
|
||
</h2>
|
||
<div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
|
||
<div class="accordion-body">
|
||
<strong>This is the first item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingTwo">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
|
||
Accordion Item #2
|
||
</button>
|
||
</h2>
|
||
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
|
||
<div class="accordion-body">
|
||
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="accordion-item">
|
||
<h2 class="accordion-header" id="headingThree">
|
||
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
|
||
Accordion Item #3
|
||
</button>
|
||
</h2>
|
||
<div id="collapseThree" class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample">
|
||
<div class="accordion-body">
|
||
<strong>This is the third item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div></pre>
|
||
|
||
<p ><span class="label label-danger">Note:</span> Make sure you add <strong>unique</strong> IDs for each Tab Container and Tab Items.</p>
|
||
|
||
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div id="docs-sc-lightbox" >
|
||
<h1>Lightbox</h1>
|
||
<h3>Setting up Lightboxes:</h3>
|
||
<p>Adding a <code>.lightbox</code> class to any Link or Button will turn it into a Lightbox Element. You can use different Types of Lightbox with an Easy Setup:</p>
|
||
<h5>Single Image:</h5>
|
||
<pre ><a class="image-popup-vertical-fit" href="http://dummyimage.com/480x330" title="Pellentesque habitant morbi"></a></pre>
|
||
<h5>Images Gallery</h5>
|
||
<pre ><ul class="popup-gallery">
|
||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||
<li><a href="http://dummyimage.com/750x600" title="Pic Caption"><img src="http://dummyimage.com/120x120" class="img-fluid" alt=""></a></li>
|
||
</ul></pre>
|
||
<h5>Videos:</h5>
|
||
<pre><a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto"><i class="las la-expand-arrows-alt"></i></a></pre>
|
||
<pre><<a class="popup-vimeo" href="https://vimeo.com/45830194"><i class="las la-expand-arrows-alt"></i></a></pre>
|
||
|
||
|
||
|
||
<p ><span class="label label-danger">Note:</span> It is recommended that you use only this Format <code>http://www.youtube.com/watch?v=kuceVNBTJio</code> for Youtube Videos.</p>
|
||
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div id="docs-sc-gmap" >
|
||
<h1>Google Maps</h1>
|
||
<p>You can add Embedded Google Maps iframe to any Page using the following setup:</p>
|
||
|
||
<p>Add a <code>section</code> which will contain your Google Map:</p>
|
||
<pre><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d25215.625657884106!2d144.956637!3d-37.81456500000001!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4e793770d3%3A0x9e44d6ad0d76ba7c!2s121+King+St%2C+Melbourne+VIC+3000%2C+Australia!5e0!3m2!1sen!2sus!4v1435061406583" height="400" allowfullscreen><iframe></pre>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
<div id="tab8" class="tab-box">
|
||
<div id="docs-wid-setup" >
|
||
<h1>Contact AJAX Form Setup</h1>
|
||
<p>Update email address. Please open “process.php” update your email address in line#2.<br>$adminemail = "youremailhere@googlemail.com";
|
||
</p>
|
||
|
||
|
||
</div>
|
||
<div class="divider"></div>
|
||
|
||
</div>
|
||
<div id="tab9" class="tab-box">
|
||
<div id="docs-c-images" >
|
||
<h1>Images</h1>
|
||
<ul>
|
||
<li><a href="http://thestocks.im/" target="_blank" title="The Stocks">The Stocks</a></li>
|
||
<li><a href="http://unsplash.com/" target="_blank" title="Unsplash">Unsplash</a></li>
|
||
<li><a href="http://www.imcreator.com/free" target="_blank" title="Imcreator FREE">Imcreator FREE</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div id="docs-c-jquery" >
|
||
<h1>jQuery</h1>
|
||
<ul>
|
||
<li><a href="http://codecanyon.net/item/slider-revolution-responsive-jquery-plugin/2580848" target="_blank">Revolution Slider</a></li>
|
||
<li><a href="http://www.owlcarousel.owlgraphic.com/" target="_blank">Owl Carousel</a></li>
|
||
<li><a href="http://labs.mario.ec/jquery-gmap/" target="_blank">Google Map</a></li>
|
||
</ul>
|
||
</div>
|
||
<div class="divider"></div>
|
||
<div id="docs-c-css" >
|
||
<h1>CSS & Fonts</h1>
|
||
<ul>
|
||
<li><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a></li>
|
||
<li><a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font-Awesome</a> (Font Icons)</li>
|
||
<li><a href="https://icomoon.io/" target="_blank">Icomoon</a> (Font Icons)</li>
|
||
<li><a href="http://simplelineicons.com/" target="_blank">Simple Line Icons</a> (Font Icons)</li>
|
||
<li><a href="https://www.google.com/fonts" target="_blank">Google Fonts</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div id="tab10" class="tab-box">
|
||
|
||
<div id="docs-changelog-v0" >
|
||
<h1>Release V2.0</h1>
|
||
<p>Released on <strong>15 Feb 2021</strong></p>
|
||
|
||
<h1>Initial Release V1.0</h1>
|
||
<p>Released on <strong>27 Mar 2014</strong></p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
<footer id="footer">
|
||
<div class="copyrights">
|
||
<div class="container-fullwidth">
|
||
<div class="col-md-12 nopadding center">
|
||
Copyrights © 2021 All Rights Reserved, Designed and Developed by <a href="http://themeforest.net/user/alia">alia</a><br>
|
||
<div class="copyright-links"><a href="mailto:alia.envato@gmail.com">Support</a></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
</div>
|
||
<div id="gotoTop" class="icon-angle-up"></div>
|
||
</body>
|
||
</html> |