-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathIndex.html
130 lines (129 loc) · 10.1 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
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homem-Aranha</title>
<link rel="stylesheet" href="./Styles/Index.css">
<link rel="icon" type="image/x-icon" href="./Assets/Imagens/Home/Simbolo.png">
</head>
<body>
<div id="background">
<video loop autoplay muted>
<source src="./Assets/Video/Spider-Verse ｜｜ Bones ft.@ImagineDragons.mp4">
</video>
</div>
<div id="container" class="border">
<header class="border">
<div>
<img src="./Assets/Imagens/Home/Logo.webp" class="logo" alt="Logo com o escrito Spider-Man">
</div>
<ul class="navigation">
<li>
<a href="Index.html" class="navigation-link">Home</a>
</li>
<li>
<a href="Sobre.html" class="navigation-link">Sobre</a>
</li>
<li>
<a href="Poderes.html" class="navigation-link">Poderes</a>
</li>
<li>
<a href="Filmes.html" class="navigation-link">Filmes</a>
</li>
<li>
<a href="Jogos.html" class="navigation-link">Jogos</a>
</li>
</ul>
<ul class="navigation-audio">
<li>
<audio controls autoplay loop src="./assets/Audios/Spider-Man Complete Theme (Arachnoverture by Michael Giacchino)(MP3_320K).mp3"></audio>
</li>
</ul>
</header>
<div id="left" class="border">
<img
src="/Assets/Imagens/Home/Simbolo.png" class="IMG-Simbolo" alt="Símbolo da máscara do Homem-Aranha">
<p class="info-home"
>O Homem-Aranha é um dos mais icônicos super-heróis da Marvel Comics, criado por Stan Lee e Steve Ditko em 1962.
Sua importância e relevância na cultura pop são inegáveis, sendo um símbolo de superação, responsabilidade e humanidade.
O personagem conquistou milhões de fãs ao redor do mundo com suas histórias emocionantes, dilemas pessoais e poderes únicos.
Sua jornada como herói, equilibrando a vida de Peter Parker, continua a inspirar gerações, tornando-o um ícone cultural
atemporal com um impacto significativo no mundo do entretenimento.
</p>
<div class="buttons">
<button class="edit">
<a href="https://youtu.be/sIrFveVh_DE?si=0ab416aweUmz8S4p">
Assistir edit
</a>
</button>
<button class="pag">
<a href="https://pt.wikipedia.org/wiki/Homem-Aranha">
Página Oficial
</a>
</button>
</div>
<div class="navigation-social">
<a href="https://www.facebook.com/HomemAranha/?locale=pt_BR">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="#EDF1F7" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/>
</svg>
</a>
<a href="https://www.instagram.com/spiderman/">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="#EDF1F7" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/>
</svg>
</a>
<a href="https://www.tiktok.com/@spidermanmovie?lang=pt-BR">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="#EDF1F7" d="M448,209.91a210.06,210.06,0,0,1-122.77-39.25V349.38A162.55,162.55,0,1,1,185,188.31V278.2a74.62,74.62,0,1,0,52.23,71.18V0l88,0a121.18,121.18,0,0,0,1.86,22.17h0A122.18,122.18,0,0,0,381,102.39a121.43,121.43,0,0,0,67,20.14Z"/>
</svg>
</a>
<a href="https://twitter.com/SpiderMan">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path d="M13.795 10.533 20.68 2h-3.073l-5.255 6.517L7.69 2H1l7.806 10.91L1.47 22h3.074l5.705-7.07L15.31 22H22l-8.205-11.467Zm-2.38 2.95L9.97 11.464 4.36 3.627h2.31l4.528 6.317 1.443 2.02 6.018 8.409h-2.31l-4.934-6.89Z"/>
</svg>
</a>
<a href="https://www.youtube.com/c/spiderman">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 576 512">
<path fill="#EDF1F7" d="M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z"/>
</svg>
</a>
</div>
</div>
<div id="main" class="border">
<!-- Main -->
</div>
<div id="right" class="border">
<img
src="/Assets/Imagens/Home/Spider.webp" class="IMG-spider" alt="Homem-Aranha em pose clássica">
</div>
<footer class="border">
<div class="rodape">
<img src="/Assets/Imagens/Home/Simbolo.png" class="IMG-rodape" alt="Símbolo da máscara do Homem-Aranha">
<p>Homem-Aranha (2024)</p>
</div>
</footer>
<div id="footer2" class="border">
<p>Henderson Lima ©</p>
<div class="navigation-social2">
<a href="https://www.facebook.com/share/PnAp65nThkCP9XxA/?mibextid=qi2Omg">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
<path fill="#EDF1F7" d="M504 256C504 119 393 8 256 8S8 119 8 256c0 123.78 90.69 226.38 209.25 245V327.69h-63V256h63v-54.64c0-62.15 37-96.48 93.67-96.48 27.14 0 55.52 4.84 55.52 4.84v61h-31.28c-30.8 0-40.41 19.12-40.41 38.73V256h68.78l-11 71.69h-57.78V501C413.31 482.38 504 379.78 504 256z"/>
</svg>
</a>
<a href="https://www.instagram.com/hendisu_lima?igsh=MTlmZjA5b3M0aWE2bQ==">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path fill="#EDF1F7" d="M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z"/>
</svg>
</a>
<a href="https://github.com/HStark0?tab=repositories">
<svg class="w-6 h-6 text-gray-800 dark:text-white" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" viewBox="0 0 24 24">
<path fill-rule="evenodd" d="M12.006 2a9.847 9.847 0 0 0-6.484 2.44 10.32 10.32 0 0 0-3.393 6.17 10.48 10.48 0 0 0 1.317 6.955 10.045 10.045 0 0 0 5.4 4.418c.504.095.683-.223.683-.494 0-.245-.01-1.052-.014-1.908-2.78.62-3.366-1.21-3.366-1.21a2.711 2.711 0 0 0-1.11-1.5c-.907-.637.07-.621.07-.621.317.044.62.163.885.346.266.183.487.426.647.71.135.253.318.476.538.655a2.079 2.079 0 0 0 2.37.196c.045-.52.27-1.006.635-1.37-2.219-.259-4.554-1.138-4.554-5.07a4.022 4.022 0 0 1 1.031-2.75 3.77 3.77 0 0 1 .096-2.713s.839-.275 2.749 1.05a9.26 9.26 0 0 1 5.004 0c1.906-1.325 2.74-1.05 2.74-1.05.37.858.406 1.828.101 2.713a4.017 4.017 0 0 1 1.029 2.75c0 3.939-2.339 4.805-4.564 5.058a2.471 2.471 0 0 1 .679 1.897c0 1.372-.012 2.477-.012 2.814 0 .272.18.592.687.492a10.05 10.05 0 0 0 5.388-4.421 10.473 10.473 0 0 0 1.313-6.948 10.32 10.32 0 0 0-3.39-6.165A9.847 9.847 0 0 0 12.007 2Z" clip-rule="evenodd"/>
</svg>
</a>
</div>
</div>
</div>
</body>
</html>