-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathorderform.html
157 lines (157 loc) · 6.55 KB
/
orderform.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
152
153
154
155
156
157
<!doctype html>
<html manifest="manifest.appcache" class="no-js" lang="EN">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Est Laborum - Store</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/modules.css">
</head>
<body>
<header role="banner">
<a href="index.html"><img class="logo" src ="http://i.imgur.com/JdY9x7e.png"></a>
<nav role="navigation" class="flex-container">
<a class="navlink flex-item-1" href="index.html">Home</a>
<a class="navlink flex-item-2" href="blog.html">Blog</a>
<a class="navlink flex-item-3" href="contact.html">Contact</a>
<a class="navlink flex-item-3 this_page" href="orderform.html">Store</a>
</nav>
</header>
<main class="container" role="main">
<section class="shirt">
<h1>T-shirts!</h1>
<p>Brand new! 100% Cotton</p>
<img src="http://i.imgur.com/jBqMNGJ.png" alt="Est Laboram logo T-shirt">
<section class="photobooth">
<ol>
<li>
<p>Put your face on the back of your shirt!</p>
</li>
<li>
<video id="video"autoplay></video>
</li>
<li>
<button id="snap" class="order_button">Snap Photo</button>
</li>
<li class="shirt_blank">
<canvas id="canvas" width="256" height="192"></canvas>
</li>
</ol>
</section>
</section>
<section class="order_form">
<form role="form">
<fieldset class="order_fieldset">
<legend>T-shirt Size and Unlimited Color!</legend>
<ol>
<li>
<label for="shirt_size">Shirt Size</label>
<select id="shirt_size">
<optgroup label="Unisex/Men">
<option value="men_S">Unisex Small</option>
<option value="men_M">Unisex Medium</option>
<option value="men_L">Unisex Large</option>
<option value="men_XL">Unisex XL</option>
<option value="men_XXL">Unisex XXL</option>
<option value="men_XXXL">Unisex XXXL</option>
</optgroup>
<optgroup label="Women">
<option value="women_XS">Women's XS</option>
<option value="women_S">Women's Small</option>
<option value="women_M">Women's Medium</option>
<option value="women_L">Women's Large</option>
<option value="women_XL">Women's XL</option>
</optgroup>
</select>
</li>
<li>
<label for="color">Pick a color!</label>
<input id="color" type="color" name="color">
</li>
</fieldset>
<fieldset class="order_fieldset">
<legend>Billing Information</legend>
<ol>
<li>
<label for='name'>Name</label>
<input id="name" name="name" type="text" placeholder="First/Last Name" class="stored" required>
</li>
<li>
<label for="email">Email</label>
<input id="email" name="email" type="email" placeholder="[email protected]" class="stored" required>
</li>
<li>
<label for="phone">Phone</label>
<input id="phone" name="phone" type="tel" placeholder="Eg. +447500000000" class="stored" required>
</li>
</ol>
</fieldset>
<fieldset class="order_fieldset">
<legend>Delivery Address</legend>
<ol>
<li>
<label for="address_1">Address 1</label>
<input id="address_1" name="address_1" class="stored" required></input>
</li>
<li>
<label for="address_2">Address 2</label>
<input id="address_2" name="address_2" class="stored"></input>
</li>
<li>
<label for="city">City</label>
<input id="city" name="city" class="stored" required></input>
</li>
<li>
<label for="state">State/Province</label>
<input id="state" name="state" class="stored" required></input>
</li>
<li>
<label for="zipcode">Zip code</label>
<input id="zipcode" name="zipcode" type="text" class="stored" required>
</li>
<li>
<label for="country">Country</label>
<input id="country" name="country" type="text" class="stored" required>
</li>
</ol>
</fieldset>
<fieldset class="order_fieldset">
<legend>Card Info</legend>
<ol>
<li>
<input id="visa" name="cardtype" type="radio">
<label for="visa">VISA</label>
<input id="mastercard" name="cardtype" type="radio">
<label for="mastercard">Mastercard</label>
</li>
<li>
<label for="cardnumber">Card number</label>
<input id="cardnumber" name="cardnumber" type="number" placeholder="0000000000000000" autocomplete="off" required>
</li>
<li>
<label for="csc">Security code</label>
<input id="csc" name="csc" type="number" placeholder="012" autocomplete="off" required>
</li>
<li>
<label for="namecard">Name on card</label>
<input id="namecard" name="namecard" type="text" placeholder="Eactly as it appears on the card" autocomplete="off" required>
</li>
</ol>
</fieldset>
<fieldset class="submit order_fieldset">
<button class="order_button" type='submit'>Purchase</button>
</fieldset>
</form>
</section>
</main>
<footer role="contentinfo">
<p>© 2015 - Fellow Coders LLC</p>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</body>
</html>