-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
199 lines (168 loc) · 11.4 KB
/
index.html
File metadata and controls
199 lines (168 loc) · 11.4 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<!-- Meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Título do site-->
<title>Simpósio - Design de Mídias Digitais</title>
<!-- Cdn Css Bootstrap -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
crossorigin="anonymous">
<!-- Meu Css -->
<link href="css/simposio.css" rel="stylesheet" type="text/css" />
<!-- Font Awesome icons -->
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
</head>
<body data-spy="scroll" data-target="#scrollSimposio" data-offset="0">
<!-- Entrada principal componente jumbotron com imagem de background -->
<div class="jumbotron jumbotron-fluid jumbotron-customizado zero-padding" style="height: 100%">
<!-- Header e menu de navegação em cima do jumbotron -->
<header>
<nav class="container navbar navbar-expand-lg" id="navbar-exemplo2">
<a class="navbar-text preto-menu" href="https://fatecbarueri.edu.br/home/"><b>FATEC</b> BARUERI</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#menuMobileSuperior">
<span class="navbar-toggler-icon"><i class="fas fa-bars"></i></span>
</button>
<div class="collapse justify-content-end navbar-collapse" id="menuMobileSuperior">
<ul class="navbar-nav">
<li><a href="#simposio" class="nav-item nav-link preto-menu">O SIMPÓSIO</a></li>
<li><a href="#calendario" class="nav-item nav-link preto-menu">ATIVIDADES DO EVENTO</a></li>
<li><a href="#fatec" class="nav-item nav-link preto-menu">SOBRE A <b>FATEC</b></a></li>
</ul>
<a href="#inscreva" class="nav-item nav-link preto-menu align-bottom"><button class="btn botao-contato">INSCREVA-SE</button></a>
</div>
</nav>
</header>
</div>
<main>
<!-- Primeira parte do conteúdo principal relativo a descrição do simpósio -->
<section class="container">
<div class="text-center">
<h2 class="font-weight-bold vermelho-principal" id="simposio">O SIMPÓSIO</h2>
</div>
<!-- Descrição simpósio -->
<p class="lead text-center">A Fatec Barueri te convida a participar do Primeiro Simpósio de Mídias Digitais, totalmente voltado à área de marketing, design e programação. Durante os dias 15 e 16 de maio, receberemos grandes profissionais do ramo para falar sobre desenvolvimento de sites, empreendedorismo digital e metodologias ágeis.</p>
<!-- Segunda parte do conteúdo principal relativo ao calendário e botões drop-down -->
<section class="container mt-5">
<div class="mx-auto" style="width: 400px;">
<h2 class="font-weight-bold vermelho-principal" id="calendario">ATIVIDADES DO EVENTO</h2>
</div>
<!-- Início dos cards -->
<div class="card-deck">
<!-- palestra 1 -->
<div class="card corfundo-palestra1 pt-3">
<span class="text-center"><i class="fas fa-bullhorn tamanho-icone-card"></i></span>
<div class="card-body">
<div class="text-center"><time class="texto-branco-card">15/05: 19h:30 - 20h:30</time></div>
<h4 class="text-center texto-branco-card"><b>ABERTURA DO </br> SIMPÓSIO</b></h4>
<p class="text-center lead texto-branco-card"><b>Entenda o universo das mídias digitais e a influência das novas tecnologias na dinâmica do mercado de trabalho.</b></p>
<!-- Palestrante 1 -->
<h4 class="text-center texto-branco-card"><b>AMANDA GOUVEIA</b></h4>
<p class="text-center texto-branco-card">Sócia da Start-up Arqui4D, Head de estratégia de negócios na América Latina do aplicativo AUGmentecture Inc. e parceira da revista <b>PROJETO</b>.</p>
<div class="text-center"><button type="button" class="btn btn-outline-light">
<a class="texto-branco-card" href="https://www.linkedin.com/in/amanda-gouveia-564399167/">Saiba mais</a></button></div>
<!-- palestrante 2 -->
<h4 class="text-center texto-branco-card"><b>ALINE ROCHA</b></h4>
<p class="text-center texto-branco-card">Sócia da Start-up Arqui4D, Head de marketing e vendas na América Latina do aplicativo AUGmentecture Inc. e parceira da revista <b>PROJETO</b>.</p>
<div class="text-center"><button type="button" class="btn btn-outline-light">
<a class="texto-branco-card" href="https://www.linkedin.com/in/aline-rocha-32b86a14a/">Saiba mais</a></button></div>
</div>
</div>
<!-- palestra 2 -->
<div class="card corfundo-palestra2 pt-3">
<span class="text-center"><i class="fas fa-gamepad tamanho-icone-card"></i></span>
<div class="card-body">
<div class="text-center"><time class="texto-branco-card">15/05: 20h:30 - 22h:30</time></div>
<h4 class="text-center texto-branco-card"><b>METODOLOGIA ÁGIL COM GAMEFICAÇÃO</b></h4>
<p class="text-center lead texto-branco-card"><b>Aprenda sobre gestão e planejamento de projetos de software com Design Thinking, Design Sprint e Management 3.0. </b></p>
<!-- Palestrante -->
<h4 class="text-center texto-branco-card"><b>RODRIGO CAIXETA</b></h4>
<p class="text-center texto-branco-card">Vencedor do prêmio Projetos do Ano em 2014 por fundar The Scrum Game Simulator, tem experiência com Big Data e Engenharia de Software. </p>
<div class="text-center"><button type="button" class="btn btn-outline-light">
<a class="texto-branco-card"href="https://www.linkedin.com/in/rcaixeta/">Saiba mais</a></button></div>
</div>
</div>
<!-- palestra 3 -->
<div class="card corfundo-palestra3 pt-3">
<span class="text-center"><i class="fas fa-laptop tamanho-icone-card"></i></span>
<div class="card-body">
<div class="text-center"><time class="texto-branco-card">16/05: 19h:20 - 22h:30</time></div>
<h4 class="text-center texto-branco-card"><b>MARKETING DIGITAL E WEB FULL STACK</b></h4>
<p class="text-center lead texto-branco-card"><b>Gerencie seu negócio pela Internet e descubra como funciona o processo de desenvolvimento de sites.</b></p>
<!-- Professor 1 -->
<h4 class="text-center texto-branco-card"><b>ANA PAULA</b></h4>
<p class="text-center texto-branco-card">Professora de Web Full Stack na Digital House</p>
<div class="text-center"><button type="button" class="btn btn-outline-light">
<a class="texto-branco-card" href="https://www.linkedin.com/in/anapaulamba/">Saiba mais</a></button></div>
<!-- Professor 2 -->
<h4 class="text-center texto-branco-card mt-3"><b>CELIO RICARDI</b></h4>
<p class="text-center texto-branco-card">Professor de Negócios Digitais na Digital House</p>
<div class="text-center"><button type="button" class="btn btn-outline-light">
<a class="texto-branco-card" href="https://www.linkedin.com/in/celioricardi/">Saiba mais</a></button></div>
<!-- Professor 3 -->
<h4 class="text-center texto-branco-card mt-3"><b>HUGO ROSSO</b></h4>
<p class="text-center texto-branco-card">Coordenador dos cursos de Marketing Digital na Digital House</p>
<div class="text-center"><button type="button" class="btn btn-outline-light">
<a class="texto-branco-card" href="https://www.linkedin.com/in/hugorosso/">Saiba mais</a></button></div>
</div>
</div>
</div>
</section>
<!-- Formulário de confirmação -->
<section class="container mt-5" id="inscreva">
<h2 class="font-weight-bold text-center vermelho-principal">INSCREVA-SE</h2>
<p class="lead text-center"><b>Nossas atividades são limitadas pela capacidade de pessoas que o ambiente pode suportar, por isso, pedimos que você confirme sua presença preenchendo o formulário abaixo!</b></p>
<div class="embed-responsive-item text-center mt-5">
<iframe src="https://docs.google.com/forms/d/e/1FAIpQLSd03OZwltdgMbgsbC81QluazBEaEqSBK1UvLp5Hgcc2KGq_6Q/viewform?embedded=true" width="640" height="910" frameborder="0" marginheight="0" marginwidth="0">Carregando…</iframe>
</div>
</section>
<!-- Informações -->
<section class="container mt-5 text-center">
<h3 class="font-weight-bold verde-secundario">Informações de contato</h3>
<p class="lead">
<b>Av. Carlos Capriotti, 123<br> Centro, Barueri - SP, 06401-136<br>(11) 4198-3121</b>
</p>
</section>
<!-- Terceira parte do conteúdo principal e a parte sobre a Fatec -->
<section class="container text-center mt-5">
<h2 class="font-weight-bold vermelho-principal" id="fatec">SOBRE A FATEC</h2>
<p class="lead">Inaugurada em 17 de agosto de 2009, a Fatec Barueri oferece gratuitamente os Cursos Superiores de Tecnologia em Eventos, Tecnologia em Gestão da Tecnologia da Informação, Tecnologia em Gestão Empresarial (Curso EaD), Tecnologia em Comércio Exterior, Tecnologia em Transporte Terrestre, Tecnologia em Logística, Tecnologia em Gestão de Recursos Humanos e Tecnologia em Design de Mídias Digitais. Os cursos têm duração de seis semestre, nos períodos matutino, vespertino e noturno.</p>
<!-- Imagem da entrada da Fatec -->
<figure>
<img src="img/bgFatec.jpg" alt="Foto da entrada da FATEC Barueri" class="img-fluid">
</figure>
</section>
</main>
<!-- Início do rodapé -->
<footer class="customizacao-rodape mt-4">
<div class="container">
<!-- Menu de navegação do rodapé -->
<nav class="navbar navbar-expand-lg navegacao-rodape">
<ul class="navbar nav">
<li><a href="https://www.facebook.com/fatecbaruerioficial"
class="nav-item nav-link"><i class="fab fa-facebook-f"></i></a></li>
<li><a href="https://www.youtube.com/user/fatecbar"
class="nav-item nav-link"><i class="fab fa-youtube"></i></a></li>
<li><a href="https://twitter.com/fatecbarueri"
class="nav-item nav-link"><i class="fab fa-twitter"></i></a></li>
</ul>
</nav>
<!-- merchan do dev :D -->
<a class="a-rodape align-right" href="https://www.linkedin.com/in/matheus-araujo-cunha/">
© Matheus C. - 2019
</a>
</div>
</footer>
<!-- Javascript Cdn Bootstrap -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
crossorigin="anonymous">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49"
crossorigin="anonymous">
</script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy"
crossorigin="anonymous">
</script>
</body>
</html>