-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
145 lines (126 loc) · 5.83 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
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Favicon -->
<link rel="shortcut icon" href="./public/favicon.ico" type="image/x-icon">
<!-- Font Link - 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=Inter:wght@100..900&display=swap" rel="stylesheet">
<!-- Css Links -->
<link rel="stylesheet" href="./src/css/reset.css">
<link rel="stylesheet" href="./src/css/global.css">
<!-- Css Main-Page -->
<link rel="stylesheet" href="./src/css/main-page/nav.css">
<link rel="stylesheet" href="./src/css/main-page/header.css">
<link rel="stylesheet" href="./src/css/main-page/metrics.css">
<link rel="stylesheet" href="./src/css/main-page/anuncio-vagas.css">
<link rel="stylesheet" href="./src/css/main-page/vagas.css">
<link rel="stylesheet" href="./src/css/main-page/carrossel.css">
<link rel="stylesheet" href="./src/css/main-page/footer.css">
<!-- Css - Responsivity-->
<link rel="stylesheet" href="./src/css/responsivity/media-query.css">
<link rel="stylesheet" href="./src/css/responsivity/menu-hamburguer.css">
<!-- Css Dark-Mode -->
<link rel="stylesheet" href="./src/css/dark-mode.css">
<title>OptimusTech</title>
</head>
<body>
<!-- Cabeçalho com a barra de navegação -->
<header class="flex">
<div class="flex left-side">
<a href="#">
<img class="logo" src="./public/logos/logo-preta.svg" alt="OptimusTech Logo">
</a>
<nav>
<ul class="flex">
<li><a href="#home">Home</a></li>
<li><a href="" class="link">Produtos</a></li>
<li><a href="" class="link">Recursos</a></li>
<li><a href="" class="link">Sobre nós</a></li>
</ul>
</nav>
</div>
<button class="menu-hamburger"></button>
<div class="right-side flex">
<img class="theme-icon" src="./public/dark-mode/moon.png" alt="">
<div class="flex buttons">
<a href="" class="link">Entrar</a>
<a href="" class="link btn">Cadastrar</a>
</div>
</div>
</header>
<main>
<!-- Cabeçalho -->
<header id="home" class="center">
<h3 class="subtitle">Sobre nós</h3>
<h1>Por que somos <strong>diferentes</strong>?</h1>
<p>Nós focamos nos detalhes de tudo que fazemos. Tudo para ajudar as empresas de todo o mundo a se concentrarem naquilo que é realmente importante para elas.</p>
</header>
<!-- Section das Métricas -->
<section id="metrics" class="flex metrics"></section>
<!-- Section com imagem -->
<section class="center anuncio-vagas">
<div class="text">
<h3 class="subtitle">Vagas abertas!</h3>
<h2>Estamos procurando por talentos</h2>
<p>Somos uma equipe 100% remota com pessoas do Brasil inteiro</p>
</div>
<img src="./public/illustration.jpg" alt="Imagem ilustrativa com pessoas">
</section>
<!-- Section Vagas -->
<section id="vagas" class="center vagas"></section>
<!-- Section Depoimentos -->
<section class="center depoimentos">
<h3 class="subtitle">Veja o que nossos colaboradores falam sobre nós</h3>
<div class="carrossel-container">
<div id="carrossel" class="carrossel">
<div class="buttons">
<div class="back"></div>
<div class="next"></div>
</div>
<input type="radio" name="radio" id="radio1" checked/>
<input type="radio" name="radio" id="radio2"/>
<input type="radio" name="radio" id="radio3"/>
<input type="radio" name="radio" id="radio4"/>
<input type="radio" name="radio" id="radio5"/>
<input type="radio" name="radio" id="radio6"/>
<div class="manual-btn">
<label for="radio1"></label>
<label for="radio2"></label>
<label for="radio3"></label>
<label for="radio4"></label>
<label for="radio5"></label>
<label for="radio6"></label>
</div>
</div>
</div>
</section>
</main>
<footer class="center acompanhe">
<h2>Acompanhe as nossas oportunidades</h2>
<p>Seja o primeiro a saber quando novas vagas serão abertas!</p>
<form action="./index.html">
<label for="email__input">
<span>Seu e-mail</span>
<input type="email" name="email__input" id="email__input">
</label>
<button type="submit" class="btn">Cadastrar</button>
</form>
<span>
© 2022 OptimusTech. Todos os direitos reservados.
</span>
</footer>
<!-- JavaScript link -->
<script src="./src/js/html-content/metrics/metrics.js" type="module"></script>
<script src="./src/js/html-content/vagas/vagas.js" type="module"></script>
<script src="./src/js/html-content/carrossel/carrossel.js" type="module"></script>
<script src="./src/js/input.js"></script>
<script src="./src/js/scroll-active.js"></script>
<script src="./src/js/dark-mode.js"></script>
<script src="./src/js/menu-hamburger.js"></script>
<script src="./src/js/warning.js"></script>
</body>
</html>