Card Design, Design

Product page design HTML CSS source code

Hello everyone, in this post we will be creating a product page design in HTML and CSS. In the last post, we created a Simple coming soon HTML page for a website. Now, we are ready to develop a Product page design in HTML and CSS without using a single line of javascript.

Product page design in HTML and CSS:

Javascript is not used in this project because javascript is a dynamic language. Now let us see why we have used HTML and CSS.

Html:

Html is best known as a markup language. It is used to create the skeleton of our web pages. It is part of a single page. Boxes, pictures, text, and buttons are created using HTML.

Text is added using a paragraph tag. Heading is created using <h1, h2, h3…..> tags. The picture is imported using an image tag in HTML. Then designing part is done in CSS.

CSS:

The background color is added using the background-color property. Then div tag is used to create the box. Above this, a new box is created. In this box, the text is added at the top of the box. It is created using a heading tag. Then on the right side icons are added.

You might like it:

Below this, we have text, headings, and prices and they are created using heading and paragraph tags. Then we have size and color attributes. Below this, we have added the icons of buy now and add to cart icons along with the text. They are imported from the same website. On the left side, we have added a picture of the product. It is a single picture of the product.

This Product page design is responsive across all devices. You can embed its code into your eCommerce store for better design. So, if you want to learn how to create this type of product page then follow this tutorial till the end.

How to create a Product page design in HTML and CSS?

If you want to learn how to create this type of design using HTML and CSS then you have to follow the below steps for the best possible results.

Download a code editor:

A code editor is the first step toward any project. Without using the code editor it is difficult for everyone to become an expert in any programming language. There are a lot of code editors available for writing HTML and CSS but we will be using vs code for our page design.

Html source code for product page design:

Now open your code editor after downloading. Then create a new file for HTML. Now save it using the .html extension at the end of the file name. It will convert your file into an HTML file and it is easy to understand the type of file for a code editor and web browser. Then use this HTML code in your file.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Product Page - FantacyDesigns</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
  </head>
  <body>

  <div class="card">
    <div class="left">
      <img src="https://www.dropbox.com/s/e928cht0h5crcn4/shoe.png?raw=1" alt="shoe">
      <i class="fa fa-long-arrow-left"></i>
      <i class="fa fa-long-arrow-right"></i>
    </div>
    <div class="right">
      <div class="product-info">
        <div class="product-name">
          <h1>Airmax Speed Beams</h1>
          <i class="fa fa-search"></i>
          <i class="fa fa-user"></i>
          <i class="fa fa-shopping-cart"></i>
        </div>
        <div class="details">
          <h3>Winter Collection</h3>
          <h2>Men Stylish Sneakers</h2>
          <h4><span class="fa fa-dollar"></span>150</h4>
          <h4 class="dis"><span class="fa fa-dollar"></span>200</h4>
        </div>
        <ul>
          <li>SIZE</li>
          <li class="bg">7</li>
          <li class="bg">8</li>
          <li class="bg">9</li>
          <li class="bg">10</li>
          <li class="bg">11</li>
        </ul>
        <ul>
          <li>COLOR</li>
          <li class="yellow"></li>
          <li class="black"></li>
          <li class="blue"></li>
        </ul>
        <span class="foot"><i class="fa fa-shopping-bag"></i>Buy Now</span>
        <span class="foot"><i class="fa fa-shopping-cart"></i>Add TO Cart</span>
      </div>
    </div>
  </div>

  </body>
</html>

<!DOCTYPE html>

<head>

<title>Product Page - FantacyDesigns</title>

</head>

<body>

</div>

<h1>Airmax Speed Beams</h1>

</div>

<h3>Winter Collection</h3>

<h2>Men Stylish Sneakers</h2>

</div>

<ul>

</ul>

<ul>

<li>COLOR</li>

</ul>

</div>

</body>

</html>

CSS source code:

We can’t finish our project by just using HTML. We have to use CSS along with HTML. For that create a new file and then save this CSS file with the extension of .css because it will help the browser and code editor to understand the type of the file easily. After that paste this CSS code into your new file of CSS.

@import url('https://fonts.googleapis.com/css?family=Muli');

/*reset*/
* {
  margin: 0;
  padding: 0;

}
body{
background-color:#2A2F40;
}
/*product info */

h1 {
  color: #ff6d39;
  font-family: "muli";
  font-weight: bold;
  font-size: 22px;
  margin-top: 21px;
  display: inline-block;
}

i.fa.fa-search {
  margin-left: 90px;
}

.product-name i {
  color: #ffffff;
  transition: 0.3s all ease;
  margin: 0px 12px;
}

