-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
executable file
·322 lines (290 loc) · 17.5 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
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" ng-app> <!--<![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Elos Paraisopolis</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<meta http-equiv="pragma" content="no-cache">
<meta name="description" content="elosparaisopolis.com.br - Site sobre projeto desenvolvido para o mutualismo entre a comunidade Paraisopolis e bairro do Morumbi">
<meta name="keywords" content="elosparaisopolis, elos, comunidade paraisopolis, bairro morumbi, saso paulo, brasil">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-responsive.min.css">
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/reveal.css">
<link rel="stylesheet" href="css/fonts/proximanova-fonts.css">
<script src="js/vendor/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body onload="initialize()">
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">activate Google Chrome Frame</a> to improve your experience.</p>
<![endif]-->
<header class="navbar navbar-fixed-top">
<div class="container">
<div class="logo-text">
<h1 class="ir logo animated">Projeto Elos</h1>
<h3 class="ir">PARAISÓPOLIS</h3>
</div>
<nav class="pull-right">
<ul>
<li><a href="#aboutp" >SOBRE</a></li>
<li><a href="#howitworks" >COMO FUNCIONA</a></li>
<li><a href="#map" >MAPA DA REGIÃO</a></li>
<li><a href="#pics" >MOSTRE A SUA REALIDADE</a></li>
<li><a href="#whoa" >QUEM SOMOS</a></li>
</ul>
</nav>
</div>
</header>
<div class="video" id="video">
<i class="play animated flipInX"></i>
</div>
<div class="container" id="aboutp">
<section class="about" >
<h2 class="title">SOBRE O ELOS</h2>
<h3 class="quote">“Colabore, incentive e dê visibilidade ao seu projeto na comunidade de Paraisópolis!”</h3>
</section>
<section class="how" id="howitworks">
<h2 class="title">COMO FUNCIONA</h2>
<div class="row">
<div class="box span4">
<div class="head picon">
<a href="#">
<i class="iconproject"></i>
</a>
</div>
<div class="txt">
<p>Quero enviar a ideia de um projeto para a organização de moradores de Paraisópolis.</p>
<a href="#" class="btnelo" data-reveal-id="myModal">Tenho um projeto</a>
</div>
</div>
<div class="box span4">
<div class="head iicon">
<a href="#">
<i class="iconidea"></i>
</a>
</div>
<div class="txt">
<p>Quero apoiar financeiramente ou participar de um projeto.</p>
<a href="#" class="btnelo" data-reveal-id="myModal2">Quero incentivar</a>
</div>
</div>
<div class="box span4">
<div class="head sicon">
<a href="#">
<i class="iconshare"></i>
</a>
</div>
<div class="txt">
<p>Quero divulgar um projeto na comunidade de Paraisópolis.</p>
<a href="#" class="btnelo" data-reveal-id="myModal3">Quero compartilhar</a>
</div>
</div>
</div>
</section>
<section class="livemap" id="map">
<h2 class="title">MAPA DA REGIÃO</h2>
<div id="map_canvas"></div>
<div class="row">
<input type="search" class="span12 searchinput" placeholder="ENCONTRE PROJETOS..." ng-model="searchText">
</div>
</section>
<section class="projects">
<div class="comments-wrapper" ng-controller="ProjectsController">
<div id="myModal" class="reveal-modal medium">
<div class="signinbar">
<h1 class="signintitle">Adicionar projeto</h1>
</div>
<div class="signinmodalwrap">
<form class="form-inline" name="formItem">
<h5 class="signinsubtitle">Cadastre o seu projeto para fazer parte e conribuir para o crescimento da comunidade.</h5>
<input type="text" placeholder="Nome do projeto" ng-model="project.nome" class="span6">
<input type="text" placeholder="Responsável" ng-model="project.author" class="span6">
<input type="text" placeholder="Contato" ng-model="project.contact" class="span6">
<textarea type="text" placeholder="Descrição" ng-model="project.desc" class="span6"></textarea>
<button tabindex="3" class="btn btn-success btn-large" ng-click="adicionaItem()">Adicionar</button>
</form>
</div>
<a class="close-reveal-modal">×</a>
</div>
<div id="myModal2" class="reveal-modal medium">
<div class="signinbar">
<h1 class="signintitle">Incentivar projeto</h1>
</div>
<div class="signinmodalwrap">
<form class="form-inline" name="formItem">
<h5 class="signinsubtitle">INcentive um projeto e faça parte do crescimento da comunidade.</h5>
<input type="text" placeholder="Nome" ng-model="parceiro.nome" class="span6">
<input type="text" placeholder="Telefone" ng-model="parceiro.author" class="span6">
<input type="text" placeholder="E-mail" ng-model="parceiro.contact" class="span6">
<div class="span2 masthead-links">
<label class="radio">
<input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>
Financiar
</label>
<label class="radio pull-right">
<input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
Participar
</label>
</div>
<button tabindex="3" class="btn btn-success btn-large" ng-click="adicionaItem()">Adicionar</button>
</form>
</div>
<a class="close-reveal-modal">×</a>
</div>
<div id="myModal3" class="reveal-modal medium">
<div class="signinbar">
<h1 class="signintitle">Compartilhar projeto</h1>
</div>
<div class="signinmodalwrap">
<form class="form-inline">
<a class="btn btn-facebook" href="">Facebook</a>
<a class="btn btn-twitter" href="">Twitter</a>
<a class="btn btn-google-plus" href="">Google+</a>
<a class="btn btn-instagram" href="">E-mail</a>
</form>
</div>
<a class="close-reveal-modal">×</a>
</div>
<div class="row">
<div class="projectbox span3" ng-repeat="project in projects | filter:searchText">
<div class="phead">
<img src="img/orquestra_600_300.jpg" alt="Orquestra de Paraisópolis">
</div>
<div class="pcontent">
<h4 class="ptitle">{{ project.nome }}</h4>
<p>{{ project.desc }}</p>
<div class="sharebar">
<div class="sharebar">
<figure class="kudo kudoable" data-id="1">
<a class="kudobject">
<div class="opening">
<div class="circle"> </div>
</div>
</a>
<a href="#kudo" class="count">
<span class="num">45</span>
<span class="txt">Elos</span>
</a>
</figure>
</div>
<a href="#" class="btnelo" data-reveal-id="projectModal">ENTRAR EM CONTATO</a>
</div>
<div id="projectModal" class="reveal-modal medium">
<div class="signinbar">
<h4 class="signintitle">{{ project.nome }}</h4>
</div>
<div class="signinmodalwrap">
<div class="phead">
<img src="img/orquestra_600_300.jpg" alt="Orquestra de Paraisópolis">
</div>
<p>Para incentivar ou ajudar esse projeto a crescer, entre em contato</p>
<p class="author">Responsável: {{ project.author }}</p>
<p>{{ project.contact }}</p>
</div>
<a class="close-reveal-modal">×</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="insta" id="pics">
<h2 class="title">MOSTRE A SUA REALIDADE </h2>
<p class="subtitle">Utilize a hashtag #elosparaisopolis para postar as fotos dos projetos que você participa ou visitou.</p>
<hr>
<div id="instafeed"></div>
</section>
<section class="aboutw" id="whoa">
<div class="row">
<div class="who span7">
<h2 class="title">QUEM SOMOS</h2>
<div class="whopic">
<div class="overlay"></div>
<div class="sharelinks">
<ul>
<li><a href="#" class="ficon"></a></li>
<li><a href="#" class="gicon"></a></li>
<li><a href="#" class="instagramicon"></a></li>
<li><a href="#" class="ticon"></a></li>
</ul>
</div>
<img src="img/bpic_222_222.jpg" alt="Bruno Flora">
<h4>BRUNO FLORA</h4>
</div>
<div class="whopic">
<div class="overlay"></div>
<div class="sharelinks">
<ul>
<li><a href="#" class="ficon"></a></li>
<li><a href="#" class="gicon"></a></li>
<li><a href="#" class="instagramicon"></a></li>
<li><a href="#" class="ticon"></a></li>
</ul>
</div>
<img src="img/jpic_222_222.jpg" alt="Junior Magalhães">
<h4>JUNIOR MAGALHÃES</h4>
</div>
<div class="whopic">
<div class="overlay"></div>
<div class="sharelinks">
<ul>
<li><a href="#" class="ficon"></a></li>
<li><a href="#" class="gicon"></a></li>
<li><a href="#" class="instagramicon"></a></li>
<li><a href="#" class="ticon"></a></li>
</ul>
</div>
<img src="img/zpic_222_222.jpg" alt="José Carlos">
<h4>JOSÉ CARLOS</h4>
</div>
</div>
<div class="aboutw span5">
<h2 class="title">IDEALIZAÇÃO</h2>
<p>Através de pesquisas realizadas na região, nós, estudantes do curso de Bacharelado em Design Digital do Centro Universitário Senac, São Paulo, dentro do Projeto Informar, criamos o projeto Elos.</p>
<p>Este, nasceu com o intuito de colaborar com a comunidade de Paraisópolis na divulgação e incentivo aos projetos sociais desenvolvidos pelas instituições dentro da comunidade, dando visibilidade e possibilidade de buscar parceiros e colaboradores, gerando um ciclo colaborativo entre a comunidade, os bairros vizinhos e a cidade como um todo.</p>
<p><b>APOIO</b></p>
<p>Agradecemos o apoio dos professores de projeto do Centro Universitário Senac - Beatriz Pacheco, Eduardo Braga e demais mestres do curso de Design Digital e também do vice-presidente da União dos Moradores e do Comércio de Paraisópolis, Joildo Santos.</p>
</div>
</div>
</section>
<hr>
<div class="apoio-elos">
<h2 class="title">REALIZAÇÃO E APOIO</h2>
<ul class="unstyled">
<li><img src="img/apoio.png" alt=""></li>
</ul>
</div>
<hr>
<footer>
<p class="text-center">© Copyleft - Léxico 2013</p>
</footer>
<div class="jumbotron">
<!-- <img src="img/chardin.png" data-intro="An awesome 18th-century painter, who found beauty in everyday, common things." data-position="right"/> -->
<a href="#" class="btn btn-large primary" data-toggle="chardinjs" data-intro="This button toggles the overlay, you can click it, even when the overlay is visible" data-position="left">See it in action</a>
</div>
</div> <!-- /container -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.9.1.min.js"><\/script>')</script>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=true®ion=BR"></script>
<script src="js/vendor/bootstrap.min.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<script src="js/jquery.reveal.js" type="text/javascript"></script>
<script>
var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>