-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
165 lines (142 loc) · 8.85 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
<!DOCTYPE html>
<head lang="pt-br">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Jogo da Saúde</title>
<!-- bootstrap css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="css/main.css">
<!-- fontes -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Fira+Sans">
<link rel="stylesheet" href="https://use.typekit.net/csm7xjx.css">
</head>
<body id="main" data-spy="scroll" data-target="#navbarSupportedContent" data-offset="0">
<nav id="nav" class="navbar navbar-expand-md fixed-top navbar-trans navbar-dark">
<a class="navbar-brand smooth-scroll" href="#main">
<img src="img/logo-horizontal.svg" height="45" class="d-inline-block align-top" alt="Jogo da Saúde">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="nav navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link smooth-scroll" href="#tag-1">Sobre o Jogo</a>
</li>
<li class="nav-item">
<a class="nav-link smooth-scroll" href="#tag-2">Homo Ludens</a>
</li>
<li class="nav-item">
<a class="nav-link smooth-scroll" href="#tag-3">Print & Play</a>
</li>
<li class="nav-item">
<a class="nav-link smooth-scroll" href="#tag-4">Quem Somos</a>
</li>
</ul>
</div>
</nav>
<div class="jumbotron jumbotron-fluid mb-0 text-light photo-box" style="background-image: url('img/fundo-verde.png')">
<div class="container pt-5">
<div class="d-flex justify-content-center">
<img style="max-width: 30em;" src="img/logo-cor.svg" alt="Jogo da Saúde">
</div>
<!--<div class="d-flex justify-content-center">
<p class="lead">blabla</p>
</div>-->
</div>
</div>
<div class="container-fluid">
<div class="row bg-text">
<div class="col photo-box order-sm-1" style="background-image: url('img/verso.jpg');">
</div>
<div id="tag-1" class="col-md-7 order-sm-12 pt-4">
<p>Neste jogo colaborativo, cada jogador atua como um Secretário de Saúde municipal, tendo como objetivo a boa gerência e gestão dos recursos públicos destinadas a toda rede do SUS no país. Você vai construir hospitais, implementar novas tecnologias médicas, discutir estratégias com os demais Secretários, aprender sobre as principais doenças que afetam a população, gerenciar crises, barganhar recursos do governo federal e muito mais.</p>
<p>O SUS (Sistema Único de Saúde) é um dos maiores sistemas de saúde do mundo e existe já faz 30 anos no Brasil, um sistema único no mundo que garante acesso integral, universal e igualitário a população brasileira, do simples atendimento ambulatorial aos transplantes de órgãos.</p>
<p>Prepare-se então para o desafio de realizar uma boa gestão no Jogo da Saúde e seja admirado por toda a população, auxiliando o SUS a se tornar um sistema de saúde de referência e excelência mundial.</p>
</div>
</div>
<div class="row bg-text">
<div class="col photo-box order-sm-1 order-md-12" style="background-image: url('img/oficina.jpg');">
</div>
<div id="tag-2" class="col-md-7 order-sm-12 order-md-1 pt-4">
<h1 class="tk-rig-solid-bold-reverse">Homo Ludens</h1>
<p>Jogos sempre fizeram parte da história do ser humano, tanto como uma forma de interação social, quanto como entretenimento e mesmo como desenvolvimento pessoal. Por assumirem novos papéis em universos que fogem das lógicas de sua realidade, os jogadores experimentam diversos processos de reflexão e estratégia, despertando cooperação ou competitividade, ponderação e pensamento crítico.</p>
<p>A saúde é um direito fundamental e está previsto na nossa constituição, no entanto, a maior parte das pessoas - usuárias do sistema público ou complementar - não tem o menor conhecimento sobre como funcionam esses sistemas, suas complexidades e particularidades.</p>
<p>Nós aqui do LabHacker, laboratório de arte, política e tecnologia nos propomos a utilizar o lúdico como ferramenta para criar empatia e trazer informações sobre temas complexos. Criando condições para o cidadão refletir sobre seus direitos e compreender qual seu real papel na participação e construção coletiva da saúde.</p>
</div>
</div>
<div class="row bg-text">
<div class="col photo-box order-sm-1" style="background-image: url('img/melanoma.png');">
</div>
<div id="tag-3" class="col-md-7 order-sm-12 pt-4">
<h1 class="tk-rig-solid-bold-reverse">Print & Play</h1>
<p>Esse jogo é o resultado de um ano de trabalho, criado a muitas mãos e com a participação ativa de diversos atores do Sistema de Saúde. Como todos os os nossos projetos ele está licenciado sob uma licença livre, o que significa que você tem a liberdade para usar, copiar e modificar esse conteúdo à vontade e sem pagar nada. Este trabalho está licenciado sob uma <a href="https://creativecommons.org/licenses/by/3.0/br" target="_blank" rel="noopener">licensa Creative Commons Attribution 3.0</a></p>
<div class="btn-group mb-4">
<a class="btn btn-red mr-2" href="jogodasaude_impressao_v1_4.zip" rel="noopener">Baixar para impressão (55MB)</a>
<a href="https://creativecommons.org/licenses/by/3.0/br" target="_blank" rel="noopener"><img style="height: 40px;" src="img/by.png" alt="CC-BY 3.0" /></a>
</div>
</div>
</div>
<div class="row bg-text">
<div id="tag-4" class="col pt-4">
<h1 class="tk-rig-solid-bold-reverse">Quem Somos</h1>
<p>Com ações nas áreas de política, arte, software livre e cultura digital, a <strong>LabHacker</strong> é uma organização sem fins lucrativos que trabalha criando metodologias, jogos e tecnologias colaborativas para auxiliar o aprendizado de políticas públicas e suas complexidades.</p>
<p>Para solicitar ofícinas e propostas de outros jogos e projetos entre em contato pelo email <a href="mailto:[email protected]">[email protected]</a>.
</div>
</div>
</div>
<!-- Footer -->
<footer class="page-footer font-small bg-dark text-light">
<!-- Footer Links -->
<div class="container text-center text-md-left">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-2 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">REALIZAÇÃO</h5>
<a href="http://labhacker.org.br/">
<img src="img/logo_labhacker_white.png" height="30">
</a>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-3 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">APOIO E COCRIAÇÃO</h5>
<a href="https://www.janssen.com/brasil/">
<img class="ml-2" src="img/logo_janssen_long_white.svg" height="30">
</a>
</div>
<!-- Grid column -->
<hr class="clearfix w-100 d-md-none">
<!-- Grid column -->
<div class="col-md-4 mx-auto">
<!-- Links -->
<h5 class="font-weight-bold text-uppercase mt-3 mb-4">COCRIAÇÃO</h5>
<a href="http://www.oncoguia.org.br/">
<img class="mr-3" src="img/logo_oncoguia_white.png" height="30">
</a>
<a href="http://www.prospectiva.com/">
<img src="img/logo_prospectiva_white.png" height="30">
</a>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
<!-- Footer Links -->
<!-- Copyright -->
<div class="footer-copyright text-center py-3">© 2018
<a href="http://labhacker.org.br"> labhacker.org.br</a>
</div>
<!-- Copyright -->
</footer>
<!-- Footer -->
<!-- js scripts -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="js/main.js"></script>
</body>