-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmain2.html
More file actions
233 lines (198 loc) · 11.6 KB
/
main2.html
File metadata and controls
233 lines (198 loc) · 11.6 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
<!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/main2.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>
</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">What's This</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#feature">Just Play</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#price">How much</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>
</span><br>
</h1>
<h2 id="h2title" class=" bitter nowrap ">Collecting 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 id="description" class="col-10">
<h2 id="DescriptionTitle" class="display-4 .navbar-offset">Description</h2>
<p class="bitter">
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>
<h4 class="nowrap">
<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 class="white">!</span>
</h4>
<p class="bitter">
Enjoy it, and rediscover this colorful world!
</p>
</section>
<section>
<h2 id="feature" class="navbar-offset display-4">How to play?</h2>
<div id="howtouse">
<div class="block1 row justify-content-center align-items-center">
<div class="col-12 col-sm-6">
<img class="img-fluid" src="images/ui_v1.png">
</div>
<div class="subblock col-12 col-sm-6 ">
<p>
<i class="subtitle">First :</i><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-6">
<img class="img-fluid" src="images/ui_v2.png">
</div>
<div class="subblock col-12 col-sm-6 ">
<p>
<i class="subtitle">Next :</i><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-6">
<img class="img-fluid" src="images/ui_v3.png">
</div>
<div class="subblock col-12 col-sm-6">
<p>
<i class="subtitle">Then :</i><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-6">
<img class="img-fluid" src="images/ui_v4.png">
</div>
<p class="subblock col-12 col-sm-6 ">
<i class="subtitle">Finally :</i><br>Now, you can share with your friends and see what pictures they've taken for the same color.
</p>
</div>
</div>
</section>
<section>
<h2 id="price" class="navbar-offset display-4">This is a free app!</h2>
<p class="lead"><strong id="priceb">It's totally free!</strong><br>This app is totally free! While still under development, we appreciate all kinds of feedback. Click the button below, and let us know how do you think about this app. Also, we'll
keep you updated about our app release.
<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> Notify Me When Available</a>
</div>
</p>
</section>
<br><br><br>
</div>
</div>
</div>
</div>
<footer id="footer" class=".navbar-offset ">
<p class="text-center">We wish you a colorful life!</p>
<br><br>
<!-- group members -->
<div class="row justify-content-center align-items-center">
<div class="card-group row justify-content-center align-items-center">
<div class="card">
<img class="img-fluid card-img-top" src="images/lee.jpg">
<div class="card-block">
<h4 class="card-title">Chun-Yi Lee</h4>
<p class="card-text">I am a computer science student in NTHU.My dream is to rotate this world with code.This app will give everyone a lot of happy!</p>
<p class="card-tag text-uppercase text-primary rotate-340"><span class="seal"> Member </span></p>
</div>
</div>
<div class="card">
<img class="img-fluid card-img-top" src="images/wang.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Chun-Kai Wang</h4>
<p class="card-text">You will be surprised by the plentiful colors around you!</p>
<p class="card-tag text-uppercase text-primary rotate-340"><span class="seal"> Member </span></p>
</div>
</div>
<div class="card">
<img class="img-fluid card-img-top" src="images/qiou.jpg" alt="Card image cap">
<div class="card-block">
<h4 class="card-title">Chun-Kai Chiu</h4>
<p class="card-text">Dancer<br>Engineer<br>Daydreamer</p>
<p class="card-tag text-uppercase text-primary rotate-340"><span class="seal"> Member </span></p>
</div>
</div>
</div>
</div>
</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>