Autolist - Classifieds, Directory, Multipurpose Listing HTML Template

Dashboard
Welcome to Autolist - Classifieds, Directory, Multipurpose Listing HTML Template

  • Updated Date:13/Jan/2023
  • Author: SPRUKO
  • Company: Spruko Technologies Private Limited

Thank you for purchasing our project and being our valued customer. We hope you are happy with your purchase. Feel free to contact us at any time. We have a dedicated team to provide you with the best support. If you have any issues, please contact the Support Help Desk at https://support.spruko.com/.

If you love our Template Design Don't forget to rate it. Thank you so much!

Introduction
Welcome to Autolist - Classifieds, Directory, Multipurpose Listing HTML Template

Autolist - Classifieds, Directory, Multipurpose Listing HTML Template, with these template formats, it's very easy to create a presence and grab someone's attention around the web page because the template is built by using HTML5, CSS3, Bootstrap 5 framework and with Sass. So please before you start working with the template take a quick look on the documentation so that you can easily built your website.

If you love our Template Design Don't forget to rate it. Thank you so much! 😊

Template Description

Autolist– It is a modern, and creative listing template using modern and minimal design. It is fully flexible user-friendly and responsive. Autolist listing template is powered with HTML 5, SASS, & Bootstrap 5 which looks great on Desktops, Tablets, and Mobile Devices. This Template Includes 66 HTML Pages & 25+ Plugins more UI elements . No Need to do hard work for this template customization. We have already designed it and you can easily design your website just how you like it. Advanced Form-Elements like Date pickers, form elements are included. This template using Bootstrap 5 framework. This admin template is fully 100% Premium Admin Templates quality. This template designed for using HTML5,CSS3,Jquery. After Purchasing this template you will get All HTML files,CSS, Scss and JS Files.

It has super clean flat user interface admin Backend design, easy customizable components and widgets.The Template comes with an awesome unique design also we ensure you can easily design admin template.

It is a fully responsive layout for all type of devices. Works on all major web browsers, Desktop, iPhone, iPad, Tablet and all other smart phone devices

Once you Purchase Autolist - Multipurpose listing,Classifieds and Directory usages Big Bundle HTML Template, you will be able to get free download of all future updates.

Template Features
  • 13 Different listing Home Pages
  • 86 HTML Pages
  • Bootstrap 5 Responsive Framework
  • Well Commented Code
  • Editable Text
  • 24 * 7 Professional Company Support
  • Regular Updates
  • include scss in html
  • Google Fonts
  • SCSS Powered
  • 2 Type of menus (Left Menu & Horizontal )
  • 4 Types of Headers
  • 4 Types of Footers
  • Different styles of details pages
  • Different styles of list pages
  • Time picker
  • Date picker
  • Multiple select
  • 25+ Plugins
  • Owl-Carousel
  • Carousel
  • Select2
  • Modals
  • Rating
  • File upload
  • Message Chat
  • Lockscreen Page
  • Under Construction Page
  • User Profile
  • Easy to customize
  • More Widgets
  • Invoice Page
  • Tabs
  • Vertical Scrollbar
  • Very Easy to Create your Own Site
  • Neat, clean and simple design
  • W3C Validated
  • RTL version
CSS Structure

style.css is the main CSS file located in assets/css folder of the package. Whole CSS file is well indexed with topic and its related code.


*,
::after,
::before {
box-sizing: border-box;
}

html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-ms-overflow-style: scrollbar;
-webkit-tap-highlight-color: transparent;
font-size: 16px;
height: 100%;
}

@-ms-viewport {
width: device-width;
}

article,
aside,
dialog,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
display: block;
}

.secondlevel ul {
background: 0 0 !important;
margin-left: 5px !important;
margin-right: 5px !important;
}

[tabindex="-1"]:focus {
outline: 0 !important;
}

hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin-top: 0;
margin-bottom: .66em;
}

p {
margin-top: 0;
margin-bottom: 1rem;
}

abbr[data-original-title],
abbr[title] {
text-decoration: underline;
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
cursor: help;
border-bottom: 0;
}

address {
margin-bottom: 1rem;
font-style: normal;
line-height: inherit;
}


JS Structure

custom.js is the main javascript file having all the js code. File is located in assets/js/ folder. This file code is also well formatted and section in different respective function names.

Along with this chart library based js code and dashboard based js code are added in separate files for ease of use of user.


(function($) {
"use strict";

jQuery('img.svg').each(function() {
var $img = jQuery(this);
var imgID = $img.attr('id');
var imgClass = $img.attr('class');
var imgURL = $img.attr('src');
jQuery.get(imgURL, function(data) {
	// Get the SVG tag, ignore the rest
	var $svg = jQuery(data).find('svg');
	// Add replaced image's ID to the new SVG
	if (typeof imgID !== 'undefined') {
		$svg = $svg.attr('id', imgID);
	}
	// Add replaced image's classes to the new SVG
	if (typeof imgClass !== 'undefined') {
		$svg = $svg.attr('class', imgClass + ' replaced-svg');
	}
	// Remove any invalid XML tags as per http://validator.w3.org
	$svg = $svg.removeAttr('xmlns:a');
	// Replace image with new SVG
	$img.replaceWith($svg);
}, 'xml');
});

// ______________ Cover-image
$(".cover-image").each(function() {
var attr = $(this).attr('data-image-src');
if (typeof attr !== typeof undefined && attr !== false) {
	$(this).css('background', 'url(' + attr + ') center center');
}
});
var likeCounter = 12;
$(".like").on("click", function(e) {
e.preventDefault();
// animation
if ($(this).parent().hasClass("selected")) {
	// like counter
	if ($(this).hasClass("like")) {
		likeCounter--;
		$(this).find(".counter").text(likeCounter);
	};
} else {
	// like counter
	if ($(this).hasClass("like")) {
		likeCounter++;
		$(this).find(".counter").text(likeCounter);
	};
}
});

// ______________ Global Loader
$(window).on("load", function(e) {
$("#global-loader").fadeOut("slow");
})