Skip to content

Commit

Permalink
Finalização do projecto
Browse files Browse the repository at this point in the history
  • Loading branch information
@gusbemacbe
gusbemacbe committed Jul 17, 2021
1 parent 3297f22 commit 0b6d547
Show file tree
Hide file tree
Showing 44 changed files with 9,823 additions and 2 deletions.
37 changes: 35 additions & 2 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,35 @@
# gama-purongo-aoteraoa
Projeto Final Itaú Formação Tech Edição – Site de notícias – Gama Pūrongo Aoteraoa
# Projeto Final Itaú Formação Tech Edição
## Site de notícias
### Gama Pūrongo Aoteraoa

#### Descrição

Um projeto de site de notícias com 6 melhores notícias positivas sobre o COVID-19. Feito em puro CSS, HTML e JavaScript.

O nome do site de notícias se chama Gama Pūrongo Aoteraoa, que significa Relatório Gama da Nova Zelândia, em maori, porque a Nova Zelândia é um exemplo de boas notícias sobre o combate contra COVID-19 na Nova Zelândia.

#### Objetivo

Compartilhar notícias positivas sobre a Covid-19 que viraram destaque na mídia.

#### Ferramenta

Visual Studio Code Insiders no Linux.

#### Linguagens

- CSS
- HTML
- JavaScript

#### Autoria

**Número do grupo:** 08
**Nome do grupo:** Grupo Itaú Aoteraoa

