-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
272 lines (234 loc) · 15.6 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
<!DOCTYPE html>
<html lang="pt-br" id="top">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="theme-color" content="#9162A4">
<meta id="vp" name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Título -->
<title> Website Social - Violência Sexual </title>
<!-- Imagens para compartilhamento de links -->
<meta property="og:url" content="https://alerta-sobre-violencia-sexual.vercel.app/" />
<meta property="og:locale" content="pt_BR">
<meta property="og:type" content="website" />
<meta property="og:title" content="Speak UP" />
<meta property="og:description" content="Um alerta sobre violência a violência sexual" />
<meta property="og:image" content="assets/img/imagem-link.png" />
<!-- Icone -->
<link rel="shortcut icon" href="assets/img/icone/favicon.ico" type="image/x-icon">
<!-- Folhas de estilo -->
<link rel="stylesheet" href="assets/css/normalize.css">
<link rel="stylesheet" href="assets/css/reset.css">
<link rel="stylesheet" href="assets/css/variaveis.css">
<link rel="stylesheet" href="assets/css/voltarTopo.css">
<!-- CSS da seção inicial -->
<link rel="stylesheet" href="assets/css/cabecalho/cabecalho-menu.css">
<link rel="stylesheet" href="assets/css/cabecalho/cabecalho-texto.css">
<link rel="stylesheet" href="assets/css/informativo/informativo-grafico.css">
<link rel="stylesheet" href="assets/css/informativo/informativo-alerta.css">
<!-- CSS da seção dados -->
<link rel="stylesheet" href="assets/css/dados/dados.css">
<link rel="stylesheet" href="assets/css/dados/dados-cabecalho.css">
<link rel="stylesheet" href="assets/css/dados/dados-conteudo.css">
<!-- CSS da seção como denunciar + rodape -->
<link rel="stylesheet" href="assets/css/comodenunciar.css">
<link rel="stylesheet" href="assets/css/rodape.css">
<!-- fonts -->
<link href="https://fonts.googleapis.com/css2?family=Staatliches&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:wght@300&family=Staatliches&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@700&display=swap" rel="stylesheet">
</head>
<body>
<!-- Seção 1 | Início -->
<section class="cabecalho">
<header class="cabecalho__menu">
<nav class="cabecalho__navegacao">
<ul class="cabecalho__navegacao-botoes">
<a class="cabecalho__botao-nav" href="#inicio">início</a>
<a class="cabecalho__botao-nav" href="#conceito">o que é estupro</a>
<a class="cabecalho__botao-nav" href="#registros">registros</a>
</ul>
<ul class="cabecalho__botoes">
<a class="cabecalho__botao-nav--denuncia" href="#comodenunciar">como denunciar</a>
</ul>
</nav>
</header>
<div id="#inicio" class="cabecalho__container">
<h1 class="cabecalho__titulo">o aumento no número de casos registrados de <span style="color: var(--roxo);">estupro</span> e a escassez de denúncias no Maranhão.</h1>
<div class="cabecalho__imagem"></div>
</div>
<h2 class="cabecalho__subtitulo">você acha que estupro se resume apenas àquela cena em que um desconhecido captura uma mulher na rua, a leva para um beco escuro e tenta transar à força?</h2>
<p class="cabecalho__paragrafo">Então, <mark style="color: var(--branco); background-color: var(--roxo);">PARE</mark> e <mark style="color: var(--branco); background-color: var(--roxo);">LEIA</mark> com atenção. Para além desse tipo caso, há <mark style="color: var(--branco); background-color: var(--roxo);">diferentes situações</mark> que podem ser enquadradas como estupro segundo o Código Penal brasileiro. </p>
</section>
<!-- Seção 2 | O que é o estupro? -->
<section id="conceito" class="informativo">
<div class="flexbox">
<h2 class="informativo__grafico-titulo">NO BRASL, É REGISTRADO UM ESTUPRO A CADA 8 MINUTOS</h2>
<figure class="informativo__grafico"></figure>
<p class="informativo__paragrafo">O artigo 213 caracteriza o estupro como "constranger alguém, mediante violência ou grave ameaça, a ter conjunção carnal ou a praticar ou permitir que com ele se pratique outro ato libidinoso"</p>
</div>
<div class="alerta">
<div>
<figure class="informativo__alerta">
</figure>
</div>
<div class="primeiro__filho">
<h2 class="titulo__alerta">
Bebeu demais e alguém forçou o sexo? fique atenta!
</h2>
<p class="paragrafo__alerta">
Uma relação sem consentimento é caracterizada como estupro. Se a mulher bebeu demais e não tinha condições de expressar que queria estar ali naquele momento fazendo o que quer que seja, o caso se torna uma violência sexual.
</p>
</div>
<div class="segundo__filho">
<h2 class="titulo__alerta">
Não é não. E assistir também é crime
</h2>
<p class="paragrafo__alerta">
A ausência do "sim" também é um "não". E mais: se você está em um ambiente em que um grupo de pessoas comete esse tipo de violência sexual sem consentimento pode ser enquadrado como coautor do crime
</p>
</div>
<div class="terceiro__filho">
<h2 class="titulo__alerta">
Vulnerabilidade profissional
</h2>
<p class="paragrafo__alerta">
Casos em que um profissional utiliza do seu cargo para induzir a vítima a algum ato libidinoso. Um fotógrafo dizer para uma mulher que "faz parte tocar nas partes íntimas da modelo para o trabalho ter melhor resultado" é um exemplo desse tipo de crime.
</p>
</div>
<div class="quarto__filho">
<h2 class="titulo__alerta">
Estupro não precisa de penetração vaginal ou anal
</h2>
<p class="paragrafo__alerta">
Está em uma festa e um homem tentou colocar os dedos na sua vagina sem autorização? Isso é estupro. Você bebeu demais e algum amigo ou parente aproveitou para passar a mão em suas partes íntimas? Também é estupro.
</p>
</div>
<div class="quinto__filho">
<h2 class="titulo__alerta">
Estupro dentro do casamento
</h2>
<p class="paragrafo__alerta">
Uma mulher não é obrigada a transar com o marido quando não tem vontade. O problema é que o estupro marital não é raro: muitos homens têm relações sexuais com as esposas na base da ameaça, chantagem e/ou da violência física.
</p>
</div>
<div class="sexto__filho">
<h2 class="titulo__alerta">
Um estupro pode começar em uma relação consensual
</h2>
<p class="paragrafo__alerta">
Conheceu um cara em uma festa, o clima rolou, estava tudo indo bem. Na hora de transar, ela se sentiu desconfortável e resolveu interromper a relação e ir embora. Se a negativa não for suficiente para a mulher estar livre para sair do ambiente e for forçada
a seguir na relação sexual, isso também se caracteriza como estupro, mesmo tendo começado de forma consensual. O "não" é o ponto final, não interessa quando, onde ou como ele ocorrer.
</p>
</div>
</div>
</section>
<!-- Seção 3 | Dados Estatísticos -->
<section id="registros" class="dados">
<div class="dados__cabecalho">
<h2 class="dados__cabecalho__titulo">REGISTRO DE CASOS DE ESTUPRO NO ESTADO DO MARANHÃO</h2>
<p class="dados__cabecalho__info">Ao analisar os registros das violências sexuais notificados pela secretaria de segurança pública do maranhão- ssp/ma, destaca-se o aumento de casos notificados durante os dez anos estudados.</p>
</div>
<div class="dados__conteudo1">
<img class="dados__conteudo__imagem" src="assets/img/dados/dados1.jfif" alt="Gráfico da quantidade de casos de Estrupo no Maranhão entre 2007 e 2017">
<p class="dados__conteudo__info">Este fenômeno pode ser explicado, pelo fato de que os dados apenas se tornaram disponíveis no SINAN (Sistema de informação de agravos de notificação) a partir de 2009, período no qual muitos profissionais ainda não se encontravam aptos para
a identificação e preenchimento da ficha, resultando em subnotificação; que é um problema grave para os crimes não letais, porque depende da iniciativa da vítimas, que geralmente preferem resolver o problema de outra maneira, e não por
meio da via institucional. porém, os casos de subnotificação diminuíram progressivamente com o passar dos anos. Por outro lado, pode ter havido real aumento dos casos de violência ou aumento da procura por atendimento nos serviços de saúde,
o que elevaria os registros de violências notificadas. </p>
</div>
<div class="dados__conteudo2">
<img class="dados__conteudo__imagem" src="assets/img/dados/dados2.jfif" alt="Gráfico da média de casos de Estrupo no Maranhão entre 2007 e 2017">
<p class="dados__conteudo__info"> Através da análise do gráfico constatou-se progressiva elevação das notificações, com pico dos registros observado no ano de 2017. O gráfico também aponta o crescimento do total de notificações dos casos de estupro regirados entre 2013 e 2017,
portanto, fica aberta a questão se o aumento de registros observado em 2013 refletiu um crescimento nos casos de estupro no estado do maranhão, ou deveu-se à maior difusão entre a população e os órgãos de saúde sobre a compreensão do que
constitui o estupro, cujo tipo penal mudou com a Lei n° 12.015, de 2009.</p>
</div>
<div class="dados__conteudo3">
<img class="dados__conteudo__imagem" src="assets/img/dados/dados3.jfif" alt="Gráfico dos cinco municípios com mais casos de Estrupo no Maranhão entre 2007 e 2017">
<p class="dados__conteudo__info">Ao ressaltar os cincos municípios com mais e menos casos registrados em todo o estado, percebe-se que os municípios mais pobres são os que menos registram os casos de estupro e isso deve-se também ao IDH.</p>
</div>
<div class="dados__conteudo4">
<img class="dados__conteudo__imagem" src="assets/img/dados/dados4.png" alt="Ranking com o IDH dos municípios do Estado do Maranhão">
<p class="dados__conteudo__info">Os municípios mais pobres são consequentemente os que possuem acesso limitado a educação, informação, saúde e segurança, ao passo que os municípios com IDH alto,que é o caso de São Luís, Imperatriz, São José de Ribamar e Paço do Lumiar, possuem
mais acesso à educação, informação, saúde e segurança, o que agrega positivamente as denúncias.</p>
</div>
</section>
<section id="comodenunciar" class="sevcviu container__">
<h2 class="titulo__sevcviu">Se você viu,</br> é da sua conta</h2>
<img class="img__sevcviu" src="./assets/img/comodenunciar/imgsevcviu.JPG">
</section>
<!-- Seção 4 | Como denunciar -->
<section class="oquefazer container__">
<h2 class="titulo__oquefazer">o que fazer caso VOCÊ seja
<div class="destaque__">vítima</div> ou
<div class="destaque__">presencie</div> um caso de estupro?</h2>
<div class="topicos__oquefazer">
<div class="div__topico">
<p class="nume__oquefazer">1</p>
<li class="topico">PEÇA AJUDA A QUEM ESTIVER POR PERTO E ACIONE POLICIAIS.</li>
</div>
<div class="div__topico">
<p class="nume__oquefazer">2</p>
<li class="topico">REGISTRE UM BOLETIM DE OCORRÊNCIA NA DELEGACIA MAIS PÓXIMA.</li>
</div>
<div class="div__topico">
<div>
<p class="nume__oquefazer">3</p>
</div>
<div>
<p class="topico">GUARDE TODAS AS INFORMAÇÕES QUE CONSEGUIR REFERENTES AO CASO.</p>
<p class="sub_paragrafo">ANOTE O DIA, HORÁRIO E LOCAL, NOME E CONTATO DE TESEMUNHAS, CARACTERÍSTICS DOS AGRESSOR, TIRE FOTOS, FILME, ETC</p>
</div>
</div>
<div class="div__topico">
<p class="nume__oquefazer">4</p>
<li class="topico">FAÇA UMA DENÚNCIA PELOS TELEFONES DA POLÍCIA MILITAR (190) E DO DISQUE-MULHER (180).
</li>
</div>
<div class="div__topico">
<div>
<p class="nume__oquefazer">5</p>
</div>
<div>
<p class="topico">A AUTORIDADE POLICIAL NÃO PODE SE RECUSAR A REGISTRAR A OCORRÊNCIA.</p>
<p class="sub_paragrafo">MAS, CASO ISSO ACONTEÇA, REGISTRE UMA RECLAMAÇÃO NA OUVIDORIA DO ÓRGÃO EM QUE OCORREU A RECUSA.</p>
</div>
</div>
</div>
</section>
<!-- Botão de voltar ao topo -->
<a href="#top" class="botao" title="Volte para o topo da página">▲</a>
<!-- Rodapé -->
<footer>
<p class="rodape__titulo">Site desenvolvido pelo time do Programa Trilhas - Inova Maranhão:</p>
<div class="rodape__times">
<div class="rodape__container">
<div class="rodape__trilha">
<div class="rodape__simbolo-dados"></div>
<p class="rodape__paragrafo">Ciência de Dados</p>
</div>
<a href="https://www.linkedin.com/in/andressa-machado-23a61390" class="rodape__linkedin">Andressa Machado</a>
<a href="https://www.linkedin.com/in/joao-torres-padilha" class="rodape__linkedin">João Torres Padilha</a>
</div>
<div class="rodape__container">
<div class="rodape__trilha">
<div class="rodape__simbolo-design"></div>
<p class="rodape__paragrafo">Design</p>
</div>
<a href="https://www.linkedin.com/in/charlene-pestana-2a7424214" class="rodape__linkedin">Charlene Pestana</a>
<a href="https://www.linkedin.com/in/tais-ximenes-43093a192/" class="rodape__linkedin">Taís Ximenes</a>
</div>
<div class="rodape__container">
<div class="rodape__trilha">
<div class="rodape__simbolo-prog"></div>
<p class="rodape__paragrafo">Programação</p>
</div>
<a href="https://www.linkedin.com/in/ana-j%C3%BAlia-alencar/" class="rodape__linkedin">Ana Júlia Alencar</a>
<a href="https://www.linkedin.com/in/beatriz-costa-218060218" class="rodape__linkedin">Beatriz Costa</a>
<a href="https://www.linkedin.com/in/milton-pablo-a00a83219/" class="rodape__linkedin">Milton Pablo</a>
<a href="https://www.linkedin.com/in/pacelle-henrique-462533224/" class="rodape__linkedin">Pacelle Sobral</a>
</div>
</div>
<div class="rodape__retangulo"></div>
</footer>
</body>
</html>