checkout page html css

Solutions on MaxInterview for checkout page html css by the best coders in the world

showing results for - "checkout page html css"
26 Feb 2020
1<!DOCTYPE html>
2<html>
3<head>
4<meta name="viewport" content="width=device-width, initial-scale=1" />
5<style>
6body {
7   font-family: Arial;
8   font-size: 17px;
9   padding: 8px;
10}
11* {
12   box-sizing: border-box;
13}
14.Fields {
15   display: flex;
16   flex-wrap: wrap;
17   padding: 20px;
18   justify-content: space-around;
19}
20.Fields div {
21   margin-right: 10px;
22}
23label {
24   margin: 15px;
25}
26.formContainer {
27   margin: 10px;
28   background-color: #efffc9;
29   padding: 5px 20px 15px 20px;
30   border: 1px solid rgb(191, 246, 250);
31   border-radius: 3px;
32}
33input[type="text"] {
34   display: inline-block;
35   width: 100%;
36   margin-bottom: 20px;
37   padding: 12px;
38   border: 1px solid #ccc;
39   border-radius: 3px;
40}
41label {
42   margin-left: 20px;
43   display: block;
44}
45.icon-formContainer {
46   margin-bottom: 20px;
47   padding: 7px 0;
48   font-size: 24px;
49}
50.checkout {
51   background-color: #4caf50;
52   color: white;
53   padding: 12px;
54   margin: 10px 0;
55   border: none;
56   width: 100%;
57   border-radius: 3px;
58   cursor: pointer;
59   font-size: 17px;
60}
61.checkout:hover {
62   background-color: #45a049;
63}
64a {
65   color: black;
66}
67span.price {
68   float: right;
69   color: grey;
70}
71@media (max-width: 800px) {
72.Fields {
73   flex-direction: column-reverse;
74}
75}
76</style>
77</head>
78<body>
79<h1 style="text-align: center;">Responsive Checkout Form</h1>
80<div class="Fields">
81<div>
82<div class="formContainer">
83<form>
84<div class="Fields">
85<div>
86<h3>Billing Address</h3>
87<label for="fname">Full Name</label>
88<input type="text" id="fname" name="firstname" />
89<label for="email"> Email</label>
90<input type="text" id="email" name="email" />
91<label for="adr"> Address</label>
92<input type="text" id="adr" name="address" />
93</div>
94<div>
95<h3>Payment</h3>
96<label for="cname">Name on Card</label>
97<input type="text" id="cname" name="cardname" />
98<label for="ccnum">Credit card number</label>
99<input type="text" id="ccnum" name="cardnumber" />
100<div class="Fields">
101<div>
102<label for="expyear">Exp Year</label>
103<input type="text" id="expyear" name="expyear" />
104</div>
105<div>
106<label for="cvv">CVV</label>
107<input type="text" id="cvv" name="cvv" />
108</div>
109</div>
110</div>
111</div>
112<input
113type="submit"
114value="Continue to checkout"
115class="checkout"
116/>
117</form>
118</div>
119</div>
120<div>
121<div class="formContainer">
122<h4>
123Cart <span class="price" style="color:black"><b>2</b></span>
124</h4>
125<p>
126<a style="text-decoration: none;" href="#">Product 1</a>
127<span class="price">$10</span>
128</p>
129<p>
130<a style="text-decoration: none;" href="#">Product 2</a>
131<span class="price">$10</span>
132</p>
133<p>
134Total <span class="price" style="color:black"><b>$20</b></span>
135</p>
136</div>
137</div>
138</div>
139</body>
140</html>
source