Animations, Card Design, Landing Page

Product detail page design HTML CSS

In this lesson, we will learn how to create a Product detail page In HTML and CSS without using a single line of javascript. In the last post, we created an Ecommerce product page design. So, this time our target is to create a single product page design in HTML and CSS. So, let us create this page using HTML and CSS.

Product detail page:

As you can see in the image we have created a Product detail page in HTML and CSS for our eCommerce store. A single page is used for products when we want to display the details of our products. It has all the necessary information about that product. Like we have added names, pictures, prices, variations, benefits or features, add to cart, add to wishlist and share details.

All of these things are created with the help of HTML and CSS. Lets, ‘s check why we have used Html and CSS in our project.

Html:

As you can see we have added text, icons, images, etc on the page. All these things are created with the help of HTML. Html helps us to build projects from the scratch. We cant design anything using HTML tags. For design purposes, we need to get the help of CSS properties. Without using HTML we cant create web pages and without using CSS we cant design our web pages. So, both languages help each other to fulfill all the functionalities.

CSS:

After using HTML tags our next target is to use CSS along with HTML. It will help us to create a beautiful single page of products for our store. As we have a beautiful solid color background and it is created with the help of CSS property. Then we created a box. In this box, we have added all the content except the picture. In this box, we have a heading at the top of the page. Below this, we have the category of product. These things are created with the help of a heading and paragraph tag.

After that, we have the price of the product. Then we have the suggestion of the color and you can pick anyone. Below this, we have the heading of benefits and then all the features are mentioned in the form of numbering. It is created in a button tag of HTML and designed in CSS along with CSS properties.

On the left side, we have a picture of the product. We have the product image and below this, we have the different images of this particular product. These boxes are created using a div tag. By using the div tag we can put all the things inside the div and then we can design them using CSS. Now, let us see how to create a Product detail page in HTML and CSS.

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

For the development of this type of Product detail page, we will use HTML and CSS as a language.

Download a code editor for the Product detail page:

It is the first step toward the development of any project. We will be using a sublime text editor for this project. VS code is also recommended for this project.

Html source code:

It is a markup language and it is used to create the basics of this page. Open your code editor and create a new file in your editor. Then save this file by using the extension of .html at the end of the HTML file name. We are using .html as an extension because this extension converts the simple file into an HTML file.

  <!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>


</head>

<body>

  <section class="product">
	<div class="product__photo">
		<div class="photo-container">
			<div class="photo-main">

				<img src="https://res.cloudinary.com/john-mantas/image/upload/v1537291846/codepen/delicious-apples/green-apple-with-slice.png" alt="green apple slice">
			</div>
			<div class="photo-album">
				<ul>
					<li><img src="https://res.cloudinary.com/john-mantas/image/upload/v1537302064/codepen/delicious-apples/green-apple2.png" alt="green apple"></li>
					<li><img src="https://res.cloudinary.com/john-mantas/image/upload/v1537303532/codepen/delicious-apples/half-apple.png" alt="half apple"></li>
					<li><img src="https://res.cloudinary.com/john-mantas/image/upload/v1537303160/codepen/delicious-apples/green-apple-flipped.png" alt="green apple"></li>
					<li><img src="https://res.cloudinary.com/john-mantas/image/upload/v1537303708/codepen/delicious-apples/apple-top.png" alt="apple top"></li>
				</ul>
			</div>
		</div>
	</div>
	<div class="product__info">
		<div class="title">
			<h1>Delicious Apples</h1>
			<span>COD: 45999</span>
		</div>
		<div class="price">
			R$ <span>7.93</span>
		</div>
		<div class="variant">
			<h3>SELECT A COLOR</h3>
			<ul>
				<li><img src="https://res.cloudinary.com/john-mantas/image/upload/v1537302064/codepen/delicious-apples/green-apple2.png" alt="green apple"></li>
				<li><img src="https://res.cloudinary.com/john-mantas/image/upload/v1537302752/codepen/delicious-apples/yellow-apple.png" alt="yellow apple"></li>
				<li><img src="https://res.cloudinary.com/john-mantas/image/upload/v1537302427/codepen/delicious-apples/orange-apple.png" alt="orange apple"></li>
				<li><img src="https://res.cloudinary.com/john-mantas/image/upload/v1537302285/codepen/delicious-apples/red-apple.png" alt="red apple"></li>
			</ul>
		</div>
		<div class="description">
			<h3>BENEFITS</h3>
			<ul>
				<li>Apples are nutricious</li>
				<li>Apples may be good for weight loss</li>
				<li>Apples may be good for bone health</li>
				<li>They're linked to a lowest risk of diabetes</li>
			</ul>
		</div>
		<button class="buy--btn">ADD TO CART</button>
	</div>
