-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
204 lines (180 loc) · 9.15 KB
/
index.html
File metadata and controls
204 lines (180 loc) · 9.15 KB
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
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>USPCodeLab Each</title>
<link rel="stylesheet" href="./styles/main.css">
</head>
<body>
<nav class="barra-navegacao">
<a href="#" class="item">
<div class="codelabLogo">
<img src="./assets/CodeLabBranco.svg" alt="Imagem CodeLab" class="logo">
</div>
</a>
<div class="barra-navegacao__links">
<a href="#" class="item">Eventos</a>
<a href="#footer" class="item">Processo seletivo</a>
</div>
</nav>
<header class="cabecalho">
<div class="cabecalho__texto">
<h1 class="cabecalho__titulo"><span class="rosa">Code</span>Lab <span class="azul">Each</span></h1>
<p class="cabecalho__paragrafo__primeiro">Grupo de extensão universitário da Each que tem como </p>
<p class="cabecalho__paragrafo__segundo">objetivo facilitar o acesso ao conhecimento tecnológico.</p>
</div>
<div class="cabecalho__imagem">
<div class="box">
<img src="./assets/each-ucl-logo-white-updated.svg" alt="Logo CodeLab" class="cabecalho__imagem__logo">
</div>
</div>
</header>
<main class="principal">
<section class="principal__apresentacao">
<div class="linha__coluna">
<div class="linha"></div>
<div class="linha"></div>
</div>
<div class="principal__apresentacao__main">
<div class="principal__apresentacao__info">
<h2><span class="rosa">About us</span></h2>
<p class="principal__apresentacao__info__paragrafo">O CodeLab é um grupo de extensão universitária
dedicado a apoiar alunos e iniciantes no campo do desenvolvimento web. Nosso objetivo é ajudar os
participantes a dar os primeiros passos em suas carreira no setor de tecnologia, proporcionando
conhecimento, práticas e conexões fundamentais para o sucesso na área.
</p>
</div>
<div class="principal__apresentacao__imagem">
<img src="./assets/interhack 2.jpg" alt="Imagem do grupo CodeLab" class="logo__dev">
</div>
</div>
<div class="linha__coluna inverso">
<div class="linha tipo-azul"></div>
<div class="linha tipo-azul"></div>
</div>
</section>
<section class="principal__trilha">
<section class="principal__trilha__devjourney">
<div class="container">
<section class="principal__trilha__devjourney__info">
<h2>Conheça nosso <span class="rosa">dev.Journey()</span></h2>
</section>
<section class="principal__trilha__devjourney__paragrafo">
<p>O dev.journey() é uma jornada de 4 etapas, que visa aperfeiçoar o ensino na programação e
conectar os alunos as empresas.</p>
</section>
</div>
</section>
<section class="principal__trilha__secao">
<section class="principal__trilha__info">
<h3><span class="rosa">dev.learn()</span></h3>
<p>Cursos sobre HTML, CSS, JavaScript, e outras tecnologias essenciais para quem deseja seguir na
área de desenvolvimento web.</p>
</section>
<section class="principal__trilha__imagem">
<img src="./assets/each-dev-learn-update.png" alt="Imagem do dev.learn()" class="logo__dev">
</section>
</section>
<div class="principal__trilha__seta">
<div class="seta primeira__seta"></div>
<div class="seta primeira__seta"></div>
</div>
<div class="principal__trilha__seta">
<div class="seta segunda__seta"></div>
<div class="seta segunda__seta"></div>
</div>
<div class="principal__trilha__seta">
<div class="seta terceira__seta"></div>
<div class="seta terceira__seta"></div>
</div>
<section class="principal__trilha__secao" id="secao__invertida">
<section class="principal__trilha__imagem">
<img src="./assets/each-dev-boost.svg" alt="Imagem do dev.boost()" class="logo__dev">
</section>
<section class="principal__trilha__info">
<h3><span class="rosa">dev.boost()</span></h3>
<p>Grupos avançados que participam de projetos de clientes externos ou da universidade.</p>
</section>
</section>
<div class="principal__trilha__seta">
<div class="seta primeira__seta"></div>
<div class="seta primeira__seta"></div>
</div>
<div class="principal__trilha__seta">
<div class="seta segunda__seta"></div>
<div class="seta segunda__seta"></div>
</div>
<div class="principal__trilha__seta">
<div class="seta terceira__seta"></div>
<div class="seta terceira__seta"></div>
</div>
<section class="principal__trilha__secao">
<section class="principal__trilha__info">
<h3><span class="rosa">dev.hack()</span></h3>
<p>Hackathons onde os participantes devem apresentar uma solução inovadora e eficiente para
problemas reais utilizando o seu conhecimento de tecnologia.</p>
</section>
<section class="principal__trilha__imagem">
<img src="./assets/dev-hack.svg" alt="Imagem do dev.hack()" class="logo__dev">
</section>
</section>
<div class="principal__trilha__seta">
<div class="seta primeira__seta"></div>
<div class="seta primeira__seta"></div>
</div>
<div class="principal__trilha__seta">
<div class="seta segunda__seta"></div>
<div class="seta segunda__seta"></div>
</div>
<div class="principal__trilha__seta">
<div class="seta terceira__seta"></div>
<div class="seta terceira__seta"></div>
</div>
<section class="principal__trilha__secao" id="secao__invertida">
<section class="principal__trilha__imagem">
<img src="./assets/dev-hire.svg" alt="Imagem do dev.hire()" class="logo__dev">
</section>
<section class="principal__trilha__info">
<h3><span class="rosa">dev.network()</span></h3>
<p> Conexão com empresas parceiras, recrutadores e profissionais da área, criando oportunidades para
estágios e empregos.</p>
</section>
</section>
</section>
<section class="principal__participar">
<h2 class="rosa principal__participar__titulo">Como participar?</h2>
<div class="principal__participar__info">
<p class="principal__participar__sub-titulo">O processo seletivo é simples:</p>
<p class="principal__participar__dedicacao">Basta possuir dedicação e paixão por tecnologia</p>
</div>
<div>
<p class="principal__participar__paragrafo">Oferecemos todo o material de estudo necessário para dar os
primeiros passos no mundo do desenvolvimento
web. </p>
<p class="principal__participar__paragrafo">Após aquirir o conhecimento necessário, você será convidado
a participar de desafios reais e necessidades
distintas. Isso significa que o seu portfólio não será composto apenas por projetos acadêmicos ou
simulados, mas por soluções desenvolvidas para problemas concretos. </p>
</div>
</section>
</main>
<footer id="footer" class="rodape">
<section class="rodape__apresentacao">
<h2 class="rodape__titulo">Fique atento as princípais notícias!</h2>
<p class="rodape__paragrafo">Siga o CodeLab Each nas redes sociais!</p>
<div class="rodape__apresentacao__redes-sociais">
<a href="#" class="rodape__github">
<img src="./assets/github.svg" alt="Link do Youtube CodeLab Each">
</a>
<a href="#" class="rodape__instagram">
<img src="./assets/instagram.svg" alt="Link do Instagram CodeLab Each">
</a>
<a href="#" class="rodape__telegram">
<img src="./assets/telegram.svg" alt="Link do Telegram CodeLab Each">
</a>
</div>
</section>
</footer>
</body>
</html>