Skip to content

Commit

Permalink
criando novas sections da home
Browse files Browse the repository at this point in the history
  • Loading branch information
@buuninbee
buuninbee committed Aug 7, 2023
1 parent d071cd3 commit 1408a09
Show file tree
Hide file tree
Showing 7 changed files with 169 additions and 92 deletions.
87 changes: 52 additions & 35 deletions css/global/footer.css
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,77 @@
footer {
background-color: #1F291D;
padding: 40px 180px;
color: #fff;
background-color: #1f291d;
padding: 40px 100px;
color: #fff;
}

a{
color: #fff;
footer a {
color: #fff;
text-decoration: none;
}

a:hover{
color: #807b7b;
footer a:hover {
color: #807b7b;
}


.conteudo-footer {
display: grid;
grid-template-columns: 4fr 1fr;
display: grid;
grid-template-columns: 1.5fr auto 1fr;
}

.conteudo-footer h2 {
font-size: 3.5rem;
position: relative;
font-size: 3.5rem;
position: relative;
}

.conteudo-footer h2::after {
content: " ";
display: block;
height: 100px;
width: 100px;
position: absolute;
background-image: url(../../img/Double\ Up.png);
background-repeat: no-repeat;
background-position: right;
left: 292px;
top: -48px;
}

.contato-meios h3, .contato-redes h3{
margin-bottom: 8px;
content: " ";
display: block;
height: 100px;
width: 100px;
position: absolute;
background-image: url(../../img/Double\ Up.png);
background-repeat: no-repeat;
background-position: right;
left: 292px;
top: -48px;
}

.contato-meios li {
padding: 4px 0;
.contato-meios h3,
.contato-redes h3 {
margin-bottom: 8px;
}

.contato-meios li,
.contato-redes li {
padding: 4px 0;
padding: 4px 0;
}


.contato-redes {
margin-bottom: 4px;
margin-bottom: 4px;
}

.meios {
display: grid;
gap: 20px;
padding-top: 40px;
}
display: grid;
justify-content: center;
align-content: center;
gap: 20px;
padding-top: 40px;
}

.meios ul {
margin-left: 0;
}

.qr-code {
max-width: 200px;
display: grid;
justify-items: center;
align-items: end;
}

.qr-code p {
text-align: center;
margin: 0;
padding: 0;
padding-bottom: 12px;
}
20 changes: 10 additions & 10 deletions css/global/global.css
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,20 @@
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}

body {
background-color: #485746;
background-color: #485746;
}

@font-face {
font-family: "sansation";
src: url(../../fonte/Sansation_Light.ttf);
font-family: "sansation";
src: url(../../fonte/Sansation_Light.ttf);
}

.titulo {
font-size: 3.5rem;
font-family: 'sansation', sans-serif;
}
font-size: 3.5rem;
font-family: "sansation", sans-serif;
}
50 changes: 37 additions & 13 deletions css/home/indrotuçao.css
View file
Original file line number Diff line number Diff line change
@@ -1,23 +1,47 @@
.infos-container {
padding: 180px 20px;
padding: 160px 20px;
display: grid;
grid-template-columns: 2fr 1fr;
}

.container-video {
max-width: 1050px;
min-width: 400px;
}

.video-caixa {
width: 100%;
padding-bottom: 56.25%;
position: relative;
}

.video-caixa video {
width: 100%;
height: 100%;
position: absolute;
top: 0;
}

.infos-bg {
background-color: var(--bg-infos);
box-shadow: inset 0 80px #485746, inset 0 -80px #485746;
margin-right: 40px;
display: grid;
width: 100%;
/* background-color: var(--bg-infos); */
box-shadow: inset 0 20px #485746, inset 0 -20px #485746;
}

.infos-textos {
display: grid;
gap: 60px;
padding: 180px 20px;
margin: 0 30px;
align-items: center;

display: grid;
align-content: center;
/* gap: 20px; */
/* max-width: 500px; */
padding: 50px 16px;
/* padding-left: 30px; */
background-color: var(--bg-infos);
box-shadow: inset 0 40px #485746, inset 0 -40px #485746;
}

.infos-textos h2 {
color: var(--color-principal);
}
.infos-textos p {
color: var(--color-principal);
font-size: 1rem;
margin: 0;
}
12 changes: 12 additions & 0 deletions css/home/ondeTrabalhamos.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.bg-trabalhos {
background-color: var(--bg-secundario);
display: grid;
grid-template-columns: 1fr 1fr;
justify-content: center;
align-content: center;
}

