-
Notifications
You must be signed in to change notification settings - Fork 0
/
milestones.html
234 lines (162 loc) · 9.79 KB
/
milestones.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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> Space Race </title>
<!-- Os arquivos CSS desta página -->
<link rel="stylesheet" href="CSS/basicConfig.css"> <!-- configurações padrões que todas as páginas devem possuir -->
<link rel="stylesheet" href="CSS/milestones.css">
<link rel="stylesheet" href="CSS/paginaCartao.css">
<!-- Os scripts em javascript -->
<script src="SCRIPTS/basic.js" defer> </script>
<script src="SCRIPTS/botaoAbertura.js" defer> </script>
<script src="SCRIPTS/resizeTexto.js" defer> </script>
<!-- Icone da guia -->
<link rel="icon" href="Imagens/terra_logo.svg">
</head>
<body>
<header>
<h1 id="titulo" onclick="window.location.href = 'index.html'" aria-label="Clique para ir a página inicial do Space Race!"> Space Race </h1>
<button id="botaoMenu" class="button" type="button" aria-label="clique para expandir o menu lateral">
<p> ☰ </p>
</button>
</header>
<nav id="menu">
</nav>
<main>
<button id="terraBotao" class="total fundo botaoBrilho _botoesCartao cartaoBotao" type="button" aria-label="clique para mais detalhes sobre a terra" onclick="abrir('#terra', '#terraCartao')">
<div id="terraImgLeft" class="image yCenter icon"> </div>
Terra
<div id="terraImgRight" class="image yCenter icon"> </div>
</button>
<div id="terraCartao" class="cartao">
<div id="terra" class="image conteudoCartao conteudoCenter">
<h1> Terra, a nossa casa </h1>
<p class="almostTransparent">
O planeta Terra, nossa casa. Clique no botão abaixo para descobrir sobre as mais importantes
conquistas da humanidade no espaço ao redor da nossa casa
</p>
<button class="button almostTransparent" type="button" aria-label="clique para saber mais sobre" onclick="window.location.href = 'earth.html'">
Bem aqui
</button>
</div>
</div>
<button id="luaBotao" class="total fundo botaoBrilho _botoesCartao cartaoBotao" type="button" aria-label="clique para mais detalhes sobre a lua" onclick="abrir('#lua', '#luaCartao')">
<div id="luaImgLeft" class="image yCenter icon"> </div>
Lua
<div id="luaImgRight" class="image yCenter icon"> </div>
</button>
<div id="luaCartao" class="cartao">
<div id="lua" class="image conteudoCartao conteudoCenter">
<div id="terra_fundo" class="image"> </div>
<h1> Lua, nosso satélite natural </h1>
<p class="almostTransparent">
Por diversos séculos, nossos ancestrais olharam ao céu e se maravilharam com sua beleza, hoje
a nossa civilização já conseguiu grandiosos feitos ao seu redor e você pode descobrir um
pouco mais sobre eles
</p>
<button class="button almostTransparent" type="button" aria-label="clique para saber mais sobre" onclick="window.location.href = 'lua.html'">
Bem aqui
</button>
</div>
</div>
<button id="marteBotao" class="total fundo botaoBrilho _botoesCartao cartaoBotao" type="button" aria-label="clique para mais detalhes sobre marte" onclick="abrir('#marte', '#marteCartao')">
<div id="marteImgLeft" class="image yCenter icon"> </div>
Marte
<div id="marteImgRight" class="image yCenter icon"> </div>
</button>
<div id="marteCartao" class="cartao">
<div id="marte" class="image conteudoCartao conteudoCenter">
<h1> Marte, a fronteira final </h1>
<p>
Marte, o misterioso planeta vermelho, que a humanidade sonha em pisar, descubra quais foram
os maiores feitos no planeta vermelho e suas luas, Phobos e Deimos
</p>
<button class="button lightButton" type="button" aria-label="clique para saber mais sobre" onclick="window.location.href = 'marte.html'">
Bem aqui
</button>
</div>
</div>
<button id="venusBotao" class="total fundo botaoBrilho _botoesCartao cartaoBotao" type="button" aria-label="clique para mais detalhes sobre vênus" onclick="abrir('#venus', '#venusCartao')">
<div id="venusImgLeft" class="image yCenter icon"> </div>
Vênus
<div id="venusImgRight" class="image yCenter icon"> </div>
</button>
<div id="venusCartao" class="cartao">
<div id="venus" class="image conteudoCartao conteudoCenter">
<h1> Vênus, o inferno espacial </h1>
<p class="almostTransparent">
Vênus, o planeta mais quente do sistema solar, um dos planetas mais difíceis de se explorar
por conta de sua atmosfera grossa e mortal com temperaturas acima de 470ºC, capaz de derreter
chumbo. Agora você pode descobrir um pouco mais sobre as conquistas da humanidade por lá
</p>
<button class="button almostTransparent" type="button" aria-label="clique para saber mais sobre" onclick="window.location.href = 'venus.html'">
Bem aqui
</button>
</div>
</div>
<button id="mercurioBotao" class="total fundo botaoBrilho _botoesCartao cartaoBotao" type="button" aria-label="clique para mais detalhes sobre mercúrio" onclick="abrir('#mercurio', '#mercurioCartao')">
<div id="mercurioImgLeft" class="image yCenter icon"> </div>
Mercúrio
<div id="mercurioImgRight" class="image yCenter icon"> </div>
</button>
<div id="mercurioCartao" class="cartao">
<div id="mercurio" class="image conteudoCartao conteudoCenter">
<h1> Mercúrio, o menor planeta </h1>
<p>
O menor planeta do Sistema Solar, Mercúrio que diferentemente de Plutão é um planeta, é o
planeta mais próximo do Sol e que possui a atmosfera mais fina dentre todos os planetas, e
agora você tem a oportunidade de descobrir as conquistas humanas por lá
</p>
<button class="button lightButton" type="button" aria-label="clique para saber mais sobre" onclick="window.location.href = 'mercury.html'">
Bem aqui
</button>
</div>
</div>
<button id="gasososBotao" class="total fundo botaoBrilho _botoesCartao cartaoBotao" type="button" aria-label="clique para mais detalhes sobre os planetas gasosos" onclick="abrir('#gasosos', '#gasososCartao')">
<div id="gasososImgLeft" class="image yCenter icon"> </div>
<p class="textoAdaptavel" data-larguras-adaptavel="290" data-textos-adaptavel="Planetas Gasosos; P. Gasosos">
Planetas Gasosos
</p>
<div id="gasososImgRight" class="image yCenter icon"> </div>
</button>
<div id="gasososCartao" class="cartao">
<div id="gasosos" class="image conteudoCartao conteudoCenter">
<h1> Os planetas gasosos </h1>
<p>
Os massivos e gigantes planetas gasosos, considerados os mais belos do nosso sistema por uma grande quantidade de
pessoas, alguns possuindo dezenas de satélites naturais, agora você pode descobrir o que nós conseguimos realizar
ao seu redor e em suas luas
</p>
<button class="button lightButton" type="button" aria-label="clique para saber mais sobre" onclick="window.location.href = 'gas.html'">
Bem aqui
</button>
</div>
</div>
<button id="dwarfBotao" class="total fundo botaoBrilho _botoesCartao cartaoBotao" type="button" aria-label="clique para mais detalhes sobre os planetas anões" onclick="abrir('#dwarf', '#dwarfCartao')">
<div id="dwarfImgLeft" class="image yCenter icon"> </div>
<p class="textoAdaptavel" data-larguras-adaptavel="290" data-textos-adaptavel="Planetas Anões; P. Anões">
Planetas Anões
</p>
<div id="dwarfImgRight" class="image yCenter icon"> </div>
</button>
<div id="dwarfCartao" class="cartao">
<div id="dwarf" class="image conteudoCartao conteudoCenter">
<h1> Os planetas anões </h1>
<p>
Os planetas anões, os menores corpos celestes encontrados em nosso sistema solar sem serem simplesmente considerados
asteroides, os principais sendo Plutão, Éris, Makemake, Ceres e Haumea, agora você tera a possibilidade de descobrir
as conquistas humanas neste anões celestiais
</p>
<button class="button lightButton" type="button" aria-label="clique para saber mais sobre" onclick="window.location.href = 'dwarf.html'">
Bem aqui
</button>
</div>
</div>
</main>
<footer>
<h5> <sup>©</sup>2024 Ian_Productions. All rights reserved. </h5>
</footer>
</body>
</html>