aula 6

alura-cursos · May 20, 2024 · 4c8729c · 4c8729c · geovane-17 · Sep 6, 2024
1 parent a6c7756
commit 4c8729c
Show file tree

Hide file tree

Showing 2 changed files with 38 additions and 2 deletions.
diff --git a/index.html b/index.html
@@ -13,7 +13,7 @@
 <body>
     <header>ALURAFLIX</header>
 
-    <section>
+    <section class="chamada">
         <div class="chamada-texto">
             <h1>ATRAVÉS DO ARANHAVERSO</h1>
             <p>#homem-aranha</p>
@@ -27,6 +27,27 @@ <h1>ATRAVÉS DO ARANHAVERSO</h1>
         </div>
     </section>
 
+    <section class="categoria">
+        <h2>Filmes e séries</h2>
+        <div class="categoria-videos">
+            <a href="https://www.youtube.com/watch?v=cs15QqG6Gjc">
+                <img src="https://img.youtube.com/vi/cs15QqG6Gjc/maxresdefault.jpg" />
+            </a>
+            <a href="https://www.youtube.com/watch?v=nCmIwcycUJ8">
+                <img src="https://img.youtube.com/vi/nCmIwcycUJ8/maxresdefault.jpg" />
+            </a>
+            <a href="https://www.youtube.com/watch?v=FvRmEapoHRc">
+                <img src="https://img.youtube.com/vi/FvRmEapoHRc/maxresdefault.jpg" />
+            </a>
+            <a href="https://www.youtube.com/watch?v=Ipkw_hWW-Hw">
+                <img src="https://img.youtube.com/vi/Ipkw_hWW-Hw/maxresdefault.jpg" />
+            </a>
+            <a href="https://www.youtube.com/watch?v=d4DzMNGoyis">
+                <img src="https://img.youtube.com/vi/d4DzMNGoyis/maxresdefault.jpg" />
+            </a>
+        </div>
+    </section>
+
 </body>
 
 </html>
diff --git a/styles.css b/styles.css
@@ -12,7 +12,7 @@ header {
     color: rgb(42, 122, 228);
 }
 
-section {
+.chamada {
     background: rgb(184, 156, 213);
     padding-bottom: 80px;
     padding-top: 80px;
@@ -30,4 +30,19 @@ h1 {
 
 p {
     font-size: 20px;
+}
+
+img {
+    height: 200px;
+}
+
+.categoria-videos {
+    display: flex;
+    overflow-x: auto;
+    gap: 10px;
+}
+
+.categoria {
+    padding-left: 20px;
+    padding-right: 20px;
 }