-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
172 lines (159 loc) · 6.79 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="Plataforma para criação de processos seletivos">
<meta name="keywords" content="Plataforma, processo seletivo, exercícios de código, desenvolvedores">
<!-- Fontes gratuitas do Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700&display=swap" rel="stylesheet">
<!-- <link rel="stylesheet" type="text/css" href="./src/styles/reset.css"> -->
<link rel="stylesheet" href="./src/styles/global.css">
<link rel="stylesheet" href="./src/styles/index.css">
<title>Technology Test</title>
</head>
<body>
<div class="container">
<header>
<a id="logo" href="./index.html"><img src="./assets/logo.svg" alt="Tech Test logo"></a>
<!--Menu de navegação no desktop-->
<nav>
<a href="./src/pages/about/about.html" id="menu-about">Quem Somos?</a>
<a href="#plans" id="menu-plans">Planos</a>
<a href="./src/pages/contact/contact.html" id="menu-contact">Contato</a>
</nav>
<nav>
<a href="#"><span>Criar Conta</span><img src="./assets/create-account-white.svg" alt=""></a>
<a href="#"><span>Entrar</span><img src="./assets/login-white.svg" alt=""></a>
</nav>
<a href="#" id="menu"><img src="./assets/menu.svg" alt="Botão do menu"></a>
</header>
<main>
<!--Conteúdo principal-->
<section id="content">
<div class="content-desktop">
<div class="content-text-left">
<h1>Encontrando os melhores profissionais no mundo da tecnologia</h1>
<p class="description">
Seja bem vindo à plataforma onde você pode criar testes técnicos, escolher os melhores desenvolvedores e praticar com exercícios reais do mercado de trabalho. Dê uma olhada em nossos <a href="#plans">planos.</a>
</p>
<div class="button-container-content">
<a href="#"><span>Entrar</span><img src="./assets/login-white.svg" alt=""></a>
<a href="#"><span>Criar Conta</span><img src="./assets/create-account-white.svg" alt=""></a>
</div>
</div>
<!-- Video demo para publicidade -->
<div class="video-container">
<video autoplay loop muted>
<!-- <source src="./assets/videos/apresentation.mp4" type="video/mp4" codecs="avc1.42E01E, mp4a.40.2"> -->
<source src="./assets/videos/apresentation-mobile.webm" type='video/webm; codecs="vp8, vorbis"'>
</video>
</div>
</div>
<section id="sponsors">
<h2>Patrocinadores</h2>
<!-- Futuramente fazer carrossel de imagens-->
<div>
<img src="./assets/soulcode-logo.jpeg" alt="Logo da SoulCode">
<img src="./assets/tnt-energy-drink-logo.svg" alt="Logo da TNT">
</div>
</section>
</section>
<!--Seção sobre somente para versão mobile-->
<section id="about">
<h2>Quem somos?</h2>
<p>
Somos uma startup brasileira que busca realizar conexões entre desenvolvedores e
empresas por realizar processos seletivos e oportunidades de prática para entrevistas.
Inspirados pela plataforma HackerRank, resolvemos criar uma solução para o público
brasileiro que possa unir a prática do código com o mercado de trabalho por oferecer
serviços de criação de processos seletivos abertos ou privados.
</p>
</section>
<section id="plans">
<h2>Planos</h2>
<div>
<!--Article por conter um conteúdo com o mesmo objetivo-->
<article>
<h3 class="plan-name">Basic</h3>
<ul>
<li>Acesso liberado para criação de testes.</li>
<li>Criação de 5 testes técnicos por período.</li>
</ul>
<p class="price">250/mês</p>
</article>
<article>
<h3 class="plan-name">Standard</h3>
<ul>
<li>Acesso liberado para edição de material.</li>
<li>Criação de 10 testes técnicos por período.</li>
<li>Criação de 10 dinâmicas por período.</li>
</ul>
<p class="price">500/mês</p>
</article>
<article>
<h3 class="plan-name">Premium</h3>
<ul>
<li>Acesso liberado para edição de material.
</li>
<li>Criação ilimitada de testes técnicos por período.
</li>
<li>Criação ilimitada de dinâmicas por período.
</li>
<li>Integração com o google meet para dinâmicas em vídeo.
</li>
</ul>
<p class="price">750/mês</p>
</article>
</div>
</section>
<!-- Contato simples na pagina principal só na versão desktop -->
<section id="contact">
<h2>Contato - Fale Conosco!</h2>
<form>
<div class="input-group">
<label for="name">Nome:</label>
<input type="text" name="name" id="name">
</div>
<div class="input-group">
<label for="email">E-mail:</label>
<input type="email" name="email" id="email" placeholder="[email protected]">
</div>
<div class="input-group">
<label for="message">Mensagem:</label>
<textarea name="message" id="message" cols="30" rows="5" placeholder="Escreva uma solicitação, dúvida, sugestão ou reclamação."></textarea>
</div>
<button type="submit" id="submit">Enviar</button>
</form>
</section>
</main>
<footer>
<!-- Adicionar seção no footer <section id="social-media"></section>
<section id="menu-botton"></section> -->
<section id="policy-terms">
<p>
© 2021. Technology Test LTDA. Todos os direitos reservados.
</p>
<div class="button-container-terms">
<a href="#">Termos & Condições</a>
<a href="#">Política de Privacidade</a>
</div>
</section>
</footer>
</div>
<!-- Acessibilidade para deficientes auditivos -->
<div vw class="enabled">
<div vw-access-button class="active"></div>
<div vw-plugin-wrapper>
<div class="vw-plugin-top-wrapper"></div>
</div>
</div>
<script src="https://vlibras.gov.br/app/vlibras-plugin.js"></script>
<script>
new window.VLibras.Widget('https://vlibras.gov.br/app');
</script>
</body>
</html>