Skip to content

Commit

Permalink
criando a page "como posso ajudar"
Browse files Browse the repository at this point in the history
  • Loading branch information
@buuninbee
buuninbee committed Sep 8, 2023
1 parent f6e5624 commit 456e198
Show file tree
Hide file tree
Showing 18 changed files with 330 additions and 29 deletions.
2 changes: 1 addition & 1 deletion cadastro.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,7 @@
</li>

<li class="font-2-l">
<a href="">Como posso ajudar ?</a>
<a href="./como-posso-ajudar.html">Como posso ajudar ?</a>
</li>
</ul>

Expand Down
202 changes: 202 additions & 0 deletions como-posso-ajudar.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,202 @@
<!DOCTYPE html>
<html lang="pt-br">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Originarios | Como posso ajudar ?</title>
<link rel="stylesheet" href="./bootstrapcss/bootstrap.css">
<link rel="stylesheet" href="./bootstrapcss/bootstrap.min.css">
<link rel="stylesheet" href="./css/styleclean.css">
<link rel="stylesheet" href="./css/style.css">
</head>

<body>
<header class="header-bg">
<nav>
<a href="./index.html">
<img class="logo" src="./img/icones/icone-originarios.svg" width="225" alt="icone da ong originarios">
</a>

<ul class="nav-list font-2-l">
<li> <a href="./index.html">Home</a></li>
<li><a href="./doação.html">Doaçao</a></li>
<li> Quem somos?
<ul class="">
<li class="li-list-mobile"><a href="./missao&vissao.html">Missão & Visão</a></li>
<li class="li-list-mobile"><a href="./como-trabalhamos.html">Como trabalhamos</a></li>
</ul>
</li>
<li><a href="./como-posso-ajudar.html">Como posso ajudar ?</a></li>

</ul>

<ul id="entrar" class="font-2-l">
<li><a href="./cadastro.html">Cadastro</a></li>
<li id="btn-login"><a href="./login.html">Login</a></li>
</ul>

<div class="mobile-menu-icon">
<button id="menushow"><img class="icon" src="./img/icones/icone-open.svg" alt=""></button>
</div>
</div>
</nav>

<div class="mobile-menu">
<ul class="font-2-l">
<li>
<a href="./index.html">Home</a>
</li>

<li>
<a href="./doação.html">Doação</a>
</li>

<li class="mobile-li"><span class="font-2-l pegou"> Quem somos ?</span>
<img class="icon-seta" src="./img/icones/seta-info.svg" alt="">
<div class="drop-down open">
<a class="font-2-m" href="./missao&vissao.html">Missão & Vissão</a>
<a class="font-2-m" href="./como-trabalhamos.html">Como trabalhamos ?</a>
</div>
</li>

<li class="font-2-l">
<a href="./como-posso-ajudar.html">Como posso ajudar ?</a>
</li>
</ul>

<ul id="entrar-mobile" class="font-2-l">
<li class="font-2-l"><a href="./cadastro.html">Cadastro</a></li>
<li class="font-2-l"><a href="./login.html">login</a></li>
</ul>
</div>
</header>

<main id="como-ajudar">
<section>
<div class="missaoEvissao container-fluid">
<h2 class="font-1-xxl">Como posso ajudar ?</h2>
<p class="font-2-l"> Existem diferentes maneiras de ajudar na construção de um mundo mais verde, justo e
pacífico. Apoie com doações, participando de um abaixo-assinado, se voluntariando ou se mobilizando
de diversas formas, seja online ou offline. A forma é só o caminho, o que importa mesmo é agir! </p>
</div>
</section>

<section>
<div class="conteiner-ajuda container-fluid">
<div>
<picture>
<img src="./img/participe-abaixo-assinado.jpg" alt="indigenas dançando aldeia">
</picture>

<div class="tipos-de-ajuda">
<h3 class="">A importancia dos indigenas pra Amazônia
</h3>

<p class="font-2-s">As petições ou abaixo-assinados de nossas campanhas são uma forma de
expressar
a
indignação
coletiva, e, principalmente, pressionar o poder público e outros tomadores de decisão por
mudanças efetivas. Posicione-se, participe e divulgue
</p>

<a href="./img/SociedadesIndgenasnaAmazniaeaEcologia.pdf">Acesse os abaixo-assinados atuais</a>
</div>

</div>

<div>
<picture>
<img src="./img/faça-uma-doaçao.jpg" alt="familia indigena posando pra uma fot">
</picture>

<div class="tipos-de-ajuda">
<h3>Faça uma doação
</h3>

<p class="font-2-s">A independência financeira e política é um pilar central do Greenpeace. Por
isso, só
aceitamos
doações de pessoas físicas. Ao doar, você fortalece o nosso trabalho e a luta em defesa da
Amazônia e da justiça climática.</p>

<a href="./doação.html">Saiba como doar</a>
</div>
</div>

<div>
<picture>
<img src="./img/seja-voluntario.jpg" alt="foto da Amazônia pegando fogo">
</picture>

<div class="tipos-de-ajuda">
<h3>Participe do nosso voluntariado
</h3>
<p class="font-2-s">O ativismo e a atuação coletiva são elementos essenciais na transformação de
qualquer
realidade.
Se você quer defender a causa ambiental, te convidamos a fazer parte da nossa rede de
voluntariado. É só entrar no Conexão Verde e se conectar com outros(as) ativistas ao
redor
do
Brasil.</p>

<a href="./cadastro.html">Seja um agente da mudança</a>
</div>
</div>
</div>

