-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
221 lines (203 loc) · 9.68 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<title>Code for Curitiba - Uma Brigada do Code for Brazil</title>
<meta name="description" content="Code for Curitiba - Hackativismo" />
<meta name="keywords" content="hackativismo, inovacao, civico, tecnologia, comunidade, desenvolvimento, hack" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CDN -->
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> -->
<!-- Bootstrap local (caso você fique offline) -->
<link rel="stylesheet" href="css/bootstrap-4.1.3.min.css">
<link href="css/main.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Sans:400,700">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Droid+Serif">
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Boogaloo">
</head>
<body id="top">
<a class="sr-only sr-only-focusable" href="#main-content">Pular para o conteúdo principal</a>
<a class="sr-only sr-only-focusable" href="#main-menu">Pular para o menu</a>
<nav class="navbar navbar-light navbar-expand-md p-0 bg-white border-bottom">
<div class="container d-md-flex">
<a class="navbar-brand flex-grow-1" href="#">
<img src="img/logos/code-100x48.png" width="100" height="48" alt="Code Logo">
<span class="sr-only">Logo do Code for Curitiba</span>
</a>
<!-- Bottão de alternar o menu (aparece apenas no mobile) -->
<button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target="#collapsingNavbar3">
<span class="navbar-toggler-icon"></span>
</button>
<div id="main-menu" class="collapse navbar-collapse justify-content-md-end">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#top">Início <span class="sr-only">(página atual)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#sobre">Sobre</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#participe">Participe</a>
</li>
</ul>
</div>
</div>
</nav>
<main id="main-content">
<section class="container">
<div class="row">
<div class="col-lg-12 text-center">
<img class="img-fluid" aria-hidden="true" src="img/bg_hero-960x471.jpg" alt="image de fundo do code for curtiba">
<div class="call-to-action">
<a href="#saiba-mais" class="btn btn-outline-primary">Saiba Mais</a>
</div>
</div>
</div>
</section>
<section id="sobre">
<div class="container my-5">
<div class="row">
<div class="col-md-7 text-right">
<h1 class="display-1 text-primary ff-boogalo">Hackers<br>do <span class="text-secondary">bem</span></h1>
<div class="row">
<div class="col-6">
<figure>
<img class="img-fluid" src="img/HANDS.jpg" width="200" alt="Mão no teclado">
<figcaption class="ff-boogalo">Empoderamento do Cidadão</figcaption>
</figure>
</div>
<div class="col-6">
<figure>
<img class="img-fluid" src="img/BUS.jpg" width="200" alt="Onibus Curitiba">
<figcaption class="ff-boogalo">Inovação Cívica</figcaption>
</figure>
</div>
</div>
</div>
<div class="col-md-5 ff-droid">
<p>
O Code for America nasceu como uma rede de pessoas que aliam o melhor da tecnologia e do design para melhorar serviços prestados
pelo governo.
</p>
<p>
O Code for Curitiba, seguindo a iniciativa norteamericana, acredita que uma democracia saudável é aquela em que o governo
e as pessoas se juntam para melhorar sua comunidade.
</p>
<p>
Somos cidadãos apaixonados e competentes que trabalham com o governo para desenvolver soluções baseadas na tecnologia que
resolvem problemas cívicos. Através do nosso trabalho, acreditamos que podemos promover a colaboração e transparência,
acelerar o crescimento econômico e reanimar a cidadania.
</p>
<p>
Já imaginou uma situação na qual desenvolvedores, designers e outros profissionais trabalham para tornar serviços públicos
mais simples, fáceis e acessíveis? Isso é o Code for Curitiba, ator local de inovação cívica aberta.
</p>
</div>
</div>
</div>
</section>
<section id="nuvem-de-tags" class="bg-primary text-white">
<div class="container py-5">
<div class="row">
<div class="col-sm-8">
<p class="text-right lh-2">
Em um ambiente colaborativo, mentes avidas por trocar ideias e fazer a diferença <br /> você irá encontrar
os Hacker Ativistas mais irados da cidade, <br/> prontos para ouvir seus problemas e suas ideias <br/> e trabalharem
junto com você para encontrar uma solução, <br /> opensource, tecnológica e prática, voltada para a comunidade
e todos os interessados.
</p>
</div>
<div class="col-sm-4">
<p class="h5 lh-2">
#civictech #inovation<br> #opengov #startups<br> #api #bigdata #coding<br> #safeplace #diversidade<br>
<br> #CodeForAmerica #OpenBrazil<br>
</p>
</div>
</div>
</div>
</section>
<!-- Section deixada em branco propositalmente -->
<section id="space" class="bg-secondary" aria-hidden="true">
<div class="container py-5">
<div class="row py-3">
<span> </span>
</div>
</div>
</section>
<section id="participe" class="container">
<div class="row mt-4">
<div class="col-12 text-center">
<h2 class="display-4"><span class="text-secondary">Participe</span><br><span class="text-primary">do code</span></h2>
</div>
</div>
<div class="row my-3">
<div class="col-md-4">
<div class="p-3">
<img class="img-fluid w-100 mb-2" src="img/slack-300x166.jpg" width="300" alt="logo do Slack app">
<p class="ff-droid text-justify">
Quer uma cidade com melhor serviços ao cidadão?
<br>Quer encontrar novas pessoas e fazer a diferença?
<br>Quer aprender novas coisas e interessar recrutadores?
<br>Entre na nossa plataforma de comunicação!
</p>
<p class="text-center">
<a href="https://codeforcuritiba-invite.herokuapp.com/" target="_blank" rel="noopener" class="btn btn-outline-primary rounded-0">PARTICIPAR
DO CODE</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="p-3">
<img class="img-fluid w-100 mb-2" src="img/meetup-300x166.png" width="300" alt="meetup">
<p class="ff-droid text-justify">
Hacknights, hackdays, hackathons, workshops, palestras, ... encontre todos nossos eventos no nosso Meet-Up<br><br><br>
</p>
<p class="text-center">
<a href="http://www.meetup.com/pt-BR/OpenBrazil" target="_blank" rel="noopener" class="btn btn-outline-primary rounded-0">VER
OS ENCONTROS</a>
</p>
</div>
</div>
<div class="col-md-4">
<div class="p-3">
<img class="img-fluid w-100 mb-2" src="img/git.jpg" width="300" alt="github">
<p class="ff-droid text-justify">
Trabalhamos com Dados abertos<br/> Trabalhamos com Software aberto<br/> Consequentemente estamos no Github,
a plataforma mundial dos projetos abertos.
</p>
<p class="text-center">
<a href="http://github.com/CodeForCuritiba" target="_blank" rel="noopener" class="btn btn-outline-primary rounded-0">VER
OS PROJETOS</a>
</p>
</div>
</div>
</div>
</section>
</main>
<footer id="copyright">
<div class="container">
<p class="text-center ff-droid">
©
<script>document.write(new Date().getFullYear())</script>, <a href="#">Code for Curitiba</a>. Direitos Reservados
</p>
<a id="to-top" href="#top">
<div class="sr-only">Voltar para o topo</div>
</a>
</div>
</footer>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<!-- <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous"></script> -->
<script>
// precisamos do jQuery? (alguma imcompatibilidade?)
document.querySelector('.navbar-toggler').addEventListener('click', function () {
document.querySelector('#main-menu').classList.toggle('show')
})
</script>
</body>
</html>