Documentation
Bidout - Auction and Bidding HTML Template
Bidout is a Auction and Bidding HTML Template which can be uses any Bid and Auction. It has added modern age feature with the current public demands. It can give the best user experiences with 3 attractive home pages and 15+ inner pages which are very impressive. This template is powered with Bootstrap v5 including SASS files. Its completely SEO friendly with full responsive and also W3 validated mark up. Here using very clean and clear codes so easy to customize it.
- Item Name: Bidout - Auction and Bidding HTML Template
- Author: EgensLab
- Created: 14 May, 2022
- Version: 1.0
If you have any questions that are beyond the scope of this help file, Please feel free to email via Item Support Page.
Installation
Follow the steps below to setup your site template:
- Unzip the downloaded package and open the /HTML folder to find all the template files. You will need to upload these files and sub folders to your hosting web server using FTP or file manager in order to use it on your website.
- Below is the folder structure and needs to be uploaded to your website root directory:
assets/css- Stylesheet filesassets/fonts– Icon font filesassets/images- Image filesassets/js- Javacript filesassets/js–Slider files
- You should upload all or specific HTML files as per your need.
- You're now good to go..! Start adding your content/images and generate your beautiful brand new website for your awesome users.
Logo Settings
The logo container can be found in the Header - header
<!-- Header logo --> <div class="logo"> <a href="index.html"><img src="assets/img/logo.svg" alt=""></a> </div> <!-- end header-logo -->
<!-- Footer logo --> <div class="footer-logo"> <img src="assets/img/footer-logo.svg" alt=""> </div> <!-- end footer-logo -->
Note Two images are used for logo, one
for header logo (Logo that will display even in sticky header), second for footer logo (Logo that
will display in footer area). .header-logo is used to set which image you want
as default.footer-logo is used to set which image you want to display in
footer.
Note If you want to increase the size
of your logo container then you can increase max-height as per your need in
/css/style.css file under this css class: header .header-logo img
Image and Favicon Setting
Bidout download package does not contain actual images which are there in our online demo due to
licensing limitation and this is already mentioned in item description also as per Envato policy. We
are using placeholder images instead of real images. You can replace placeholder image url with your
image url like assets/images/image.jpg and make sure to put the image in /images/
folder.
<img src="https://placehold.it/750x500" alt="image alt text">
Change to
<img src="assets/images/image.jpg" alt="image alt text">
Html Structure
<!doctype html>
<html class="no-js" lang="en">
<head>
<!-- title -->
<meta charset="utf-8">
<!-- description -->
<meta name="description" content="">
<!-- keywords -->
<meta name="keywords" content="">
<!-- favicon -->
<!-- style -->
</head>
<body>
<!-- start header -->
<header>
<!-- start navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-transparent header-light fixed-top navbar-boxed header-reverse-scroll">
...
</nav>
<!-- end navigation -->
</header>
<!-- end header -->
<!-- start sections -->
<section>
...
</section>
<!-- end sections -->
<!-- start footer -->
<footer>
<div class="container">
...
</div>
</footer>
<!-- end footer -->
<!-- javascript libraries -->
</body>
</html>
Home Page Demos
Header
Banner
<!-- ========== banner-area=============--> <div class="hero-area hero-style-one" > <div class="hero-main-wrapper position-relative"> <div class="swiper banner1"> <div class="swiper-wrapper"> <div class="swiper-slide"> <div class="slider-bg-1"> <div class="container"> <div class="row d-flex justify-content-center align-items-center"> <div class="col-xl-8 col-lg-10"> <div class="banner1-content"> <span>Welcome To Auction House</span> <h1>Build, sell & collect digital items.</h1> <p>Nulla facilisi. Maecenas ac tellus ut ligula interdum convallis. Nullam dapibus on erat in dolor posuere, none hendrerit lectus ornare. Suspendisse sit amet turpina sagittis, ultrices dui et, aliquam urna.</p> <a href="live-auction.html" class="eg-btn btn--primary btn--lg">Start Exploring</a> </div> </div> </div> </div> </div> </div> <div class="swiper-slide"> <div class="slider-bg-1"> <div class="container"> <div class="row d-flex justify-content-center align-items-center"> <div class="col-xl-8 col-lg-10"> <div class="banner1-content"> <span>Welcome To Auction House</span> <h1>Discover, collect & sell items.</h1> <p>Nulla facilisi. Maecenas ac tellus ut ligula interdum convallis. Nullam dapibus on erat in dolor posuere, none hendrerit lectus ornare. Suspendisse sit amet turpina sagittis, ultrices dui et, aliquam urna.</p> <a href="live-auction.html" class="eg-btn btn--primary btn--lg">Start Exploring</a> </div> </div> </div> </div> </div> </div> </div> </div> <div class="hero-one-pagination d-flex justify-content-center flex-column align-items-center gap-3"></div> </div> </div> <!-- =============== Hero area end=============== -->
jQuery Plugin
Following list of package will be included:
- Swiper js
- jQuery UI
- Bootstrap5
- Bootstarp 5 icons
- Slick js
- Nice Select
- Odometer
- Viewport
- Wow js
- jQuery
Version 1.0 - Current Version
Version 1.1
Comming Soon
Section Title
<div class="row justify-content-center">
<div class="col-md-8 col-xl-6">
<div class="sec-title">
<h2>Featured Causesb</h2>
<p>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form,</p>
</div>
</div>
</div>
Three Equal columns
<div class="container">
<div class="row">
<div class="col">
Column
</div>
<div class="col">
Column
</div>
<div class="col">
Column
</div>
</div>
</div>
Source & Credits
Images:
- Unsplash - https://unsplash.com/
Icons:
- Icons Font Face - https://icons.getbootstrap.com
- Icons Font Face - https://boxicons.com/
Scripts:
- jQuery - http://www.jquery.com/
- jQuery UI - https://jqueryui.com/
- Bootstrap 5 - http://getbootstrap.com/
- swiperjs - https://swiperjs.com/
- Nice Select - https://jqueryniceselect.hernansartorio.com/
- Odometer- https://github.com/HubSpot/odometer
- WOW Js- https://wowjs.uk/
Support
If this documentation doesn't answer your questions, So, Please send us Email via Item Support Page
We are located in GMT +5:30 time zone and we answer all questions within 12-24 hours in weekdays. In some rare cases the waiting time can be to 48 hours. (except holiday seasons which might take longer).
Don’t forget to Rate this template
Go to your Themeforest Profile > Downloads Tab > & then You can Rate & Review for our template.
Thank You.
More Templates
Checkout Our Below Premium Templates
