Code Asteroid IDE : How to create shopping cart using HTML and CSS

- Home
- Services
- Our Products
  ›
  - Back
    ‹
  - Palette RGB
  - Code Asteroid
- Skill Test
- Code War
- Videos
- News
  ›
  - Back
    ‹
  - Jobs & Hiring
  - Tech News
  - Startups
- Aptitude Test
- Technology
  ›
  - Back
    ‹
  - Developer Corner
  - Tutorials

How to create shopping cart using HTML and CSS Views: 1362 By: Ankur Hack

Contribute Run

HTML

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" rel="stylesheet">

<div class="custom-sub-main-con">
    <div class="row">
        <div class="col-xl-9 col-lg-9 col-md-8">
            <div class="cart-item-container">
                <div class="cart-level1 float-fix">
                    <span class="m-your-cart left">
                        Your Order
                    </span>
                    <span class="right">
                        You have <span class="cart-count">1</span> items in your shopping cart
                    </span>
                </div>
                <div class="cart-level2">
                    <div class="added-cart-products float-fix">
                        <div class="product-showcase-con left">
                            <div class="product-image-con">
                                <img src="https://www.hackhackathon.com/ImagesGallery/AdminImageGallery/imagePath/2021-12-21-12-14-cart.jpeg">
                            </div>
                        </div>
                        <div class="product-detail-con float-fix left">
                            <div class="product-name">
                                Asteroid Shoes
                            </div>
                            <div class="product-specification left">
                                <div class="ps-level1">
                                    <span>Size : </span><span>8</span>
                                </div>
                                <div class="ps-level2">
                                    <span>Discount : </span><span>Rs 60</span>
                                </div>
                                <div class="product-price">
                                    Rs : 600
                                </div>
                            </div>
                            <div class="product-actions-btn float-fix left">
                                <div class="pa-quantity-btn left">
                                    <div>
                                        <form>
                                            <a class="quantity-btn decrease-q-btn" href="#">-</a>
                                            <input class="quantity-textbox" pattern="\d{4}" type="number" required>
                                            <a class="quantity-btn increse-q-btn" href="#">+</a>
                                        </form>
                                    </div>
                                </div>
                                <div class="pa-remove-btn left">
                                    <a href="#" class="remove-item-from-cart">
                                        Remove Item
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="added-cart-products float-fix">
                        <div class="product-showcase-con left">
                            <div class="product-image-con">
                                <img src="https://www.hackhackathon.com/ImagesGallery/AdminImageGallery/imagePath/2021-12-21-12-10-monitor.jpg">
                            </div>
                        </div>
                        <div class="product-detail-con float-fix left">
                            <div class="product-name">
                                LG Monitor Full HD
                            </div>
                            <div class="product-specification left">
                                <div class="ps-level1">
                                    <span>Size : </span><span>27 Inch</span>
                                </div>
                                <div class="ps-level2">
                                    <span>Discount : </span><span>Rs 400</span>
                                </div>
                                <div class="product-price">
                                    Rs : 13000
                                </div>
                            </div>
                            <div class="product-actions-btn float-fix left">
                                <div class="pa-quantity-btn left">
                                    <div>
                                        <form>
                                            <a class="quantity-btn decrease-q-btn" href="#">-</a>
                                            <input class="quantity-textbox" pattern="\d{4}" type="number" required>
                                            <a class="quantity-btn increse-q-btn" href="#">+</a>
                                        </form>
                                    </div>
                                </div>
                                <div class="pa-remove-btn left">
                                    <a href="#" class="remove-item-from-cart">
                                        Remove Item
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>
                <div class="cart-level3">
                    <div class="addition-actions-btn float-fix">
                        <div>
                            <a href="#"> <i class="fa fa-chevron-left" aria-hidden="true"></i> CONTINUE SHOPPING</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-xl-3 col-lg-3 col-md-4">
            <div class="coupon-discount-container">
                <div class="cart-level1 float-fix">
                    <span class="left">
                        Do You Have Coupon ?
                    </span>
                </div>
                <div class="apply-coupon-fields">
                    <form class="coupon-form">
                        <div class="float-fix">
                            <input type="password" class="form-control" placeholder="Coupon Code">
                        </div>
                    </form>
                </div>
                <div class="coupon-submit-btn">
                    <a href="#">Apply Now</a>
                </div>
            </div>

            <div class="cart-value-container">
                <div class="cart-level1 float-fix">
                    <span class="left">
                        Price Details
                    </span>
                </div>
                <div class="cart-price-calculate-con">
                    <div class="item-sub-price float-fix">
                        <span class="left">Price (1 Item)</span>
                        <span class="right">₹1500</span>
                    </div>
                    <div class="item-sub-price float-fix">
                        <span class="left">Delivery Charges</span>
                        <span class="right">₹100</span>
                    </div>
                    <div class="amount-payable float-fix">
                        <span class="left">Amount Payable</span>
                        <span class="right">₹1,900</span>
                    </div>
                </div>
                <div class="order-place-btn">
                    <a href="#">Place Order</a>
                </div>
            </div>
        </div>
    </div>
