-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
161 lines (147 loc) · 9.31 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
<!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>IT.BR</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
<link rel="stylesheet" href="./css/main.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.8/js/all.js" integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ" crossorigin="anonymous"></script>
<script defer src="./index.js" ></script>
</head>
<body>
<!-- Header -->
<header class="d-grid">
<!-- Main Menu -->
<nav id="main-menu">
<ul class="d-flex flex-row justify-content-center">
<li><a class="text-white" href="#home">Home</a></li>
<li><a class="text-white" href="#section-one">Nossa Missão</a></li>
<li><a class="text-white" href="#section-two">Depoimentos</a></li>
<li><a class="text-white" href="#section-three">Quem Somos</a></li>
<li><a class="text-white" href="#footer">Contato</a></li>
</ul>
</nav>
<!-- Language Menu -->
<nav id="language-menu">
<ul class="d-flex flex-row justify-content-end">
<li><a class="text-white" href="javascript: void(0);">Portuguese</a></li>
<li><a class="text-white" href="javascript: void(0);">English</a></li>
</ul>
</nav>
</header>
<!-- Main-->
<div class="main" id="home">
<section id="section-main" class="container-fluid d-grid">
<div id="wrapper" class="container-1600 d-grid">
<div class="baseline d-grid">
<h3 class="text-white">Nós somos</h3>
<h1 class="text-uppercase color-secondary">IT.BR</h1>
<h1 class="text-uppercase text-white">Australia</h1>
</div>
<figure>
<img src="./images/brasao.png" alt="Alt" />
</figure>
<p class="text-white text-center">Uma comunidade para brasileiros que trabalham em TI na Australia e que tem como objetivo reunir os brazucas que estão aqui ou estão pensando em vir.</p>
</div>
</section>
<section id="section-one" class="container-1600 d-grid">
<picture>
<img src="./images/man_note.png" alt="Alt" class="img-fluid" />
</picture>
<div class="nossa-missao">
<h2 class="text-uppercase color-primary font-weight-bold">Nossa Missao</h2>
<p>O IT.BR começou como uma rede de troca de conhecimento entre profissionais e estudantes brasileiros de TI que sonhavam com uma vida melhor na Austrália.</p>
<p>Esse grupo se expandiu, se organizou e hoje conta com várias comunidades em várias redes sociais, onde milhares de brasileiros, de diversas areas de TI, trocam informações e colaboram diariamente sobre suas áreas profissionais, vistos e estratégia de imigração, ou mesmo sobre a vida na Austrália em geral</p>
<p>Nossa missão é apoiar os brasileiros, especialmente os da área de Tecnologia, que desejam estudar, imigrar, ou trabalhar para a Austrália, preparando-os para os desafios no novo país, criando um ambiente propício para a troca informações e experiências, e para o networking e a integração ao mercado de trabalho australiano.</p>
</div>
</section>
<section id="section-two" class="bg-secondary container-fluid d-grid">
<div id="wrapper" class="container-1600 d-grid">
<h2 class="text-uppercase color-white">IT.BR <br>para mim ...</h2>
<div class="d-grid testmonial-item testmonial-one">
<picture>
<img src="images/img-test-one.png" alt="" />
</picture>
<span class="font-size-small testmonial text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida ac velit non dignissim.</span>
<div class="client-details d-grid">
<h4 class="text-uppercase color-white">Giovana</h4>
<span class="font-size-x-small color-white">Programadora Java</span>
</div>
</div>
<div class="d-grid testmonial-item testmonial-two">
<picture>
<img src="images/img-test-two.png" alt="" />
</picture>
<span class="font-size-small testmonial text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida ac velit non dignissim.</span>
<div class="client-details d-grid">
<h4 class="text-uppercase color-white">Paula</h4>
<span class="font-size-x-small color-white">Programadora Java</span>
</div>
</div>
<div class="d-grid testmonial-item testmonial-three">
<picture>
<img src="images/img-test-three.png" alt="" />
</picture>
<span class="font-size-small testmonial text-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras gravida ac velit non dignissim.</span>
<div class="client-details d-grid">
<h4 class="text-uppercase color-white">Roberto</h4>
<span class="font-size-x-small color-white">Programadora Java</span>
</div>
</div>
</div>
</section>
<section id="section-three" class="bg-primary container-fluid d-grid text-white">
<div id="wrapper" class="container-1600 d-grid">
<div class="years y2009">
<h2>2016</h2>
<span class="font-size-x-small">Grupo no Whatsapp</span>
</div>
<div class="years y2012">
<h2>2017</h2>
<span class="font-size-x-small">Happy-Hours em Sydney</span>
</div>
<p class="text-center">Somos apaixonados pelo que fazemos. Nosso foco é guiar e ajudar profissionais de tecnologia a ter uma melhor chance entrar no mercado de trabalho.</p>
<h1 class="text-uppercase">O Grupo</h1>
<div class="members d-grid">
<figure class="figure">
<img src="./images/julio.png" class="figure-img img-fluid rounded" alt="Julio Ganem">
<figcaption class="figure-caption text-center text-white">Julio Ganem <br>Bi/Analytics Solution Lead City of Goald Coast</figcaption>
</figure>
<figure class="figure">
<img src="./images/helder.png" class="figure-img img-fluid rounded" alt="Helder Klemp">
<figcaption class="figure-caption text-center text-white">Helder Klemp<br>Co-Founder and Director DNX Solutions </figcaption>
</figure>
<figure class="figure">
<img src="./images/lucas.png" class="figure-img img-fluid rounded" alt="Lucas Xavier">
<figcaption class="figure-caption text-center text-white">Lucas Xavier<br>Software Engineer Snapchat</figcaption>
</figure>
</div>
<div class="years y2016">
<h2>2018</h2>
<span class="font-size-x-small">Happy-Hours em Melbour e Brisbane</span>
</div>
<div class="years y2019">
<h2>2019</h2>
<span class="font-size-x-small">Criação da plataforma Premium</span>
</div>
<button type="button" class='btn btn-lg text-center'>
Conheça cada membro:
</button>
</div>
</section>
</div>
<!-- FOOTER -->
<footer id="footer" class="bg-dark container-fluid d-grid text-white">
<div id="wrapper" class="container-1600 d-grid">
<div class="msg">
<h2 class="text-uppercase">Envie sua <br>mensagem</h2>
<p>Se voce tiver alguma dúvida ou se precisar de mais informações, mande uma mensagem</p>
<p>[email protected]</p>
</div>
</div>
</footer>
</body>
</html>