Hello friends do you want to create a product card using only HTML and CSS programming languages.
If your answer is yes, I will explain to you how you can create an e-commerce product card using only HTML and CSS programming languages.
Hello friends, I am Shantanu a web designer. I am going to tell you in this article how you can easily create a product card using only HTML and CSS programming language. The Product Card eCommerce website is one of the parts that will help you to give your viewers all the information related to your product and your product in a box very easily and accurately. So that your viewers are very happy to see your product and get all the information related to the product and show interest in buying the product. In this article, I will tell you very easily and step by step how to make a beautiful and stylish product using HTML and CSS programming language. This product card is fully responsive and stylish so you can easily create it using only HTML and CSS programming languages.
The video below will give you an idea about this product card. This video will help you understand what it feels like to make an E-commerce Product Card.
Watch the image of a Product card using HTML CSS
Some information about this product card
- This product is fully professional and responsive This product is made using only HTML and CSS programming language.
- This is a professional product card, you can easily use this product card on an e-commerce site or in your own project.
- This product card has an image, which means you can put the image of the product of your choice here.
- There are also color options, meaning that the same product has different colors. Viewers can choose the color they want.
- There are also product size options, meaning you will have the opportunity to choose different sizes of the same product. Viewers can take any size they want.
Ecommerce Product Card Using HTML and CSS[Source Code⇩]
Hopefully from the video above you can fully understand how to make and work this E-commerce Product Card. If you want to try this code yourself, you can. That is why I have given the source code below. First of all, you create an HTML file (rename.html) and a CSS file (rename.css). Then you put the HTML code in the HTML file and the CSS code in the CSS file. Be sure to link the HTML and cis code to each other (<link rel="stylesheet" href="sidebar.css">).
Also if you want to put HTML and CSS code in a file, you can do that. For that, give HTML code in body tags (<body></body>) and CSS code in head tags. Then your program will work beautifully. If you encounter any problems, you can take the help of the video above.
Note: I would like to make a special request that you download and use the source code by clicking on the "Download" option above. Because there were many errors while uploading the code below so I am adding a lot of comments (<!--comment-->)in this code. However, there is no change in the code, but the amount of code has increased a lot. Hover you can use this code if you want there will be no problem. But you can download the code, it would be best.
HTML TAGS (<body> Add Code </body>)This code is an HTML code (rename.html). Put this code in the head tags of your project and also in the head tags in the HTML file.
<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</h1>
<!--I would like to make a special request that you download and use the source code by clicking on the "Download" option above. Because there were many errors while uploading the code below so I am adding a lot of comments (<!--comment-->)in this code. -->
<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 Black Sneakers</h2>
<h4><span class="fa fa-dollar"></span>150</h4>
<h4 class="dis"><span class="fa fa-dollar"></span>200</h4>
</div>
<ul>
<!--I would like to make a special request that you download and use the source code by clicking on the "Download" option above. Because there were many errors while uploading the code below so I am adding a lot of comments (<!--comment-->)in this code. -->
<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><!--I would like to make a special request that you download and use the source code by clicking on the "Download" option above. Because there were many errors while uploading the code below so I am adding a lot of comments (<!--comment-->)in this code. -->
</div>
CSS CODE (<head><style> Add code</style></head>)
This code is a CSS code (rename.css). You enter this code in the style tags in the head tags of your project. Also, you put in the style tags in the CSS file.
@import url('https://fonts.googleapis.com/css?family=Muli');
/*reset*/
* {
margin: 0;
padding: 0;
}
/*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;
}
/*header {
position: relative;
width: 100%;
background: #333;
}
.logo {
position: relative;
z-index: 123;
padding: 10px;
font: 18px verdana;
color: #6ddb07;
float: left;
width: 15%;
}*/
.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;
}
/*header {
position: relative;
width: 100%;
background: #333;
}
.logo {
position: relative;
z-index: 123;
padding: 10px;
font: 18px verdana;
color: #6ddb07;
float: left;
width: 15%;
}*/
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;
}
/*header {
position: relative;
width: 100%;
background: #333;
}
.logo {
position: relative;
z-index: 123;
padding: 10px;
font: 18px verdana;
color: #6ddb07;
float: left;
width: 15%;
}*/
.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;
}
/*.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
*/
.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;
}
/*header {
position: relative;
width: 100%;
background: #333;
}
.logo {
position: relative;
z-index: 123;
padding: 10px;
font: 18px verdana;
color: #6ddb07;
float: left;
width: 15%;
}*/
.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;
}
/*.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
*/
.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;
}
/*
.fa {
padding: 20px;
font-size: 30px;
width: 50px;
text-align: center;
text-decoration: none;
margin: 5px 2px;
}
*/
.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;
}
/*header {
position: relative;
width: 100%;
background: #333;
}
.logo {
position: relative;
z-index: 123;
padding: 10px;
font: 18px verdana;
color: #6ddb07;
float: left;
width: 15%;
}*/
.fa-long-arrow-right {
margin-left: 15px;
}
.left i:hover {
cursor: pointer;
color: #2a2f40;
}
/*main card*/
/*<!--I would like to make a special request that you download and use the source code by clicking on the "Download" option above. Because there were many errors while uploading the code below so I am adding a lot of comments (<!--comment-->)in this code. -->
*/
.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: 0px 15px 50px 10px rgba(0, 0, 0, 0.4);
margin-top: 2%;
}
.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;
}
/*<!--I would like to make a special request that you download and use the source code by clicking on the "Download" option above. Because there were many errors while uploading the code below so I am adding a lot of comments (<!--comment-->)in this code. -->
*/
.right {
content: "";
height: 395px;
width: 550px;
background-color: #2a2f40;
z-index: 3;
margin-left: 200px;
}
/*header {
position: relative;
width: 100%;
background: #333;
}
.logo {
position: relative;
z-index: 123;
padding: 10px;
font: 18px verdana;
color: #6ddb07;
float: left;
width: 15%;
}*/
.product-info {
position: absolute;
margin-left: 245px;
height: 394px;
width: 305px;
z-index: 10;
}
Using this method you can easily Make E-commerce Product Card Using HTML and CSS. This method is very simple. I hope you have benefited a lot from this article. So be sure to comment on how you like this article.
❤Sharing is caring❤
![Make Racing Car Game [Using JavaScript Code Only]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhjrVmbtoZxLonUlDyWpFe9gEe9Z1b2zrrfm4i5dwOqw2YQ41SElTjXTvhWSxHTwMQBmWmFMoKTSxUtGc3hAjOh6T-8jMXBlvbXOnaGHq8RP74rRlg4mPR4EuER3Yhb5My-reWpoARLnS8/w680/Make+Racing+Car+Game+%255BUsing+JavaScript+Code+Only%255D.jpg)