.product-name i:hover {
  color: #ff6d39;
  cursor: pointer;
}

h3 {
  color: #ffffff;
  font-family: "muli";
  margin-top: 84px;
  font-size: 20px;
  font-weight: 500;
}

h2 {
  color: #ffffff;
  font-family: "muli";
  margin-top: 10px;
  font-weight: 800;
  font-size: 29px;
}

h4 {
  display: inline-block;
  color: #ffffff;
  font-family: "muli";
  margin-top: 10px;
  font-weight: bold;
  font-size: 20px;
}

h4.dis {
  display: inline-block;
  color: #ffffff;
  font-family: "muli";
  font-weight: 400;
  font-size: 17px;
  margin-left: 30px;
  text-decoration: line-through #ea3201;
}

h4.dis span {
  text-decoration: line-through #ea3201;
}

.discount {
  display: inline-block;
}

ul {
  list-style-type: none;
}

li {
  display: inline-block;
  margin-right: 25px;
}

ul li {
  color: #ffffff;
  font-family: "muli";
  margin-top: 20px;
  font-weight: 500;
  font-size: 11px;
}

.bg {
  width: 15px;
  height: 15px;
  text-align: center;
  padding: 2px;
  margin-right: 20px;
  transition: 0.3s all ease;
  border-radius: 50%;
}

.bg:hover {
  background-color: #ff6d39;
  border-radius: 50%;
  width: 15px;
  height: 15px;
  cursor: pointer;
}

.yellow {
  content: "";
  width: 13px;
  height: 13px;
  background-color: #fec60f;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0);
  transition: 0.3s all ease;
}

.black {
  content: "";
  width: 13px;
  height: 13px;
  background-color: #000000;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0);
  transition: 0.3s all ease;
}

.blue {
  content: "";
  width: 13px;
  height: 13px;
  background-color: #02a2ca;
  border-radius: 50%;
  border: 2px solid rgba(0, 0, 0, 0);
  transition: 0.3s all ease;
}

.yellow:hover,
.black:hover,
.blue:hover {
  border: 2px solid #f76b39;
  width: 13px;
  height: 13px;
  border-radius: 50%;
  cursor: pointer;
}

.foot {
  color: #ffffff;
  font-family: "muli";
  margin-top: 20px;
  margin-right: 50px;
  font-weight: 500;
  font-size: 11px;
  float: left;
  transition: 0.3s all ease;
}

.foot i:nth-child(1) {
  margin-left: 0;
  margin-right: 15px;
}

.foot:hover {
  color: #f76b39;
  cursor: pointer;
}

/*shoe slider indicator*/

.left i {
  color: #ffd5c6;
  margin-top: 260px;
  transition: 0.3s all ease;
}

.fa-long-arrow-left {
  margin-left: -275px;
}

.fa-long-arrow-right {
  margin-left: 15px;
}

.left i:hover {
  cursor: pointer;
  color: #2a2f40;
}

/*main card*/

.card {
  display: flex;
  align-items: center;
  background: #252831 url(https://www.dropbox.com/s/fuadz3vmw2nsylm/bg.png?raw=1)
    no-repeat;
  height: 600px;
  width: 800px;
  margin: 0 auto;
  box-shadow:
  rgba(0, 0, 0, 0.35)
  0px 5px 15px;
  margin-top: 5%;
}

.left {
  content: "";
  height: 395px;
  width: 330px;
  display: flex;
  align-items: center;
  background-color: #ff6d39;
  margin-left: 93px;
  border-radius: 0% 50% 50% 0%;
  position: absolute;
  z-index: 5;
}

.left img {
  margin-left: -88px;
  margin-top: 60px;
}

.right {
  content: "";
  height: 395px;
  width: 550px;
  background-color: #2a2f40;
  z-index: 3;
  margin-left: 200px;
}

.product-info {
  position: absolute;
  margin-left: 245px;
  height: 394px;
  width: 305px;
  z-index: 10;
}

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

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

230

231

232

233

234

235

236

237

238

239

240

241

242

243

244

245

246

247

@import url('https://fonts.googleapis.com/css?family=Muli');

/*reset*/

* {

margin: 0;

padding: 0;

}

body{

background-color:#2A2F40;

}

/*product info */

h1 {

color: #ff6d39;

font-family: "muli";

font-weight: bold;

font-size: 22px;

margin-top: 21px;

display: inline-block;

}

i.fa.fa-search {

margin-left: 90px;

}

.product-name i {

color: #ffffff;

transition: 0.3s all ease;

margin: 0px 12px;

}

.product-name i:hover {

color: #ff6d39;

cursor: pointer;

}

