Introduction:

Download free, an index page for an ecommerce website, with responsiv web design, using html, css, jquery and bootstrap. Our template and compsé by three bare of navigation, The one and the third for the management of the navigation on your site with a good experience of ergonimic, and the second compsé by a seach box, contact info, and your acronym image. Then you find a part of the page for displaying a large article, a view list for displaying your articles, etc. Test a demo version on webi4u.com, and download the full version on our github account.

Plant of the guide

At the end of this course, you will be able to:

Prerequisites: (5)

Before starting this guide, you must already have the following skills:

Part 1: Add, delete, nav bar and nav bar item of the nav bar one?

Our bares of navigations, are developped on bootstrap navbar, it is are div tags nested, of which each nav bar item is composed by a label and an icon. you can either add new nav bar item make sure you change the nav bar item to your needs.

            
<div class="nav_bar nav_bar_style_one">
    <div class="nav_bar_item">
        <div>
            <div class="content active">
                <img src="img/phone_icon.png" class="icon"/>
                <em class="label"> 
                    +(216) 24 47 01 478
                </em>
            </div>
        </div>
    </div>
</div>
Part 2: Use article large layout layout?

The portion of the article in large plant, allows you to display an item that you need to do it sold more times than other items in your store. The layout is compsé by images, a Title, Description, taken and the links info.

<section class="row article_grand_plant">
    <div class="col-lg">
        <div class="container-fluid">
            <div class="row">
                <div class="col-lg-7 image border-light">
                    <img src="img/01.jpg"/>
                </div>
                <div class="col-lg">
                    <div>
                        <h2 class="tiltle">
                            Wedding Planner Rome de Anna Ma...
                        </h2>
                        <a href="" class="categorie_label">
                            costume home
                        </a>
                    </div>
                    <div>
                        <button class="btn">
                            <img src="img/earth-512.png"/>
                            view more
                        </button>
                        <button class="btn">
                            <img src="img/share_icon.png"/>
                            share
                        </button>
                    </div>
                    <hr/>
                    <div class="list_image">
                        <img src="img/02.jpg"/>
                        <img src="img/03.jpg"/>
                        <img src="img/04.jpg"/>
                        <img src="img/05.jpg"/>
                        <img src="img/06.jpg"/>
                        <img src="img/Groom-Style-Inspiration-Bridal-Musings-Wedding-Blog-.jpg"/>
                        <img src="img/07.jpg"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
Part 3: Add, delete, update liste view and liste view item?

You find with our index page, a list view moder, ergonimic and responsiv for the display of your list of articles by category. Each view item list is composed by an image article, title, description, price, links info. etc. You can add, modify, or delete view item lists to your website requirements.

<section class="row products_liste_view_one justify-content-between">
    <div class="col-lg">
        <header class="container-fluid">
            <div class="row justify-content-between">
                <div class="label">
                    <em>
                        Our Featured Products
                    </em>
                </div>
                <div>
                    <a href="">
                        <input value="view all" class="btn"/>
                    </a>
                </div>
            </div>
        </header>
        <section class="container-fluid">
            <div class="row justify-content-between">
                <div class="item">
                    <div class="image">
                        <img src="img/08.jpg"/>
                        <div class="links row justify-content-end">
                            <div>
                                <a href="">
                                    <img src="img/view_icon.png"/>
                                </a>
                                <a href="">
                                    <img src="img/like_icon.png"/>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="tiltle">
                        <strong>
                            2019 New FILA
                        </strong>
                    </div>
                    <div class="revious row justify-content-center">
                        <div>
                            <img src="img/star-icon.png"/>
                            <img src="img/star-icon.png"/>
                            <img src="img/star-icon.png"/>
                            <img src="img/star-icon.png"/>
                            <img src="img/star-icon.png"/>
                        </div>
                        <div class="label">
                            (254) revious
                        </div>
                    </div>
                    <div class="prise">
                        <em>
                            £145.24
                        </em>
                    </div>
                </div>
            </div>
        </section>
    </div>
</section>