-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathindex.html
154 lines (138 loc) · 7.36 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title>
</title>
<meta name="author" content="">
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="/css/tachyons.css">
<link href="https://fonts.googleapis.com/css?family=Inconsolata|Work+Sans:300,400,500,600" rel="stylesheet">
</head>
<body class="pv5">
<div id="intro" class="w-50 center pb4 mb5 bw2 bb b--black-80">
<h1 class="f3 fw5 lh-title">Welcome to Invoice</h1>
<p class="lh-copy f5">Invoice helps you generate invoices for freelance or contract work.</p>
</div>
<!-- userInfo -->
<div id="userInfo" class="w-50 center">
<h2 class="f4 lh-title fw5 pb3">Let's start with some info about you.</h2>
<form class="black-80 flex flex-wrap pb4">
<div class="w-50 pb3 pr3">
<label for="name" class="f6 b db mb2 fw5">Name</label>
<input id="userName" class="input-reset f5 sans-serif ba b--black pa2 mb2 db w-100" type="text" aria-describedby="name-desc">
</div>
<div class="w-50 pb3 pl3">
<label for="street" class="f6 b db mb2 fw5">Street</label>
<input id="userStreet" class="input-reset f5 sans-serif ba b--black pa2 mb2 db w-100" type="text" aria-describedby="name-desc">
</div>
<div class="w-50 pb3 pr3">
<label for="city" class="f6 b db mb2 fw5">City</label>
<input id="userCity" class="input-reset f5 sans-serif ba b--black pa2 mb2 db w-100" type="text" aria-describedby="name-desc">
</div>
<div class="w-50 pb3 pl3">
<label for="state" class="f6 b db mb2 fw5">State</label>
<input id="userState" class="input-reset f5 sans-serif ba b--black pa2 mb2 db w-100" type="text" aria-describedby="name-desc">
</div>
<div class="w-50 pb3 pr3">
<label for="zip" class="f6 b db mb2 fw5">Zip</label>
<input id="userZip" class="input-reset f5 sans-serif ba b--black pa2 mb2 db w-100" type="number" aria-describedby="name-desc">
</div>
</form>
<a id="userInfoSubmit" href="#" class="f5 no-underline white bg-black bg-animate hover-bg-green hover-white inline-flex items-center pv3 ph5 ba border-box mb5">
<span class="pr1">Next</span>
<svg class="w1" data-icon="chevronRight" viewBox="0 0 32 32" style="fill:currentcolor">
<title>chevronRight icon</title>
<path d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z"></path>
</svg>
</a>
</div>
<!-- clientInfo -->
<div id="clientInfo" class="w-50 center dn">
<h2 class="f4 lh-title fw5 pb3">Now, who are we sending this invoice to?</h2>
<form class="black-80 flex flex-wrap pb4">
<div class="w-50 pb3 pr3">
<label for="name" class="f6 b db mb2 fw5">Client Name</label>
<input id="clientName" class="input-reset f5 sans-serif ba b--black pa2 mb2 db w-100" type="text" aria-describedby="name-desc">
</div>
<div class="w-50 pb3 pl3">
<label for="street" class="f6 b db mb2 fw5">Client Street</label>
<input id="clientStreet" class="input-reset f5 sans-serif ba b--black pa2 mb2 db w-100" type="text" aria-describedby="name-desc">
</div>
<div class="w-50 pb3 pr3">
<label for="city" class="f6 b db mb2 fw5">Client City</label>
<input id="clientCity" class="input-reset f5 sans-serif ba b--black pa2 mb2 db w-100" type="text" aria-describedby="name-desc">
</div>
<div class="w-50 pb3 pl3">
<label for="state" class="f6 b db mb2 fw5">Client State</label>
<input id="clientState" class="input-reset f5 sans-serif ba b--black pa2 mb2 db w-100" type="text" aria-describedby="name-desc">
</div>
<div class="w-50 pb3 pr3">
<label for="zip" class="f6 b db mb2 fw5">Client Zip</label>
<input id="clientZip" class="input-reset f5 sans-serif ba b--black pa2 mb2 db w-100" type="number" aria-describedby="name-desc">
</div>
</form>
<a id="clientInfoSubmit" href="#" class="f5 no-underline white bg-black bg-animate hover-bg-green hover-white inline-flex items-center pv3 ph5 ba border-box mb5">
<span class="pr1">Next</span>
<svg class="w1" data-icon="chevronRight" viewBox="0 0 32 32" style="fill:currentcolor">
<title>chevronRight icon</title>
<path d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z"></path>
</svg>
</a>
</div>
<!-- dateInfo -->
<div id="dateInfo" class="w-50 center dn">
<h2 class="f4 lh-title fw5 pb3">When do you want to send the invoice?</h2>
<form class="black-80 flex flex-wrap pb4">
<div class="w-50 pb3 pr3">
<label for="name" class="f6 b db mb2 fw5">Invoice Date</label>
<input id="datePicker" class="input-reset f5 sans-serif ba b--black pa2 mb2 db w-100" type="date" aria-describedby="name-desc">
</div>
</form>
<a id="dateInfoSubmit" href="#" class="f5 no-underline white bg-black bg-animate hover-bg-green hover-white inline-flex items-center pv3 ph5 ba border-box mb5">
<span class="pr1">Next</span>
<svg class="w1" data-icon="chevronRight" viewBox="0 0 32 32" style="fill:currentcolor">
<title>chevronRight icon</title>
<path d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z"></path>
</svg>
</a>
</div>
<!-- projectName -->
<div id="projectNameInfo" class="w-50 center dn">
<h2 class="f4 lh-title fw5 pb3">What's the name of this project?</h2>
<form class="black-80 flex flex-wrap pb4">
<div class="w-50 pb3 pr3">
<label for="name" class="f6 b db mb2 fw5">Project name</label>
<input id="projectName" class="input-reset f5 sans-serif ba b--black pa2 mb2 db w-100" type="text" aria-describedby="name-desc">
</div>
</form>
<a id="projectNameInfoSubmit" href="#" class="f5 no-underline white bg-black bg-animate hover-bg-green hover-white inline-flex items-center pv3 ph5 ba border-box mb5">
<span class="pr1">Next</span>
<svg class="w1" data-icon="chevronRight" viewBox="0 0 32 32" style="fill:currentcolor">
<title>chevronRight icon</title>
<path d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z"></path>
</svg>
</a>
</div>
<!-- projectDescription -->
<div id="projectDescriptionInfo" class="w-50 center dn">
<h2 class="f4 lh-title fw5 pb3">What did you work on?</h2>
<form class="black-80 flex flex-wrap pb4">
<div class="w-50 pb3 pr3">
<label for="name" class="f6 b db mb2 fw5">Project details</label>
<textarea rows="4" cols="200" id="projectDescription" class="input-reset f5 sans-serif ba b--black pa2 mb2 db w-100" aria-describedby="name-desc"></textarea>
</div>
</form>
<a id="projectDescriptionInfoSubmit" href="#" class="f5 no-underline white bg-black bg-animate hover-bg-green hover-white inline-flex items-center pv3 ph5 ba border-box mb5">
<span class="pr1">Next</span>
<svg class="w1" data-icon="chevronRight" viewBox="0 0 32 32" style="fill:currentcolor">
<title>chevronRight icon</title>
<path d="M12 1 L26 16 L12 31 L8 27 L18 16 L8 5 z"></path>
</svg>
</a>
</div>
</body>
<script src="app.js"></script>
</html>