-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
308 lines (290 loc) · 18.8 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
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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Senai | Infocast</title>
<link href="https://fonts.googleapis.com/css?family=Montserrat:200,400,700,900|Space+Mono:400,700|PT+Sans" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css"/>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<main>
<section class="header-banner">
<nav class="navbar">
<div class="navbar__logo">
<img class="logo" src="./assets/imgs/logo.svg" alt="logomarca senai infocast">
</div>
<div class="navbar__menu">
<button class="menu__hamburguer">
<img class="menu"src="assets/icones/menu-hamburguer.png" alt="menu">
</button>
<ul class="menu__links">
<li class = "link">
<a href="#about"> Sobre o Infocast</a>
<hr class="bar">
</li>
<li class = "link">
<a href="#speakers">Apresentadores</a>
<hr class="bar">
</li>
<li class = "link">
<a href="#contact">Escreva pra Gente</a>
<hr class="bar">
</li>
<li class = "link">
<a href="#news">Receba Novidades</a>
<hr class="bar">
</li>
<li class = "link">
<a href="#facegroup">Participe do Grupo</a>
<hr class="bar">
</li>
</ul>
</div>
</nav>
<div class="infocast-slider">
<div id="control"></div>
<div class="slider center" id="slider-frame">
<!-- Aqui entram os slides -->
</div>
</div>
</section>
<!-- section about -->
<section class="about" id="about">
<div class="about__container">
<div class="about__col-1">
<img class="about__illustration" src="assets/imgs/about-img.svg" alt="background illustration">
</div>
<div class="about__col-2">
<h1 class="about__title">
<strong>Sobre</strong><br> o Infocast
</h1>
<p class="about__text">
O <strong class="about__text-weight"> SENAI Infocast</strong> é o podcast da Escola SENAI
de Informática sobre inovação, tecnologia
e educação. Toda semana, um episódio
diferente descomplicando conceitos sem
deixar o conhecimento de lado e mostrando
um pouco do universo <strong class="about__text-weight">#SENAIInfo</strong> de um
jeito descontraído e leve.
</p>
</div>
</div>
</section>
<!-- section banner -->
<section class="banner">
</section>
<!-- section speakers -->
<section class="speakers" id="speakers">
<div class="speakers__background"></div>
<h2 class="speakers__title">Apresentadores</h2>
<div class="speakers__container">
<div class="speakers__col-1">
<!-- Ricardo -->
<div class="speakers__layout-profile">
<div class="layout-profile__img">
<img class="layout-profile__img-front" src="assets/imgs/ricardo1.png" alt="happy girl with a beautiful smile">
<img class="layout-profile__img-back" src="assets/imgs/ricardo2_hover.png" alt="happy girl with holding a cell phone">
</div>
<div class="layout-profile__text">
<h2 class="layout-profile__text-title">
Ricardo<br><strong>Gerbaudo</strong>
</h2>
<div class="layout__line"></div>
<p>
Formado na área de Tecnologia
e atualmente mestrando em Engenharia
e Gestão da Inovação na UFABC,
é apaixonado por tecnologia e entusiasta
da inovação e acredita no poder do digital
para transformar os relacionamentos.
</p>
<div class="layout-profile__links">
<a href="#"><img class = "img__links--color" src="assets/icones/facebook-orange.png"></a>
<a href="#"><img class = "img__links--color" src="assets/icones/twitter-orange.png"></a>
<a href="#"><img class = "img__links--color" src="assets/icones/instagram-orange.png"></a>
</div>
</div>
</div>
<!-- Murilo -->
<div class="speakers__layout-profile murilo">
<div class="layout-profile__img">
<img class="layout-profile__img-front" src="assets/imgs/murilo1.png" alt="happy girl with a beautiful smile">
<img class="layout-profile__img-back" src="assets/imgs/murilo2_hover.png" alt="happy girl with holding a cell phone">
</div>
<div class="layout-profile__text">
<h2 class="layout-profile__text-title">
Murilo<br><strong>Prestes</strong>
</h2>
<div class="layout__line">
</div>
<p>
A alma é de designer, mas o coração
é dos podcasts e dos videoclipes peculiares.
Nosso técnico e mentor de imagens, vídeos
e músicas estranhas é do time dos
perguntadores crônicos e eternamente
curiosos.
</p>
<div class="layout-profile__links">
<a href="#"><img class = "img__links" src="assets/icones/facebook-cinza.png"></a>
<a href="#"><img class = "img__links" src="assets/icones/twitter-cinza.png"></a>
<a href="#"><img class = "img__links" src="assets/icones/instagram-cinza.png"></a>
<a href="#"><img class = "img__links--color" src="assets/icones/facebook-orange.png"></a>
<a href="#"><img class = "img__links--color" src="assets/icones/twitter-orange.png"></a>
<a href="#"><img class = "img__links--color" src="assets/icones/instagram-orange.png"></a>
</div>
</div>
</div>
</div>
<div class="speakers__col-2">
<!-- Gabrielle -->
<div class="speakers__layout-profile gabi">
<div class="layout-profile__img">
<img class="layout-profile__img-front" src="assets/imgs/gabi1.png" alt="happy girl with a beautiful smile">
<img class="layout-profile__img-back" src="assets/imgs/gabi2_hover.png" alt="happy girl with holding a cell phone">
</div>
<div class="layout-profile__text color">
<h2 class="layout-profile__text-title">
Gabrielle<br><strong>Nascimento</strong>
</h2>
<div class="layout__line-color">
</div>
<p>
Jornalista de formação, prefere o analógico
e o presencial. Ainda que considere
a inovação e suas consequências positivas,
não deixa de questionar todos os fatos
e analisar sob diferentes perspectivas.
</p>
<div class="layout-profile__links">
<a href="#"><img class = "img__links" src="assets/icones/facebook-cinza.png"></a>
<a href="#"><img class = "img__links" src="assets/icones/twitter-cinza.png"></a>
<a href="#"><img class = "img__links" src="assets/icones/instagram-cinza.png"></a>
<a href="#"><img class = "img__links--color" src="assets/icones/facebook-orange.png"></a>
<a href="#"><img class = "img__links--color" src="assets/icones/twitter-orange.png"></a>
<a href="#"><img class = "img__links--color" src="assets/icones/instagram-orange.png"></a>
</div>
</div>
</div>
<!-- Clarissa -->
<div class="speakers__layout-profile">
<div class="layout-profile__img">
<img class="layout-profile__img-front" src="assets/imgs/clarissa1.png" alt="happy girl with a beautiful smile">
<img class="layout-profile__img-back" src="assets/imgs/clarissa2_hover.png" alt="happy girl with holding a cell phone">
</div>
<div class="layout-profile__text">
<h2 class="layout-profile__text-title">
Clarissa<br><strong>Viana</strong>
</h2>
<div class="layout__line">
</div>
<p>
Jornalista e produtora, é eternamente
curiosa e apaixonada por tecnologia.
Perguntadora e entusiasta crônica, acredita
no poder benéfico das ferramentas que
a tecnologia e a inovação pode oferecer
ao mundo.
</p>
<div class="layout-profile__links">
<a href="#"><img class = "img__links--color" src="assets/icones/facebook-orange.png"></a>
<a href="#"><img class = "img__links--color" src="assets/icones/twitter-orange.png"></a>
<a href="#"><img class = "img__links--color" src="assets/icones/instagram-orange.png"></a>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- section contact -->
<section class="contact" id="contact">
<div class="contact__container">
<div class="contact__col-1">
<img class="contact__img" src="assets/imgs/contact-img.svg" alt="Imagem logo para contato">
</div>
<div class="contact__col-2">
<h2 class="contact__title"><strong>Escreva</strong> pra Gente</h2>
<form class="contact__form" id="formcontact">
<input type="text" class="contact__input" id="contactInputName" placeholder="Nome">
<input type="email" class="contact__input" id="contatoInputEmail" placeholder="E-mail">
<label for="contactInputMessage" class="contact__label">Mensagem
<textarea name="message" class="contact__input-box" id="contactInputMessage" cols="30" rows="6"></textarea>
</label>
<button type="button" class="contact__btn">Enviar Mensagem</button>
</form>
</div>
</div>
</section>
<!-- FACEGROUP -->
<section class="facegroup" id="facegroup">
<div class="facegroup__container">
<h2 class="facegroup__title">Participe do Grupo</h2>
<p class="facegroup__subtitle">
Quer sugerir pautas, comentar episódios ou simplesmente se conectar com a equipe do Infocast?
</p>
<p class="facegroup__comment">Faça parte do nosso grupo no Facebook!</p>
<button class="facegroup__btn" type="submit" value="Go to Facebook">
<img class="facegroup__btn-img" src="assets/imgs/facebook.png" alt="facebook icon">
<p class="facegroup__btn-text">Participe do Grupo</p>
</buton>
</div>
</section>
<!-- NEWS -->
<section class="news" id="news">
<div class="news__container">
<h2 class="news__title"><strong>Receba</strong> Novidades</h2>
<form action="" class="news__form" id="formNews">
<input type="text" class="news__input" id="newsInputName" placeholder="Nome">
<input type="email" class="news__input" id="newsInputEmail" placeholder="E-mail">
<input type="number" class="news__input" id="newsInputWhats" placeholder="WhatsApp">
<button class="button news__button">Inscreva-se</button>
</form>
</div>
</section>
<!-- MEDIAS -->
<section class="medias" id="medias">
<a class='medias__links' href="#">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96.124 96.123">
<path d="M72.089.02L59.624 0C45.62 0 36.57 9.285 36.57 23.656v10.907H24.037a1.96 1.96 0 0 0-1.96 1.961v15.803a1.96 1.96 0 0 0 1.96 1.96H36.57v39.876a1.96 1.96 0 0 0 1.96 1.96h16.352a1.96 1.96 0 0 0 1.96-1.96V54.287h14.654a1.96 1.96 0 0 0 1.96-1.96l.006-15.803a1.963 1.963 0 0 0-1.961-1.961H56.842v-9.246c0-4.444 1.059-6.7 6.848-6.7l8.397-.003a1.96 1.96 0 0 0 1.959-1.96V1.98A1.96 1.96 0 0 0 72.089.02z" data-original="#000000" class="active-path" data-old_color="#c8c8c8" />
</svg>
</a>
<a class='medias__links' href="#">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M490.24 113.92c-13.888-24.704-28.96-29.248-59.648-30.976C399.936 80.864 322.848 80 256.064 80c-66.912 0-144.032.864-174.656 2.912-30.624 1.76-45.728 6.272-59.744 31.008C7.36 138.592 0 181.088 0 255.904v.256c0 74.496 7.36 117.312 21.664 141.728 14.016 24.704 29.088 29.184 59.712 31.264C112.032 430.944 189.152 432 256.064 432c66.784 0 143.872-1.056 174.56-2.816 30.688-2.08 45.76-6.56 59.648-31.264C504.704 373.504 512 330.688 512 256.192v-.16-.096c0-74.848-7.296-117.344-21.76-142.016zM192 352V160l160 96-160 96z" data-original="#000000" class="active-path" data-old_color="#c8c8c8" />
</svg>
</a>
<a class='medias__links' href="#">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
<path d="M612 116.258a250.714 250.714 0 0 1-72.088 19.772c25.929-15.527 45.777-40.155 55.184-69.411-24.322 14.379-51.169 24.82-79.775 30.48-22.907-24.437-55.49-39.658-91.63-39.658-69.334 0-125.551 56.217-125.551 125.513 0 9.828 1.109 19.427 3.251 28.606-104.326-5.24-196.835-55.223-258.75-131.174-10.823 18.51-16.98 40.078-16.98 63.101 0 43.559 22.181 81.993 55.835 104.479a125.556 125.556 0 0 1-56.867-15.756v1.568c0 60.806 43.291 111.554 100.693 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.199 117.253 87.194-42.947 33.654-97.099 53.655-155.916 53.655-10.134 0-20.116-.612-29.944-1.721 55.567 35.681 121.536 56.485 192.438 56.485 230.948 0 357.188-191.291 357.188-357.188l-.421-16.253c24.666-17.593 46.005-39.697 62.794-64.861z" data-original="#010002" class="active-path" data-old_color="#c8c8c8" />
</svg>
</a>
<a class='medias__links' href="#">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path d="M352 0H160C71.648 0 0 71.648 0 160v192c0 88.352 71.648 160 160 160h192c88.352 0 160-71.648 160-160V160C512 71.648 440.352 0 352 0zm112 352c0 61.76-50.24 112-112 112H160c-61.76 0-112-50.24-112-112V160C48 98.24 98.24 48 160 48h192c61.76 0 112 50.24 112 112v192z" data-original="#000000" class="active-path" data-old_color="#c8c8c8" />
<path d="M256 128c-70.688 0-128 57.312-128 128s57.312 128 128 128 128-57.312 128-128-57.312-128-128-128zm0 208c-44.096 0-80-35.904-80-80 0-44.128 35.904-80 80-80s80 35.872 80 80c0 44.096-35.904 80-80 80z" data-original="#000000" class="active-path" data-old_color="#c8c8c8" />
<circle cx="393.6" cy="118.4" r="17.056" data-original="#000000" class="active-path" data-old_color="#c8c8c8" />
</svg>
</a>
<a class='medias__links' href="#">
<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 483.86 483.86">
<path d="M483.86 112.345h-26.699c-6.952 0-25.143 7.552-25.143 13.981v233.467c0 6.445 18.191 11.729 25.143 11.729h26.699v51.835H311.052v-51.835h34.57V129.615h-6.016L256.42 423.356h-64.406l-82.11-293.741h-6.219v241.906h34.555v51.835H0v-51.835h19.173c7.527 0 15.383-5.283 15.383-11.729V126.326c0-6.43-7.855-13.981-15.383-13.981H0V60.504h179.155l58.496 207.342h1.574l59.073-207.342H483.86v51.841z" data-original="#000000" class="active-path" data-old_color="#c8c8c8" />
</svg>
</a>
</div>
</section>
</main>
<footer class="footer">
<p>Copyright © 2018 <span>SENAI Infocast</span> </p>
</footer>
<!-- js -->
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-migrate-3.0.1.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.js"></script>
<script src="js/script.js"></script>
<script src="js/validateContact.js"> </script>
<script src="js/validateNewsLetter.js"> </script>
</body>
</html>