- **Membros**
- [Gustavo Costa](https://github.com/gusbemacbe)
- [Natalício Souza Júnior](https://github.com/nataliciojr)
- [Wybson Santana](https://github.com/WybsonSantana)
- [Carlos Cristiano Paradello](https://github.com/Carlos-Cristiano917)
- [Hélio Assunção](https://github.com/nataliciojr)
196 changes: 196 additions & 0 deletions about.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
<!DOCTYPE html>
<html lang="pt-BR">

<head>
<link media="all" rel="stylesheet" type="text/css" href="assets/css/global.css">
<link media="all" rel="stylesheet" type="text/css" href="assets/css/colours.css">
<link media="all" rel="stylesheet" type="text/css" href="assets/css/fonts.css">
<link media="all" rel="stylesheet" type="text/css" href="assets/css/icons.css">
<link media="all" rel="stylesheet" type="text/css" href="assets/css/about.css">

<link rel="apple-touch-icon" sizes="180x180" href="assets/images/favicons/apple-touch-icon.png">
<link rel="icon" href="assets/images/favicons/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="assets/images/favicons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/images/favicons/favicon-16x16.png">
<link rel="manifest" href="assets/images/favicons/site.webmanifest">

<meta charset="UTF-8">
<meta name="description" content="Ficou interessado(a) em saber quem são os membros da Equipe 8 Gama Pūrongo Aoteraoa!? Acesse aqui e descubra!">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Gama Pūrongo Aoteraoa – Sobre</title>
</head>

<body>

<header class="navbar">
<div class="container">
<a href="/index.html"><span class="sr-only">Início</span> <div class="logotype" title="Logotipo com o nome do jornal chamado Gama Pūrongo e um ícone do mapa da Nova Zelândia, que representa o site do jornal."></div></a>

<ul class="list">
<li><a href="/index.html">Home</a></li>
<li><a href="/about.html">Sobre</a></li>
<li><a href="/contact.html">Contato</a></li>
<li><a href="/find-out-more.html">Saiba mais</a></li>
</ul>

<ul class="tools">
<li>
<div class="toggle">
<input id="switch" type="checkbox" name="theme">
<label for="switch">Alto contraste</label>
</div>
</li>
<li><button id="increase">A+</button></li>
<li><button id="decrease">A-</button></li>
<li class="menu"><i class="fas fa-bars" onclick="openNav()"></i></li>
</ul>
</div>

<div id="SideNav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
<a href="/index.html">Home</a>
<a href="/about.html">Sobre</a>
<a href="/contact.html">Contato</a>
<a href="/find-out-more.html">Saiba mais</a>
</div>
</header>

<h1 class="news">Sobre</h1>

<div class="container">
<section class="about">
<!-- Gustavo -->
<div class="who who-1">
<img alt="Foto de Gustavo Costa" class="image" src="assets/images/people/gustavo.png">
<h2>Gustavo Costa</h2>
<a href="https://linkedin.com/in/gusbemacbe/" target="_blank"><img alt="Ir para o perfil de Gustavo Costa no Linkedin." class="linkedin" src="assets/images/linkedin.png"/></a>

<a data-modal="modal-1">Leia mais</a>

<div class="modal" id="modal-1">
<div class="modal-bg modal-exit"></div>
<div class="modal-container">

<p class="first">Desenvolvedor full-stack surdo, graduado em ciência da computação, amante de línguas estrangeiras e aprendendo ciência de dados.</p>
<p>Bacharel em Ciência de Computação pela UNISAL e estudante de pós-graduação em ciência de dados. Trabalhou nas áreas de designer e desenvolvedor há uma década. Atualmente em busca de novas aventuras e adquirir novas competências na área de tecnologia e acredita que fez a escolha certa e está no caminho certo.</p>

<button class="modal-close modal-exit">Fechar</button>
</div>
</div>

</div>

<!-- Natalício -->
<div class="who who-2">
<img alt="Foto de Natalicio Souza Junior" class="image" src="assets/images/people/natalicio.png">
<h2>Natalicio Campos de Souza Junior</h2>
<a href="https://www.linkedin.com/in/nataliciojr" target="_blank"><img alt="Ir para o perfil de Natalicio Campos Souza Junior no Linkedin." class="linkedin" src="assets/images/linkedin.png"/></a>

<a data-modal="modal-2">Leia mais</a>

<div class="modal" id="modal-2">
<div class="modal-bg modal-exit"></div>
<div class="modal-container">

<p class="first">Formado tecnicamente em Informática, Faculdade Pitágoras, experiência na área Service Desk e atualmente estudando na trilha preparatória na Gama Academy, desenvolvimento front-end (HTML, CSS e Javascript) e banco de dados.</p>
<p>Possui conhecimento em metodologias ágeis, e estudante de Java e .NET.</p>

<button class="modal-close modal-exit">Fechar</button>
</div>
</div>

</div>

<!-- Wybson -->
<div class="who who-3">
<img alt="Foto de Wybson Santana" class="image" src="assets/images/people/wybson.png">
<h2>Wybson Santana</h2>
<a href="https://www.linkedin.com/in/wybsonsantana/" target="_blank"><img alt="Ir para o perfil de Wybson Santana no Linkedin." class="linkedin" src="assets/images/linkedin.png"/></a>

<a data-modal="modal-3">Leia mais</a>

<div class="modal" id="modal-3">
<div class="modal-bg modal-exit"></div>
<div class="modal-container">

<p class="first">Técnico em Gestão Empresarial, graduando em Gestão Pública e um amante de tecnologias nas áreas de inclusão e inovação. Recentemente concluí um Boot Camp com foco em HTML/CSS, JavaScript, Git e Metodologias Ágeis na Gama Academy e um Webinar em Cloud Computing & Cyber Security no IGTI.</p>
<p>Sou estudante de Java, JS, C# e em breve ingressarei no curso de Engenharia de Software.</p>

<button class="modal-close modal-exit">Fechar</button>
</div>
</div>

</div>

<!-- Carlos Cristiano -->
<div class="who who-4">
<img alt="Foto de Carlos Cristiano" class="image" src="assets/images/people/carlos-cristiano.png">
<h2>Carlos Cristiano de Paradello</h2>
<a href=" https://www.linkedin.com/in/carlos-27b" target="_blank"><img alt="Ir para o perfil de Carlos Cristiano de Paradello no Linkedin." class="linkedin" src="assets/images/linkedin.png"/></a>

<a data-modal="modal-4">Leia mais</a>

<div class="modal" id="modal-4">
<div class="modal-bg modal-exit"></div>
<div class="modal-container">

<p class="first">Aprendiz de assistente logístico empresa U&M | Mineração e Construção S/A. Cursando técnico em manutenção de rede e computadores - MicroCamp. Apaixonado por empreendedorismo, inovações e tecnologia.</p>

<button class="modal-close modal-exit">Fechar</button>
</div>
</div>

</div>

<!-- Hélio Assunção -->
<div class="who who-5">
<img alt="Foto de Hélio Assunção" class="image" src="assets/images/people/helio-assuncao.png">
<h2>Hélio Assunção</h2>
<a href=" https://www.linkedin.com/in/hélio-brito-91b89826/" target="_blank"><img alt="Ir para o perfil de Hélio Assunção no Linkedin." class="linkedin" src="assets/images/linkedin.png"/></a>

<a data-modal="modal-5">Leia mais</a>

<div class="modal" id="modal-5">
<div class="modal-bg modal-exit"></div>
<div class="modal-container">

<p class="first">Possui ampla experiência nas áreas contábil, fiscal e financeira. Bacharelado em Ciências Contábeis e MBA em Direito Tributário e Contabilidade. Atuou como contador por 3 anos na empresa Discevo, como gestor contábil por quase 12 anos na Motobraz Honda e atualmente trabalha como contador na Grupo Ganoups há 1 ano e 6 meses.</p>

<button class="modal-close modal-exit">Fechar</button>
</div>
</div>

</div>
</section>
</div>

<section>
<div vw class="enabled">
<div role="button" vw-access-button class="active"></div>
<div vw-plugin-wrapper>
<div class="vw-plugin-top-wrapper"></div>
</div>
</div>
</section>

<footer>
<div class="container">
<p>O objetivo deste projeto é compartilhar notícias positivas sobre a Covid-19 que viraram destaque na mídia.</p>
<img alt="Logotipo de Gama Pūrongo Aoteraoa" src="assets/images/logotype.svg">
<p>© 2021 Equipe 8 Gama Pūrongo Aoteraoa - Todos os direitos reservados.</p>
<p>Programa de Formação Tech Itaú PCD em parceria com a Gama Academy.</p>
</div>
</footer>

<script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>

<script>
new window.VLibras.Widget('https://vlibras.gov.br/app');
</script>

<script src="assets/js/global.js"></script>

</body>

</html>
131 changes: 131 additions & 0 deletions assets/css/about.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,131 @@
h1.about
{
font-size: 56px;
font-weight: 700;
}

.about
{
display: grid;
gap: 30px;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(5, auto);
padding-top: 180px;
}

.about .who
{
display: grid;
gap: 20px;
justify-items: center;
padding: 10px;
}

.about .who .image
{
height: auto;
max-width: 100%;
}

.about .who label
{
color: var(--color1);
display: block;
text-align: center;
width: 120px;
}

.linkedin
{
height: 96px;
}

.about .who .modal p
{
font-size: 1.25rem;
margin-top: 2.5rem;
}

.about .who .modal p.first
{
margin-top: 4rem
}

.about .who .modal p:last-child
{
margin-bottom: 2.5rem;
}

@media only screen and (max-width: 1390px)
{

}

@media only screen and (max-width: 1024px)
{

}

@media only screen and (max-width: 990px)
{

}

@media only screen and (max-width: 800px)
{

}

@media only screen and (max-width: 780px)
{

}

@media screen and (max-width: 640px)
{

}

@media only screen and (max-width: 540px)
{
.about
{
grid-template-columns: repeat(1, 1fr);
grid-template-rows: repeat(10, auto);
}
}

@media only screen and (max-width: 428px)
{

}

@media only screen and (max-width: 395px)
{

}

@media only screen and (max-width: 384px)
{

}

@media only screen and (max-width: 375px)
{

}

@media only screen and (max-width: 320px)
{

}

@media only screen and (max-width: 280px)
{

}

@media only screen and (max-width: 240px)
{

}
24 changes: 24 additions & 0 deletions assets/css/colours.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
:root
{
/* Navbar */
--nav-bg: #28203e;
--nav-primary: #e1e1e6;
--nav-primary-hover: #cab2ff;

--color1: #FFFFFF;
--color2: #E1E1E6;
--color3: #04D361;
--color4: #9466FF;
--color5: #8257E5;
--color6: #734BD1;
--color7: #6833E4;
--color8: #29292E;
--color9: #28203E;
--color10: #2D1F4E;
--color11: #311F5A;
--color12: #231349;

/* Footer */
--footer-bg: #28203E;
--footer-fg: #E1E1E6;
}
Loading

0 comments on commit 0b6d547

Please sign in to comment.