digitalinnovationone · RobsonBenigno · Aug 20, 2025 · Oct 28, 2025
diff --git a/README.md b/README.md
@@ -12,6 +12,10 @@ Fiquem a vontade para criar da forma que desejarem, e sobre os temas que quisere
 
 Sigam as intruções da chamada do vídeo. Acredito que por lá, ficará mais fácil de entenderem como proceder.
 
+### 🌐 Meu projeto online
+Veja meu **Projeto** publicado com GitHub Pages:  
+👉 [Acesse aqui](https://robsonbenigno.github.io/trilha-html-modulo-3/)
+
 ## Links úteis
 - [Download do NVDA](https://www.nvaccess.org/download/)
 - [Wikipedia](https://pt.wikipedia.org/)

diff --git a/assets/css/style.css b/assets/css/style.css
@@ -35,4 +35,88 @@ a { color:blue; text-decoration: none;}
 }
 figure {
     text-align: center;
-}
+
+}
+body {
+    margin: 0;
+    padding: 0;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+
+    /* Fundo */
+    background-image: url('../images/fundo\ 1.jpg'); /* caminho relativo da página index.html */
+    background-size: cover;       /* a imagem cobre toda a tela */
+    background-position: center;  /* centraliza a imagem */
+    background-repeat: no-repeat; /* evita repetição */
+    background-attachment: fixed; /* fixa a imagem ao rolar a página */
+}
+.main {
+    background-color: rgba(255, 254, 254, 0.705); /* fundo branco semi-transparente */
+    padding: 30px; /* espaço interno */
+    border-radius: 20px; /* cantos arredondados (opcional) */
+    max-width: 750px; /* largura máxima */
+    margin: 20px auto; /* centraliza horizontalmente */
+}
+.mainindex {
+    background-color: #f9f9fb6b;
+    padding: 20px; /* espaço interno */
+    border-radius: 20px; /* cantos arredondados (opcional) */
+    max-width: 750px; /* largura máxima */
+    height: 80vh; /* altura igual à da tela */
+    margin: 5px auto; /* centraliza horizontalmente */
+}
+
+img {
+    border-radius: 20px; /* Ajuste o valor para mais ou menos arredondamento */
+}
+
+.footer {
+  background-color: #f9f9fb6b; /* fundo escuro */
+  color: #0c0000;            /* texto branco */
+  text-align: center;     /* centraliza o texto */
+  padding: 1px;
+  margin-top: 1px;
+  border-radius:90px 90px 0 0; /* cantos arredondados em cima */
+}
+
+
+/* Container da nota IMDb */
+.imdb-rating {
+    display: inline-block;
+    background-color: #f5c518; /* cor amarela do IMDb */
+    color: #000;
+    font-weight: bold;
+    padding: 5px 10px;
+    border-radius: 15px 0 15px 0;
+    font-size: 1em;
+    margin-top: 5px;
+}
+
+/* Texto "IMDb" em destaque */
+.imdb-rating span {
+    font-weight: normal;
+    margin-left: 5px;
+    color: #000;
+}
+
+/* Pequeno efeito ao passar o mouse */
+.imdb-rating:hover {
+    background-color: #e5b507;
+    cursor: default;
+}
+
+figcaption {
+    font-size: 12px;  /* diminui o tamanho */
+    color: #555;      /* deixa o texto mais suave */
+    text-align: center; /* centraliza o texto */
+    font-style: italic; /* deixa em itálico */
+}
+
+figure img {
+    transition: transform 0.3s ease;
+}
+
+figure img:hover {
+    transform: scale(1.05) translateY(-5px);
+}
+
+
diff --git a/assets/images/Stranger_Things_logo.png b/assets/images/Stranger_Things_logo.png
diff --git a/assets/images/breaking-bad-logo.jpg b/assets/images/breaking-bad-logo.jpg
diff --git a/assets/images/fundo 1.jpg b/assets/images/fundo 1.jpg
diff --git a/assets/images/game-of-thrones-logo.jpg b/assets/images/game-of-thrones-logo.jpg
diff --git a/assets/images/logo-black-mirror.jpg b/assets/images/logo-black-mirror.jpg
diff --git a/assets/images/logo-de-round-6.jpg b/assets/images/logo-de-round-6.jpg
diff --git a/assets/images/logo-site.png b/assets/images/logo-site.png
diff --git a/index.html b/index.html
@@ -2,43 +2,49 @@
 <html lang="pt-br">
 <head>
     <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>
     <link rel="stylesheet" href="assets/css/style.css">
 </head>
 <body>
-
-    <div>   
-        <div class="logo">
-            <img src="assets/images/logo.png" width="200"/>
-        </div>
-    </div>
-
-    <div class="bar"></div>
-
     <div class="content">
+        <!-- Sidebar -->
         <div class="sidebar">
-            <h2>Título</h2>
+            <a href="index.html">
+            <img src="assets/images/logo-site.png" alt="Logo do Site" width="200">
+            </a>
+
             <ul>
-                <li><a href="#">Links</a></li>
+                <li><a href="paginas/gameofthrones.html">Game of Thrones</a></li>
+                <li><a href="paginas/breakingbad.html">Breaking Bad</a></li>
+                <li><a href="paginas/strangerthings.html">Stranger Things</a></li>
+                <li><a href="paginas/Round6.html">Round 6 (Squid Game)</a></li>
+                <li><a href="paginas/blackmirror.html">Black Mirror</a></li>
             </ul>
         </div>
 
-        <div class="main">
-
+        <!-- Área principal -->
+        <div class="mainindex">
+            <h1>Bem-vindo ao Portal de Séries</h1>
+            <p>Prepare a pipoca, ajuste o sofá e mergulhe no universo das suas séries favoritas! <br>
+            Aqui você encontra sinopses, curiosidades, novidades e tudo o que precisa para escolher sua próxima maratona.<br>
+            Explore nosso catálogo, descubra histórias incríveis e acompanhe cada lançamento.
+        </p>
+    </div>
+
+
         </div>
 
+        <!-- Lateral direita -->
         <div class="anchors">
-            <h2>Neste Artigo</h2>
-            <ul>
-                <li><a href="#">Âncoras</a></li>
-            </ul>
+
         </div>
-    </div>
+ </div>
+
+<footer class="footer">
+  <p>&copy; 2025 Meu Site de Séries | Desenvolvido por Robson</p>
+</footer>
 
-    <div class="footer">
 
-    </div>
 </body>
-</html>
+</html>
diff --git a/paginas/Breakingbad.html b/paginas/Breakingbad.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Breaking Bad</title>
+    <link rel="stylesheet" href="../assets/css/style.css">
+</head>
+<body>
+    <div class="content">
+        <!-- Sidebar -->
+        <div class="sidebar">
+            <a href="../index.html">
+            <img src="../assets/images/logo-site.png" alt="Logo do Site" width="200">
+            <ul>
+                <li><a href="gameofthrones.html">Game of Thrones</a></li>
+                <li><a href="breakingbad.html">Breaking Bad</a></li>
+                <li><a href="strangerthings.html">Stranger Things</a></li>
+                 <li><a href="round6.html">Round 6 (Squid Game)</a></li>
+                 <li><a href="blackmirror.html">Black Mirror</a></li>
+            </ul>
+        </div>
+
+        <!-- Conteúdo principal -->
+        <div class="main">
+            <figure>
+                <img src="../assets/images/breaking-bad-logo.jpg" width="500" alt="Logo da Série" width="400">
+                <figcaption>Logo da série.</figcaption>
+            </figure>
+
+            <p class="imdb-rating">IMDb: <span>9.5/10</span></p>
+
+            <h2 id="tudo">Tudo sobre Breaking Bad</h2>
+            <p>Breaking Bad recebeu 16 prêmios Primetime Emmy, incluindo Melhor Ator para Bryan Cranston e Melhor Ator Coadjuvante para Aaron Paul. O episódio "Ozymandias" é considerado um dos melhores da história da televisão. Após o fim da série, o filme El Camino: A Breaking Bad Movie serviu como epílogo para a história de Jesse Pinkman, consolidando ainda mais o legado da série como um fenômeno cultural.</p>
+
+            <h2 id="sinopse">Sinopse</h2>
+            <p>Breaking Bad é uma série de drama policial americana criada por Vince Gilligan. A trama acompanha Walter White, um professor de química diagnosticado com câncer, que decide produzir e vender metanfetamina para garantir o futuro de sua família. À medida que se aprofunda no mundo do crime, Walter assume o alter ego "Heisenberg", enfrentando dilemas morais e consequências perigosas.</p>
+
+            <h2 id="produção">Produção</h2>
+            <p>A série estreou em 2008 no canal AMC e foi concluída em 2013, após cinco temporadas. Filmada em Albuquerque, Novo México, a produção se destacou pela narrativa envolvente, personagens complexos e atuações memoráveis, especialmente de Bryan Cranston e Aaron Paul.</p>
+
+            <iframe id="Trailer"width="560" height="315" 
+            src="https://www.youtube.com/embed/HhesaQXLuRY" 
+            title="Trailer Breaking Bad" 
+            frameborder="0" 
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+            allowfullscreen>
+            </iframe>
+            <hr>
+
+            <a href="../index.html">Voltar</a>
+        </div>
+
+        <!-- Lateral direita -->
+        <div class="anchors">
+            <h2>Neste Artigo</h2>
+            <ul>
+                <li><a href="#tudo">Tudo sobre Breaking Bad</a></li>
+                <li><a href="#sinopse">Sinopse Breaking Bad</a></li>
+                <li><a href="#produção">Produção Breaking Bad</a></li>
+                <li><a href="#Trailer">Trailer Breaking Bad</a></li>
+            </ul>
+        </div>
+    </div>
+
+    <footer class="footer">
+  <p>&copy; 2025 Meu Site de Séries | Desenvolvido por Robson</p>
+</footer>
+
+</body>
+</html>
diff --git a/paginas/Round6.html b/paginas/Round6.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stranger Things</title>
+    <link rel="stylesheet" href="../assets/css/style.css">
+</head>
+<body>
+    <div class="content">
+        <!-- Sidebar -->
+        <div class="sidebar">
+            <a href="../index.html">
+            <img src="../assets/images/logo-site.png" alt="Logo do Site" width="200">
+            <ul>
+                <li><a href="gameofthrones.html">Game of Thrones</a></li>
+                <li><a href="breakingbad.html">Breaking Bad</a></li>
+                <li><a href="strangerthings.html">Stranger Things</a></li>
+                 <li><a href="round6.html">Round 6 (Squid Game)</a></li>
+                 <li><a href="blackmirror.html">Black Mirror</a></li>
+            </ul>
+        </div>
+
+        <!-- Conteúdo principal -->
+        <div class="main">
+             <figure>
+                <img src="../assets/images/logo-de-round-6.jpg" width="500" alt="Logo da Série">
+                <figcaption>Logo da série.</figcaption>
+            </figure>
+
+            <p class="imdb-rating">IMDb: <span>8.1/10</span></p>
+
+            <h2 id="tudo">Tudo sobre Round 6 (Squid Game)</li></h2>
+            <p>A série tornou-se a produção mais assistida da Netflix, com 111 milhões de contas assistindo a primeira temporada nos primeiros 28 dias. Recebeu elogios da crítica e conquistou 100% de aprovação no Rotten Tomatoes. Round 6 também marcou história nos prêmios, sendo a primeira produção coreana indicada ao SAG Awards e conquistando vitórias no Emmy Awards. A segunda temporada estreou em 26 de dezembro de 2024, atingindo 68 milhões de visualizações em quatro dias, enquanto a terceira e última temporada, lançada em 27 de junho de 2025, bateu recordes com 60,1 milhões de visualizações em três dias. A série é reconhecida por sua crítica ao capitalismo e à desigualdade, além de personagens complexos que refletem dilemas humanos universais.</p>
+
+            <h2 id="sinopse">Sinopse</h2>
+            <p>Round 6 (Squid Game) é uma série sul-coreana de suspense e survival thriller criada por Hwang Dong-hyuk. A história acompanha 456 participantes endividados que recebem um misterioso convite para jogar brincadeiras infantis transformadas em desafios mortais. Quem perde paga com a própria vida, enquanto o vencedor leva uma fortuna de 45,6 bilhões de won. A série estreou na Netflix em 17 de setembro de 2021, tornando-se um fenômeno global e conquistando milhões de espectadores logo na primeira semana.</p>
+
+            <h2 id="produção">Produção</h2>
+            <p>O roteiro de Round 6 foi escrito por Hwang Dong-hyuk em 2008, inspirado em desigualdades sociais e experiências pessoais. Após mais de uma década sem produção, a Netflix aprovou o projeto em 2019. A série se destaca pela direção de arte única, cores vibrantes, cenários opressivos e trilha sonora imersiva, que intensificam a tensão dos jogos. Hwang também assumiu funções de direção e produção executiva, garantindo fidelidade à sua visão original.</p>
+
+            <iframe id="Trailer"width="560" height="315" 
+            src="https://www.youtube.com/embed/oqxAJKy0ii4" 
+            title="Trailer Round 6 (Squid Game)" 
+            frameborder="0" 
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+            allowfullscreen>
+            </iframe>
+            <hr>
+
+            <a href="../index.html">Voltar</a>
+        </div>
+
+        <!-- Lateral direita -->
+        <div class="anchors">
+            <h2>Neste Artigo</h2>
+            <ul>
+                <li><a href="#tudo">Tudo sobre Round 6 (Squid Game)</a></li>
+                <li><a href="#sinopse">Sinopse Round 6 (Squid Game)</a></li>
+                <li><a href="#produção">Produção Round 6 (Squid Game)</a></li>
+                <li><a href="#Trailer">Trailer Round 6 (Squid Game)</a></li>
+            </ul>
+        </div>
+    </div>
+
+    <footer class="footer">
+  <p>&copy; 2025 Meu Site de Séries | Desenvolvido por Robson</p>
+</footer>
+
+</body>
+</html>
diff --git a/paginas/Strangerthings.html b/paginas/Strangerthings.html
@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="pt-br">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Stranger Things</title>
+    <link rel="stylesheet" href="../assets/css/style.css">
+</head>
+<body>
+    <div class="content">
+        <!-- Sidebar -->
+        <div class="sidebar">
+            <a href="../index.html">
+            <img src="../assets/images/logo-site.png" alt="Logo do Site" width="200">
+            <ul>
+                <li><a href="gameofthrones.html">Game of Thrones</a></li>
+                <li><a href="breakingbad.html">Breaking Bad</a></li>
+                <li><a href="strangerthings.html">Stranger Things</a></li>
+                 <li><a href="round6.html">Round 6 (Squid Game)</a></li>
+                 <li><a href="blackmirror.html">Black Mirror</a></li>
+            </ul>
+        </div>
+
+        <!-- Conteúdo principal -->
+        <div class="main">
+             <figure>
+                <img src="../assets/images/Stranger_Things_logo.png" width="500" alt="Logo da Série">
+                <figcaption>Logo da série.</figcaption>
+            </figure>
+
+            <p class="imdb-rating">IMDb: <span>8.7/10</span></p>
+
+            <h2 id="tudo">Tudo sobre Stranger Things</h2>
+            <p>Stranger Things conquistou uma enorme base de fãs e recebeu elogios da crítica por sua narrativa envolvente, personagens cativantes e atmosfera nostálgica dos anos 1980. A série recebeu diversos prêmios e indicações, incluindo Emmy Awards, BAFTA e Critics' Choice Awards, consolidando-se como um fenômeno global do streaming. Além disso, é amplamente reconhecida por homenagear a cultura pop dos anos 80, incorporando referências a filmes, músicas e estilos da época, o que reforça seu apelo tanto para novas gerações quanto para fãs da década.</p>
+
+            <h2 id="sinopse">Sinopse</h2>
+            <p>Stranger Things é uma série de ficção científica, terror e drama adolescente criada pelos irmãos Matt e Ross Duffer. Ambientada nos anos 1980 na cidade fictícia de Hawkins, Indiana, a trama começa com o desaparecimento de Will Byers e a aparição de uma garota misteriosa chamada Onze, que possui habilidades telecinéticas. Ao longo das temporadas, os amigos de Will e outros moradores de Hawkins enfrentam forças sobrenaturais, incluindo criaturas do "Mundo Invertido", enquanto lidam com questões pessoais e sociais típicas da adolescência.</p>
+
+            <h2 id="produção">Produção</h2>
+            <p>A série estreou na Netflix em 15 de julho de 2016 e rapidamente se tornou um sucesso global. Os irmãos Duffer se inspiraram em filmes e obras dos anos 1980, como os de Steven Spielberg, John Carpenter e Stephen King, para criar uma narrativa que mistura mistério, suspense e elementos sobrenaturais. A produção é conhecida por sua ambientação nostálgica, elenco talentoso e roteiros envolventes.</p>
+
+            <iframe id="Trailer" width="560" height="315" 
+            src="https://www.youtube.com/embed/b9EkMc79ZSU" 
+            title="Trailer Stranger Things" 
+            frameborder="0" 
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
+            allowfullscreen>
+            </iframe>
+            <hr>
+
+
+            <a href="../index.html">Voltar</a>
+            </div>
+
+        <!-- Lateral direita -->
+        <div class="anchors">
+            <h2>Neste Artigo</h2>
+            <ul>
+                <li><a href="#tudo">Tudo sobre Stranger Things</a></li>
+                <li><a href="#sinopse">Sinopse Stranger Things</a></li>
+                <li><a href="#produção">Produção Stranger Things</a></li>
+                <li><a href="#Trailer">Trailer Stranger Things</a></li>
+            </ul>
+        </div>
+    </div>
+
+    <footer class="footer">
+  <p>&copy; 2025 Meu Site de Séries | Desenvolvido por Robson</p>
+</footer>
+
+</body>
+</html>