Table of Contents

Introduction

  1. Package files content.
  2. HTML/CSS templates, definition and usage.

Editing this template

  1. Left Slide Menu
  2. Fixed Header
  3. Product Section With Swipe Slider

CSS files

JavaScript files

Sources and Credits

W3C Validation

Created: 24 Sep 2018
Last Updated: none
Current Version: 1.0

Thank you for purchasing Resto HTML & CSS template. There is a Resto Documentation HTML & CSS Template.
If you have any questions that are beyond the scope of this help file, please feel free to comments to this post. We are glad to help you.

Buy on Envato

Introduction

1. Package files content.

The package you downloaded from themeforest include the following structure:

The main HTML file main.html will open the preview Main page mobile design of instashop ecommerce template.
The preview folder includes the files just for the preview page.

There are main design available for Instashop template:

  1. The main design found inside the “main” folder.

Once you decided which design you will use for your website/app just copy the files inside one of this folders. The main file of you website will be the main.html file found in each folder of design. Below you can see the files included in one design, for example the “main” folder one.

Where main.html is the home page.


2. HTML/CSS templates, definition and usage.

A HTML/CSS Template is a pre-designed layout that will help you build a final website.

HTML is the basic coding to create web pages. CSS stands and it’s used to define and style the HTML elements.

To install a HTML/CSS template requires just to copy the template files on your webserver.

This can be done using your hosting provider custom interface or a FTP software.

A regular HTML/CSS template does NOT include a CMS to edit/add content of the pages. All content is edited using a HTML editor.

HTML editors can be found as free and paid editors.

Some modern HTML editors have included a DESIGN view mode of the code, making it easier for templates to be edited.

Regular ones will let you edit the content only from the code mode, meaning you will need to have a basic HTML coding knowledge.

Editing this template

1. Navigation

        <!-- Navigation -->
        <nav class="navbar position-absolute w-100 navbar-expand-md d-flex flex-md-row p-3 px-md-4 mb-lg-3 transparent box-shadow">
            <!--Logo-->
            <a class="navbar-brand logo" href="index.html">TABLET</a>
            <!--Navbar toggler-->
            <button class="navbar-toggler text-white" type="button" data-toggle="collapse" data-target="#navbarMobile" aria-controls="navbarMobile" aria-expanded="false" aria-label="Toggle navigation">
                <i class="fa fa-navicon"></i>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbarMobile">
                <ul class="navbar-nav">
                    <li class="nav-item mx-lg-2 mx-0 text-uppercase">
                        <a class="nav-link text-light w-menu-item" href="menu.html">Menu</a>
                    </li>
                    <li class="nav-item mx-lg-2 mx-0 text-uppercase">
                        <a class="nav-link text-light w-menu-item" href="reservation.html">Reservations</a>
                    </li>
                    <!--Nav item drop down-->
                    <li class="nav-item dropdown mx-lg-2 mx-0 text-uppercase">
                        <a class="nav-link w-dropdown-toggle text-light w-100 w-menu-item" href="simple-blog.html" id="dropdown01">Blog</a>
                        <div class="dropdown-menu small p-4 m-0 border-0 w-bg-white rounded-0">
                            <a class="dropdown-item p-2 dark-color" href="simple-blog.html">Simple blog</a>
                            <a class="dropdown-item p-2 dark-color" href="blog-right-sidebar.html">Blog Right Sidebar</a>
                            <a class="dropdown-item p-2 dark-color" href="blog-left-sidebar.html">Blog Left Sidebar</a>
                        </div>
                    </li>
                    <li class="nav-item mx-lg-2 mx-0 text-uppercase">
                        <a class="nav-link text-light w-menu-item" href="simple-post.html">Simple Post</a>
                    </li>
                    <li class="nav-item mx-lg-2 mx-0 text-uppercase">
                        <a class="nav-link text-light w-menu-item" href="contacts.html">Contact</a>
                    </li>
                    <!-- Social links -->
                    <li class="nav-item mx-lg-2 mx-0">
                        <a class="nav-link text-light" href="index.html"><i class="fa fa-facebook"></i></a>
                    </li>
                    <li class="nav-item mx-lg-2 mx-0">
                        <a class="nav-link text-light" href="index.html"><i class="fa fa-instagram"></i></a>
                    </li>
                    <li class="nav-item mx-lg-2 mx-0">
                        <a class="nav-link text-light" href="index.html"><i class="fa fa-tripadvisor"></i></a>
                    </li>
                </ul>
            </div>
        </nav>

JavaScript Files

<!–Include google map–>
<script src=”js/map.js”></script>
<script async defer src=”https://maps.googleapis.com/maps/api/js?key=AIzaSyCH4SZwEKOzfe-0uFx0HlhMqRYLvI8hcl4&callback=initMap”></script>
<!–Bootstrap core JavaScript–>
<script src=”js/jquery.min.js”></script>
<script src=”js/bootstrap.min.js”></script>
<script src=”js/slick.min.js”></script>
<!–Include main js–>
<script src=”js/main.js”></script>

Sources and Credits

DEMO RESOURCES: