diff --git a/docs/lading page/index.html b/docs/lading page/index.html index a1ebc87b..2f0e41e6 100644 --- a/docs/lading page/index.html +++ b/docs/lading page/index.html @@ -7,49 +7,71 @@ -
- Logo Mapa da Violência -

Mapa da Violência

-

Uma iniciativa do Instituto Glória

-
+
-
-

Sobre o Projeto

-

O Mapa da Violência é uma ferramenta desenvolvida para ajudar a combater a violência em nossa sociedade, especialmente contra mulheres. Através deste site, qualquer pessoa pode denunciar anonimamente casos de violência, ajudando a mapear áreas onde incidentes ocorrem com mais frequência.

+
+
+

Mapa da Violência

+

Uma iniciativa do Instituto Glória.

+
+ Logo Glória
-
-

Funcionalidades

-
    -
  • Acessibilidade
    • -
  • Denúncias Anônimas
    • -
  • Mapa Interativo
    • -
  • Visualização de Dados
    • -
+ +
+
+

Sobre o Projeto

+

O Mapa da Violência é uma ferramenta desenvolvida para ajudar a combater a violência em nossa sociedade, especialmente contra mulheres. Através deste site, qualquer pessoa pode denunciar anonimamente casos de violência, ajudando a mapear áreas onde incidentes ocorrem com mais frequência.

+
+
-

Como Funciona

-
    -
  1. Preencha o Formulário
    2. -
  2. Marque no Mapa
    3. -
  3. Envie a Denúncia
    4. -
  4. Visualize o Mapa
    5. -
+
+

Como Funciona

+
+
+

1

+

Preencha o Formulário

+

Essa é a etapa em que o usuário deve preencher os formulários com informações sobre a violência ocorrida.

+
+
+

2

+

Marque no Mapa

+

Aqui o usuário deve usar o pin de localização para marcar o local onde aconteceu a violência.

+
+
+

3

+

Envie o Registro

+

Após confirmar os dados e o local da violência, o usuário deve enviar o resgitro.

+
+
+

4

+

Visualize o Mapa

+

E por último, o usuário terá acesso ao mapa com os pins nos locais registrados por outros usuários.

+
+
+
+
-

Sobre o Instituto Glória

-

O Mapa da Violência é uma iniciativa do Instituto Glória. O Instituto é comprometido com a promoção da igualdade e combate à violência, especialmente contra mulheres. Saiba mais sobre o nosso trabalho em Instituto Glória.

+
+

Instituto Glória

+

O Mapa da Violência é uma iniciativa do Instituto Glória. O Instituto é comprometido com a promoção da igualdade e combate à violência, especialmente contra mulheres. Saiba mais sobre o nosso trabalho em Instituto Glória.

+
+
-

Participe!

-

Ajude-nos a construir uma sociedade mais segura e consciente. Use o Mapa da Violência para denunciar casos de violência e visualizar áreas de risco. Juntos, podemos fazer a diferença.

+
+

Participe!

+

Ajude-nos a construir uma sociedade mais segura e consciente. Use o Mapa da Violência para registrar casos de violência e visualizar áreas de risco. Juntos, podemos fazer a diferença.

+
+
-

Nosso Projeto no GitHub

- Acesse nossa GitPages +
+ Acesse nossa GitPages +
- + - \ No newline at end of file + diff --git a/docs/lading page/logo.png b/docs/lading page/logo.png new file mode 100644 index 00000000..2e71913c Binary files /dev/null and b/docs/lading page/logo.png differ diff --git a/docs/lading page/styles.css b/docs/lading page/styles.css new file mode 100644 index 00000000..b5e1dc6f --- /dev/null +++ b/docs/lading page/styles.css @@ -0,0 +1,132 @@ +body { + font-family: 'Arial', sans-serif; + margin: 0; + padding: 0; + background-color: #e9e9e9; + color: black; +} + +main { + padding: 40px 20px; + max-width: 800px; + margin: auto; + background: #f8f8ff; + border-radius: 8px; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); +} + +#hero { + display: flex; + align-items: center; + justify-content: space-between; + background: linear-gradient(90deg, #4B1F4F, #612368); + padding: 20px; + border-radius: 8px; + margin-bottom: 40px; + color: black; +} + + +.hero-content h2 { + margin: 0; + font-size: 2.5em; + width: 100%; + color: white; + border-bottom: 1.5px solid white; + +} + +.hero-content p { + margin-top: 7px; + font-size: 1.3em; + color: white; +} + +.hero-image { + max-width: 30%; + border-radius: 8px; +} + +.text h2 { + margin-bottom: 5px; + font-size: 2em; + padding-bottom: 10px; + text-align: center; + border-bottom: 2px solid #FFA500; + margin-left: 30%; + margin-right: 30%; + +} + +.text p { + font-size: 1.3rem; + text-align: justify; + margin-bottom: 50px; +} + +.steps { + display: flex; + gap: 20px; + margin-top: 30px; +} + +.step-card { + background: white; + color: black; + padding: 10px; + border-radius: 10px; + box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); + width: 200px; + height: 220px; + text-align: center; + transition: transform 0.3s; +} + +.step-card h2 { + background: #FFA500; + color: white; + border-radius: 50%; + width: 40px; + height: 40px; + display: flex; + align-items: center; + justify-content: center; + margin: 0 auto 10px auto; +} + +.step-card h3 { + margin: 10px 0; + font-size: 1.2em; +} + +.step-card p { + font-size: 0.9em; + color: #555; + text-align: center; +} + +.step-card:hover { + transform: translateY(-10px); +} + +.btn { + display: flex; + align-items: center; + flex-direction: column; +} +.button { + background-color: #612368; + color: white; + padding: 10px 20px; + text-decoration: none; + border-radius: 5px; + font-weight: bold; + transition: background-color 0.3s; + text-align: center; + width: 200px; +} + +.button:hover { + background-color: #612368; +} +