-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbuildingbridges_connecttothem.html
243 lines (243 loc) · 14.3 KB
/
buildingbridges_connecttothem.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
<!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 class="active">
<a class="shadow">CONNECT TO THEM</a>
</li>
<li>
<a href="#" class="shadow">SEE THEIR WORLD</a>
</li>
<li>
<a href="#" 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_seetheirworld">
<div class="container">
<h1 class="text-center">Connect to <i>them</i></h1>
<p class="text-center">Ask and answer difficult, awkward, and tough questions to get to know each other a little better. </p>
</div>
</div>
<div class="container">
<div class="row">
<div class="container">
<h3>ASK A QUESTION</h3>
<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.<br></p>
</div>
</div>
<div class="row">
<div class="container">
<div class="col-md-4">
<h3>The Awkward Silence</h3>
<p>Societies are increasingly multicultural, but instead of building bridges through communication to help us understand the complexities, people are building walls around themselves. Silence is preferable to trying to understand the noise.</p>
</div>
<div class="col-md-4">
<h3>The Growing Divide</h3>
<p>
If we only seek to tolerate them, we will have a fragile peace, and any misunderstanding can quickly become a conflict. The divide will grow, and walls will harden. If instead we seek understanding, we may have a little friction at the start, but over time, we will build bridges that can allow us to clarify miscommunications instead of escalating tensions. </p>
</div>
<div class="col-md-4">
<h3>Respect, not Tolerance</h3>
<p>
The goal should be for us to move past just tolerance, and instead seek true respect through a better understanding. And that may require us to overcome our ignorance and ask difficult, awkward, and tough questions of the other - and to answer those questions, when we are the other.</p>
<a href="filterbubble2_screen.png"></a>
</div>
</div>
</div>
<!-- Example row of columns -->
</div>
<hr>
<div class="container">
<div class="row">
<div class="container">
<h3>CONNECTING QUESTIONS</h3>
<h5>Sort by: <a href="#">Most loved</a> | <a href="#">Most recent</a> | <a href="#">Trending</a><div class="form-group pull-right col-sm-4">
<input type="text" class="form-control" id="formInput608" placeholder="Search...">
</div></h5>
</div>
</div>
<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 question</h3></span>
</div>
<div class="panel-body
">
<form role="form">
<div class="form-group">
I am a:
<input class="form-control " id="from" placeholder="my identity">
I want to understand these people better:
<input class="form-control " id="from" placeholder="their identity">
and my question for them is:
<input class="form-control " id="from" placeholder="Why / What / How...?">
I am from:
<input class="form-control " id="from" placeholder="Region">
<input class="control-label" type="checkbox" value="anonymous"> Submit Anonymously
</div>
</form>
</div>
<div class="panel-footer text-center submit-website-header">
<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 text-primary">
<small>Pending Moderation:</small>
<h4>Why do south Indian men hold hands in public?</h4>
</div>
<div class="panel-body">
<div class="text-center">
<small class="text-muted">26 Dec 2016 </small>
</div>
<h4>From: Chinese <br>
To: Indian</h4>
<p></p>
<div>
</div>
</div>
<div class="panel-footer text-center">Others would find this question:
<br>
<button type="button" class="btn btn-raised btn-primary btn-sm">Respectful</button>
<button type="button" class="btn btn-flat btn-raised btn-sm btn-danger">RUDE</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">
<h4>Why do so many young Muslims believe in ISIS propoganda?</h4>
</div>
<div class="panel-body panel250height">
<div class="text-center">
<small class="text-muted">26 Dec 2016 by username</small>
</div>
<h4>From a Jew <br>
To a Muslim </h4>
<p><b>Top Answer:</b> There are three main reasons why I think they join. Firstly, globalisation has hurt the working class in industrial areas, so many young Muslims are economically affected by the ... [see rest]</p>
</div>
<span class="center-block text-center panel-bottom"><span class="glyphicon glyphicon-heart text-warning"></span> 32 hearts | <span class="glyphicon glyphicon-comment text-info"></span> 3 comments </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 panel-card">
<div class="panel-heading clearfix user-submitted-panel-header">
<h4> Isn't gay sex unnatural and unhygienic? </h4>
</div>
<div class="panel-body panel250height">
<div class="text-center">
<small class="text-muted">26 Dec 2016 by username </small>
</div>
<h4>
From: Straight <br>
To: Gay </h4>
<p><b>Top Answer:</b> This is a common concern but blah blah lorem ipsum blah blah lorem ipsumblah blah lorem ipsumblah blah lorem ipsumblah blah lorem ipsum ... [see rest]</p>
</div>
<span class="center-block text-center panel-bottom"><span class="glyphicon glyphicon-heart text-warning"></span> 32 hearts | <span class="glyphicon glyphicon-comment text-info"></span> 3 comments </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 panel-card">
<div class="panel-heading clearfix user-submitted-panel-header">
<h4>What do south Indian men hold hands in public?</h4>
</div>
<div class="panel-body panel250height">
<div class="text-center">
<small class="text-muted">26 Dec 2016 by Anonymous </small>
</div>
<h4> From: Chinese <br>
To: Indian </h4>
<p><b>No Answers Yet</b></p>
</div>
<span class="center-block text-center panel-bottom"><span class="glyphicon text-warning glyphicon-heart-empty"></span> No hearts | <span class="glyphicon glyphicon-comment text-danger"></span> No comments </span>
<div class="panel-footer text-center">
<a class="btn btn-flat" href="#">VISIT</a>
</div>
</div>
</div>
</div>
<!-- Example row of columns -->
</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>