</section>

<footer>
	<p>Design from <a href="https://fantacydesigns.com/blog">FantacyDesigns</p>
</footer>

  </body>
</html>

<!DOCTYPE html>

<head>

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

</head>

<body>

</div>

<ul>

</ul>

</div>

<h1>Delicious Apples</h1>

</div>

R$ <span>7.93</span>

</div>

<h3>SELECT A COLOR</h3>

<ul>

</ul>

</div>

<h3>BENEFITS</h3>

<ul>

<li>Apples are nutricious</li>

<li>Apples may be good for weight loss</li>

<li>Apples may be good for bone health</li>

<li>They're linked to a lowest risk of diabetes</li>

</ul>

</div>

</div>

</section>

<p>Design from <a href="https://fantacydesigns.com/blog">FantacyDesigns</p>

</footer>

</body>

</html>

CSS source code:

It is also a markup language but we use this language to design our page. Again open your code editor and now create a new file. This time save your file using the extension of .css with the file name. Now compiler and browser will read your simple file as a CSS file.

/* ----- Variables ----- */
/* ----- Global ----- */
* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: grid;
  grid-template-rows: 1fr;
  font-family: "Raleway", sans-serif;
  background-color: #01e37f;
}

h3 {
  font-size: 0.7em;
  letter-spacing: 1.2px;
  color: #a6a6a6;
}