h3 {

color: #ffffff;

font-family: "muli";

margin-top: 84px;

font-size: 20px;

font-weight: 500;

}

h2 {

color: #ffffff;

font-family: "muli";

margin-top: 10px;

font-weight: 800;

font-size: 29px;

}

h4 {

display: inline-block;

color: #ffffff;

font-family: "muli";

margin-top: 10px;

font-weight: bold;

font-size: 20px;

}

h4.dis {

display: inline-block;

color: #ffffff;

font-family: "muli";

font-weight: 400;

font-size: 17px;

margin-left: 30px;

text-decoration: line-through #ea3201;

}

h4.dis span {

text-decoration: line-through #ea3201;

}

.discount {

display: inline-block;

}

ul {

list-style-type: none;

}

li {

display: inline-block;

margin-right: 25px;

}

ul li {

color: #ffffff;

font-family: "muli";

margin-top: 20px;

font-weight: 500;

font-size: 11px;

}

.bg {

width: 15px;

height: 15px;

text-align: center;

padding: 2px;

margin-right: 20px;

transition: 0.3s all ease;

border-radius: 50%;

}

.bg:hover {

background-color: #ff6d39;

border-radius: 50%;

width: 15px;

height: 15px;

cursor: pointer;

}

.yellow {

content: "";

width: 13px;

height: 13px;

background-color: #fec60f;

border-radius: 50%;

border: 2px solid rgba(0, 0, 0, 0);

transition: 0.3s all ease;

}

.black {

content: "";

width: 13px;

height: 13px;

background-color: #000000;

border-radius: 50%;

border: 2px solid rgba(0, 0, 0, 0);

transition: 0.3s all ease;

}

.blue {

content: "";

width: 13px;

height: 13px;

background-color: #02a2ca;

border-radius: 50%;

border: 2px solid rgba(0, 0, 0, 0);

transition: 0.3s all ease;

}

.yellow:hover,

.black:hover,

.blue:hover {

border: 2px solid #f76b39;

width: 13px;

height: 13px;

border-radius: 50%;

cursor: pointer;

}

.foot {

color: #ffffff;

font-family: "muli";

margin-top: 20px;

margin-right: 50px;

font-weight: 500;

font-size: 11px;

float: left;

transition: 0.3s all ease;

}

.foot i:nth-child(1) {

margin-left: 0;

margin-right: 15px;

}

.foot:hover {

color: #f76b39;

cursor: pointer;

}

/*shoe slider indicator*/

.left i {

color: #ffd5c6;

margin-top: 260px;

transition: 0.3s all ease;

}

.fa-long-arrow-left {

margin-left: -275px;

}

.fa-long-arrow-right {

margin-left: 15px;

}

.left i:hover {

cursor: pointer;

color: #2a2f40;

}

/*main card*/

.card {

display: flex;

align-items: center;

background: #252831 url(https://www.dropbox.com/s/fuadz3vmw2nsylm/bg.png?raw=1)

no-repeat;

height: 600px;

width: 800px;

margin: 0 auto;

box-shadow:

rgba(0, 0, 0, 0.35)

0px 5px 15px;

margin-top: 5%;

}

.left {

content: "";

height: 395px;

width: 330px;

display: flex;

align-items: center;

background-color: #ff6d39;

margin-left: 93px;

border-radius: 0% 50% 50% 0%;

position: absolute;

z-index: 5;

}

.left img {

margin-left: -88px;

margin-top: 60px;

}

.right {

content: "";

height: 395px;

width: 550px;

background-color: #2a2f40;

z-index: 3;

margin-left: 200px;

}

.product-info {

position: absolute;

margin-left: 245px;

height: 394px;

width: 305px;

z-index: 10;

}

Link HTML and CSS file:

Without linking both files with each other, the properties of CSS will not be applied to the HTML files. In this way, the design of the page will remain incomplete. Use link tag in HTML file. It will help you to insert the path of the HTML file in CSS. CSS code properties will be inserted into the HTML file.

Download source code:

We have described the way how to use the above code and create this type of single-page design in HTML and CSS for your website. But if you are still facing any issues related to this page design then download the source code of this project for free from here. It is available below.

Task and Conclusion:

This product page has the features and they are highlighted above. Now I am assigning some tasks and you have to fulfill them. The image is placed on the left side and you have to change its position. Change its position from left to right. Also, change the background color of the products. Font family can be changed and you have to change it.

I hope it was helpful a post for you on Product page design. If you have learned anything from this post don’t forget to share or comment. The comment section is available for your problems.

Thanks for reading this article.

Go to top

Download Source CodeClick to Download