-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathindex.html
345 lines (326 loc) · 17.7 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
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>
Jovens Empreendedor
</title>
<meta name="description" content="Simple landind page" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/tailwind.min.css"/>
<!--Replace with your tailwind.css once created-->
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700" rel="stylesheet" />
<!-- Define your gradient here - use online tools to find a gradient matching your branding-->
<style>
.gradient {
background: linear-gradient(90deg, #2F56A4 100%, #ffffff 100%);
}
.recuo { text-indent:2em }
</style>
</head>
<body class="leading-normal tracking-normal text-white gradient" style="font-family: 'Source Sans Pro', sans-serif;">
<div class="pt-0">
<div class="container px-3 mx-auto flex flex-wrap flex-col md:flex-row items-center">
<!--Left Col-->
<div class="flex flex-col w-full md:w-2/5 justify-center items-start text-center md:text-left">
<h1 class="my-4 text-5xl font-bold leading-tight">
Curso Jornada Horizontes do Empreendedorismo
</h1>
<p class="leading-normal text-xl mb-8">
Se você é uma mulher jovem ou um jovem negro da Região Centro-Oeste e deseja empreender, participe do Curso On-line, gratuito, com horário flexivel e com Certificado de empreendedorismo.
</p>
<a href="https://jornadahorizontesdoempreendedor.finatec.org.br/saladeaula/login/signup.php">
<button class="mx-auto lg:mx-0 text-xl bg-green-600 text-white font-bold rounded-full my-6 py-4 px-8 transform transition hover:scale-105 duration-300 ease-in-out">
Inscreva-se
</button>
</a>
</div>
<!--Right Col-->
<div class="w-full sm:w-1/2 p-6">
<img src="images/Design inspiration-pana.svg"/>
</div>
</div>
</div>
<div class="relative -mt-12 lg:-mt-24">
<svg viewBox="0 0 1428 174" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-2.000000, 44.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496" opacity="0.100000001"></path>
<path
d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
opacity="0.100000001"
></path>
<path d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z" id="Path-4" opacity="0.200000003"></path>
</g>
<g transform="translate(-4.000000, 76.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path
d="M0.457,34.035 C57.086,53.198 98.208,65.809 123.822,71.865 C181.454,85.495 234.295,90.29 272.033,93.459 C311.355,96.759 396.635,95.801 461.025,91.663 C486.76,90.01 518.727,86.372 556.926,80.752 C595.747,74.596 622.372,70.008 636.799,66.991 C663.913,61.324 712.501,49.503 727.605,46.128 C780.47,34.317 818.839,22.532 856.324,15.904 C922.689,4.169 955.676,2.522 1011.185,0.432 C1060.705,1.477 1097.39,3.129 1121.236,5.387 C1161.703,9.219 1208.621,17.821 1235.4,22.304 C1285.855,30.748 1354.351,47.432 1440.886,72.354 L1441.191,104.352 L1.121,104.031 L0.457,34.035 Z"
></path>
</g>
</g>
</svg>
</div>
<section class="bg-white border-b py-8">
<div class="container max-w-5xl mx-auto m-8">
<h2 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
Impulsione sua Carreira
</h2>
<div class="w-full mb-4">
<div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
</div>
<div class="flex flex-wrap">
<div class="w-5/6 sm:w-1/2 p-6">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">
Você quer Empreender?
</h3>
<p class="text-gray-600 mb-8">
Poder estabelecer as próprias regras e formas de trabalhar é um dos motivos positivos de empreender. Essa autonomia permite que as decisões do negócio sejam tomadas por você, o que significa que o seu futuro depende apenas de sua responsabilidade.
</p>
</div>
<div class="w-full sm:w-1/2 p-6">
<img src="images/Team goals-pana.svg"/>
</div>
</div>
</div>
<div class="container max-w-5xl mx-auto m-8">
<div class="flex flex-wrap">
<div class="w-full sm:w-1/2 p-6">
<img src="images/Collab-pana.svg"/>
</div>
<div class="w-5/6 sm:w-1/2 p-6">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">
Profissionalizar sua Ideia?
</h3>
<p class="text-gray-600 mb-8">
Tirar do papel as ideias e contribuir para o mundo com algo inovador e magnífico. Trabalhar em seu próprio negócio pode ser arduo, porém é recompensado pela felicidade de trabalhar com o que você gosta e que realmente faz sentido.
</p>
</div>
</div>
</div>
<div class="container max-w-5xl mx-auto m-8">
<div class="flex flex-wrap">
<div class="w-5/6 sm:w-1/2 p-6">
<h3 class="text-3xl text-gray-800 font-bold leading-none mb-3">
Por Onde Começar?
</h3>
<p class="text-gray-600 mb-8">
Antes de desbravar o universo do empreendedorismo, é crucial entender os princípios e teorias importantes para otimizar suas chances de sucesso.
O curso Jornada Horizontes do Empreendedorismo visa justamente abrir as portas para jovens negros e mulheres no caminho do empreendedorismo.
</p>
</div>
<div class="w-full sm:w-1/2 p-6">
<img src="images/Questions-pana.svg"/>
</div>
</div>
</div>
</section>
<section class="bg-white border-b">
<div class="container mx-auto flex flex-wrap pt-4">
<h2 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
O Que é o Projeto?
</h2>
<div class="w-full mb-8">
<div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
</div>
<p class="text-justify text-gray-600 text-xl my-4 px-6 recuo">
O projeto visa formentar o empreendedorismo e a inovação, por meio da capacitação, desenvolvimento de habilidades sociais e mentoria voltadas à inclusão de jovens negros e mulheres jovens, no mercado de trabalho e à geração de renda, residentes no Centro-Oeste.
A formação se insere num projeto maior, composto de duas ações centrais, que visam à capacitação de mulheres jovens: o curso online e a implantação da Rede de Acolhimento Horizontes do Empreendedor. Um curso online inclusivo, idealizado e oferecido gratuitamente pela Fundação de Empreendimentos Científicos e Tecnológicos – Finatec.
</p>
<div class="container max-w-5xl mx-auto m-8">
<h3 class="w-full mb-10 text-3xl font-bold leading-tight text-center text-gray-800">
Ações do Projeto
</h3>
<div class="flex flex-wrap">
<div class="w-full sm:w-1/2 p-6">
<h4 class="text-2xl text-center text-gray-800 font-bold leading-none mb-3">
Curso Online
</h4>
<p class="text-justify text-gray-600 text-xl mb-8 recuo">
O curso online tem como objetivo geral sensibilizar seus participantes para as possibilidades de empreendedorismo, como forma de acesso ao mercado de trabalho e à geração de renda.
</p>
</div>
<div class="w-full sm:w-1/2 p-6">
<h4 class="text-2xl text-center text-gray-800 font-bold leading-none mb-3">
Rede de Acolhimento
</h4>
<p class="text-justify text-gray-600 text-xl mb-8 recuo">
Iniciativa que busca dar suporte à atividade empreendedora para jovens negros e mulheres jovens em situação de vulnerabilidade, por meio de uma tecnologia social que articula o apoio não-financeiro de instituições do segmento de empreendedorismo em uma agenda de reuniões, oficinas e encontros para capacitações e mentorias.</p>
</div>
</div>
</div>
</div>
</section>
<section class="bg-white py-8 text-center">
<div class="container mx-auto flex flex-wrap pt-4 pb-12">
<h2 class="w-full my-2 text-5xl font-bold leading-tight text-center text-gray-800">
Começe Hoje Mesmo
</h2>
<div class="w-full mb-4">
<div class="h-1 mx-auto gradient w-64 opacity-25 my-0 py-0 rounded-t"></div>
</div>
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow text-center">
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
<div class="w-full font-bold text-3xl text-gray-800 p-6">
Aulas Online
</div>
<p class="text-gray-800 text-base px-6 pb-5">
O curso é composto de 40 horas de atividades, online, gratuito e com horário flexível. Todas as aulas do curso estarão disponível de forma online
</p>
</a>
</div>
</div>
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow text-center">
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
<div class="w-full font-bold text-3xl text-gray-800 p-6">
Robô no Telegram
</div>
<p class="text-gray-800 text-base px-6 pb-5">
O nosso robô do telegram te auxiliará a acessar o material de aula diretamente do celular
</p>
</a>
</div>
</div>
<div class="w-full md:w-1/3 p-6 flex flex-col flex-grow flex-shrink">
<div class="flex-1 bg-white rounded-t rounded-b-none overflow-hidden shadow text-center">
<a href="#" class="flex flex-wrap no-underline hover:no-underline">
<div class="w-full font-bold text-3xl text-gray-800 p-6">
Dedicação Total
</div>
<p class="text-gray-800 text-base px-6 pb-5">
O curso tem a duração de 2 meses. Sua entrega e dedicação para o curso é crucial para seu aprendizado e evolução profissional
</p>
</a>
</div>
</div>
<div class="text-center w-full pt-4">
<a href="https://jornadahorizontesdoempreendedor.finatec.org.br/saladeaula/login/signup.php">
<button class="mx-auto lg:mx-0 text-xl bg-green-600 text-white font-bold rounded-full my-6 py-4 px-8 transform transition hover:scale-105 duration-300 ease-in-out">
Inscreva-se
</button>
</a>
</div>
</div>
</section>
<!-- Change the colour #f8fafc to match the previous section colour -->
<svg class="wave-top" viewBox="0 0 1439 147" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-1.000000, -14.000000)" fill-rule="nonzero">
<g class="wave" fill="#FFFFFF">
<path
d="M1440,84 C1383.555,64.3 1342.555,51.3 1317,45 C1259.5,30.824 1206.707,25.526 1169,22 C1129.711,18.326 1044.426,18.475 980,22 C954.25,23.409 922.25,26.742 884,32 C845.122,37.787 818.455,42.121 804,45 C776.833,50.41 728.136,61.77 713,65 C660.023,76.309 621.544,87.729 584,94 C517.525,105.104 484.525,106.438 429,108 C379.49,106.484 342.823,104.484 319,102 C278.571,97.783 231.737,88.736 205,84 C154.629,75.076 86.296,57.743 0,32 L0,0 L1440,0 L1440,84 Z"
></path>
</g>
<g transform="translate(1.000000, 15.000000)" fill="#FFFFFF">
<g transform="translate(719.500000, 68.500000) rotate(-180.000000) translate(-719.500000, -68.500000) ">
<path d="M0,0 C90.7283404,0.927527913 147.912752,27.187927 291.910178,59.9119003 C387.908462,81.7278826 543.605069,89.334785 759,82.7326078 C469.336065,156.254352 216.336065,153.6679 0,74.9732496" opacity="0.100000001"></path>
<path
d="M100,104.708498 C277.413333,72.2345949 426.147877,52.5246657 546.203633,45.5787101 C666.259389,38.6327546 810.524845,41.7979068 979,55.0741668 C931.069965,56.122511 810.303266,74.8455141 616.699903,111.243176 C423.096539,147.640838 250.863238,145.462612 100,104.708498 Z"
opacity="0.100000001"
></path>
<path d="M1046,51.6521276 C1130.83045,29.328812 1279.08318,17.607883 1439,40.1656806 L1439,120 C1271.17211,77.9435312 1140.17211,55.1609071 1046,51.6521276 Z" opacity="0.200000003"></path>
</g>
</g>
</g>
</g>
</svg>
<section class="container mx-auto text-center py-6 mb-12">
<h2 class="w-full my-2 text-5xl font-bold leading-tight text-center text-white">
Não Perca Esta Oportunidade!!
</h2>
<div class="w-full mb-4">
<div class="h-1 mx-auto bg-white w-1/6 opacity-25 my-0 py-0 rounded-t"></div>
</div>
<h3 class="my-10 text-3xl leading-tight">
Se você é uma <strong>mulher jovem</strong> ou um <strong>jovem negro</strong> da Região Centro-Oeste e deseja empreender, você pode participar do Curso Jornada Horizontes do Empreendedorismo.
</h3>
<a href="https://jornadahorizontesdoempreendedor.finatec.org.br/site/index.html">
<button class="mx-auto lg:mx-0 text-xl bg-green-600 text-white font-bold rounded-full my-6 py-4 px-8 transform transition hover:scale-105 duration-300 ease-in-out">
Saiba Mais
</button>
</a>
</section>
<!-- jQuery if you need it
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
-->
<script>
var scrollpos = window.scrollY;
var header = document.getElementById("header");
var navcontent = document.getElementById("nav-content");
var navaction = document.getElementById("navAction");
var brandname = document.getElementById("brandname");
var toToggle = document.querySelectorAll(".toggleColour");
document.addEventListener("scroll", function () {
/*Apply classes for slide in bar*/
scrollpos = window.scrollY;
if (scrollpos > 10) {
header.classList.add("bg-white");
navaction.classList.remove("bg-white");
navaction.classList.add("gradient");
navaction.classList.remove("text-gray-800");
navaction.classList.add("text-white");
//Use to switch toggleColour colours
for (var i = 0; i < toToggle.length; i++) {
toToggle[i].classList.add("text-gray-800");
toToggle[i].classList.remove("text-white");
}
header.classList.add("shadow");
navcontent.classList.remove("bg-gray-100");
navcontent.classList.add("bg-white");
} else {
header.classList.remove("bg-white");
navaction.classList.remove("gradient");
navaction.classList.add("bg-white");
navaction.classList.remove("text-white");
navaction.classList.add("text-gray-800");
//Use to switch toggleColour colours
for (var i = 0; i < toToggle.length; i++) {
toToggle[i].classList.add("text-white");
toToggle[i].classList.remove("text-gray-800");
}
header.classList.remove("shadow");
navcontent.classList.remove("bg-white");
navcontent.classList.add("bg-gray-100");
}
});
</script>
<script>
/*Toggle dropdown list*/
/*https://gist.github.com/slavapas/593e8e50cf4cc16ac972afcbad4f70c8*/
var navMenuDiv = document.getElementById("nav-content");
var navMenu = document.getElementById("nav-toggle");
document.onclick = check;
function check(e) {
var target = (e && e.target) || (event && event.srcElement);
//Nav Menu
if (!checkParent(target, navMenuDiv)) {
// click NOT on the menu
if (checkParent(target, navMenu)) {
// click on the link
if (navMenuDiv.classList.contains("hidden")) {
navMenuDiv.classList.remove("hidden");
} else {
navMenuDiv.classList.add("hidden");
}
} else {
// click both outside link and outside menu, hide menu
navMenuDiv.classList.add("hidden");
}
}
}
function checkParent(t, elm) {
while (t.parentNode) {
if (t == elm) {
return true;
}
t = t.parentNode;
}
return false;
}
</script>
</body>
</html>