img {
  max-width: 100%;
  filter: drop-shadow(1px 1px 3px #a6a6a6);
}

/* ----- Product Section ----- */
.product {
  display: grid;
  grid-template-columns: 0.9fr 1fr;
  margin: auto;
  padding: 2.5em 0;
  min-width: 600px;
  background-color: white;
  border-radius: 5px;
}

/* ----- Photo Section ----- */
.product__photo {
  position: relative;

}

.photo-container {
  position: absolute;
  left: -2.5em;
  display: grid;
  grid-template-rows: 1fr;
  width: 100%;
  height: 100%;
  border-radius: 6px;
  box-shadow: 4px 4px 25px -2px rgba(0, 0, 0, 0.3);
}

.photo-main {
  border-radius: 6px 6px 0 0;
  background-color: #9be010;
  background: radial-gradient(#e5f89e, #96e001);
}
.photo-main .controls {
  display: flex;
  justify-content: space-between;
  padding: 0.8em;
  color: #fff;
}
.photo-main .controls i {
  cursor: pointer;
}
.photo-main img {
  position: absolute;
  left: -3.5em;
  top: 2em;
  max-width: 110%;
  filter: saturate(150%) contrast(120%) hue-rotate(10deg) drop-shadow(1px 20px 10px rgba(0, 0, 0, 0.3));
}

.photo-album {
  padding: 0.7em 1em;
  border-radius: 0 0 6px 6px;
  background-color: #fff;
}
.photo-album ul {
  display: flex;
  justify-content: space-around;
}
.photo-album li {
  float: left;
  width: 55px;
  height: 55px;
  padding: 7px;
  border: 1px solid #a6a6a6;
  list-style: none;

  border-radius: 3px;
}

/* ----- Informations Section ----- */
.product__info {
  padding: 0.8em 0;
}

.title h1 {
  margin-bottom: 0.1em;
  color: #4c4c4c;
  font-size: 1.5em;
  font-weight: 900;
}
.title span {
  font-size: 0.7em;
  color: #a6a6a6;
}

.price {
  margin: 1.5em 0;
  color: #ff3f40;
  font-size: 1.2em;
}
.price span {
  padding-left: 0.15em;
  font-size: 2.9em;
}

.variant {
  overflow: auto;
}
.variant h3 {
  margin-bottom: 1.1em;
}
.variant li {
  float: left;
  width: 35px;
  height: 35px;
  padding: 3px;
  margin-left: -30px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
}
.variant li:first-child, .variant li:hover {
  list-style: none;
  border: 1px solid #a6a6a6;
}
.variant li:not(:first-child) {
  margin-left: 0.1em;
}

.description {
  clear: left;
  margin: 2em 0;
}
.description h3 {
  margin-bottom: 1em;
}
.description ul {
  font-size: 0.8em;
  list-style: disc;
  margin-left: -10px;
}
.description li {
  text-indent: -0.6em;
  margin-bottom: 0.5em;
}

.buy--btn {
  padding: 1.5em 3.1em;
  border: none;
  border-radius: 7px;
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 1.3px;
  color: #fff;
  background-color: #ff3f40;
  box-shadow: 2px 2px 25px -7px #4c4c4c;
  cursor: pointer;
}
.buy--btn:active {
  transform: scale(0.97);
}
.share{
  padding:20px;
  background-color: red;



}
/* ----- Footer Section ----- */
footer {
  padding: 1em;
  text-align: center;
  color: #fff;
}
footer a {
  color: #4c4c4c;
}
footer a:hover {
  color: #ff3f40;
}

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

/* ----- Variables ----- */

/* ----- Global ----- */

* {

box-sizing: border-box;

}

html,

body {

height: 100%;

}

body {

display: grid;

grid-template-rows: 1fr;

font-family: "Raleway", sans-serif;

background-color: #01e37f;

}

h3 {

font-size: 0.7em;

letter-spacing: 1.2px;

color: #a6a6a6;

}

img {

max-width: 100%;

filter: drop-shadow(1px 1px 3px #a6a6a6);

}

/* ----- Product Section ----- */

.product {

display: grid;

grid-template-columns: 0.9fr 1fr;

margin: auto;

padding: 2.5em 0;

min-width: 600px;

background-color: white;

border-radius: 5px;

}

/* ----- Photo Section ----- */

.product__photo {

position: relative;

}

.photo-container {

position: absolute;

left: -2.5em;

display: grid;

grid-template-rows: 1fr;

width: 100%;

height: 100%;

border-radius: 6px;

box-shadow: 4px 4px 25px -2px rgba(0, 0, 0, 0.3);

}

.photo-main {

border-radius: 6px 6px 0 0;

background-color: #9be010;

background: radial-gradient(#e5f89e, #96e001);

}

.photo-main .controls {

display: flex;

justify-content: space-between;

padding: 0.8em;

color: #fff;

}

.photo-main .controls i {

cursor: pointer;

}

.photo-main img {

position: absolute;

left: -3.5em;

top: 2em;

max-width: 110%;

filter: saturate(150%) contrast(120%) hue-rotate(10deg) drop-shadow(1px 20px 10px rgba(0, 0, 0, 0.3));

}

.photo-album {

padding: 0.7em 1em;

border-radius: 0 0 6px 6px;

background-color: #fff;

}

.photo-album ul {

display: flex;

justify-content: space-around;

}

.photo-album li {

float: left;

width: 55px;

height: 55px;

padding: 7px;

border: 1px solid #a6a6a6;

list-style: none;

border-radius: 3px;

}

/* ----- Informations Section ----- */

.product__info {

padding: 0.8em 0;

}

.title h1 {

margin-bottom: 0.1em;

color: #4c4c4c;

font-size: 1.5em;

font-weight: 900;

}

.title span {

font-size: 0.7em;

color: #a6a6a6;

}

.price {

margin: 1.5em 0;

color: #ff3f40;

font-size: 1.2em;

}

.price span {

padding-left: 0.15em;

font-size: 2.9em;

}

.variant {

overflow: auto;

}

.variant h3 {

margin-bottom: 1.1em;

}

.variant li {

float: left;

width: 35px;

height: 35px;

padding: 3px;

margin-left: -30px;

border: 1px solid transparent;

border-radius: 3px;

cursor: pointer;

}

.variant li:first-child, .variant li:hover {

list-style: none;

border: 1px solid #a6a6a6;

}

.variant li:not(:first-child) {

margin-left: 0.1em;

}

.description {

clear: left;

margin: 2em 0;

}

.description h3 {

margin-bottom: 1em;

}

.description ul {

font-size: 0.8em;

list-style: disc;

margin-left: -10px;

}

.description li {

text-indent: -0.6em;

margin-bottom: 0.5em;

}

.buy--btn {

padding: 1.5em 3.1em;

border: none;

border-radius: 7px;

font-size: 0.8em;

font-weight: 700;

letter-spacing: 1.3px;

color: #fff;

background-color: #ff3f40;

box-shadow: 2px 2px 25px -7px #4c4c4c;

cursor: pointer;

}

.buy--btn:active {

transform: scale(0.97);

}

.share{

padding:20px;

background-color: red;

}

/* ----- Footer Section ----- */

footer {

padding: 1em;

text-align: center;

color: #fff;

}

footer a {

color: #4c4c4c;

}

footer a:hover {

color: #ff3f40;

}

Link files:

After pasting the above HTML and CSS code into your files. Now you need to use a link tag in the HTML file. In this tag, you have to use the path of the CSS file. In this way, CSS code will be applied to HTML. Without doing this you can’t design any HTML file.

Html and CSS source code are mentioned above. But if you don’t have enough time to copy the code and then create files and download pictures. Then you have to simply download the source code file from below download source code button.

I hope now you will be able to create a Product detail page for storing in HTML and CSS. But if you have any type of issue regarding this post, then you can comment below.

Thanks for reading this article.

Go to top

Download Source CodeClick to Download