digitalinnovationone · Gustavoo-coder · Jul 15, 2025 · Jul 15, 2025
diff --git a/README.md b/README.md
@@ -1,19 +1,31 @@
-# Módulo 3 - Trilha HTML
+# 🕸️ Spider-Verso: Página Estilo Wikipédia
 
-**Título:** Recriando Wikipedia, com um layout melhor :)
+Este projeto é uma página web inspirada no estilo da Wikipédia com foco no universo do filme **Homem-Aranha: Através do Aranhaverso**. A proposta é praticar HTML5 semântico, CSS Grid e estrutura de conteúdo com acessibilidade e organização.
 
-## Objetivo
-Este desafio consiste em treinar você com relação a estrutura do site, e também aplicar conhecimentos adiquiridos sobre semântica e acessibilidade.
+---
 
-## Desafio
-Neste repositório tem uma estrutura básica já pré-montada de um layout simples com um pouco de CSS aplicado. Apenas para deixar mais apresentável.
+## 📚 Conteúdo da Página
 
-Fiquem a vontade para criar da forma que desejarem, e sobre os temas que quiserem. O intuito aqui é divertir, e ao mesmo tempo aprender com o desafio.
+- Informações detalhadas sobre o filme **Homem-Aranha: Através do Aranhaverso**
+- Biografia do personagem **Miles Morales**
+- Navegação lateral com outros filmes animados
+- Links externos para aprender mais sobre o personagem
+- Uso de imagens com `figure` e `figcaption`
+- Estrutura de layout com `grid-template-areas`
 
-Sigam as intruções da chamada do vídeo. Acredito que por lá, ficará mais fácil de entenderem como proceder.
+---
 
