Skip to content

Commit

Permalink
feat: landing page css's
Browse files Browse the repository at this point in the history
  • Loading branch information
@Beatriz-ge
Beatriz-ge committed Jul 5, 2024
1 parent 05a2914 commit 9059efa
Show file tree
Hide file tree
Showing 3 changed files with 187 additions and 33 deletions.
88 changes: 55 additions & 33 deletions docs/lading page/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,49 +7,71 @@
<link rel="stylesheet" href="styles.css">
</head>
<body>
<header>
<img src="img/logo.png" alt="Logo Mapa da Violência">
<h1>Mapa da Violência</h1>
<p>Uma iniciativa do Instituto Glória</p>
</header>

<main>
<section id="sobre">
<h2>Sobre o Projeto</h2>
<p>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.</p>
<section id="hero">
<div class="hero-content">
<h2>Mapa da Violência</h2>
<p>Uma iniciativa do Instituto Glória.</p>
</div>
<img src="../img/logo.png" alt="Logo Glória" class="hero-image">
</section>
<section id="funcionalidades">
<h2>Funcionalidades</h2>
<ul>
<li>Acessibilidade</li>
<li>Denúncias Anônimas</li>
<li>Mapa Interativo</li>
<li>Visualização de Dados</li>
</ul>

<section id="sobre">
<div class="text">
<h2>Sobre o Projeto</h2>
<p>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.</p>
</div>
</section>

<section id="como-funciona">
<h2>Como Funciona</h2>
<ol>
<li>Preencha o Formulário</li>
<li>Marque no Mapa</li>
<li>Envie a Denúncia</li>
<li>Visualize o Mapa</li>
</ol>
<div class="text">
<h2>Como Funciona</h2>
<section class="steps">
<div class="step-card">
<h2>1</h2>
<h3>Preencha o Formulário</h3>
<p>Essa é a etapa em que o usuário deve preencher os formulários com informações sobre a violência ocorrida.</p>
</div>
<div class="step-card">
<h2>2</h2>
<h3>Marque no Mapa</h3>
<p>Aqui o usuário deve usar o pin de localização para marcar o local onde aconteceu a violência.</p>
</div>
<div class="step-card">
<h2>3</h2>
<h3>Envie o Registro</h3>
<p>Após confirmar os dados e o local da violência, o usuário deve enviar o resgitro.</p>
</div>
<div class="step-card">
<h2>4</h2>
<h3>Visualize o Mapa</h3>
<p>E por último, o usuário terá acesso ao mapa com os pins nos locais registrados por outros usuários.</p>
</div>
</section>
</div>
</section>

<section id="instituto-gloria">
<h2>Sobre o Instituto Glória</h2>
<p>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 <a href="https://eusouagloria.com.br/home" target="_blank">Instituto Glória</a>.</p>
<div class="text">
<h2>Instituto Glória</h2>
<p>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 <a href="https://eusouagloria.com.br/home" target="_blank">Instituto Glória</a>.</p>
</div>
</section>

<section id="participe">
<h2>Participe!</h2>
<p>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.</p>
<div class="text">
<h2>Participe!</h2>
<p>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.</p>
</div>
</section>

<section id="github">
<h2>Nosso Projeto no GitHub</h2>
<a href="https://residenciaticbrisa.github.io/T2G1-IA-Gloria" class="button">Acesse nossa GitPages</a>
<div class="btn">
<a href="https://residenciaticbrisa.github.io/T2G1-IA-Gloria" class="button">Acesse nossa GitPages</a>
</div>
</section>
</main>
<footer>
<p>&copy; 2024 Mapa da Violência. Todos os direitos reservados.</p>
</footer>

</body>
</html>
</html>
Binary file added docs/lading page/logo.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
132 changes: 132 additions & 0 deletions docs/lading page/styles.css
View file
Original file line number Diff line number Diff line change
@@ -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;
}

0 comments on commit 9059efa

Please sign in to comment.