.trabalhos-infos {
display: flex;
align-items: center;
}
Binary file added img/qr-code.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/video-brasil-unscreen.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
92 changes: 58 additions & 34 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Expand All @@ -10,9 +11,10 @@
<link rel="stylesheet" href="./css/style.css">

</head>

<body>
<header class="header-bg">
<nav>
<!-- <nav>
<ul class="nav-list">
<li> <a href="#">Home</a></li>
<li><a href="#">Doaçao</a></li>
Expand All @@ -24,22 +26,23 @@
<li><a href="./cadastro.html">Cadastro</a></li>
<li id="btn-login"><a href="./login.html">Login</a></li>
</ol>
</nav>
</nav> -->
</header>

<main>
<section>
<div class="carousel slide" id="demo" data-bs-ride="carousel" >
<div class="carousel slide" id="demo" data-bs-ride="carousel">
<div class="carousel-indicators">
<button type="button" data-bs-target="#demo" data-bs-slide-to="0" class="active"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="1"></button>
<button type="button" data-bs-target="#demo" data-bs-slide-to="2"></button>
</div>
<!-- SLIDER -->
<div class="carousel-inner" style="height: 900px; overflow: hidden;">
<div class="carousel-item active slide1">
<h2>Sua ajuda pode apoiar mais de 300 familias </h2>
<img src="./img/indigenas-slide11.jpg" alt="" class="d-block" style="width: 100%; object-position: center;" >
<div class="carousel-item active slide1">
<!-- <h2>Sua ajuda pode apoiar mais de 300 familias </h2> -->
<img src="./img/indigenas-slide11.jpg" alt="" class="d-block"
style="width: 100%; object-position: center;">
</div>
<div class="carousel-item slide2">
<img src="./img/crianças-slide2.jpg" alt="" class="d-block" style="width: 100%; ">
Expand All @@ -53,27 +56,40 @@ <h2>Sua ajuda pode apoiar mais de 300 familias </h2>
</section>

<section>
<div class="d-flex infos-container">
<video src="./img/Brincadeira das crianças guarani _ Indigena Digital (online-video-cutter.com).mp4" loop autoplay muted></video>

<div class="infos-bg">
<div class="infos-textos">
<h2>Auxíliamos cerca de 43% dos povos indigenas</h2>
<h2>Ajudamos a construir 3 escolas em menos de 1 ano</h2>
<h2>Vacinamos mais de 4.288 crianças contra Hepatite B, Polio inativada, Rotavírus e Febre amarela</h2>
<div class="d-grid infos-container container-fluid ">
<div class="container-video">
<div class="video-caixa col-8">
<video
src="./img/Brincadeira das crianças guarani _ Indigena Digital (online-video-cutter.com).mp4"
loop autoplay muted></video>
</div>
</div>

<div class="infos-bg col-4">
<div class="infos-textos">
<p>Auxíliamos cerca de 43% dos povos indigenas</p>
<p>Ajudamos a construir 3 escolas em menos de 1 ano</p>
<p>Vacinamos mais de 4.288 crianças contra Hepatite B, Polio inativada, Rotavírus e Febre
amarela</p>
</div>
</div>
</div>
</div>
</section>

<section>
<div class="bg-trabalhos">
<div class="bg-trabalhos container-fluid ">
<div class="trabalhos-infos">
<div class="trabalho-text">
<h2>Onde nós Trabalhamos ?</h2>
<p>Estamos presente em mais de 55% dos estados demarcadas e em demarcaçãoz</p>
</div>
</div>


<div class="">
<img src="./img/video-brasil-unscreen.gif" alt="">
</div>

</div>
</section>

Expand All @@ -83,33 +99,41 @@ <h2>Onde nós Trabalhamos ?</h2>
<div class="conteudo-footer">
<span> Obrigado por nós visitar</span>

<div class="meios">
<div class="contato-meios">
<h3>Contato</h3>
<ul>
<li><a href="mailto:ongoriginario">[email protected]</a></li>
<li><a href="tel:+556193182872">61 993182872</a></li>
</ul>
<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>

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

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

<h2>Junte-se a nós </h2>
<div class="contato-redes">
<h3>Redes</h3>
<ul>
<li><a href=".#">Instagram</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Youtube</a></li>
</ul>
</div>

</div>

<h2>Junte-se a nós </h2>
</div>
</footer>


<script src="./bootstrapjs/bootstrap.bundle.js"></script>
<script src="./bootstrapjs/bootstrap.bundle.min.js"></script>

</body>

</html>

0 comments on commit 1408a09

Please sign in to comment.