-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathmain.html
More file actions
212 lines (183 loc) · 10.9 KB
/
main.html
File metadata and controls
212 lines (183 loc) · 10.9 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
<!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">
<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">
<link rel="stylesheet" href="styles/main.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="#How">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>
<header id="banner">
<div id="banner-fg" class="d-flex flex-column justify-content-between">
<div></div>
<div>
<h1 class="display-4 banner-text 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="lead banner-text 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 class="banner-text">
<i class="fa fa-chevron-down" aria-hidden="true"></i>
</h2>
</div>
</header>
<div id="con">
<div class="row justify-content-center" id="allcontent">
<div class="row justify-content-center" id = "inallcontent">
<div class="col col-lg-8">
<section>
<h2 id="How" class="display-4 navbar-offset">Description</h2>
<p class="lead">
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="lead">
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="row justify-content-center align-items-center">
<p class="col-12 col-sm-6 col-md-7">
<i class="subtitle">First :</i><br><br>A "color-collecting" mission will be assigned to you.<br><br>
</p>
<div class="pic col-12 col-sm-6 col-md-5">
<img class="img-fluid" src="images/ui_v1.png">
</div>
</div>
<div class="row flex-sm-row-reverse justify-content-center align-items-center">
<p class="col-12 col-sm-6 col-md-7">
<i class="subtitle">Next :</i><br><br>Look around, and see if you could find anything with the same color as the target.<br><br>
</p>
<div class="col-12 col-sm-6 col-md-5">
<img class="img-fluid" src="images/ui_v2.png">
</div>
</div>
<div class="row justify-content-center align-items-center">
<p class="col-12 col-sm-6 col-md-7">
<i class="subtitle">Finally :</i><br><br>Take a picture, and the app will let you know how close you match the color.<br>
<br><br>
</p>
<div class="col-12 col-sm-6 col-md-5">
<img class="img-fluid" src="images/ui_v3.png">
</div>
</div>
<div class="row flex-sm-row-reverse justify-content-center align-items-center">
<p class="col-12 col-sm-6 col-md-7">
<i class="subtitle">Mission Accomplished! </i><br><br>Now, you can share with your friends and see what pictures they've taken for the same color.<br><br>
</p>
<div class="col-12 col-sm-6 col-md-5">
<img class="img-fluid" src="images/ui_v4.png">
</div>
</div>
</div>
</section>
<section>
<h2 id="price" class="navbar-offset display-4">This is a free app!</h2>
<p class=l ead><strong id="priceb">It's totally free!</strong><br>Our goal is to bring the colorful world back to your life. 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.
<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>
</p>
<div class="card-group">
<div class="card hidden-sm-down">
<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 mx-2"><span class="seal"> Member </span></p>
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
<footer id="footer" class=".navbar-offset">
<section>
<h2 class="text-center"></h2>
</section>
<p class="text-center">We wish you a colorful life!</p>
</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>