-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
241 lines (200 loc) · 10 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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>UI Camp</title>
<link href="https://fonts.googleapis.com/css?family=Quicksand:300,400,700" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Playfair+Display:400" rel="stylesheet" type="text/css">
<link href='https://fonts.googleapis.com/css?family=Oswald:400' rel='stylesheet' type='text/css'>
<meta content="width=device-width, initial-scale=1" name="viewport">
<!-- <link href="css/reset.css" rel="stylesheet"> -->
<!--<link href="https://crossorigin.me/http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet prefetch">-->
<link rel="shortcut icon" type="image/png" href="images/goodUI-logo.png"/>
<link href="css/style.css" rel="stylesheet">
<link href="css/wrap-action.css" rel="stylesheet">
<link href="css/wrap-gallery.css" rel="stylesheet">
<link href="css/wrap-projects.css" rel="stylesheet">
<link href="css/wrap-customers.css" rel="stylesheet">
<link href="css/wrap-guide.css" rel="stylesheet">
<link href="css/footer.css" rel="stylesheet">
<!--<link href="css/wrap-action2.css" rel="stylesheet">-->
<!--<link href="css/media.css" rel="stylesheet">-->
<link href="ionicons-2.0.1/css/ionicons.css" rel="stylesheet">
</head>
<body>
<div class="container flex column">
<div class="wrap-action flex column">
<h1>UI Camp</h1>
<h2>Become a better designer, for free.</h2>
<h3>Create your best work today <span>&</span> share it with our community!</h3>
<form>
<input name="mail" placeholder="Email address" type="email"> <input type="submit" value="Join Today">
<h6>No funny business, just the good stuff :)</h6>
</form>
</div>
<!--wrap-action-->
<div class="wrap-gallery flex column">
<h3><span>Learn about</span> good usability practices and current design patterns.</h3>
<!--<img src="http://i1194.photobucket.com/albums/aa363/gebrut/idea056_zpsahkxfj9y.png">-->
<span><img src="images/idea056.png">
<h2>Like <span>Attention Grabs</span></h2>
</span>
<!--<img src="http://i1194.photobucket.com/albums/aa363/gebrut/idea007_zpsmz8kqcqg.png">-->
<span><img src="images/idea007.png">
<h2>Or <span>Recommendations</span></h2>
</span>
<!--<img src="http://i1194.photobucket.com/albums/aa363/gebrut/idea031_zps1jrtfui2.png">-->
<span><img src="images/idea031.png">
<h2>And <span>Visual Hierarchy</span></h2>
</span>
</div>
<!--wrap-gallery-->
<div class="wrap-projects flex column">
<h2>Discover and create amazing projects</h2>
<div class="flex row wrap"><img class="one" src="images/ui-amazon.png"> <img class="two" src="images/ui-paypal.png"> <img class="three" src="images/ui-twitch.png"> <img class="four" src="images/ui-devroots.png"> <img class="five" src="images/ui-gitter.png"> <img class="six"
src="images/ui-layout.png"> <img class="seven" src="images/ui-clients.png"> <img class="eight" src="images/ui-mastercard.png"> <img class="nine" src="images/ui-yahoo.png"></div>
</div>
<!--wrap-projects-->
<div class="wrap-guide flex column">
<h2>Here's how</h2>
<div class="flex row primary wrap">
<div class="secondary flex column">
<span class="figure-1"><i class="ion-email-unread"></i></span>
<div class="email">
<p>A good User Interface has high conversion rates and is easy to use. Receive regular email updates with solid UI advice and learn why some UI ideas are better than others. Learn about reliable and interesting User Interfaces on
<a href="https://goodui.org">Goodui.org</a></p>
</div>
</div>
<!--closing-->
<div class="secondary flex column">
<span class="figure-2">x <span>#goodUI</span></span>
<!--<p class="how-tag"><span class="how-column flex column figure-2"><span>x</span> <span class="tag">#goodUI</span></span></p>-->
<div class="codepen">
<p>Design your project on <a href="https://codepen.io">Codepen.io</a> the online editor and Frontend developer playground. When you complete your UI design, tag each codepen with "#goodui" so that the design is indexed and can be
easily searched.</p>
</div>
</div>
<!--closing-->
<div class="secondary flex column">
<span class="figure-3">OPEN CHAT</span>
<!--<p class="how-border"><span class="how-column flex column figure-3"><span>OPEN CHAT</span></span></p>-->
<div class="chatroom">
<p>Share your work in our <a href="https://gitter.im/goodUI/Lobby">community chatroom</a> and meet other UI designers. Get quick and honest feedback or assistance with all of your designs.</p>
</div>
</div>
<!--closing-->
</div>
<!--primary-->
</div>
<!--wrap-guide-->
<div class="wrap-customers flex column">
<h2>What web designers are saying about their time on UI Camp:</h2>
<div class="primary flex row wrap">
<div class="secondary flex row">
<img src="images/tommy-80.jpg">
<div class="text flex column">
<h3>Tommy Gebru</h3>
<h4>Front End Developer</h4>
<h5>"Learning and applying User Interface design at a pace I can commit to is an awesome experience, thank you UI Camp!."</h5>
</div>
</div>
<!--wrap-->
<div class="secondary flex row">
<img src="images/celena-80.jpg">
<div class="text flex column">
<h3>Celena Jasmine</h3>
<h4>FAMTTM, UI Design Lead</h4>
<h5>"UI Camp challenges me to be a better designer and learn from insights based on active testing on goodui.org."</h5>
</div>
</div>
<!--wrap-->
<div class="secondary flex row">
<img src="images/tadlock-80.jpg">
<div class="text flex column">
<h3>JD Tadlock</h3>
<h4>GraceLife Church, UI/UX Designer</h4>
<h5>"UI Camp is a practical approach to learning User Interface foundations and a great way to get the creative juices flowing outside of the workplace!"</h5>
</div>
</div>
<!--wrap-->
<div class="secondary flex row">
<img src="images/manuel-80.jpg">
<div class="text flex column">
<h3>Manuel Quintanilla</h3>
<h4>Freelance UI Designer</h4>
<h5>"The challenges on goodUI.org are simple to understand and quick to implement, I enjoy rapidly prototyping new concepts and getting feedback."</h5>
</div>
</div>
<!--wrap-->
</div>
<!--primary-->
</div>
<!--wrap-customers-->
<div class="wrap-action2 flex column">
<h2>Better begins today.</h2><span></span>
<form>
<span><input name="mail" placeholder="Email address" type="email"> <input type="submit" value="Join Today"></span>
</form>
<h3><span>Join our community of talented web designers and creatives.</span></h3>
</div>
<!--wrap-action2-->
<footer class="flex row wrap">
<!--style="justify-content:flex-start; align-items:flex-end;"-->
<div class="fixed-logo">
<h1>UI Camp</h1>
<h3>All Rights Reserved</h3>
</div>
<div class="primary flex row wrap">
<div class="social-modules flex">
<div class="ion-social-facebook expand-icon flex"></div>
<div class="facebook expand-text flex">
Facebook
</div>
</div>
<div class="social-modules flex">
<div class="ion-social-twitter expand-icon flex"></div>
<div class="twitter expand-text flex">
Twitter
</div>
</div>
</div>
<!--primary-->
<div class="contribute">
<a href="https://github.com/tommygebru/ui-camp"><span>+</span> Contribute</a>
</div>
<!--contribute-->
<!--<div class="secondary flex row wrap" style="display:none;">
<div class="social-modules flex">
<div class="ion-social-facebook expand-icon flex"></div>
<div class="facebook expand-text flex">
Facebook
</div>
</div>
<div class="social-modules flex">
<div class="ion-social-twitter expand-icon flex"></div>
<div class="twitter expand-text flex">
Twitter
</div>
</div>
</div>-->
<!--secondary-->
<!--<div class="contribute" style="display:none;">
<span>+</span> Contribute
</div>-->
<!--contribute-->
</footer>
</div>
<!--container-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>
<script src="js/index.js">
</script>
<script>
((window.gitter = {}).chat = {}).options = {
room: 'goodUI/lobby'
};
</script>
<script async defer src="https://sidecar.gitter.im/dist/sidecar.v1.js">
</script>
</body>
</html>