Skinstore-clone/cart.html at main · Coders6754/Skinstore-clone · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link
      href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="./Styles/cart.css" />
    <link
      rel="icon"
      href="https://s1.thcdn.com/checkout/resources/imgs/skstr/favicon.skstr.ico"
    />
    <script
      src="https://kit.fontawesome.com/a0feeaba88.js"
      crossorigin="anonymous"
    ></script>
    <link rel="stylesheet" type="text/css" href="footer.css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <title>Your Cart | SkinStore</title>
  </head>
  <body>
    <div id="nav-container"></div>
    <script src="jhnav.js"></script>
    <div class="mainContent">
      <div class="cartPageHeader">
        <h1>Your Cart</h1>
        <button id="topCheckoutButton">
          <span><i class="fa-solid fa-lock" style="color: #fff"></i></span>
          <span> CHECKOUT SECURELY NOW </span>
        </button>
      </div>
      <div class="cartTopAlertWrapper">
        <div class="cartTopAlert">
          <i class="fa-solid fa-bell" style="color: #267b9b"></i>
          <p>
            Treat yourself to our bestselling Neocutis NEO CLEANSE Gentle Skin
            Cleanser 125ml (Worth $38)
          </p>
        </div>
        <div id="firstGreenAlert" class="cartTopAlertGreens">
          <i class="fa-solid fa-circle-check" style="color: #007d1e"></i>
          <p>
            You have qualified for: <b
              > Select a free gift when you spend $150 or more </b
            > Don't forget to make your selection below
          </p>
        </div>
        <div id="secondGreenAlert" class="cartTopAlertGreens">
          <i class="fa-solid fa-circle-check" style="color: #007d1e"></i>
          <p>
            You have qualified for: <b
              > Select a gift for you or someone you love when you spend $110 or
              more </b
            > Don't forget to make your selection below
          </p>
        </div>
        <div id="thirdGreenAlert" class="cartTopAlertGreens">
          <i class="fa-solid fa-circle-check" style="color: #007d1e"></i>
          <p>
            You have qualified for: <b
              > Complimentary SkinCeuticals Phyto Corrective Mask - 4 ml. when
              you spend $175 or more on the brand. </b
            >
          </p>
        </div>
      </div>

      <div class="cartPageContentWrapper">
        <div class="itemsAndGiftsDiv">
          <div class="cartItemShowCaseWrapper" id="cartItemShowCaseWrapper">
            <div class="cartItemHeader">
              <div id="itemDiv">
                <p>Items</p>
              </div>
              <div id="priceDiv">Price</div>
              <div id="quantityDiv">Quantity</div>
              <div id="subtotalDiv">Subtotal</div>
            </div>
          </div>
          <div class="cartSummery">
            <div class="cartSummerySectionHeader">
              <h3>Order Summary</h3>
            </div>
            <div class="pricingElements">
              <div id="pricingElementDetails">
                <p id="pricingFinalSubtotal">Subtotal (1 Items)</p>
                <p>Shipping Cost</p>
                <p>Discount</p>
                <p>Tax (Calculated at checkout)</p>
              </div>
              <div id="pricingElementPrices">
                <p id="cartSummerySubtotal">$230.00</p>
                <p>*TBD</p>
                <p id="discountPrice">- $0.00</p>
                <p>$0.00</p>
              </div>
            </div>
            <div class="appliedCouponManagement">
              <div id="showCoupon">
                <p>high30</p>
                <i class="fa-solid fa-square-xmark" style="color: #fff"></i>
              </div>
            </div>
            <div class="applyDiscountWrapper">
              <input type="text" placeholder="Promo Code" />
              <button>Apply</button>
            </div>
            <div class="couponAlerts">
              <p id="couponAlertText">Alert</p>
            </div>
            <div class="cartTotalFinalWrapper">
              <p>Total</p>
              <p id="totalCartPrice">$200.00</p>
            </div>
            <div class="checkoutButtonWrapper">
              <button id="bottomCheckoutButton">Checkout SECURELY now</button>
            </div>
          </div>
        </div>
      </div>

      <div class="bottomUpselling">
        <h2>Others also bought</h2>
        <div id="upsellProductShowcase" class="upsellProductShowcase">
          <!-- Random products -->
        </div>
      </div>
    </div>
    <div id="footer"></div>
  </body>
  <script src="./Scripts/cart.js"></script>
</html>