Create An Online Store Front Page By Using HTML & CSS.

Get to learn how you can create a landing page of an e-commerce store by using JQuery, HTML & CSS.

Last Update: May 12, 2021

Create An Online Store Front Page By Using HTML & CSS.

Hello friends, today we are going to show you how to build a front page of an e-commerce store by just using HTML and CSS.

Note that this page wont be dynamical, but will help you if one day you decide to build an online store. Well let's get to it.

First of all, we will create a folder and call it "parallelStore", and in reference it as the main folder. As the main folder has been created, we will create a navigation file inside the main folder.

navigation.html

<div id="navigation">
    
    <div class="top-nav">
        <div class="container" style="padding: 0px;">
            <a href="index.html" class="brand">ParallelStore</a>
            <ul class="left-side pull-left">
                <li>
                    <a href="#"><i class="fa fa-envelope"></i> Contact Us</a>
                </li>
            </ul>
            
            <ul class="right-side pull-right">
                <li>
                    <a href="#">Cart <i class="fa fa-shopping-cart"></i> <p id="cartNumber">0</p></a>
                </li>

                <li>
                    <a href='#'>Login <i class='fa fa-sign-in-alt'></i></a>
                </li>
                <li>
                    <a href='#'>Register <i class='fa fa-user-plus'></i></a>
                </li>

            </ul>
        </div>
    
    </div>
            
    <div class="bottom-nav">
        <div class="container" style="padding: 0px;">    
            <form>
                <span class="input-group">
                    <input type="text" placeholder="Search..." name="query" class="form-control" required>
                     <span class="input-group-btn">
                        <button type="submit" class="btn btn-danger fa fa-search"> Search</button>
                    </span
                </span>    
            </form>
        </div>    
    </div>
</div>

After we have created the navigation file, we need to create an index file "index.html" inside the main folder. Note that index files are files in which the browser first display when you open your project or a website unless stated otherwise. Also, inside the main folder, we will create a CSS file "styles.css", in which we will use to decorate the page and link it in the index file. Note that the navigation we have created above, we will include it in the index file, using JQuery.

index.html

<!DOCTYPE html>
<html lang="en">
<!--
   Author: Mr Parallel
   Tutorial: Building First Website
   Contact: stetcha@panthera-clan.co.za
-->

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
        <link rel="stylesheet" href="styles.css">
        <title>Parallel Store | By Mr Parallel</title>
    </head>

    <body>
        <div class="full-body">
            <header></header>
        </div>

        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script>
             $(document).ready(function(){
                $('header').load("navigation.html");
             });
        </script>
    </body>
</html>

styles.css

/*
   Author: Mr Parallel
   Content: Building an Onine Store website
   Contact: stetcha@panthera-clan.co.za
*/

body{
   font-family: Arial, Helvetica, sans-serif;
   font-size:16px;
   line-height:1.8;
   background: rgba(236, 236, 236, .5);
   color: #414141;
}


#navigation{
   width: 100%;
   background: black;
   color: #e3e3e3;
   overflow: none;
   z-index: 100;
}

#navigation .top-nav{
   height: auto;
   overflow: hidden;
   box-shadow: 1px 1px 1px #ffbf19;
   margin-bottom: 10px;
}

#navigation a.brand{
   float: left;
   font-size: 28px;
   text-decoration-line: none;
   color: #00ff00;
   margin-right: 15px;
}

#navigation a.brand:hover{
   color: #007052;
}

#navigation ul.left-side{
   padding: 0px;
}

#navigation ul li{
   display: inline-block;
}

#navigation .top-nav li{
   margin-right: 15px;
   margin-top: 10px;
}

#navigation ul li a{
   font-size: 16px;
   color: white;
   text-decoration: none;
   font-weight: bold;
}

#navigation ul li a:hover{
   color: #ffbf19;
}

#navigation li a p#cartNumber{
   position: absolute;
   top: 7px;
   margin-left: 48px;
   height: 15px;
   width: 15px;
   background: red;
   color: white;
   border-radius: 100%;
   text-align: center;
   font-size: 11px;
}

#navigation .bottom-nav{
   height: auto;
   padding: 0px;
   overflow: hidden;
}

#navigation .bottom-nav form{
   margin-bottom: 10px;
}
#navigation .bottom-nav form input,
#navigation .bottom-nav form select,
#navigation .bottom-nav form button{
   height: 30px;
}

