470 lines
29 KiB
HTML
470 lines
29 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<meta name="description" content="Theme documentation.">
|
||
<meta name="author" content="Favethemes">
|
||
<link rel="shortcut icon" href="assets/img/favicon.png">
|
||
<title>ListOn - Directory & Listing HTML Template</title>
|
||
<!-- Bootstrap core CSS -->
|
||
<link href="assets/css/bootstrap.min.css" rel="stylesheet">
|
||
<link href="assets/css/styles.css" rel="stylesheet">
|
||
</head>
|
||
|
||
<body>
|
||
<!-- Fixed navbar -->
|
||
<div class="navbar navbar-default navbar-fixed-top bs-docs-nav" role="navigation">
|
||
<div class="container">
|
||
<div class="navbar-header">
|
||
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
|
||
<span class="sr-only">Toggle navigation</span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
<span class="icon-bar"></span>
|
||
</button>
|
||
<a class="border-end navbar-brand pe-3 pe-sm-4 py-0" href="#">
|
||
<img src="assets/img/logo.png" class="img-responsive" alt="">
|
||
</a>
|
||
</div>
|
||
<div class="navbar-collapse collapse">
|
||
<ul class="nav navbar-nav navbar-right">
|
||
<!-- <li><a href="#">Support Forum</a></li> -->
|
||
</ul>
|
||
</div>
|
||
<!--/.nav-collapse -->
|
||
</div>
|
||
</div>
|
||
<div class="jumbotron">
|
||
<div class="container">
|
||
<h1>ListOn - Directory & Listing HTML Template</h1>
|
||
<p>
|
||
Created: Nov 22, 2023<br>
|
||
By: easital_tech<br>
|
||
Email: <a href="mailto:easital.theme@gmail.com">easital.theme@gmail.com</a>
|
||
</p>
|
||
<p>Thank you for purchasing my theme. 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 <a href="https://themeforest.net/user/easital_tech">here</a> Thanks so much!</p>
|
||
</div>
|
||
</div>
|
||
<div class="container">
|
||
<div class="row">
|
||
<div class="col-sm-4 col-md-3">
|
||
<!-- sidebar -->
|
||
<div class="bs-sidebar hidden-xs">
|
||
<ul class="nav bs-sidenav">
|
||
<li><a class="page-scroll" href="#introduction">Introduction</a></li>
|
||
<li><a class="page-scroll" href="#changelog">Changelog</a></li>
|
||
<li><a class="page-scroll" href="#features">Features</a></li>
|
||
<li><a class="page-scroll" href="#html_structure">HTML Structure</a></li>
|
||
<li><a class="page-scroll" href="#css_structure">CSS Structure</a></li>
|
||
<li><a class="page-scroll" href="#JavaScript_structure">JavaScript</a></li>
|
||
<li><a class="page-scroll" href="#file_structure">File Structure</a></li>
|
||
<li><a class="page-scroll" href="#sourcesAndCredits">Sources and Credits</a></li>
|
||
<li><a class="page-scroll" href="#customization">Customization</a></li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<div class="col-xs-12 col-sm-8 col-md-9">
|
||
<!-- Main content -->
|
||
<div class="content">
|
||
<!-- Introduction section -->
|
||
<section id="introduction">
|
||
<div class="page-header">
|
||
<h2 class="m-t-0"># Introduction</h2>
|
||
</div>
|
||
<p>ListOn is an intuitive and clean HTML-based template crafted exclusively for directory and listing websites. Ideal for business, organizations and individuals seeking to showcase their listings, ListOn offers a sophisticated and feature-rich solution. ListOn ensures you make a compelling online listing presence to captivate potential customers, clients and visitors. This versatile template can be effortlessly customized to suit your unique requirements or business needs.</p>
|
||
<p>Boasting a contemporary and clean design, ListOn guarantees a seamless user experience, allowing visitors to effortlessly navigate through property listings and discover their ideal home or investment opportunity. Developed with the latest web technologies, including HTML5, CSS3, and Bootstrap 5, ListOn ensures a fully responsive and mobile-friendly layout across various devices. Its adaptability makes it a go-to choice for a wide range of real estate agencies and businesses.</p>
|
||
</section>
|
||
<!-- Changelog -->
|
||
<section id="changelog">
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<div class="page-header">
|
||
<h2># Changelog</h2>
|
||
</div>
|
||
<h4>Nov 24, 2023</h4>
|
||
<p>- Release v1.0</p>
|
||
<ul>
|
||
<li>Initial release</li>
|
||
</ul>
|
||
<h4>Dec 21, 2023</h4>
|
||
<p>- Release v2.0</p>
|
||
<ul>
|
||
<ul>
|
||
<li>Add: Add dashboard feature (light & dark) <code>New</code></li>
|
||
<li>Update: Update home (waves) masonry ui</li>
|
||
<li>Update: Update some CSS issue</li>
|
||
<li>Fixed: Fixed filter (for mobile) dropdown issue</li>
|
||
</ul>
|
||
</ul>
|
||
<h4>Dec 31, 2023</h4>
|
||
<p>- Release v2.1</p>
|
||
<ul>
|
||
<ul>
|
||
<li>Add: Add Home page (Car), List car with map and Listing details (Car) <code>New</code></li>
|
||
<li>Update: Update some CSS issue</li>
|
||
</ul>
|
||
</ul>
|
||
<h4>Jan 10, 2024</h4>
|
||
<p>- Release v2.2</p>
|
||
<ul>
|
||
<ul>
|
||
<li>Add: Add dark mode</li>
|
||
<li>Add: Add RTL</li>
|
||
<li>Update: Update some CSS issue</li>
|
||
<li>Update: Update some js issue</li>
|
||
</ul>
|
||
</ul>
|
||
<h4>Jan 15, 2024</h4>
|
||
<p>- Release v2.3</p>
|
||
<ul>
|
||
<ul>
|
||
<li>Add: Add Home page (Restaurant) <code>New</code></li>
|
||
<li>Update: Update some CSS issue</li>
|
||
<li>Update: Update some js issue</li>
|
||
</ul>
|
||
</ul>
|
||
<h4>Feb 11, 2024</h4>
|
||
<p>- Release v2.4</p>
|
||
<ul>
|
||
<ul>
|
||
<li>Add: Add Blog Video, Audio, Galary, Archive pages <code>New</code></li>
|
||
<li>Add: Add blog comments form section</li>
|
||
<li>Update: Update some CSS issue</li>
|
||
<li>Update: Update some js issue</li>
|
||
</ul>
|
||
</ul>
|
||
<h4>Apr 16, 2024</h4>
|
||
<p>- Release v2.5</p>
|
||
<ul>
|
||
<ul>
|
||
<li>Add: Add Submit rider page <code>New</code></li>
|
||
<li>Add: Add Dashboard invoice</li>
|
||
<li>Update: Update some CSS issue</li>
|
||
<li>Published template at <a href="../../index.html" target="_blank">this demo url</a></li>
|
||
</ul>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Features section -->
|
||
<section id="features">
|
||
<div class="page-header">
|
||
<h2># Features</h2>
|
||
</div>
|
||
<ul>
|
||
<li>Powered by HTML5, CSS3 & jQuery</li>
|
||
<li>08 engaging homepage styles</li>
|
||
<li>Included user dashboard</li>
|
||
<li>Dark & RTL mode</li>
|
||
<li>Extensive maps integration based on Snazzy Maps</li>
|
||
<li>Dedicated pages for listing details (2 variants)</li>
|
||
<li>Listing page with user-friendly search, filter, categories, and half-map</li>
|
||
<li>Fully responsive layout for desktops, tablets, and mobile devices</li>
|
||
<li>Built with the latest Bootstrap 5 for optimal performance</li>
|
||
<li>Well-structured and commented code for easy customization</li>
|
||
<li>Utilizes Font Awesome Fonts Icons</li>
|
||
<li>Free licensed Google font for a visually appealing typography</li>
|
||
<li>Comprehensive sections, including Blog Post Page, Director Listing Page, and Agent Page</li>
|
||
<li>Integration of Snazzy Google Maps for enhanced property location visualization</li>
|
||
<li>Easy customization to tailor the template to your specific needs</li>
|
||
<li>W3C Valid, Clean, and Commented Code for optimal performance</li>
|
||
<li>Cross-browser compatibility ensures a seamless experience for all users</li>
|
||
<li>Retina ready for enhanced visual quality</li>
|
||
<li>Minimal and Clean Code for an elegant and efficient design</li>
|
||
<li>AOS Animations for a visually engaging experience</li>
|
||
<li>SEO-friendly Code for improved search engine visibility</li>
|
||
<li>Documentation included for easy setup and customization</li>
|
||
<li><b>And Much More...</b></li>
|
||
</ul>
|
||
</section>
|
||
<!-- HTML Structure -->
|
||
<section id="html_structure">
|
||
<div class="page-header">
|
||
<h2># HTML Structure</h2>
|
||
</div>
|
||
<h4>HTML Structure</h4>
|
||
<p>This theme is a fixed layout with four columns. All of the information within the body content area. The general template structure is the same throughout the template. Here is the general structure.</p>
|
||
<img src="assets/img/html-structure.png" alt="">
|
||
</section>
|
||
<!-- HTML Structure -->
|
||
<section id="css_structure">
|
||
<div class="page-header">
|
||
<h2># CSS Structure</h2>
|
||
</div>
|
||
<p>I'm using two CSS files in this theme. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling, such as anchor tag colors, font-sizes, etc. Keep in mind, that these values might be overridden somewhere else in the file.</p>
|
||
<p>The second file contains all of the specific stylings for the page. The file is separated into sections using:</p>
|
||
<img src="assets/img/css-structure.png" alt="">
|
||
</section>
|
||
<!-- HTML Structure -->
|
||
<section id="JavaScript_structure">
|
||
<div class="page-header">
|
||
<h2># JavaScript </h2>
|
||
</div>
|
||
<h4>JavaScript Structure</h4>
|
||
<p>This is our Javascript files structure.</p>
|
||
<img src="assets/img/js-structure.png" alt="">
|
||
</section>
|
||
<!-- Service Section -->
|
||
<section id="file_structure">
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<div class="page-header">
|
||
<h2># File Structure</h2>
|
||
</div>
|
||
<h4>File structure</h4>
|
||
<p>HTML, css and javascript files included.</p>
|
||
</div>
|
||
<div class="col-xs-12 col-lg-6 col-sm-6">
|
||
<pre>
|
||
<code>liston-main.zip
|
||
├── assets/
|
||
├── dashboard/
|
||
├── rtl/
|
||
├── 404.html
|
||
├── about.html
|
||
├── about-2.html
|
||
├── add-listing.html
|
||
├── agent.html
|
||
├── agent-details.html
|
||
├── blog.html
|
||
├── blog-archive.html
|
||
├── blog-details.html
|
||
├── blog-post-audio.html
|
||
├── blog-post-galary.html
|
||
├── blog-post-video.html
|
||
├── contact.html
|
||
├── faq.html
|
||
├── forgot-password.html
|
||
├── home-car.html
|
||
├── home-classic.html
|
||
├── home-grid.html
|
||
├── home-map.html
|
||
├── home-restaurant.html
|
||
├── home-rounded.html
|
||
├── home-waves.html
|
||
├── index.html
|
||
├── listing-details.html
|
||
├── listing-details-2.html
|
||
├── listing-details-car.html
|
||
├── listings-grid-1-left.html
|
||
├── listings-grid-1-right.html
|
||
├── listings-grid-2-left.html
|
||
├── listings-grid-2-right.html
|
||
├── listings-list-left.html
|
||
├── listings-list-right.html
|
||
├── listings-map.html
|
||
├── listings-map-car.html
|
||
├── listings-map-grid-1.html
|
||
├── listings-map-grid-2.html
|
||
├── pricing.html
|
||
├── sign-in.html
|
||
├── sign-up.html
|
||
├── style-guide.html
|
||
├── terms-conditions.html
|
||
└── two-factor-auth.html</code></pre>
|
||
</div>
|
||
<div class="col-xs-12 col-lg-6 col-sm-6">
|
||
<pre><code class="language-bash" data-lang="bash">liston-main.zip
|
||
├── assets/
|
||
│ ├── css/
|
||
│ ├── documentation/
|
||
│ ├── img/
|
||
│ ├── js/
|
||
└────── plugins/
|
||
</code></pre>
|
||
|
||
<pre><code class="language-bash" data-lang="bash">plugins/
|
||
├── aos/
|
||
├── bootstrap/
|
||
├── counter-up/
|
||
├── fontawesome/
|
||
├── ion.rangeSlider/
|
||
├── jQuery/
|
||
├── jquery-fancyfileuploader/
|
||
├── macy/
|
||
├── magnific-popup/
|
||
├── OwlCarousel2/
|
||
├── select2/
|
||
├── select2-bootstrap-5/
|
||
├── simple-parallax/
|
||
├── theia-sticky-sidebar/
|
||
└── waypoints/</code></pre>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Sources and Credits Section -->
|
||
<section id="sourcesAndCredits">
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<div class="page-header">
|
||
<h2># Sources and Credits</h2>
|
||
<p>I've used the following images, icons or other files as listed.</p>
|
||
</div>
|
||
<ol>
|
||
<li>
|
||
<p><b>Bootstrap :</b> Build fast, responsive sites with Bootstrap <a href="http://getbootstrap.com/" target="_blank">http://getbootstrap.com/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>Google fonts :</b> Wix Madefor Display <a href="https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400;500;600;700;800&display=swap" rel="stylesheet" target=" _blank">https://fonts.googleapis.com/css2?family=Wix+Madefor+Display:wght@400;500;600;700;800&display=swap</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>Google fonts :</b> Caveat <a href="https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap" rel="stylesheet" target=" _blank">https://fonts.googleapis.com/css2?family=Caveat:wght@400;500;600;700&display=swap</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>jQuery :</b> fast, small, and feature-rich JavaScript library. <a href="http://jquery.com/" target="_blank">http://jquery.com/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>Unsplash :</b> The internet’s source of freely useable images. Powered by
|
||
creators everywhere. <a href="https://unsplash.com/" target="_blank">https://unsplash.com/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>Freepik :</b> All the assets you need, in one place
|
||
creators everywhere. <a href="https://www.freepik.com/" target="_blank">https://www.freepik.com/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>Flaticon :</b> Access 12.4M+ vector icons & stickers <a href="https://www.flaticon.com/" target="_blank">https://www.flaticon.com/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>unDraw :</b> <a href="https://undraw.co/" target="_blank">https://undraw.co/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>Magnific Popup :</b> Magnific Popup is a responsive lightbox & dialog
|
||
script with focus on performance and providing best experience for user with
|
||
any device
|
||
(for jQuery or Zepto.js). <a href="https://dimsemenov.com/plugins/magnific-popup/" target="_blank">https://dimsemenov.com/plugins/magnific-popup/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>Font Awesome :</b> <a href="https://fontawesome.com/" target="_blank">https://fontawesome.com/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>AOS :</b> Animate On Scroll Library <a href="https://michalsnik.github.io/aos/" target="_blank">https://michalsnik.github.io/aos/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>Ion.RangeSlide :</b> Easy to use, flexible and responsive range slider with skin support <a href="http://ionden.com/a/plugins/ion.rangeSlider/" target="_blank">http://ionden.com/a/plugins/ion.rangeSlider/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>jQuery Fancy File Uploader :</b> A jQuery plugin to convert the HTML file input type into a mobile-friendly fancy file uploader. Choose from a MIT or LGPL license. <a href="https://github.com/cubiclesoft/jquery-fancyfileuploader" target="_blank">https://github.com/cubiclesoft/jquery-fancyfileuploader</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>Counter-Up :</b>Counter-Up is a jQuery plugin that animates a number from
|
||
zero (counting up towards it). It supports counting up: <a href="https://github.com/bfintal/Counter-Up" target="_blank">https://github.com/bfintal/Counter-Up</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>Select2:</b> The jQuery replacement for select boxes. <a href="https://select2.org/" target="_blank">https://select2.org/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>Select2 Bootstrap 5 Theme :</b> Get started with the Select2 Bootstrap 5 theme, the look of Bootstrap 5, with the functionality of Select2. <a href="https://apalfrey.github.io/select2-bootstrap-5-theme/" target="_blank">https://apalfrey.github.io/select2-bootstrap-5-theme/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>Theia Sticky Sidebar :</b><a href="https://github.com/WeCodePixels/theia-sticky-sidebar" target="_blank">https://github.com/WeCodePixels/theia-sticky-sidebar</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>Owl Carousel 2 :</b> Touch enabled jQuery plugin that lets you create a beautiful responsive carousel slider. <a href="https://owlcarousel2.github.io/OwlCarousel2/" target="_blank">https://owlcarousel2.github.io/OwlCarousel2/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>Waypoint :</b> Waypoints is the easiest way to trigger a function when you scroll to an element. <a href="http://imakewebthings.com/waypoints/" target="_blank">http://imakewebthings.com/waypoints/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>Snazzy Maps :</b> <a href="https://snazzymaps.com/" target="_blank">https://snazzymaps.com/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>Toastr :</b> Simple javascript toast notifications <a href="https://codeseven.github.io/toastr/" target="_blank">https://codeseven.github.io/toastr/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>APEXCHARTS.JS :</b> Modern & Interactive Open-source Charts <a href="https://apexcharts.com/" target="_blank">https://apexcharts.com/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>DataTables :</b> Add advanced interaction controls
|
||
to your HTML tables the free & easy way <a href="https://datatables.net/" target="_blank">https://datatables.net/</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>metismenu :</b> A collapsible jQuery menu plugin <a href="https://github.com/onokumus/metismenu" target="_blank">https://github.com/onokumus/metismenu</a></p>
|
||
</li>
|
||
<li>
|
||
<p><b>perfect-scrollbar :</b> Minimalistic but perfect custom scrollbar plugin <a href="https://github.com/mdbootstrap/perfect-scrollbar" target="_blank">https://github.com/mdbootstrap/perfect-scrollbar</a></p>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- Customization section -->
|
||
<section id="customization">
|
||
<div class="row">
|
||
<div class="col-sm-12">
|
||
<div class="page-header">
|
||
<h2># Customization</h2>
|
||
</div>
|
||
<ol>
|
||
<li>
|
||
<p><b>How do I open the template?</b></p>
|
||
<p>The template is 100% ready to use, with no compilation needed. Just unzip, go
|
||
to the html folder and open the <code>index.html</code> file in your browser
|
||
using a development server</p>
|
||
</li>
|
||
<li>
|
||
<p><b>How do I start a simple local development server?</b></p>
|
||
<p>Make sure you have the latest <code>PHP</code> version installed. Then go to
|
||
the <code>html</code> folder and run the <code>php -S localhost:4000</code>
|
||
command from the console. You should see the template running at
|
||
<code>http://localhost:4000</code>
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p><b>How do I install/uninstall a dependency with Bower?</b></p>
|
||
<p>Run bower install <dependency-name> --save. After this then you should
|
||
add the installed dependencies to the <code>.html</code> files.</p>
|
||
</li>
|
||
<li>
|
||
<p><b>I have a question, but it is not listed here, what can I do?</b></p>
|
||
<p>Send us an email to easital.theme@gmail.com or contact us through our Theme
|
||
Forest profile and we'll do our best to try to help you.</p>
|
||
</li>
|
||
<li>
|
||
<p><b>I would like to see a new plugin installed or functionality developed in
|
||
Kernel, is it possible?</b></p>
|
||
<p>We are always trying to improve and adding new functionalities and plugins to
|
||
<b>ListOn - Directory & Listing HTML Template
|
||
</b>, so every request is welcomed and will be evaluated.
|
||
</p>
|
||
</li>
|
||
<li>
|
||
<p><b>I found a bug, what can I do?</b></p>
|
||
<p>Please let us know and we'll do our best to fix it as soon as possible</p>
|
||
</li>
|
||
<li>
|
||
<p><b>Are updates free?</b></p>
|
||
<p>Yes, they are and always will be</p>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<div class="alert alert-info" role="alert">
|
||
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- footer -->
|
||
<footer>
|
||
<div class="container">
|
||
<div class="col-sm-12">
|
||
<p>© <a href="https://themeforest.net/user/easital_tech" target="_blank">easital_tech</a> 2023</p>
|
||
</div>
|
||
</div>
|
||
</footer>
|
||
<!-- Bootstrap core JavaScript
|
||
================================================== -->
|
||
<!-- Placed at the end of the document so the pages load faster -->
|
||
<script src="assets/js/jquery.min.js"></script>
|
||
<script src="assets/js/bootstrap.min.js"></script>
|
||
<script src="assets/js/jquery.easing.min.js" type="text/javascript"></script>
|
||
<script src="assets/js/script.js"></script>
|
||
</body>
|
||
|
||
</html> |