<div class="divulga container-lg">
<h3 class="font-2-l-b">Divulgue nosso conteúdo</h3>
<p> Curtindo, compartilhando e divulgando nossos conteúdos, do site ou das redes sociais, você se torna
um(a) aliado(a) da luta ambiental</p>
<a href="">Faça download dos materias</a>
</div>
</section>
</main>

<footer>
<div class="conteudo-footer">
<span class="font-2-s"> Obrigado por nós visitar</span>


<div class="meios">
<div class="contato-meios">
<h3 class="font-2-l ">Contato</h3>
<ul class="font-2-s">
<li><a href="mailto:ongoriginario">[email protected]</a></li>
<li><a href="tel:+556193182872">61 993182872</a></li>
</ul>
</div>

<div class="contato-redes">
<h3 class="font-2-l">Redes</h3>
<ul class="font-2-s">
<li><a href=".#">Instagram</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</div>

</div>

<div class="qr-code">
<div class="card">
<img src="./img/qr-code.jpg" class="card-img-top" alt="qr code para fazer uma doação">
<p>Faça uma Doação</p>
</div>
</div>

<h2 class="font-1-xxl">Junte-se a nós </h2>
</div>
</footer>

<script src="./js/jquery-3.7.0.js.js"></script>
<script src="./bootstrapjs/bootstrap.bundle.js"></script>
<script src="./bootstrapjs/bootstrap.bundle.min.js"></script>
<script src="./js/index.js"></script>
</body>

</html>
16 changes: 8 additions & 8 deletions como-trabalhamos.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
<li class="li-list-mobile"><a href="./como-trabalhamos">Como trabalhamos</a></li>
</ul>
</li>
<li><a href="#">Como posso ajudar ?</a></li>
<li><a href="./como-posso-ajudar.html">Como posso ajudar ?</a></li>

</ul>

Expand Down Expand Up @@ -62,7 +62,7 @@
</li>

<li class="font-2-l">
<a href="">Como posso ajudar ?</a>
<a href="./como-posso-ajudar.html">Como posso ajudar ?</a>
</li>
</ul>

Expand Down Expand Up @@ -132,21 +132,21 @@ <h2 class="font-2-l-b ">Em nivel regional</h2>

<footer>
<div class="conteudo-footer">
<span class="fs-5 text"> Obrigado por nós visitar</span>
<span class="font-2-s"> Obrigado por nós visitar</span>


<div class="meios">
<div class="contato-meios">
<h3>Contato</h3>
<ul>
<h3 class="font-2-l ">Contato</h3>
<ul class="font-2-s">
<li><a href="mailto:ongoriginario">[email protected]</a></li>
<li><a href="tel:+556193182872">61 993182872</a></li>
</ul>
</div>

<div class="contato-redes">
<h3>Redes</h3>
<ul>
<h3 class="font-2-l">Redes</h3>
<ul class="font-2-s">
<li><a href=".#">Instagram</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Youtube</a></li>
Expand All @@ -162,7 +162,7 @@ <h3>Redes</h3>
</div>
</div>

<h2 class="titulo">Junte-se a nós </h2>
<h2 class="font-1-xxl">Junte-se a nós </h2>
</div>
</footer>

Expand Down
5 changes: 5 additions & 0 deletions css/cadastro/cadastro.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,7 @@ h1 {
}

.form-input {
border-radius: 6px;
padding: 60px 80px;
}

Expand All @@ -184,6 +185,10 @@ h1 {
.tela-cadastro {
padding: 40px 60px;
}

.form-input button {
padding: 10px 20px;
}
}

@media (max-width: 400px) {
Expand Down
82 changes: 82 additions & 0 deletions css/como-posso-ajudar/como-posso-ajudar.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
.conteiner-ajuda {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
padding: 160px 60px;
}

#como-ajudar h3 {
color: var(--color-segundario);
}

#como-ajudar h2 {
max-width: 10ch;
}

.conteiner-ajuda img {
width: 100%;
}

.conteiner-ajuda div {
background-color: var(--bg-input);
color: var(--color-principal);
border-radius: 0 0 6px 6px;
}

.tipos-de-ajuda {
padding: 16px 10px;
}

.tipos-de-ajuda a {
display: grid;
place-items: center;
}

.divulga {
display: grid;
place-items: center;
background-color: var(--bg-secundario);
color: var(--color-principal);
padding: 60px;
margin-bottom: 80px;
border-radius: 6px;
}

.divulga a {
text-decoration: none;
padding: 10px 16px;
background-color: var(--bg-text-titulos);
border-radius: 4px;
}

.divulga a:hover {
background-color: #1e2c1b;
}

@media (max-width: 800px) {
.conteiner-ajuda {
grid-template-columns: repeat(2, 1fr);
}

.divulga {
padding: 40px;
}
}

@media (max-width: 800px) {
.conteiner-ajuda {
grid-template-columns: 1fr;
}

.conteiner-ajuda {
padding: 80px 40px;
}

#como-ajudar .missaoEvissao {
padding: 80px 60px;
}

#como-ajudar .missaoEvissao h2 {
padding-bottom: 14px;
}
}
9 changes: 9 additions & 0 deletions css/login/login.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -126,4 +126,13 @@ span {
#senhaperdida {
margin-left: 34px;
}

.conteudo-login {
padding: 60px 20px;
margin-top: 80px;
}

#senhaperdida {
font-size: 14px;
}
}
3 changes: 3 additions & 0 deletions css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,3 +33,6 @@

/* Como trabalhamos */
@import "./comoTrabalhamos/comoTrabalhamos.css";

/* Como posso ajudar? */
@import "./como-posso-ajudar/como-posso-ajudar.css";
Loading

0 comments on commit 456e198

Please sign in to comment.