-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmain0.html
More file actions
238 lines (196 loc) · 10.7 KB
/
main0.html
File metadata and controls
238 lines (196 loc) · 10.7 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap CSS -->
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<!-- fontawsome -->
<link rel="stylesheet" href="https://opensource.keycdn.com/fontawesome/4.7.0/font-awesome.min.css" integrity="sha384-dNpIIXE8U05kAbPhy3G1cz+yZmTzA6CY8Vg/u2L9xRnHjJiAK76m2BIEaSEV+/aU" crossorigin="anonymous">
<link href="https://fonts.googleapis.com/css?family=Baloo+Bhaina|Bitter|Clicker+Script|Lobster" rel="stylesheet">
<!-- customized css file -->
<link rel="stylesheet" href="styles/main0.css">
<title>Let's Color!</title>
</head>
<body data-spy="scroll" data-target="#nav">
<nav class="navbar fixed-top navbar-toggleable navbar-inverse bg-inverse">
<!-- navbar toggler button -->
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- logo -->
<a href="#" class="navbar-brand md-0">
<span class="logo-first">Let's</span>
<span class="logo-last">
<span class="blue">C</span>
<span class="green">O</span>
<span class="yellow">L</span>
<span class="red">O</span>
<span class="purple">R</span>
<span>!</span>
<!-- <span class="logo-first"> Finder</span> -->
</span>
</a>
<div class="collapse navbar-collapse" id="navbarNav">
<ul id="nav" class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="#con">Why</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#feature">Game</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#price">It's Free!</a>
</li>
</ul>
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#footer">About</a>
</li>
</ul>
</div>
</nav>
<!-- frontpage content -->
<header id="banner">
<div id="banner-fg" class="d-flex flex-column justify-content-between banner-text ">
<div></div>
<div>
<h1 class="display-4 nowrap">
Let's
<span class="logo-last">
<span class="blue">C</span>
<span class="green">O</span>
<span class="yellow">L</span>
<span class="red">O</span>
<span class="purple">R</span>
<span class="white">!</span>
<!-- Finder -->
</span><br>
</h1>
<h2 id="h2title" class=" bitter nowrap ">Finding colors around you</h2>
<br><br><br>
<a class="btn btn-warning btn-md" href="https://docs.google.com/forms/d/e/1FAIpQLSdCA-SDTNotnH_11vbEfPf_6PL3T8mDz-7xB6v4y4i0qEK2mA/viewform?usp=sf_link"><i class="fa fa-check-square-o" aria-hidden="true"></i> Notify Me When Available</a>
</div>
<h2>
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</h2>
</div>
</header>
<!-- header end -->
<!-- content begin -->
<div id="con">
<div class="row justify-content-center" id="allcontent">
<div class="row justify-content-center" id="inallcontent">
<div class="col col-lg-10">
<section class="d-flex flex-column justify-content-between">
<br><br>
<div class="title2">
<h2 id="DescriptionTitle" class="display-4 .navbar-offset">Description</h2>
</div>
<div class="description">
<p>
Do you know how many colors have you seen everyday?
<br>In our busy life, we tend to ignore the colorful world around us. <br> That's why we create
</p>
</div>
<!-- <br> -->
<p class="nowrap logo-last h4">
<span class="logo-first h4">Let's</span>
<span class="blue h4">C</span>
<span class="green h4">O</span>
<span class="yellow h4">L</span>
<span class="red h4">O</span>
<span class="purple h4">R</span>
<span class="white logo-last h4">!</span>
<!-- <span class="logo-first h4">Finder</span> -->
</p>
<p class="description">
<!-- <br> -->
Enjoy it, and rediscover this colorful world!
</p>
<br><br><br><br><br><br><br>
</section>
<!-- feature -->
<section>
<div>
<h2 id="feature" class="navbar-offset display-4">How to play?</h2>
</div>
<div id="howtouse">
<div class="block1 row justify-content-center align-items-center">
<div class="col-12 col-sm-5">
<img class="img-fluid" src="images/ui_v1.png">
</div>
<div class="subblock col-12 col-sm-4 ">
<p>
<h4 class="subtitle">First :</h4><br>A target color will be assigned to you.
</p>
</div>
</div>
<div class="block1 row flex-sm-row-reverse justify-content-center align-items-center">
<div class="col-12 col-sm-5">
<img class="img-fluid" src="images/ui_v2.png">
</div>
<div class="subblock col-12 col-sm-4">
<p>
<h4 class="subtitle">Next :</h4><br>Look around, and see if you could find anything with the same color as the target.
</p>
</div>
</div>
<div class="block1 row justify-content-center align-items-center">
<div class="col-12 col-sm-5">
<img class="img-fluid" src="images/ui_v3.png">
</div>
<div class="subblock col-12 col-sm-4">
<p>
<h4 class="subtitle">Then :</h4><br>Take a picture, and the app will let you know how close you match the color.
</p>
</div>
</div>
<div class="block1 row flex-sm-row-reverse justify-content-center align-items-center">
<div class="col-12 col-sm-5">
<img class="img-fluid" src="images/ui_v4.png">
</div>
<div class="subblock col-12 col-sm-4 ">
<p>
<h4 class="subtitle">Finally :</h4><br>Now, you can share with your friends and see what pictures they've taken for the same color.
</p>
</div>
</div>
</div>
</section>
<section>
<div class="title2">
<h2 id="price" class="navbar-offset display-4">It's Free!</h2>
</div>
<div class="row justify-content-center">
<div class="col col-lg-7">
<br><br>
<div class="description">
<p>This app is totally free!<br>Please click the button below, and let us know how do you think about this app.
</p>
</div>
<br><br>
</div>
</div>
<br><br>
<div class="">
<a class="btn btn-warning btn-md" href="https://docs.google.com/forms/d/e/1FAIpQLSdCA-SDTNotnH_11vbEfPf_6PL3T8mDz-7xB6v4y4i0qEK2mA/viewform?usp=sf_link"><i class="fa fa-check-square-o" aria-hidden="true"></i> I think It's Interesting</a>
</div>
</section>
<br><br><br>
</div>
</div>
</div>
</div>
<footer id="footer" class=".navbar-offset ">
<h4 class="text-center">We wish you a colorful life!</h4>
<br><br>
</footer>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html>