forked from Vitor-Burgarelli/landing-page-squad
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
135 lines (116 loc) · 7.98 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Squad 3</title>
<link rel ="stylesheet" href="reset.css">
<link rel ="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div id="menus">
<h1><img class="logo" src="logosquad.png" alt="Squad 3"></h1>
<nav>
<ul>
<li><a href="#home">Home</a></li>
<li><a href="#sobre-nos">Sobre nós</a></li>
<li><a href="#portfolio">Portfolio</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section class="home" id="home">
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/KCf4SzUZHew" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<p id="introducao">O Squad 3 é um dos grupos do projeto #TeuFuturo de 2021, sendo composto por três integrantes: Ana Fleischmann, Ana Wives e Vitor Burgarelli. O curso teve início em abril de 2021, sendo promovido pela IMED e a +PraTi.</p>
</section>
<section class="sobre-nos" id="sobre-nos">
<h2>Sobre nós</h2>
<ul class="integrantes">
<li>
<img class="imagens" src="fleischmann.jpeg" alt="Imagem da integrante Ana Carolina Palma Fleischmann">
<h3>Ana Carolina Palma Fleischmann</h3>
<p class="biografia">Gaúcha, 17 anos, ingressou na programação por influência do seu pai, que cursou Ciência da Computação. Contudo, seu primeiro contato com a TI se deu em 2021, pois foi apresentada a área pela Olimpíada Nacional de Desenvolvimento de Aplicativos em 2020. Ana Fleischmann estuda no Colégio Tiradentes da Brigada Militar de Porto Alegre, no qual cursa o segundo ano do Ensino Médio. Em seu tempo livre, gosta de ler livros de ficção, assim como ouvir mpb e rap.</p>
</li>
<li>
<img class="imagens" src="wives.jpeg" alt="Imagem da integrante Ana Paula da Silva Wives">
<h3>Ana Paula da Silva Wives</h3>
<p class="biografia">Ana Wives é apaixonada por leitura, música e idiomas, mas a sua mais nova paixão é a programação! Inspirada pelo irmão, que cursa e trabalha na área da TI, buscou esse caminho devido a sua curiosidade com seus 17 anos, onde encontrou o #TeuFuturo. Atualmente, estuda na Escola Técnica Estadual Parobé, no terceiro ano do Ensino Médio.</p>
</li>
<li>
<img class="imagens" src="burgarelli.jpeg" alt="Imagem do integrante Vitor Cardoso Burgarelli">
<h3>Vitor Cardoso Burgarelli</h3>
<p class="biografia">Nascido na cidade de São Paulo, Vitor tem 16 anos e cursa o segundo ano do Ensino Médio no Colégio Tiradentes da Brigada Militar de Porto Alegre. Seus hobbies são jogos online, assim como assistir vídeos variados no YouTube. Dessa forma começou seu interesse pela tecnologia, pois encontrou um ambiente de diversão e conhecimento.</p>
</li>
</ul>
</section>
<section class="portfolio" id="portfolio">
<h2>Portfolio</h2>
<ul class="projetos">
<h3> Jogos Clássicos</h3>
<li>
<img class="jogosimagens" src="pong.png" alt="Imagem do jogo Pong">
<h4>Pong</h4>
<p class="descricao">A primeira atividade feita no #TeuFuturo foi o desenvolvimento do jogo Pong com a linguagem Scratch. Assim, foi possível desenvolver uma base da lógica de programação de uma forma simples e divertida.</p>
<p class="descricao">Em seguida, foi programado o mesmo jogo, mas utilizando a linguagem JavaScript pelo P5.js. A partir disso, o pensamento computacional foi mais desenvolvido.</p>
<p class="descricao">As habilidades desenvolvidas foram o uso de variáveis e funções. Também foi ensinado como criar um jogo completo, que possui controles, animações, placar e sons.</p>
</li>
<li>
<img class="jogosimagens" src="freeway.png" alt="Imagem do jogo Freeway">
<h4>Freeway</h4>
<p class="descricao">O jogo Freeway foi a segunda tarefa proposta pelo #Teu Futuro, desenvolvido pelo P5.js com a linguagem JavaScript. Com esse projeto, foi possível aprimorar as habilidades anteriores de programação.</p>
<p class="descricao">Com esse projeto, o grupo aprendeu a utilizar listas (arrays), a adicionar imagens no P5.js e a aperfeiçoar o pensamento computacional.</p>
</li>
<h3> HTML, CSS e JavaScript</h3>
<li>
<img class="jogosimagens" src="logica-programacao-1.png" alt="Imagem de um pop-up com a pergunta: Qual o ano limite?">
<h4>Lógica de Programação I</h4>
<p class="descricao">A fim de promover uma maior autonomia na programação, são propostas atividades variadas, tendo como principal foco introduzir HTML e JavaScript.</p>
<p class="descricao">Ferramentas como laços, loops, fors e whiles são apresentadas mais profundamente. Uma das páginas criada tem o objetivo de exibir todos os anos que tiveram o evento Copa do Mundo, na qual o usuário determina o ano limite por meio de um pop-up.</p>
</li>
<li>
<h4>Git e GitHub</h4>
<p class="descricao">O curso também proporciona um aprendizado quanto a sistemas de controle de versões, no caso, Git e GitHub. A equipe foi instigada a administrar arquivos trazidos pelo professor, levando ao aprendizado sobre o uso de tais sistemas.</p>
</li>
<li>
<img class="jogosimagens" src="creeper.png" alt="Imagem de um creeper, persongem do jogo MineCraft">
<img class="jogosimagens" src="jogo-alvo.png" alt="Imagem do jogo feito no curso">
<h4>Lógica de Programação II</h4>
<p class="descricao">Nesse módulo, o squad é estimulado a aprofundar seu conhecimento em JavaScript, com enfoque em suas funções. Além disso, o uso do Canvas é um dos tópicos em questão, como é visto na atividade que pede que seja exibido um Creeper - personagem do jogo MineCraft.</p>
</li>
<li>
<img class="jogosimagens" src="pagina-javascript.png" alt="Imagem da página desenvolvida no curso">
<h4>JavaScript</h4>
<p class="descricao">Nessa unidade, o estudante é encorajado a pôr em prática essa linguagem tão utilizada na web. Isso ocorre por meio de um projeto base que o curso fornece, no qual o grupo vai aperfeiçoando a página. </p>
<p class="descricao">Com esse curso, aprende-se a manipular elementos da página, como utilizar e validar formulários, buscar dados em outro servidor com AJAX e a executar boas práticas de organização de código Javascript.</p>
</li>
<li>
<img class="jogosimagens" src="barbearia-alura.PNG" alt="Imagem da página desenvolvida no curso">
<h4>HTML5 e CSS3</h4>
<p class="descricao">A fim de desenvolver as habilidades no HTML e no CSS é proposto a construção de uma página web do zero. Esse curso apresenta quatro partes, em que na sua conclusão, o aluno detém de conhecimento suficiente para iniciar a construir páginas web com maior autonomia.</p>
</li>
</ul>
</section>
<section class="duvida">
<ul class="contatos">
<h2>Tem alguma dúvida?</h2>
<p id="entre">Entre em contato conosco:</p>
<li>ana.palma.fleischmann@gmail.com</li>
<li>wivesanapaula@gmail.com</li>
<li>vcburgarelli@gmail.com</li>
</ul>
</section>
</main>
<footer>
<div class="rodape">
<img class="footerlogo" src="logosquad.png" alt="Squad 3">
<p class="copyright">© Copyright Squad 3 - 2021</p>
</div>
</footer>
</body>
</html>