-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
166 lines (123 loc) · 5.62 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>World Cup 2022</title>
<link rel="shortcut icon" href="img/icon/world-cup.png" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="css/media-query.css">
</head>
<body>
<header>
<nav class="menu-nav">
<h1>World Cup Qatar 2022</h1>
<ul class="lista-nav">
<li><i class="fa-solid fa-trophy-star"></i><a href="#inicio">Home</a></li>
<li><a href="#selecoes">Teams</a></li>
<li><a href="#funcionamento">How it works?</a></li>
</ul>
</nav>
</header>
<main>
<section id="inicio" class="host-country">
<div class="content-host-country">
<div class="text-block">
<h2 class="section-title">Host Country</h2>
<p>O processo de escolha do país que será a sede da próxima copa do mundo é exaustivo. Onde primeiramente são convocados os países candidatos para a realização do evento, depois disso diversos aspectos são debatidos para a seleção. Após isso a escolha definitiva é feita pelo Comitê Executivo da FIFA, o qual decide o país sede cerca de 7 anos antes da realização do campeonato.
<br>
<br>
Em 2010 houve uma excessão, onde o Comitê Executivo definiu a Rússia para sediar a copa em 2018 e no mesmo ano escolheu o Catar como o país para ser o país sede do evento no ano de 2022. A copa do mundo marca a volta da disputa no continente Asiático e pela primeira vez ocorrendo em um país situado no Oriente Médio.
</p>
</div>
<img class="img-catar-paisagem" src="img/catar-1.jpeg">
<img class="img-catar-retrato" src="img/catar-retrato.jpg">
</div>
</section>
<section id="selecoes" class="teams">
<h2 class="section-title" style="color: #FFF; text-align: center;">Teams</h2>
<select id="lista-grupos" class="groups-list">
<option value="groupA">Group A</option>
<option value="groupB">Group B</option>
<option value="groupC">Group C</option>
<option value="groupD">Group D</option>
<option value="groupE">Group E</option>
<option value="groupF">Group F</option>
<option value="groupG">Group G</option>
<option value="groupH">Group H</option>
</select>
<div class="area-team-cards" id="area-times">
<div class="team">
<img class="team-img" id="selecao1-img" src="img/flags/netherlands.png">
<p class="team-p" id="selecao1-p" class="nome-pais">Netherlands</p>
</div>
<div class="team" id="selecao2">
<img class="team-img" src="img/flags/senegal.png">
<p>Senegal</p>
</div>
<div class="team" id="selecao3">
<img class="team-img" src="img/flags/ecuador.webp">
<p>Ecuador</p>
</div>
<div class="team" id="selecao4">
<img class="team-img" src="img/flags/qatar.png">
<p>Qtar</p>
</div>
</div>
</section>
<section id="funcionamento" class="how-works">
<h2 class="section-title">How it works?</h2>
<div class="etapas">
<article class="card-etapas">
<h3>Fase de times</h3>
<hr>
<div class="conteudo-texto">
<p>Os 32 times classificados são divididos em 8 grupos nomeados de A a H, com 4 times em cada. Em um grupo todas as seleções se enfrentam em busca de um maior número de pontos.</p>
<ul class="lista-pontuacao">
<li style="color: green;">Vitória: +3 pontos a equipe vencedora</li>
<li style="color: red;">Empate: +1 ponto para cada equipe</li>
<li style="color: gray;">Derrota: sem pontuação para ambos</li>
</ul>
</div>
</article>
<article class="card-etapas">
<h3>Oitavas de final</h3>
<hr>
<div class="conteudo-texto">
<p>Nessa etapa os dois times com as maiores pontuações avançam e jogam as disputas de mata-mata. Nesses jogos o primeiro classificado de um grupo joga com o segundo classificado do grupo seguinte, a seleção perder a partida é eliminada da copa e a outra segue classificada para as quartas de final.</p>
</div>
</article>
<article class="card-etapas">
<h3>Quartas de final</h3>
<hr>
<div class="conteudo-texto">
<p>Nesse ponto os 8 times classificados se enfrentam uma única vez. O vencedor avança para a semifinal, enquanto que o perdedor é eliminado dos jogos, assim como nas oitavas de final.</p>
</div>
</article>
<article class="card-etapas">
<h3>Semifinal</h3>
<hr>
<div class="conteudo-texto">
<p>Nas semifinais, o sistema de escolha é simples, são 4 equipes ao total que jogam 2 jogos. O vencedor de cada jogo é classificado para disputar a taça de campeão do mundo.</p>
</div>
</article>
<article class="card-etapas">
<h3>Terceiro lugar</h3>
<hr>
<div class="conteudo-texto">
<p>Após os jogos das semifinais, os perdedores jogam uma última vez para definirem qual será o terceiro colocado na disputa.</p>
</div>
</article>
<article class="card-etapas">
<h3>Final</h3>
<hr>
<div class="conteudo-texto">
<p>Na final, os dois times vencedores das semifinais se confrontam em um sistema de jogo padrão, com dois tempos de 90 minutos. Caso haja empate são adicionados ao relógio mais 2 tempos de 15 minutos, resultando em 30 minutos de prorrogação. Caso a disputa se mantenha empatada, os times se enfrentam em uma disputa de pênaltis, com 5 chutes para cada equipe. </p>
</div>
</article>
</div>
</section>
</main>
<script src="js/alteracao-selecoes.js"></script>
</body>
</html>