-
Notifications
You must be signed in to change notification settings - Fork 0
/
cart.html
151 lines (149 loc) · 5.08 KB
/
cart.html
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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!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>ICS20033</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap"
rel="stylesheet"
/>
<!-- CSS Stylesheets -->
<link rel="stylesheet" href="css/header.css" />
<link rel="stylesheet" href="css/footer.css" />
<link rel="stylesheet" href="css/cart.css" />
<!-- Font Awesome -->
<link
rel="stylesheet"
href="https://use.fontawesome.com/releases/v5.15.3/css/all.css"
integrity="sha384-SZXxX4whJ79/gErwcOYf+zWLeJdY/qpuqC4cAa9rOGUstPomtqpuNWT9wdPEn2fk"
crossorigin="anonymous"
/>
<!-- <script
defer
src="https://use.fontawesome.com/releases/v5.0.7/js/all.js"
></script> -->
<!-- Favi icon -->
<link rel="shortcut icon" type="image/png" href="/logo2.png" />
</head>
<body>
<header id="header">
<img
class="logo"
src="logos/logo2.png"
alt="logo"
onclick="location.href='index.html'"
/>
<i class="icon fas fa-shopping-cart fa-2x"></i>
</header>
<main id="main">
<h1 class="title">Check Out</h1>
<div class="wrapper-container">
<section class="form-container">
<form class="form" action="success.html">
<div class="input-pair">
<div class="input-label">
<label for="fname">Full Name</label>
<input
type="name"
name="fname"
required
placeholder="Full Name"
/>
</div>
<div class="input-label">
<label for="email">Email</label>
<input type="email" name="email" required placeholder="email" />
</div>
</div>
<div class="input-pair">
<div class="input-label">
<label for="address">Street Address</label>
<input
type="text"
name="address"
required
placeholder="Street Address"
/>
</div>
<div class="input-label">
<label for="area">Area</label>
<input type="text" name="area" required placeholder="Area" />
</div>
</div>
<div class="input-pair">
<div class="input-label">
<label for="city">City</label>
<input type="text" name="city" required placeholder="city" />
</div>
<div class="input-label">
<label for="phone">Phone Number</label>
<input
type="tel"
name="phone"
required
placeholder="Phone Number"
/>
</div>
</div>
<div class="input-pair">
<div class="input-label">
<label for="text-area">Delivery Instructions</label>
<input
maxlength="1000"
class="text-area"
name="text-area"
type="text-area"
/>
</div>
</div>
<button
type="submit"
class="submit-btn"
style="display: none"
></button>
</form>
</section>
<section id="cart">
<h1>Summary</h1>
<div class="products"></div>
<p class="desktop-cost">Customized Desktop cost</p>
<select name="insurance" id="insurance">
<option value="0" selected disabled>Select Insurance</option>
<option value="50">+1 Year Insurance 50€</option>
<option value="80">+2 Year Insurance 80€</option>
</select>
<select name="shipping" id="shipping">
<option value="0" selected disabled>Select Shipping</option>
<option value="7">6-10 Business Days 7€</option>
<option value="10">3-5 Business Days 10€</option>
</select>
<p class="total-cost">Total Cost</p>
<button class="btn">Check Out</button>
</section>
</div>
</main>
<section id="contact">
<footer>
<div class="icon-container">
<a
href="https://www.linkedin.com/in/leonard-pepa-bb74371b9/"
target="_blank"
><i class="icon fab fa-linkedin fa-2x"></i
></a>
<a href="https://github.com/Leonardpepa" target="_blank">
<i class="icon fab fa-github fa-2x"></i>
</a>
<a href="https://twitter.com/LeonarntP" target="_blank">
<i class="icon fab fa-twitter-square fa-2x"></i>
</a>
</div>
<p>© Copyright 2021 ICS20033</p>
</footer>
</section>
<script src="cart.js"></script>
</body>
</html>