Animations, Card Design, Landing Page

Ecommerce product page design in HTML

Nowadays eCommerce is one of the biggest marketplaces in the world to sell products in the digital world. For this purpose, we need to create an eCommerce store. And in this particular post, we will be discussing how to create an eCommerce product page in HTML CSS, and JS for any online store. In the last post, we created a Product page design HTML CSS. But now we will be discussing how to create a product page in HTML, CSS, and JS.

The eCommerce product page in HTML and CSS:

As you can see in the above image we have created an eCommerce product page for a single product in HTML, CSS, and JS. This page is responsive across all devices. We have used HTML, CSS, and JS as a language for this page development. And vs code is used as a code editor. Now let us see which properties and tags of HTML and CSS are used in this page design.

Html:

Html is used at a very high level in the development of web pages. It is widely used because it has a lot of tags and these tags help us to create a strong and powerful skeleton of the page. Here we have imported the image using the image tag. Then heading is added using the h1 tag. The description has been added using a paragraph tag. The button is created with the help of a button tag and so on.

CSS:

This page has a solid color background. It is set using the background-color property for this page. Then we created a box. After that, we divided it into two parts. On the left side, we have the image of the product. On the right side, we have all the information regarding the product. The heading is set along with a description. It is placed perfectly in right place using CSS properties.

You might like it:

As you can see in the above images we have variations in colors. Upon clicking on the colors the color is changing along with the background. Then we have a button. This button is designed using CSS properties but it is created in HTML without design. The code of this Ecommerce product page can be embedded into any website. It will help you to add the code and then customize it according to your requirements.
If you want to learn how to create this type of beautiful eCommerce product page design in HTML and CSS then follow this tutorial till the end.

How to create an eCommerce product page in HTML and CSS?

We will be developing this eCommerce product page in three steps. Follow these steps for better results.

Download a basic code editor:

The code editor is a basic need for the development of any product in any programming language. It helps us to save time and write the code without syntax errors. It also provides suggestions during development. Every editor has its own functionalities and features but code and sublime text editors are recommended.

Html source code for eCommerce product page:

Open your code editor and create the first file. Now save this file but save it using the .html extension for the HTML file. Then use the code of HTML from here.

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

<head>
      <link rel="stylesheet" href="style.css">
    <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 Card Design - FantacyDesigns</title>

    <!-- Vendor Script -->
    <script
  src="https://code.jquery.com/jquery-3.4.1.min.js"
  integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
  crossorigin="anonymous"></script>

</head>

<body>

    <div class="container">
        <div class="imgBx">
            <img src="https://github.com/anuzbvbmaniac/Responsive-Product-Card---CSS-ONLY/blob/master/assets/img/jordan_proto.png?raw=true" alt="Nike Jordan Proto-Lyte Image">
        </div>
        <div class="details">
            <div class="content">
                <h2>Jordan Proto-Lyte <br>
                    <span>Running Collection</span>
                </h2>
                <p>
                    Featuring soft foam cushioning and lightweight, woven fabric in the upper, the Jordan Proto-Lyte is
                    made for all-day, bouncy comfort.
                    Lightweight Breathability: Lightweight woven fabric with real or synthetic leather provides
                    breathable support.
                    Cushioned Comfort: A full-length foam midsole delivers lightweight, plush cushioning.
                    Secure Traction: Exaggerated herringbone-pattern outsole offers traction on a variety of surfaces.
                </p>
                <p class="product-colors">Available Colors:
                    <span class="black active" data-color-primary="#000" data-color-sec="#212121" data-pic="https://github.com/anuzbvbmaniac/Responsive-Product-Card---CSS-ONLY/blob/master/assets/img/jordan_proto.png?raw=true"></span>
                    <span class="red" data-color-primary="#7E021C" data-color-sec="#bd072d" data-pic="https://github.com/anuzbvbmaniac/Responsive-Product-Card---CSS-ONLY/blob/master/assets/img/jordan_proto_red_black.png?raw=true"></span>
                    <span class="orange" data-color-primary="#CE5B39" data-color-sec="#F18557" data-pic="https://github.com/anuzbvbmaniac/Responsive-Product-Card---CSS-ONLY/blob/master/assets/img/jordan_proto_orange_black.png?raw=true"></span>
                </p>
                <h3>Rs. 12,800</h3>
                <button>Buy Now</button>
            </div>
        </div>
    </div>

    <!-- Footer -->
    <footer>
        <a href="fantacydesigns.com" target="_blank">fantacydesignss@gmail.com</a>
    </footer>





  </body>
</html>

<!DOCTYPE html>

<head>

<title>Product Card Design - FantacyDesigns</title>