So far, our page looks like this:

We just created our navigation file, so from here we will create a slider of images below the navigation. We are going to integrate "slick slider", a plugin that will help us create a slider of images on our page. Still on that, we will create a folder containing images named "images" inside our main folder "parallelStore".

We have the following images that we will use on our slider "[jeans.jpg, jewellery.jpg, sneakers.jpg, t-shirts.jpg]". Before I forget, we will also create a JavaScript file named "scripts.js" inside our main folder and link it in the index file.

Inside "scripts.js", we are going to create a function called "Slider", that will make sure that the slider plugin will create image slider.

scripts.js

/*
   Author: Mr Parallel
   Content: Building an Onine Store website
   Contact: stetcha@panthera-clan.co.za
*/

function Slider(){

   $("#slider").slick({
       centerMode: false,
       dots: true,
       slidesToShow:1,
       infinite: false,
       slidesToScroll:1,
       autoplay: true,
       arrows: false,
       rows: 1
   });
}

And our index file will look like this:

index.html

<!DOCTYPE html>
<html lang="en">
<!--
   Author: Mr Parallel
   Tutorial: Building First Website
   Contact: stetcha@panthera-clan.co.za
-->

    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"/>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.14.0/css/all.css">
        <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
        <link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css"/>
        <link rel="stylesheet" href="styles.css">
        <title>Parallel Store | By Mr Parallel</title>
    </head>

    <body>
        <div class="full-body">
            
            <header></header>
            
            <div id='slider'>
                <img src='images/jeans.jpg' class='img-responsive' alt="jeans">
                <img src='images/jewellery.jpg' class='img-responsive' alt="jewellery">
                <img src='images/sneakers.jpg' class='img-responsive' alt="sneakers">
                <img src='images/t-shirts.jpg' class='img-responsive' alt="tshirts">
            </div>
            
        </div>

        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
        <script src="scripts.js"></script>
        <script>
             $(document).ready(function(){
                $('header').load("navigation.html");
                Slider();
             });
        </script>
    </body>
</html>

Also, our CSS file will look like this:

styles.css

/*
   Author: Mr Parallel
   Content: Building an Onine Store website
   Contact: stetcha@panthera-clan.co.za
*/

body{
   font-family: Arial, Helvetica, sans-serif;
   font-size:16px;
   line-height:1.8;
   background: rgba(236, 236, 236, .5);
   color: #414141;
}


#navigation{
   width: 100%;
   background: black;
   color: #e3e3e3;
   overflow: none;
   z-index: 100;
}

#navigation .top-nav{
   height: auto;
   overflow: hidden;
   box-shadow: 1px 1px 1px #ffbf19;
   margin-bottom: 10px;
}

#navigation a.brand{
   float: left;
   font-size: 28px;
   text-decoration-line: none;
   color: #00ff00;
   margin-right: 15px;
}

#navigation a.brand:hover{
   color: #007052;
}

#navigation ul.left-side{
   padding: 0px;
}

#navigation ul li{
   display: inline-block;
}

#navigation .top-nav li{
   margin-right: 15px;
   margin-top: 10px;
}

#navigation ul li a{
   font-size: 16px;
   color: white;
   text-decoration: none;
   font-weight: bold;
}

#navigation ul li a:hover{
   color: #ffbf19;
}

#navigation li a p#cartNumber{
   position: absolute;
   top: 7px;
   margin-left: 48px;
   height: 15px;
   width: 15px;
   background: red;
   color: white;
   border-radius: 100%;
   text-align: center;
   font-size: 11px;
}

#navigation .bottom-nav{
   height: auto;
   padding: 0px;
   overflow: hidden;
}

#navigation .bottom-nav form{
   margin-bottom: 10px;
}
#navigation .bottom-nav form input,
#navigation .bottom-nav form select,
#navigation .bottom-nav form button{
   height: 30px;
}

#slider{
   height: 550px;
   overflow: hidden;
   margin-top: 0px;
   background: black;
}

#slider .sliderDetails img{
   height: 550px;
   width: 100%;
}

ul.slick-dots{
   position: absolute;
   display: block;
   bottom: 0px;
   padding: 5px;
   opacity: 1;
}



ul.slick-dots li button:before{
   color: white;
   opacity: 1;
   font-size: 16px;
   font-weight: bolder;
}
ul.slick-dots li.slick-active button:before{
   color: red;
}

Seems like our store looks more promising.