Version: 1.0 | Created Date: 28 November 2018

Introduction

Welcome and thank you for purchasing our Template. We really do appreciate every sale. If you have any questions that are not covered in this help file you can contact us via support on our profile page or send us email. If you like our work please do not forget to rate it.


Software

To edit this Website Template we recommend you download appropriate software:

  1. Use Sublime Text, Notepad++ or Web storm code editor to edit the source code of template files.
  2. To upload files on a server you'll need FTP manager, we recommend you to use FileZilla.


Hosting

You can run index.html file directly from your site folder, but it won't let you explore all template functionality. You should upload template to hosting server in order to display a fully working website correctly.

You may also install Website Template to your computer locally by using localhost. In order to set up local server you may use WAMP, AppServ, MAMP or any similar software.

You can check following tutorials on how to set up local server:


Getting Started

What's Included

Once you have download the package you will see the following folder structure in " template" Folder

  • css- Main Stylesheet Files
  • fonts- Fonts file and css for fonts
  • images- Img Folder
  • scripts- Js Folder

In order to use in your website, you need to upload template files ( inside the folder www) to your web server with the help of one of the FTP-clients (for example, WinSCP or Total Commander etc).

HTML Structure

HardsFort Buy And Sell Market Place Template is based on Bootstrap 4 Framework ( http://getbootstrap.com/) Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.

Below is a sample coding structure:

<!DOCTYPE html>
<html lang="en">
<head>

    <!-- Title, Stylesheets and Meta tags -->
    ...

</head>
<body>

    <!-- Menu Wraper -->
    <div class="menu-wrap">

        ...

    </div>

    <!--/////////////////////////// HEADER Banner \\\\\\\\\\\\\\\\\\\\\\\\\\\-->
    <header id="main-banner">

        ...

    </header>

    <!--/////////////////////////// CONTENT \\\\\\\\\\\\\\\\\\\\\\\\\\\-->
    <div class="main-wrapper">
        <section>
            <div class="container">

                ...

            </div>
        </section>

        <!--/////////////////////////// FOOTER \\\\\\\\\\\\\\\\\\\\\\\\\\\-->
        <footer>
            <div class="container">

            ...

            </div>
    </footer>
</div>

<!-- Jquery plugins and scripts -->
<script src="js/jquery-2.2.4.min.js"></script>

    ...

<!-- Plugins and scripts initialization -->
<script src="js/main.js"></script>
</body>
</html>

Table of contents

style.css has the following structure:


/* ----------------------
[Table of contents]
1. H-Variables
2. H-Prefix
3. H-Header
4. H-Navigation Menu
5. H-Banner
6. H-Welcome
7. H-Our Services
8. H-Our Team
9. H-About
10. H-Blog
11. H-Blog Detail
12. H-Error Page
13. H-Add Product Detail
14. H-Applied Product Detail
15. H-User Profile Page
16. H-Products Alert
17. H-Employee Page
18. H-Product Listing Sidebar
19. H-Call To Action
20. H-Sign In
21. H-Sign Up
22. H-Product Detail Sidebar
23. H-Product Detail 2 Sidebar
24. H-Withdraw
25. H-Footer
26. H-Social Footer
27. B-Responsive
 --------------------------*/

Logo Settings

Default site logo is placed insideheader container.


    <div class="logo-menu">
              <a class="logo" href="#">Your Logo Here </a>
                
                ...

Changing Fonts

To change the embedded font, please take a look in the head part of the website and you will find this tag: Google Fonts Library

If you wish to add/change the site fonts, please take a look in thehead part of the website and you will find this tag:


<https://fonts.googleapis.com/css?family=Lato>

To include new font you can simply add another line like this:

Or add an| seperator and pasteLato:400,300,800,700,600 after default website fonts link.

Helpers


HardsFort Buy And Sell Market Place Template helper css classes allow you to build your custom layout without touching any CSS code

These classes are generic helper classes predifined in the CSS of pages, here is quick view what they can do

Margins

You can add this helper class to any element in your HTML code to set Margins

First Prefix ( m-*) Second Prefix(mt/b/l/r-*) Last Prefix(mt-$value)
m for margin t : top, b : bottom, l : left, r : right 5,10,15,20, ... 150

example :

mt-10 which means Margin Top 10px
mb-20 which means Margin Bottom 20px
ml-5 which means Margin Left 5px
mr-35 which means Margin Right 35px

Value can not be anything, 1,2,4,5,6. It has a step of 5px, eg: 5,10,15

Other options:

To remove margin from a HTML element add the class

no-margin

Paddings

You can add this helper class to any element in your HTML code to set paddings

First Prefix ( p*) Second Prefix(pt/b/l/r*) Last Prefix(pt-$value)
p for padding t : top, b : bottom, l : left, r : right 5,10,15,20, ... 150

example :

pt-10 which means padding Top 10px
pb-20 which means padding Bottom 20px
pl-5 which means padding Left 5px
pr-35 which means padding Right 35px

Value can not be anything, 1,2,4,5,6. It has a step of 5px, eg: 5,10,15

Grid

Bootstrap grid includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

  • You must start withrow
  • There are pre-define classes of columns starting from 1 to 12, examplecol-md-1 tocol-md-12
  • Each of these value represent a percentage of the screen, 1 being the smallest and 12 being 100%
  • You can create different grid pattern that finally forms 12

For more information about Bootstrap, visit: http://getbootstrap.com/

example :


    
.col-md-1

    
.col-md-1

    
.col-md-1

    
.col-md-1

    
.col-md-1

    
.col-md-1

    
.col-md-1

    
.col-md-1

    
.col-md-1

    
.col-md-1

    
.col-md-1

    
.col-md-1






    
.col-md-8

    
.col-md-4






    
.col-md-4

    
.col-md-4

    
.col-md-4






    
.col-md-6

    
.col-md-6

NoteBootstrap includes different grids for different screen sizes, "col-md" md stands for medium screen, the following table explains:

Extra small devices Phones ( <768px) Small devices Tablets (≥768px) Medium devices Desktops (≥992px) Large devices Desktops (≥1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12
Column width Auto ~62px ~81px ~97px
Gutter width 30px (15px on each side of a column)
Nestable Yes
Offsets Yes
Column ordering Yes

Browser Support

HardsFort Buy And Sell Market Place Template is built keeping mind to support a wide range of browsers and devices. We all major browers Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and Above


Chrome Firefox Internet Explorer Opera Safari
Android Supported Supported N/A Not Supported N/A
iOS Supported N/A Not Supported Supported
Mac OS X Supported Supported Supported Supported
Windows Supported Supported Supported Supported Not Supported

Source & Credits

All images are only for demonstration purpose, however you can re-download them in sites below. Almost all (not including overclothing.com, Daniel Zenda, Freepik etc...) images are released free of copyrights under Creative Commons CC0.



Images & Mockups



Scripts



CSS & Fonts

Template support

Support includes bugs fixing, and general problem solving with features explained on the template’s official sales page.



Enjoy your purchase!

Once again, thank you so much for purchasing this template. We'd be glad to help you if you have any questions relating to this template. We'll do our best to assist. If you have a more general question relating to the themes on WrapBootstrap, you might consider visiting the forums and asking your question in the "Item Discussion" section.