Responsive Product catalog card design using HTML, CSS, and JavaScript.

0

Responsive Product catalog card design using HTML, CSS, and JavaScript.







Hello Developers, If you're building an e-commerce website or a product catalog, you'll need a product card design to display your products in an organized and visually appealing way. In this article, we'll show you how to create a product catalog card design using HTML, CSS, and JavaScript. The product catalog card design we'll create will include an image, title, price, description, and two buttons: Add to Cart and Compare. The design is fully responsive, meaning it will look great on any device. In this HTML code, we have a container div that wraps around the product-card div, which contains the product image, details, and buttons. The image, title, price, and description are all inside the product-details div. The Add to Cart and Compare buttons are inside a separate div with the class "buttons". In this CSS code, we have styles for the container, product card, product imageand details, and buttons. We use flexbox to align and position the elements inside the container and the product card. We set the width of the product card to 300px and add some padding and border radius to make it look like a card. For the product image, we set a height of 200px and use the overflow property to hide any overflowing content. We set the width and height of the image to 100% to make it fill the container, and we use the object-fit property to ensure the image doesn't get distorted. To add a hover effect to the product image, we use the transform property to scale the image by 1.1 when the mouse hovers over it. For the product details, we add some padding and set the font size and margins for the title, price, and description. We also set the color of the description to #666 to make it less prominent. Finally, we style the Add to Cart and Compare buttons with some padding, border radius, and colors. We use the cursor property to change the mouse cursor to a pointer when hovering over the buttons, and we add a hover effect by changing the opacity. You can customize the styles to fit your needs, and you can also add JavaScript code to handle the button click events, such as adding the product to a cart or comparing it to other products. In conclusion, a product catalog card design is an essential component of any e-commerce website or product catalog. By using HTML, CSS, and JavaScript, you can create a visually appealing and responsive design that will help you showcase your products and improve your user experience.

Creating a Responsive Product catalog card design using HTML, CSS, and JavaScript. [Source Code]

To make this website, you would like to make three files: an HTML file, a CSS file. First, create an HTML file with the name of index.html and remember, you have to create a file with a .html extension.

<!DOCTYPE html> <html> <head> <title>product catalog card design using HTML, CSS, and JavaScript.</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="container"> <div class="product-card"> <div class="product-image"> <img src="https://cdn.pixabay.com/photo/2016/11/23/06/57/isolated-t-shirt-1852115__480.png" alt="Product Image"> </div> <div class="product-details"> <h2 class="product-title">Product Name</h2> <p class="product-price">$9.99</p> <p class="product-description">This is a brief description of the product.</p> <div class="buttons"> <button class="add-to-cart">Add to Cart</button> <button class="compare">Compare</button> </div> </div> </div> <div class="product-card"> <div class="product-image"> <img src="https://cdn.pixabay.com/photo/2016/12/06/09/31/blank-1886008__480.png" alt="Product Image"> </div> <div class="product-details"> <h2 class="product-title">Product Name</h2> <p class="product-price">$9.99</p> <p class="product-description">This is a brief description of the product.</p> <div class="buttons"> <button class="add-to-cart">Add to Cart</button> <button class="compare">Compare</button> </div> </div> </div> <div class="product-card"> <div class="product-image"> <img src="https://cdn.pixabay.com/photo/2016/11/23/06/57/isolated-t-shirt-1852114__480.png" alt="Product Image"> </div> <div class="product-details"> <h2 class="product-title">Product Name</h2> <p class="product-price">$9.99</p> <p class="product-description">This is a brief description of the product.</p> <div class="buttons"> <button class="add-to-cart">Add to Cart</button> <button class="compare">Compare</button> </div> </div> </div> <div class="product-card"> <div class="product-image"> <img src="https://cdn.pixabay.com/photo/2016/11/23/06/57/isolated-t-shirt-1852113__480.png" alt="Product Image"> </div> <div class="product-details"> <h2 class="product-title">Product Name</h2> <p class="product-price">$9.99</p> <p class="product-description">This is a brief description of the product.</p> <div class="buttons"> <button class="add-to-cart">Add to Cart</button> <button class="compare">Compare</button> </div> </div> </div> </div> <div class="credit">Made with <span style="color:tomato;font-size:20px;">❤ </span>by<a href="https://www.learningrobo.com/"> Learning Robo</a></div> </body> </html>
CSS provides style to an HTML page. To make the page attractive create a CSS file with the name style.css and remember that you have to make a file with a .css extension. 


*{
  margin: 0;
  padding: 0;
  font-family: 'Poppins', sans-serif;
}

body{
  background: #CAC531;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #F3F9A7, #CAC531);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #F3F9A7, #CAC531); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  
  font-family: Arial, sans-serif;
  padding: 20px;
}

html, body {
  height: 100%;
}

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 50px;
}

.product-card {
  width: 300px;
  border-radius: 10px;
  -webkit-box-shadow:  0px 0px 47px -20px rgba(0,0,0,1);
  -moz-box-shadow:  0px 0px 47px -20px rgba(0,0,0,1);
  box-shadow:  0px 0px 47px -20px rgba(0,0,0,1);
  margin: 60px 0px 60px 0px;
  background-color: #fff;
}

.product-image {
  height: 300px;
  overflow: hidden;
  position: relative;
  top:-90px;
  padding: 10px;
}

.product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
  border-radius: 10px;
}

.product-image:hover img {
  transform: scale(1.1);
}

.product-details {
  padding: 20px;
  margin-top:-90px;
}

.product-title {
  font-size: 1.5rem;
  margin-bottom: 10px;
}

.product-price {
  font-size: 1.25rem;
  font-weight: bold;
  margin-bottom: 10px;
}

.product-description {
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 10px;
  color: #666;
}

.product-details.expand {
  height: auto;
}

.product-details .expand-button {
  cursor: pointer;
  font-size: 1rem;
  color: #666;
  text-align: center;
  margin-top: 10px;
}

.product-details .expand-button:hover {
  color: #000;
  text-decoration: underline;
}
.buttons {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.add-to-cart,
.compare {
  padding: 10px 20px;
  border: none;
  border-radius: 20px;
  color: #fff;
  font-size: 1rem;
  font-weight: bold;
  cursor: pointer;
}

.add-to-cart {
  background-color: #666;
}

.compare {
  background-color: #CAC531;
  color:#fff;
}

.add-to-cart:hover,
.compare:hover {
  opacity: 0.8;
}

.credit a {
  text-decoration: none;
  color: #000;
  font-weight: 800;
}

.credit {
    color: #000;
  text-align: center;
  margin-top: 10px;
  font-family: Verdana,Geneva,Tahoma,sans-serif;
}
We hope you would like this Responsive Product catalog card design using HTML, CSS, and JavaScript.

Thank you for reading our blog. If you face any problem in creating this Responsive Product catalog card design using HTML, CSS, and JavaScript., then contact us or comment to us. We’ll try to provide a solution to your problem as soon as possible.

code developed by our student SUBHASRI K

Explore

Color picker Word counter Box shadow generator HTML encoder & Decoder online live editor More..
Press The Key ' p ' and say ' read article ' our voice assistant read our article.
In Our older post it doesnot work we working on that.
Tags:

Thank you
Learning robo team

Post a Comment

Thank you
Learning robo team

Post a Comment (0)

Previous Post Next Post
Learning Robo says...
code copied
Welcome