<script

src="https://code.jquery.com/jquery-3.4.1.min.js"

integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="

crossorigin="anonymous"></script>

</head>

<body>

</div>

<h2>Jordan Proto-Lyte <br>

<span>Running Collection</span>

</h2>

<p>

Featuring soft foam cushioning and lightweight, woven fabric in the upper, the Jordan Proto-Lyte is

made for all-day, bouncy comfort.

Lightweight Breathability: Lightweight woven fabric with real or synthetic leather provides

breathable support.

Cushioned Comfort: A full-length foam midsole delivers lightweight, plush cushioning.

Secure Traction: Exaggerated herringbone-pattern outsole offers traction on a variety of surfaces.

</p>

<p class="product-colors">Available Colors:

</p>

</div>

<a href="fantacydesigns.com" target="_blank">fantacydesignss@gmail.com</a>

</footer>

</body>

</html>

CSS source code:

Now again open your code editor. This time create another file of CSS and also save this file with the extension of .css because it will convert the file into a CSS file.

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,800&display=swap');

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    font-family: 'Poppins', sans-serif;
    background: #000;
}

.container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 900px;
    height: 600px;
    background: #fff;
    margin: 20px;
    box-shadow:
rgba(0, 0, 0, 0.35)
0px 5px 15px;
}

.container .imgBx {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    background: #212121;
    transition: .3s linear;
}

.container .imgBx:before {
    content: 'Nike';
    position: absolute;
    top: 0px;
    left: 24px;
    color: #000;
    opacity: 0.2;
    font-size: 8em;
    font-weight: 800;
}

.container .imgBx img {
    position: relative;
    width: 700px;
    transform: rotate(-30deg);
    left: -50px;
    transition: .9s linear;
}

.container .details {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    padding: 40px;
}

.container .details h2{
    margin: 0;
    padding: 0;
    font-size: 2.4em;
    line-height: 1em;
    color: #444;
}

.container .details h2 span {
    font-size: 0.4em;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #999;
}

.container .details p {
    max-width: 85%;
    margin-left: 15%;
    color: #333;
    font-size: 15px;
    margin-bottom: 36px;
}

.container .details h3 {
    margin: 0;
    padding: 0;
    font-size: 2.5em;
    color: #a2a2a2;
    float: left;
}
.container .details button {
    background: #000;
    color: #fff;
    border: none;
    outline: none;
    padding: 15px 20px;
    margin-top: 5px;
    font-size: 16px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 600;
    border-radius: 40px;
    float: right;
}

.product-colors span {
    width: 26px;
    height: 26px;
    top: 7px;
    margin-right: 12px;
    left: 10px;
    border-radius: 50%;
    position: relative;
    cursor: pointer;
    display: inline-block;
}

.black {
    background: #000;
}

.red {
    background: #D5212E;
}

.orange {
    background: #F18557;
}

.product-colors .active:after{
    content: "";
    width: 36px;
    height: 36px;
    border: 2px solid #000;
    position: absolute;
    border-radius: 50%;
    box-sizing: border-box;
    left: -5px;
    top: -5px;
}

/* responsive */
@media (max-width: 1080px) {
    .container {
        height: auto;
    }
    .container .imgBx {
        padding: 40px;
        box-sizing: border-box;
        width: 100% !important;
        height: auto;
        text-align: center;
        overflow: hidden;
    }
    .container .imgBx img {
        left: initial;
        max-width: 100%;
        transform: rotate(0deg);
    }
    .details {
        width: 100% !important;
        height: auto;
        padding: 20px;
    }
    .container .details p {
        margin-left: 0;
        max-width: 100%;
    }
}

footer {
    position: fixed;
    right: 16px;
    bottom: 12px;
}

