-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
261 lines (261 loc) · 16.2 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
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Jumbotron Template for Bootstrap</title>
<!-- Bootstrap core CSS -->
<link href="bootstrap/css/bootstrap.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="jumbotron.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<link href="assets/bootstrap-material-design.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- Main jumbotron for a primary marketing message or call to action -->
<nav class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<img src="bxwlogo.png" />
</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li>
<a href="buildingbridges_connecttothem.html" class="shadow">CONNECT TO THEM</a>
</li>
<li>
<a href="buildingbridges_seetheirworld.html" class="shadow">SEE THEIR WORLD</a>
</li>
<li>
<a href="buildingbridges_questionyourviews.html" class="shadow">QUESTION YOUR VIEWS</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="#" class="shadow"><span class="glyphicon glyphicon-user"></span></a>
</li>
<li class="dropdown">
<ul class="dropdown-menu">
<li>
<a href="#">Action</a>
</li>
<li>
<a href="#">Another action</a>
</li>
<li>
<a href="#">Something else here</a>
</li>
<li class="divider"></li>
<li>
<a href="#">Separated link</a>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="jumbotron jumbotron_index">
<div class="container">
<h1 class="text-center">Build bridges, not walls.</h1>
<p class="text-center"><br></p>
<p class="text-center">Tools to connect you with your <b><i>society</i></b>, not just your social network.</p>
</div>
</div>
<div class="container">
<div class="row">
<h3>STARRED TOOLS</h3>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="panel panel-card">
<div class="panel-heading clearfix connect_bg">
<span class="panel-title"><h3 class="text-center">
Connect to <b>them</b></h3></span>
</div>
<div class="panel-body
panel400height">
<p><b>Do you understand "them" enough?</b>
We often go through life just accepting or tolerating "their" differences because we rarely have the courage, patience, or opportunity to ask them why those differences exist. Seek understanding instead, by asking "them" difficult questions and sharing your honest reflections.</p>
<img src="connect_people.gif" class="center-block" />
</div>
<div class="panel-footer text-center">
<a class="btn btn-flat" href="buildingbridges_connecttothem.html">COMING SOON (MOCKUP)</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="panel panel-card">
<div class="panel-heading clearfix see_bg">
<span class="panel-title"><h3 class="text-center">
See <b>their</b> world</h3></span>
</div>
<div class="panel-body panel400height">
<b>How does the internet shape "their" views?</b>
<p>
The world that we see is sometimes filtered through the lens of our internet search engines. Each of us gets different results when we search for key terms, depending on our backgrounds, views, and history. See how "they" see the world by comparing your search results against theirs for any phrase.</p>
<img src="searchresults.gif" width="100%" class="img-responsive" />
</div>
<div class="panel-footer text-center">
<a class="btn btn-flat" href="buildingbridges_seetheirworld.html">COMING SOON (MOCKUP)</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="panel">
<div class="panel-heading clearfix question_bg">
<span class="panel-title"><h3 class="text-center">
Question <b>your</b> views</h3></span>
</div>
<div class="panel-body panel400height">
<p><b>Are "your" views representative of society?</b> Your views are often reinforced by the people in your social circle and the news that is fed to you online, so you may find it hard to understand why "they" see the world differently. Question your perception of the world by taking our surveys, and comparing your results against the reality of the facts and figures.</p>
<img src="screenshot.png" width="100%" class="img-responsive" style="border:1px solid gray" />
</div>
<div class="panel-footer text-center">
<a class="btn btn-flat" href="buildingbridges_questionyourviews.html">PARTICIPATE</a>
</div>
</div>
</div>
</div>
<hr>
</div>
<div class="container">
<div class="row">
<h3>USER SUBMITTED SITES</h3>
<h5 style="display: inline-block"><span class="col-sm-9 "> Sort by: <a href="#">Most loved</a> | <a href="#">Most recent</a> | <a href="#">Trending</a> | Region: </span><div class=" form-inline col-sm-3">
<select class="form-control input-sm">
<option>Singapore</option>
<option>USA</option>
<option>International</option>
</select>
</div></h5>
<div class="form-group form-inline pull-right col-sm-4">
<input type="text" class="form-control form-inline input-sm pull-right" id="formInput608" placeholder="Search...">
</div>
</div>
<!-- Example row of columns -->
<div class="row">
<div class="col-xs-12 display-only-if-logged-in col-sm-6 col-md-4">
<div class="panel panel-card">
<div class="panel-heading clearfix submit-website-header">
<span class="panel-title text-danger"><h3 class="text-center">Submit a website</h3></span>
</div>
<div class="panel-body
submitpanelheight">
<p>Found a good website that can help people build bridges and break down walls? </p>
<form role="form">
<div class="form-group">
<input class="form-control" id="pageTitle" placeholder="Page Title">
<input class="form-control" id="URL" placeholder="Page URL">
<select class="form-control">
<option>Singapore</option>
<option>USA</option>
<option>UK</option>
<option>International</option>
<option>Asia</option>
<option>Europe</option>
</select>
<textarea class="form-control" placeholder="Describe the website briefly [use summernote.js minimalist interface for this textarea to allow basic markup]" rows="3"></textarea>
</div>
</form>
</div>
<span class="center-block text-center panel-bottom"><div>
<small class="text-muted"> </small>
</div> </span>
<div class="panel-footer text-center">
<button class="btn btn-flat btn-block" data-toggle="tooltip" title="Log in to Submit" data-placement="auto top" type="button">
<span class="glyphicon glyphicon-plus text-center text-danger"></span>
</button>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="panel panel-card">
<div class="panel-heading clearfix user-submitted-panel-header">
<span class="panel-title"><h3 class="text-center">
The perception gap</h3></span>
</div>
<div class="text-center">
<img src="guardian_thumb.jpeg" class="img-thumbnail" />
<small class="text-muted">26 Dec 2016 by username | International</small>
</div>
<div class="panel-body panel300height">
<p>How well do you know your country? Take our quiz!
Ipsos Mori surveyed people in 40 countries on issues ranging from attitudes to homosexuality to numbers of Muslims, and found the gulf between perception...</p>
</div>
<span class="center-block text-center panel-bottom"><span class="glyphicon glyphicon-heart text-warning"></span> 32 hearts | <span class="glyphicon text-danger glyphicon-pushpin"></span> 78 visits </span>
<div class="panel-footer text-center">
<a class="btn btn-flat" href="#">VISIT</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="panel">
<div class="panel-heading clearfix user-submitted-panel-header">
<span class="panel-title"><h3 class="text-center">
dialectic.sg</h3></span>
</div>
<div class="text-center">
<img src="dialectic_thumb.jpeg" class="img-thumbnail" />
<small class="text-muted">27 Dec 2016 by owner | Singapore</small>
</div>
<div class="panel-body panel300height">
<p>Better debates for a better Singapore. This website promotes respectful yet robust debates on important policy questions, with fact-based background briefs and balanced, troll-free commenting.</p>
</div>
<span class="center-block text-center panel-bottom"><span class="glyphicon text-danger glyphicon-heart-empty"></span> 31 hearts | <span class="glyphicon text-danger glyphicon-pushpin"></span> 121 visits </span>
<div class="panel-footer text-center">
<a class="btn btn-flat" href="#">VISIT</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<div class="panel">
<div class="panel-heading clearfix user-submitted-panel-header">
<span class="panel-title"><h3 class="text-center">
Civil Comments</h3></span>
</div>
<div class="text-center">
<img src="civil_thumb.jpeg" class="img-thumbnail" />
<small class="text-muted">26 Dec 2016 by username | USA</small>
</div>
<div class="panel-body panel300height">
<p>This is a test of another user-submitted site.</p>
</div>
<span class="center-block text-center panel-bottom"><span class="glyphicon text-danger glyphicon-heart-empty"></span> 31 hearts | <span class="glyphicon text-danger glyphicon-pushpin"></span> 121 visits </span>
<div class="panel-footer text-center">
<a class="btn btn-flat" href="#">VISIT</a>
</div>
</div>
</div>
</div>
</div>
<hr>
<footer>
<p class="text-center">© Gaurav Keerthi 2016</p>
</footer>
<!-- /container -->
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="assets/js/jquery.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="assets/js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>