How to Design Ecommerce Product Listing Page using HTML, CSS & JS

In today's tutorial I will show you how to design an ecommerce product listing page using html css and javascript.

Index.html

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Product List</title>
    <link href="https://fonts.googleapis.com/css?family=Raleway:400,600,700,800" rel='stylesheet' type='text/css'>
    <style>
        input,
        textarea,
        button {
            height: 25px;
            margin: 0;
            padding: 10px;
            font-family: Raleway, sans-serif;
            font-weight: normal;
            font-size: 12pt;
            outline: none;
            border-radius: 0;
            background: none;
            border: 1px solid #282B33;
        }

        button,
        select {
            height: 45px;
            padding: 0 15px;
            cursor: pointer;
        }

        button {
            background: none;
            border: 1px solid black;
            margin: 25px 0;
        }

        button:hover {
            background-color: #282B33;
            color: white;
        }


        .tools {
            overflow: auto;
            zoom: 1;
        }

        .search-area {
            float: left;
            width: 60%;
        }

        .settings {
            display: none;
            float: right;
            width: 40%;
            text-align: right;
        }

        #view {
            display: none;
            width: auto;
            height: 47px;
        }

        #searchbutton {
            width: 60px;
            height: 47px;
        }

        input#search {
            width: 30%;
            width: calc(100% - 90px);
            padding: 10px;
            border: 1px solid #282B33;
        }

        @media screen and (max-width:400px) {
            .search-area {
                width: 100%;
            }
        }

        .products {
            width: 100%;
            font-family: Raleway;
        }

        .product {
            display: inline-block;
            width: calc(24% - 13px);
            margin: 10px 10px 30px 10px;
            vertical-align: top;
        }

        .product img {
            display: block;
            margin: 0 auto;
            width: auto;
            height: 200px;
            max-width: calc(100% - 20px);
            background-cover: fit;
            box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.8);
            border-radius: 2px;
        }

        .product-content {
            text-align: center;
        }

        .product h3 {
            font-size: 20px;
            font-weight: 600;
            margin: 10px 0 0 0;
        }

        .product h3 small {
            display: block;
            font-size: 16px;
            font-weight: 400;
            font-style: italic;
            margin: 7px 0 0 0;
        }

        .product .product-text {
            margin: 7px 0 0 0;
            color: #777;
        }

        .product .price {
            font-family: sans-serif;
            font-size: 16px;
            font-weight: 700;
        }

        .product .genre {
            font-size: 14px;
        }


        @media screen and (max-width:1150px) {
            .product {
                width: calc(33% - 23px);
            }
        }

        @media screen and (max-width:700px) {
            .product {
                width: calc(50% - 43px);
            }
        }

        @media screen and (max-width:400px) {
            .product {
                width: 100%;
            }
        }

        /* TABLE VIEW */

        @media screen and (min-width:401px) {
            .settings {
                display: block;
            }
            #view {
                display: inline;
            }
            .products-table .product {
                display: block;
                width: auto;
                margin: 10px 10px 30px 10px;
            }
            .products-table .product .product-img {
                display: inline-block;
                margin: 0;
                width: 120px;
                height: 120px;
                vertical-align: middle;
            }
            .products-table .product img {
                width: auto;
                height: 120px;
                max-width: 120px;
            }
            .products-table .product-content {
                text-align: left;
                display: inline-block;
                margin-left: 20px;
                vertical-align: middle;
                width: calc(100% - 145px);
            }
            .products-table .product h3 {
                margin: 0;
            }
        }
    </style>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>

<body>

    <div class="tools">
        <div class="search-area">
            <input type="text" id="search" placeholder="Search" />
            <button id="searchbutton">Go</button>
        </div>
        <div class="settings">
            <button id="view">Switch View</button>
        </div>
    </div>
    <div class="products products-table">
        <div class="product">
            <div class="product-img">
                <img src="http://placehold.it/400x650">
            </div>
            <div class="product-content">
                <h3>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit
                    <small>Consectetur Adipisicing</small>
                </h3>
                <p class="product-text price">$9.99</p>
                <p class="product-text genre">DVD Rental</p>
            </div>
        </div>
        <div class="product">
            <div class="product-img">
                <img src="http://placehold.it/400x650">
            </div>
            <div class="product-content">
                <h3>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corrupti maxime doloribus sint, repudiandae.
                    <small>Consectetur Adipisicing</small>
                </h3>
                <p class="product-text price">$9.99</p>
                <p class="product-text genre">DVD Rental</p>
            </div>
        </div>
        <div class="product">
            <div class="product-img">
                <img src="http://placehold.it/400x650">
            </div>
            <div class="product-content">
                <h3>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
                    <small>Consectetur Adipisicing</small>
                </h3>
                <p class="product-text price">$9.99</p>
                <p class="product-text genre">DVD Rental</p>
            </div>
        </div>
        <div class="product">
            <div class="product-img">
                <img src="http://placehold.it/400x650">
            </div>
            <div class="product-content">
                <h3>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit
                    <small>Consectetur Adipisicing</small>
                </h3>
                <p class="product-text price">$9.99</p>
                <p class="product-text genre">DVD Rental</p>
            </div>
        </div>
    </div>
    <script>
        $("#view").click(function () {
            $(".products").toggleClass("products-table");
        });
    </script>
</body>

</html>

Output


#html #css #javascript 

What is GEEK

Buddha Community

wp codevo

wp codevo

1608041977

Responsive Ecommerce Website Using HTML CSS JAVASCRIPT

https://youtu.be/PJfx8JlK5oo

#html and css ecommerce website design #ecommerce website design #e-commerce #create website using html and css #ecommerce shopping website #landing page design

wp codevo

wp codevo

1608054378

Responsive Ecommerce Website Using HTML CSS JAVASCRIPT

https://youtu.be/kxswszl-S7I

#html and css ecommerce website design #ecommerce website design #how to make ecommerce website,ecommerce design #ecommerce shopping website #how to make online store #landing page design

anita maity

anita maity

1618667723

Sidebar Menu Using Only HTML and CSS | Side Navigation Bar

how to create a Sidebar Menu using HTML and CSS only. Previously I have shared a Responsive Navigation Menu Bar using HTML & CSS only, now it’s time to create a Side Navigation Menu Bar that slides from the left or right side.

Demo

#sidebar menu using html css #side navigation menu html css #css side navigation menu bar #,pure css sidebar menu #side menu bar html css #side menu bar using html css

wp codevo

wp codevo

1608129295

How to create ecommerce Website Using HTML CSS JAVASCRIPT

https://youtu.be/H1_wOnPwkj8

#html and css ecommerce website design #ecommerce website design #web design #how to make website,how to make online store #landing page design #ecommerce shopping website

anita maity

anita maity

1621077133

Responsive Footer Design using HTML, CSS & Bootstrap

Hello Readers, welcome to my other blog, today in this blog I’m going to create a Responsive Footer by using HTML & CSS only. Earlier I have shared How to create a Responsive Navigation Menu and now it’s time to create a footer section.

As you can see on the image which is given on the webpage. There are various important topics there like About us, Our services and subscribes, some social media icons, and a contact section for easy connection. I want to tell you that it is fully responsive. Responsive means this program is fit in all screen devices like tablet, small screen laptop, or mobile devices.

Live Demo


#responsive footer html css template #footer design in html #simple footer html css code #simple responsive footer codepen #responsive footer code in html and css #responsive footer html css codepen