forked from Julianaha/pit-stop
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
298 lines (295 loc) · 15.9 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
<!doctype html>
<html lang="pt">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>PitStop</title>
<link rel="icon" type="image/x-icon" href="./src/assets/img/bandeira.png">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<link rel="stylesheet" href="./src/css/style.css">
</head>
<body>
<nav class="navbar navbar-expand-lg p-3">
<div class="container-fluid">
<a class="navbar-brand nav-font" href="./index.html">PitStop</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup"
aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-end" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-link nav-font" aria-current="page" href="#f1">início</a>
<a class="nav-link nav-font" href="#sobre">sobre</a>
<a class="nav-link nav-font" href="#graficos">gráficos</a>
<a class="nav-link nav-font" href="#contato">contato</a>
</div>
</div>
</div>
</nav>
<!-- Video carrossel -->
<div>
<div id="carouselExampleSlidesOnly" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active">
<video muted loop autoplay fullscreen class="video-principal d-block w-100" height="400">
<source src="./src/assets/img/video-formula1.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<!-- Contextualizacao sobre a formula1 -->
<div class="row container pt-5 mx-auto" id="f1">
<div class="col-md-8">
<h1 class="title-font">Fórmula 1</h1>
<p class="text-font lh-lg text-start">Fórmula 1 é a mais popular modalidade de automobilismo do mundo. É a
categoria mais avançada do esporte a motor. Equipes e pilotos da F1 têm uma enorme capacidade de engajamento
e, consequentemente, de geração de receitas adicionais pelas redes, bem como a relação com as marcas. Ter uma
equipe competitiva como a Red Bull, e trazer a Mercedes para o jogo e, agora em 2022, ver o renascimento
competitivo da Ferrari, são movimentos que atraem a atenção do público.
Disputas com marcas e pilotos reconhecidos por suas qualidades são mais um golaço da categoria.
</p>
<p class="fw-semibold fs-2 p-3 m-2 pt-5 font-destaque destaque">"Uma qualidade essencial da competição é pensar
e repensar regras que possam aumentar a competitividade e a qualidade das corridas."
</p>
</div>
<div class="col-md-4" >
<img src="./src/assets/img/celular-pitstop.png" class="img-info">
</div>
</div>
<!-- Apresentando o produto PitStop -->
<div class="row bg-subtitle text-center pt-5 mx-auto">
<div class="col-md-4" id="sobre">
<img src="./src/assets/img/celular-pitstop2.png" class="img-info">
</div>
<div class="col-md-6 p-3">
<h2 class="title-font text-start display-4">
Venha
<br>
com a gente
<br>
fazer seu PitStop <img src="./src/assets/img/bandeira.png" class="p-3">
</h2>
<p class="font-text text-start lh-base fs-5">Agora ficou fácil acompanhar a mais popular modalidade de
automobilismo do mundo. Nós separamos as novidades dos circuitos e tudo sobre a sua equipe favorita para você
aproveitar o melhor da temporada.
Vamos te ajudar a ficar por dentro de tudo que acontece!
</p>
<h3 class="nav-font display-5 pt-4">Somos o seu game fantasy</h3>
<ul class="list-inline pt-5 justify-content-around">
<li class="list-inline-item p-2 font-text"><img width="50" src="./src/assets/img/questao.png"><br>Para tirar<br> suas dúvidas</li>
<li class="list-inline-item p-2 font-text"><img width="50" src="./src/assets/img/rating.png"><br>Acompanhar <br>tendências de pontuação</li>
<li class="list-inline-item p-2 font-text"><img width="50" src="./src/assets/img/podio.png"><br>Montar seu pódio<br> de cada circuito</li>
<li class="list-inline-item p-2 font-text"><img width="50" src="./src/assets/img/certificado.png"><br>Ganhar o grande prêmio<br> de constructor da temporada</li>
</ul>
</div>
</div>
<!-- Grafico -->
<div class="mt-5 bg-grafico">
<h1 class="nav-font bg-subtitle p-3" id="graficos">Gráficos</h1>
<div class="container" >
<p class="text-font fs-4 p-3">As possibilidades para se informar e divertir são muitas! Na nossa plataforma você
encontra demonstrativos de dados
para auxiliar na compreensão do universo automobilistico. Confira aqui um
pouco dos nossos gráficos
mas nao se esqueça de instalar o nosso aplicativo.
</p>
<div class="row pt-5">
<div class="col-md-6 text-center">
<h4 class="text-font fw-bold">
TOP 10 Pilotos com o maior número de voltas
<br>
mais rápidas da última década
</h4>
<img src="./src/assets/graph/pilotos-top10.png" class="img-fluid rounded pt-1">
<p class="pt-4 text-font fs-6">
A volta mais rápida de um piloto durante a temporada passou a ser um bônus de
pontuação para os pilotos que terminarem a corrida entre os 10 primeiros colocados.
Um ponto pode custar a liderança ou até mesmo um campeonato.
</p>
</div>
<div class="col-md-6 text-center">
<h4 class="text-font fw-bold">
Pilotos que mais apareceram entre os TOP 10
<br>
nas duas últimas décadas
</h4>
<img src="./src/assets/graph/voltas-rapidas.png" class="img-fluid rounded">
<p class="pt-5 text-font fs-6">
Várias pessoas possuem o seu TOP10 maiores pilotos, mas se considerarmos as duas últimas décadas,
alguns nomes se destacam por estarem sempre pontuando. Pelo gráfico é possível avaliar que estar
sempre pontuando nem sempre é indicativo de pódio.
</p>
</div>
<div class="row pt-5">
<div class="col-md-6 text-center">
<h4 class="text-font fw-bold">TOP 5 pilotos com maior presença no GRID
<br>
considerando as 5 primeiras posições
</h4>
<img src="./src/assets/graph/pilotos-grid.png" class="img-fluid rounded pt-3">
<p class="pt-4 text-font fs-6">Os pilotos que mais pontuam, também aparecem no TOP 5 do GRID,
a presença contínua no grid 5 pode demonstrar estabilidade e bom desempenho tanto do piloto,
num panorama geral, quanto da equipe.
</p>
</div>
<div class="col-md-6 text-center">
<h4 class="text-font fw-bold">A relação entre as melhores pontuações
<br>
e o tempo de PitStop
</h4>
<img src="./src/assets/graph/Pitstop_x_Pontos.jpeg" class="img-fluid rounded pt-4">
<p class="pt-5 text-font fs-6">A troca do jogo de pneus pode ser decisiva para o ponto extra da volta mais
rápida.</p>
</div>
</div>
<div class="row pt-5">
<div class="col-md-6 text-center pt-3">
<h4 class="text-font fw-bold">TOP 5 construtores
<br>
que mais pontuaram na última década
</h4>
<img src="./src/assets/graph/maiores-pontuacoes.png" class="img-fluid rounded pt-2">
</div>
<div class="col-md-6 text-center pt-3">
<h4 class="text-font fw-bold">TOP 5 contrutores
<br>
que menos pontuaram na ultima década
</h4>
<img src="./src/assets/graph/pontuacao-menores.png" class="img-fluid rounded pt-2 mx-auto">
</div>
</div>
<div class="row pt-5 text-center pt-3">
<div class="col-md-6">
<h4 class="text-font fw-bold">TOP 5 construtores
<br>
que mais pontuaram na história
</h4>
<img src="./src/assets/graph/maior-pontuacao-historia.png" class="img-fluid rounded pt-2 mx-auto">
</div>
<div class="col-md-6">
<h4 class="text-font fw-bold">TOP 5 construtores
<br>
que menos pontuaram na história
</h4>
<img src="./src/assets/graph/pontuacao-historia.png" class="img-fluid rounded pt-2 mx-auto">
</div>
</div>
<div class="mx-auto text-center pt-5">
<p class="fs-6 text-font">Alguns construtores possuem um histórico de pontuação que não se reproduziu na última
década. O somatório de pontuação ao longo da história do esporte apresenta a construtora Ferrari liderando
o ranking, porém avaliando os últimos 10 anos, a construtora Mercedes demonstra uma ascensão no esporte.
</p>
</div>
<div class="row pt-5 text-center">
<div class="col">
<h4 class="fw-bold text-font">Motores mais vitoriosos por circuito</h4>
<img src="./src/assets/graph/motores-vitoriosos.png" class="img-fluid rounded pt-2 mx-auto">
<p class="pt-3 fs-5 text-font">
A Red Bull se apresenta como uma equipe com conceitos mais ousados e que demonstra bons resultados
quando
comparada às favoritas históricas do esporte. Uma equipe com um princípio maior de desenvolvimento
demonstra
um desempenho mais robusto, independente do circuito.
</p>
</div>
</div>
<div class="row pt-5 text-center">
<div class="col">
<h4 class="fw-bold text-font">Desempenho na última década das construtoras que mais pontuaram na F1</h4>
<img src="./src/assets/graph/desempenho-decada.png" class="img-fluid rounded pt-2 mx-auto">
<p class="pt-3 fs-5 text-font">A relação entre pilotos e construtores é muito significativa, como pode ser observado em
2014, a ascensão da Mercedes foi diretamente relacionada à entrada de Lewis Hamilton, piloto que
demonstra consistência no TOP 5 no GRID, bem como a Red Bull que liderava os campeonatos enquanto
Sebastian Vettel fazia parte da equipe..
Acompanhar essa variação é importante para compreender a importância do desempenho de cada piloto, volta
mais rápida, contagem de pontos, desde o Grid até o pódio por circuito.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- contato -->
<div class="mt-5">
<h1 class="nav-font bg-subtitle p-3" id="contato">Contato</h1>
<div class="container">
<h2 class="text-center p-5 title-font destaque">Conheça nossa equipe de desenvolvedores </h2>
<div class="row">
<div class="col col-md-4 p-2">
<div class="mx-auto" style="width: 18rem;">
<img src="./src/assets/img/beatriz1.jpeg" class="img-fluid rounded-circle p-3" alt="imagem-beatriz">
<div class="text-center">
<h5 class="card-title text-font">Beatriz Teixeira</h5>
<p class="card-text text-font">Colaboradora</p>
<a href="https://github.com/biateisi"><img src="./src/assets/img/github1.png" class="img-fluid icon-perfil opcao"></a>
<a href="https://www.linkedin.com/in/beatrizteisi/"><img src="./src/assets/img/linkedin2.png" class="img-fluid icon-perfil opcao"></a>
</div>
</div>
</div>
<div class="col col-md-4 p-2">
<div class="mx-auto" style="width: 18rem;">
<img src="./src/assets/img/flavio1.jpeg" class="img-fluid rounded-circle p-3" alt="imagem-flavio">
<div class="text-center">
<h5 class="card-title text-font">Flávio Christovam</h5>
<p class="card-text text-font">Co-facilitador</p>
<a href="https://github.com/fchristovam"><img src="./src/assets/img/github1.png" class="img-fluid icon-perfil opcao"></a>
<a href="https://www.linkedin.com/in/flavio-christovam/"><img src="./src/assets/img/linkedin2.png" class="img-fluid icon-perfil opcao"></a>
</div>
</div>
</div>
<div class="col col-md-4 p-2">
<div class="mx-auto" style="width: 18rem;">
<img src="./src/assets/img/juliana.jpeg" class="img-fluid rounded-circle p-3" alt="imagem-juliana">
<div class="text-center">
<h5 class="card-title text-font">Juliana Souza</h5>
<p class="card-text text-font">Gestora do conhecimento</p>
<a href="https://github.com/Julianaha"><img src="./src/assets/img/github1.png" class="img-fluid icon-perfil opcao"></a>
<a href="https://www.linkedin.com/in/julianaha/"><img src="./src/assets/img/linkedin2.png" class="img-fluid icon-perfil opcao"></a>
</div>
</div>
</div>
<div class="col col-md-4 p-2">
<div class="mx-auto" style="width: 18rem;">
<img src="./src/assets/img/alice.jpeg" class="img-fluid rounded-circle p-3" alt="imagem-alice">
<div class="text-center">
<h5 class="card-title text-font">Alice Branquinho</h5>
<p class="card-text text-font">Colaboradora</p>
<a href="https://github.com/alicebranq"><img src="./src/assets/img/github1.png" class="img-fluid icon-perfil opcao"></a>
<a href="https://www.linkedin.com/in/alicebranquinho/"><img src="./src/assets/img/linkedin2.png" class="img-fluid icon-perfil opcao"></a>
</div>
</div>
</div>
<div class="col col-md-4 p-2">
<div class="mx-auto" style="width: 18rem;">
<img src="./src/assets/img/renato.jpeg" class="img-fluid rounded-circle p-3" alt="imagem-renato">
<div class="text-center">
<h5 class="card-title text-font">Renato Negrelly</h5>
<p class="card-text text-font">Gestor de gente</p>
<a href="https://github.com/rnegrelly"><img src="./src/assets/img/github1.png" class="img-fluid icon-perfil opcao"></a>
<a href="https://www.linkedin.com/in/renato-negrelly/"><img src="./src/assets/img/linkedin2.png" class="img-fluid icon-perfil opcao"></a>
</div>
</div>
</div>
</div>
</div>
<!-- rodape -->
<div class="container">
<footer class="py-3 my-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item opcao"><a href="#f1" class="nav-link px-2 text-muted font-text">Início</a></li>
<li class="nav-item opcao"><a href="#sobre" class="nav-link px-2 text-muted font-text">Sobre</a></li>
<li class="nav-item opcao"><a href="#grafico" class="nav-link px-2 text-muted font-text">Gráficos</a></li>
<li class="nav-item opcao"><a href="#contato" class="nav-link px-2 text-muted font-text">Contato</a></li>
</ul>
<p class="text-center text-muted font-text">© 2022 Resilia - Grupo 2</p>
</footer>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2"
crossorigin="anonymous">
</script>
</body>
</html>