-## Links úteis
-- [Download do NVDA](https://www.nvaccess.org/download/)
-- [Wikipedia](https://pt.wikipedia.org/)
+## 🛠️ Tecnologias Utilizadas
 
+- HTML5
+- CSS3 (Grid Layout)
+- Semântica Web
+- Responsividade básica (em progresso)
 
+---
+
+## 🎯 Objetivos do Projeto
+
+- Praticar estruturação semântica com `article`, `section`, `nav`, `footer`, `figure`
+- Treinar organização de layout com **CSS Grid**
+- Aprender boas práticas com `git clone`, `branch`, `commit` e `push`
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -5,13 +5,13 @@ body, html {
 }
 ul { list-style: none; padding-left: 5px; }
 a { color:blue; text-decoration: none;}
-.bar {
+.bar{
     background-color: #f9f9fb;
     padding:15px;
     border-top: solid 1px #cdcdcd;
     border-bottom: solid 1px #cdcdcd;
 }
-.content {
+main{
     max-width: 1440px;
     margin: auto;
     grid-gap: 3rem;
@@ -22,17 +22,24 @@ a { color:blue; text-decoration: none;}
     padding-left: 1rem;
     padding-right: 1rem;
 }
-.footer {
+footer{
     min-height: 100px;
     border-top: solid 1px #cdcdcd;
+    text-align: center;
+    list-style: none;
 }
-.anchors {
+article{
     border-left: solid 1px #cdcdcd;
     padding-left: 15px;
 }
-.sidebar {
+nav{
     border-right: solid 1px #cdcdcd;
 }
 figure {
     text-align: center;
-}
+}
+
+article h1,
+article h2 {
+  text-align: center;
+}
diff --git a/assets/images/game-of-thrones.png b/assets/images/game-of-thrones.png
diff --git a/index.html b/index.html
@@ -4,41 +4,74 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Página Principal</title>
+    <title>Wikipidia </title>
     <link rel="stylesheet" href="assets/css/style.css">
 </head>
 <body>
 
-    <div>   
+    <header>   
         <div class="logo">
-            <img src="assets/images/logo.png" width="200"/>
+            <img src="https://preview.redd.it/across-the-spiderverse-all-icons-dropped-who-are-you-most-v0-3u0rbgxzngba1.jpg?width=640&crop=smart&auto=webp&s=0736445e8f5bb3c82f14734de9b03d130371daab" width="100" alt="Logo ilustrativa do filme home aranha atraves do aranha-verso"/>
         </div>
-    </div>
+    </header>
 
     <div class="bar"></div>
 
-    <div class="content">
-        <div class="sidebar">
-            <h2>Título</h2>
+    <main>
+        <nav>
+            <h2>Filmes animados</h2>
             <ul>
-                <li><a href="#">Links</a></li>
+                <li><a href="#">Eu a Patroa e as Crianças</a></li>
+                <li><a href="#">Meu Malvado Favorito</a></li>
+                <li><a href="#">Zootopia</a></li>
             </ul>
-        </div>
+        </nav>
 
-        <div class="main">
+        <section>
 
-        </div>
+            <article id="Inicio-Homem-aranha">
+                <h1>Homem-Aranha: Através do Aranhaverso</h1>
+                <p>Spider-Man: Across the Spider-Verse (bra/prt: Homem-Aranha: Através do Aranhaverso) é um filme de animação norte-americano de super-herói lançado em 2023 e estrelado pelo personagem Miles Morales / Homem-Aranha da Marvel Comics. O filme foi produzido pela Columbia Pictures e Sony Pictures Animation em associação com a Marvel Entertainment e distribuído pela Sony Pictures Releasing. O filme é a sequência de Spider-Man: Into the Spider-Verse (2018) sendo ambientado em um multiverso compartilhado de universos alternativos conhecido como "Aranhaverso". O filme foi dirigido por Joaquim Dos Santos, Kemp Powers e Justin K. Thompson (sendo a estreia de Dos Santos e Thompson na direção) partindo do roteiro de Phil Lord, Christopher Miller (que também produzem) e David Callaham. Shameik Moore dubla Miles e estrela a produção ao lado de Hailee Steinfeld, Brian Tyree Henry, Luna Lauren Vélez, Jake Johnson, Jason Schwartzman, Issa Rae, Karan Soni, Shea Whigham, Greta Lee, Daniel Kaluuya, Mahershala Ali e Oscar Isaac. No filme, Miles parte em uma aventura com Gwen Stacy / Mulher-Aranha através do multiverso, onde conhece uma equipe de Pessoas-Aranha conhecida como Sociedade-Aranha, liderada por Miguel O'Hara / Homem-Aranha 2099, mas entra em conflito com eles para lidar com uma nova ameaça intitulada como o Mancha.</p>
+
+                <figure>
+                    <img src="https://m.media-amazon.com/images/S/pv-target-images/4417ce7f9b8e3a315b8e77cb6f8ec369f702509e4352cf7c45df77f93c8a7325.jpg" width="300" alt="imagem ilustrativa do filme Homem-Aranha Através do Aranhaverso">
+                    <figcaption>Capa do  filme Homem-Aranha Através do Aranhaverso </figcaption>
+                </figure>
+
+                <p>A Sony começou a desenvolver a sequência de Into the Spider-Verse antes mesmo do seu lançamento em 2018, com a equipe de roteirista e direção contratada. Foi decidido que o foco do longa-metragem seria o relacionamento entre o Morales de Shameik e a Gwen da Steinfeld. A sequência foi anunciada oficialmente em novembro de 2019 e o trabalho de animação começou em junho de 2020, apresentando um estilo visual diferente para cada um dos seis universos visitados pelos personagens. Com duração de 140 minutos, é o filme de animação mais longo já produzido por um estúdio americano.</p>
+
+                <p>A primeira exibição de Spider-Man: Across the Spider-Verse aconteceu no Regency Village Theatre em Los Angeles, Califórnia, em 30 de maio de 2023, e foi lançado nos Estados Unidos em 2 de junho de 2023, tendo sido adiado de abril de 2022 em virtude da pandemia de COVID-19. Foi o primeiro filme de animação teatral a ser lançado em duas partes. O terceiro e último filme da trilogia, intitulado Spider-Man: Beyond the Spider-Verse, estava previsto para lançamento em 2024 porém, ele foi adiado indefinidamente. Um filme derivado focado nas personagens femininas, intitulado Spider-Woman, está em desenvolvimento.</p>
+
+
+                <h2 id="miles">Tudo sobre o Miles</h2>
+                <p>Miles Morales é um personagem presente nos quadrinhos da Marvel Comics, que apareceu pela primeira vez em Ultimate Fallout #4 (Agosto de 2011). Um adolescente negro com ascendência hispânica, Miles é o segundo Homem-Aranha a aparecer em Ultimate Marvel, e com uma continuação no Universo Marvel principal. Embora Morales seja destaque na série Ultimate Comics: Spider-Man, ele não é o personagem principal na série de TV animada Ultimate Spider-Man, que estreou em abril de 2012 no Disney XD, porém mais tarde, em 2016, ele foi adicionado ao elenco principal. O personagem aparece também no filme Spider-Man: Into the Spider-Verse, de 2018, que ganhou o Oscar de melhor filme de animação.</p>
 
-        <div class="anchors">
+                <figure>
+                    <img src="https://preview.redd.it/spider-man-miles-morales-artwork-by-me-v0-qb9wxhvxabdb1.jpg?width=640&crop=smart&auto=webp&s=8b6da35cf17ff69ebe8c1f6a03c58cd1c741a6b7" width="300" alt="Imagem de miles apoiando em um predio muito alto">
+                </figure>
+            </article>
+
+
+        </section>
+
+
+        <article>
             <h2>Neste Artigo</h2>
             <ul>
-                <li><a href="#">Âncoras</a></li>
+                <li><a href="#Inicio-Homem-aranha">Homem-Aranha: Através do Aranhaverso</a></li>
+                <li> <a href="#miles">Tudo sobre miles</a></li>""
+                <li> <a href="#saiba-mais">Saiba mais sobre miles</a> </li>
             </ul>
-        </div>
-    </div>
-
-    <div class="footer">
+        </article>
+    </main>
 
-    </div>
+    <footer>
+        <h3 id="saiba-mais">Para saber mais sobre Miles</h3>
+        <nav>
+            <li> <a href="https://pt.wikipedia.org/wiki/Miles_Morales"target="_blank">Historia de Miles</a> </li>
+            <li> <a href="https://observatoriodocinema.com.br/filmes/astro-de-homem-aranha-atraves-do-aranhaverso-pede-desculpa-por-reacao-a-derrota-no-oscar/?utm_source=chatgpt.com"target="_blank">Polemica do Filme</a> </li>
+            <li> <a href="https://marvel.fandom.com/wiki/Miles_Morales_(Earth-42)"target="_blank">Nova terra 42</a> </li>
+        </nav>
+    </footer>
 </body>
 </html>