Css Stylish Box design | Box design in HTML & CSS

Using HTML & CSS make Box of e-commerce website. In this box having Title, Price, Offer Price, Add to Cart Button of Product.

CSS

Copy and paste this CSS in style.css and under the head tag.

HTML

HTML & CSS

<!DOCTYPE html>
<html lang="en">
   <head>
      <title>Bootstrap Example</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
      <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
      <style>
         /* Make the image fully responsive */
         .carousel-inner img {
         width: 100%;
         height: 100%;
         }
         .add_box {
         width:100%;
         border: solid 1px #ccc;
         border-radius: 3px;
         overflow: hidden;
         background-color: #fff;
         box-shadow: -1px -2px 2px #000;
         margin-bottom:20px;
         }
         .add_box .add_img {
         /* height: 225px; */
         overflow: hidden;
         text-align: center;
         }
         .add_box .add_img img{/* width:100%; */height: 200px;margin: auto;}
         .add_box .add_txt{  }
         .add_box .add_txt .price i{  }
         .add_box .add_txt .price .offer{ float:left;  }
         .add_box .add_txt .price .prc{ float:right;  text-decoration: line-through;
         color: #ccc; }
         .add_box .add_txt .cart-btn {
         border-radius: 50px;
         display: block;
         width: 120px;
         font-weight: bold;
         font-size: 14px;
         color: #fff;
         margin: 10px auto;
         padding: 3px 0px;
         }     
         .add_box .price {
         text-align: center;
         font-size: 18px;
         font-weight: 600;
         color: #c7a904;
         margin-bottom: 40px;
         padding: 0px 15px;
         }
         .add_box .add_txt .cart-btn{ display:block; }
         .add_box  .add_txt h3{     padding: 5px 5px; margin:0px; }
         .add_box .add_txt h3 a {
         font-size: 16px;
         color:#191818;
         font-weight: bold;
         line-height: 1.2;
         text-align: center;
         display: block;
         text-transform: capitalize;
         }
         .cat_box {
         box-shadow: -1px 0px 3px 0px #000;
         background-color: rgba(255, 255, 255, 0.26);
         }
      </style>
   </head>
   <body>
      <div class="container">
         <div class="row">
            <div class="col-sm-3">
               <div class="add_box">
                  <div class="add_img">
                     <img class="img-fluid" src="https://www.coghlans.com/images/products/products-camp-kitchen-thumb.jpg">
                  </div>
                  <div class="add_txt">
                     <h3><a href="#"> The Royal Shoppe </a> </h3>
                     <p class="price"> <span class="offer"> <i class="fa fa-inr"></i> : 12,00 </span> <span class="prc"> <i class="fa fa-inr"></i> : 15,00 </span>   </p>
                     <a class="btn btn-warning cart-btn" href="#"> <i class="fa fa-shopping-cart"></i> Add to Cart </a>   
                  </div>
               </div>
            </div>
         </div>
      </div>
   </body>
</html>

w3 learn point

Css Stylish Box design | Box design in HTML & CSS

HTML & CSS

Preview Of Boxes design

Leave a Reply Cancel reply

HTML & CSS

Preview Of Boxes design

Related Articles

Creative bootstrap templates free download

E-commerce – side navigation menu

owl carousel slider example | how to customize plugin

Social media sharing buttons html & CSS

Leave a Reply Cancel reply