cart page html

1<div class="row">
2  <div class="col-75">
3    <div class="container">
4      <form action="/action_page.php">
5
6        <div class="row">
7          <div class="col-50">
8            <h3>Billing Address</h3>
9            <label for="fname"><i class="fa fa-user"></i> Full Name</label>
10            <input type="text" id="fname" name="firstname" placeholder="John M. Doe">
11            <label for="email"><i class="fa fa-envelope"></i> Email</label>
12            <input type="text" id="email" name="email" placeholder="john@example.com">
13            <label for="adr"><i class="fa fa-address-card-o"></i> Address</label>
14            <input type="text" id="adr" name="address" placeholder="542 W. 15th Street">
15            <label for="city"><i class="fa fa-institution"></i> City</label>
16            <input type="text" id="city" name="city" placeholder="New York">
17
18            <div class="row">
19              <div class="col-50">
20                <label for="state">State</label>
21                <input type="text" id="state" name="state" placeholder="NY">
22              </div>
23              <div class="col-50">
24                <label for="zip">Zip</label>
25                <input type="text" id="zip" name="zip" placeholder="10001">
26              </div>
27            </div>
28          </div>
29
30          <div class="col-50">
31            <h3>Payment</h3>
32            <label for="fname">Accepted Cards</label>
33            <div class="icon-container">
34              <i class="fa fa-cc-visa" style="color:navy;"></i>
35              <i class="fa fa-cc-amex" style="color:blue;"></i>
36              <i class="fa fa-cc-mastercard" style="color:red;"></i>
37              <i class="fa fa-cc-discover" style="color:orange;"></i>
38            </div>
39            <label for="cname">Name on Card</label>
40            <input type="text" id="cname" name="cardname" placeholder="John More Doe">
41            <label for="ccnum">Credit card number</label>
42            <input type="text" id="ccnum" name="cardnumber" placeholder="1111-2222-3333-4444">
43            <label for="expmonth">Exp Month</label>
44            <input type="text" id="expmonth" name="expmonth" placeholder="September">
45
46            <div class="row">
47              <div class="col-50">
48                <label for="expyear">Exp Year</label>
49                <input type="text" id="expyear" name="expyear" placeholder="2018">
50              </div>
51              <div class="col-50">
52                <label for="cvv">CVV</label>
53                <input type="text" id="cvv" name="cvv" placeholder="352">
54              </div>
55            </div>
56          </div>
57
58        </div>
59        <label>
60          <input type="checkbox" checked="checked" name="sameadr"> Shipping address same as billing
61        </label>
62        <input type="submit" value="Continue to checkout" class="btn">
63      </form>
64    </div>
65  </div>
66
67  <div class="col-25">
68    <div class="container">
69      <h4>Cart
70        <span class="price" style="color:black">
71          <i class="fa fa-shopping-cart"></i>
72          <b>4</b>
73        </span>
74      </h4>
75      <p><a href="#">Product 1</a> <span class="price">$15</span></p>
76      <p><a href="#">Product 2</a> <span class="price">$5</span></p>
77      <p><a href="#">Product 3</a> <span class="price">$8</span></p>
78      <p><a href="#">Product 4</a> <span class="price">$2</span></p>
79      <hr>
80      <p>Total <span class="price" style="color:black"><b>$30</b></span></p>
81    </div>
82  </div>
83</div>