footer a {
    color: #fff;
    text-decoration: none;
    font-size: 12px;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,800&display=swap');

body {

margin: 0;

padding: 0;

display: flex;

justify-content: center;

align-items: center;

min-height: 100vh;

font-family: 'Poppins', sans-serif;

background: #000;

}

.container {

position: relative;

display: flex;

flex-wrap: wrap;

justify-content: space-between;

width: 900px;

height: 600px;

background: #fff;

margin: 20px;

box-shadow:

rgba(0, 0, 0, 0.35)

0px 5px 15px;

}

.container .imgBx {

position: relative;

display: flex;

justify-content: center;

align-items: center;

width: 50%;

height: 100%;

background: #212121;

transition: .3s linear;

}

.container .imgBx:before {

content: 'Nike';

position: absolute;

top: 0px;

left: 24px;

color: #000;

opacity: 0.2;

font-size: 8em;

font-weight: 800;

}

.container .imgBx img {

position: relative;

width: 700px;

transform: rotate(-30deg);

left: -50px;

transition: .9s linear;

}

.container .details {

display: flex;

justify-content: center;

align-items: center;

width: 50%;

height: 100%;

box-sizing: border-box;

padding: 40px;

}

.container .details h2{

margin: 0;

padding: 0;

font-size: 2.4em;

line-height: 1em;

color: #444;

}

.container .details h2 span {

font-size: 0.4em;

text-transform: uppercase;

letter-spacing: 2px;

color: #999;

}

.container .details p {

max-width: 85%;

margin-left: 15%;

color: #333;

font-size: 15px;

margin-bottom: 36px;

}

.container .details h3 {

margin: 0;

padding: 0;

font-size: 2.5em;

color: #a2a2a2;

float: left;

}

.container .details button {

background: #000;

color: #fff;

border: none;

outline: none;

padding: 15px 20px;

margin-top: 5px;

font-size: 16px;

letter-spacing: 1px;

text-transform: uppercase;

font-weight: 600;

border-radius: 40px;

float: right;

}

.product-colors span {

width: 26px;

height: 26px;

top: 7px;

margin-right: 12px;

left: 10px;

border-radius: 50%;

position: relative;

cursor: pointer;

display: inline-block;

}

.black {

background: #000;

}

.red {

background: #D5212E;

}

.orange {

background: #F18557;

}

.product-colors .active:after{

content: "";

width: 36px;

height: 36px;

border: 2px solid #000;

position: absolute;

border-radius: 50%;

box-sizing: border-box;

left: -5px;

top: -5px;

}

/* responsive */

@media (max-width: 1080px) {

.container {

height: auto;

}

.container .imgBx {

padding: 40px;

box-sizing: border-box;

width: 100% !important;

height: auto;

text-align: center;

overflow: hidden;

}

.container .imgBx img {

left: initial;

max-width: 100%;

transform: rotate(0deg);

}

.details {

width: 100% !important;

height: auto;

padding: 20px;

}

.container .details p {

margin-left: 0;

max-width: 100%;

}

footer {

position: fixed;

right: 16px;

bottom: 12px;

}

footer a {

color: #fff;

text-decoration: none;

font-size: 12px;

}

After creating the files of HTML and CSS, now use the above-mentioned code in your files. You will find your eCommerce product page design in your browser.

JS Source Code:

Now again open your code editor. This time create another file of JS and also save this file with the extension of (.js) because it will convert the file into a JS file.

  <script>
        // Change The Picture and Associated Element Color when Color Options Are Clicked.
        $(".product-colors span").click(function() {
            $(".product-colors span").removeClass("active");
            $(this).addClass("active");
            $(".active").css("border-color", $(this).attr("data-color-sec"))
            $("body").css("background", $(this).attr("data-color-primary"));
            $(".content h2").css("color", $(this).attr("data-color-sec"));
            $(".content h3").css("color", $(this).attr("data-color-sec"));
            $(".container .imgBx").css("background", $(this).attr("data-color-sec"));
            $(".container .details button").css("background", $(this).attr("data-color-sec"));
            $(".imgBx img").attr('src', $(this).attr("data-pic"));
        });
    </script>

// Change The Picture and Associated Element Color when Color Options Are Clicked.

$(".product-colors span").click(function() {

$(".product-colors span").removeClass("active");

$(this).addClass("active");

$(".active").css("border-color", $(this).attr("data-color-sec"))

$("body").css("background", $(this).attr("data-color-primary"));

$(".content h2").css("color", $(this).attr("data-color-sec"));

$(".content h3").css("color", $(this).attr("data-color-sec"));

$(".container .imgBx").css("background", $(this).attr("data-color-sec"));

$(".container .details button").css("background", $(this).attr("data-color-sec"));

$(".imgBx img").attr('src', $(this).attr("data-pic"));

});

</script>

Link HTML, CSS, and JS files:

CSS has a lot of properties and these properties cant be applied to HTML code if you have not connected both the files with each other. Use the link tag in HTML and then use the path of CSS in the link tag. It will embed the code of CSS in HTML, and the same goes for Js.

Download source code:

If you are still unable to find the result mentioned in the image, then download the source code. The source code file is given below for this page.

If you have any type of question then ask your question in the comment section. Otherwise don’t forget to rate this post.

Task and Conclusion:

It was the detail about the product page that how it was developed and which languages and properties are used for it. Now I am assigning you some tasks and you have to fulfill them for better understanding. Change the position of images from left to right. Change the font family using CSS properties. Also, remove the radius from the button(BUY NOW).
Thanks for reading this article.

Go to top

Download Source CodeClick to Download