</div>

CSS

.float-fix::after {
    clear: both;
    display: block;
    content: " ";
}
.left {
    float: left;
}
.right {
    float: right;
}
.custom-sub-main-con {
    height:100%;
    padding: 25px;
    background: #dbdbdb;
}
.cart-item-container, .cart-value-container {
    background-color: #fff;
    box-shadow: 0px 0px 2px #e4e4e4;
    border-radius: 2px;
    overflow: hidden;
}
.cart-level1, .apply-coupon-fields, .cart-price-calculate-con {
    padding-left: 20px;
    padding-right: 20px;
}
.cart-level1 {
    border-bottom: 1px solid #f0f0f0;
    padding-top: 15px;
    padding-bottom: 15px;
}
.cart-level1 span, .product-name {
    font-weight: 600;
}
.cart-count {
    color: #d17112;
}
.added-cart-products {
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid #f0f0f0;
}
.product-showcase-con {
    width: 15%;
}
.product-image-con {
    width: 81px;
    margin: auto;
    overflow: hidden;
}
.product-image-con img {
    width: 100%;
}
.product-detail-con {
    width: 85%;
    padding-left: 15px;
}
.product-specification {
    font-size: 13px;
    color: #737373;
    margin-top: 5px;
}
.product-price {
    font-size: 18px;
    color: rgb(44, 131, 63);
    margin-top: 9px;
    font-weight: 600;
}
.product-actions-btn {
    padding: 0px 5px;
    margin-top: 5px;
}
.product-specification, .product-actions-btn, .pa-quantity-btn, .pa-remove-btn {
    width: 50%;
}
.decrease-q-btn {
    margin-right: 5px;
}
.quantity-btn {
    display: inline-block;
    height: 30px;
    width: 30px;
    text-align: center;
    border: 1px solid lightgray;
    border-radius: 50%;
    color: black;
    box-shadow: 0 0 5px lightgrey;
    margin-right: 5px;
}
.quantity-textbox {
    width: 35px;
    position: relative;
    top: 2px;
    border: 1px solid lightgray;
    text-align: center;
}
.increse-q-btn {
    margin-left: 5px;
}
.remove-item-from-cart {
    display: block;
    text-align: center;
    color: #007bff;
    padding: 5px;
    transition: ease .5s;
}
.cart-level3 {
    background-color: #2874f0;
    color: #fff;
}
.addition-actions-btn div a {
    color: #000;
    text-decoration: none;
    display: block;
    background-color: #ffffff;
    padding-top: 15px;
    padding-bottom: 15px;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 600;
    box-shadow: 0 0 8px lightgrey;
}
.coupon-discount-container {
    background-color: #fff;
    margin-bottom: 20px;
    border-radius: 2px;
    overflow: hidden;
}
.amount-payable, .apply-coupon-fields {
    padding-top: 15px;
    padding-bottom: 15px;
}
.coupon-submit-btn a {
    padding: 12px 20px;
    display: block;
    background-color: #2874f0;
    color: #fff;
    text-align: center;
    font-weight: bold;
}
.item-sub-price {
    margin-top: 15px;
    margin-bottom: 15px;
}
.order-place-btn a {
    padding: 12px 20px;
    display: block;
    background-color: rgb(44, 131, 63);
    color: #fff;
    text-align: center;
    font-weight: bold;
}

Site

Training

Save Code

No code found to submit, Please add code in editors.

Thank you for your contribution. Our experts are soon review your canvas and update you.