cart.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cart</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://kit.fontawesome.com/a9dbdcc6e4.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css2?family=Lato&family=Noto+Sans&family=Poppins:wght@500;700;900&family=Roboto:wght@500&display=swap" rel="stylesheet">
    

    <link rel="stylesheet" href="./styles/common.css"> 

    <link rel="stylesheet" href="./styles/common.css">

    <link rel="stylesheet" href="./styles/cart.css">
    <style>
       
    </style>
</head>
<body>

   <div id="navbar">

   
    <div id="navbar">

        <div id="nav1">
            <img src="https://www.saksoff5th.com/on/demandware.static/-/Library-Sites-SaksOff5thSharedLibrary/default/dwc407ce02/images/saksoff_5th_logo.svg" alt="">
            <input type="text" name="" id="input" placeholder="Search">
            <div style="display: flex;margin-top: 20px;"> 
                <img style="height: 15px; width: 16px; margin-right: 20px;" src="https://www.bing.com/th?id=A68ece55cad510314b01548888211b929&w=188&h=132&c=7&o=6&dpr=1.25&pid=SANGAM" alt="">
                <p style="font-family:'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;margin-top: -4px;margin-right: 20px;">Welcome,Signin</p>
                <i style="margin-right: 20px" class="fa-solid fa-location-dot"></i>
                <i style="margin-right: 20px" class="fa-regular fa-heart"></i>
                <i class="fa-solid fa-bag-shopping"></i>
            </div>
        </div>
        <div style="height:1px; background-color: rgb(208, 208, 208)"></div>
        <div id="nav2">
            <p>DESIGNERS</p>
            <p>WOMEN</p>
            <p>SHOES</p>
            <p>HANDBAGS</p>
            <p>JEWELRY & ACCESSORIES</p>
            <p>BEAUTY</p>
            <p>MEN</p>
            <p>KIDS</p>
            <p>HOME</p>
            <p>PRE-OWNED</p>
            <p style="color: red;">CLEARANCE</p>
        </div>
        <div style="height:1px; background-color: rgb(208, 208, 208)"></div>


   </div><!-- </div>End of cart header -->


    <div id="cartBody">


   </div>


    <div id="cartBody">
        <div class="wrapperAll">
            <div id="cartHerder"></div>
            <div id="productsInCart"></div>
            <div id="coupanSection">
                <p>Have you coupan code?</p>
                <div id="coupanCode">
                    <input type="text" id="coupanInput" placeholder=" ENTER COUPON CODE HERE">
                    <button id="apply">APPLY</button>
                </div>
            </div>
            <div id="priceSection">
                <div id="headingPrice">
                    <div id="summary">Price Summary</div>
                    <div id="totalPrice">(<h5 id="allprice"></h5>)</div>
                </div>
                <div class="des">
                    <div>Order Total</div>
                    <div class="price"> $ <h5 id="priceVal"></h5></div>
                </div>
                <div class="des">
                    <div>Item Total</div>
                    <div class="price">$<h5 id="totalItemPrice"></h5></div>
                </div>
                <div class="des">
                    <div>Coupon Discount</div>
                    <div class="price"><h5 id="coupanDiscount"></h5></div>
                </div>
                <div class="des">
                    <div>Shipping</div>
                    <div class="price">$<h5 id="shippingCharge"></h5></div>
                </div>
                <div class="des">
                    <div>5% online payment discount</div>
                    <div class="price"><h5 id="percentDis">-$</h5>&nbsp; <h5 id="onlinePayDis"></h5></div>
                </div>
    
                <div class="happyMsg">
                    <h5 id="currency">$</h5> You have save &nbsp;&nbsp;<h5 id="percentDis">$</h5><h5 id="savedPrice">0</h5> on this order&nbsp;&nbsp;
                </div>
    
                <div id="proceedPay">
                    <div>PROCEED TO PAY</div>
    
                </div>
            </div>
    
        </div>

    </div>
</body>
</html>
<script src="./scripts/cart.js">
    
</script> 