Add files via upload

Subimos las imágenes de las películas
wenceslaojanda · Apr 24, 2024 · 0979a2c · 0979a2c
1 parent 3f8d048
commit 0979a2c
Show file tree

Hide file tree

Showing 42 changed files with 1,317 additions and 0 deletions.
diff --git a/assets/img/aclamada_1.jpg b/assets/img/aclamada_1.jpg
diff --git a/assets/img/aclamada_10.jpg b/assets/img/aclamada_10.jpg
diff --git a/assets/img/aclamada_11.jpg b/assets/img/aclamada_11.jpg
diff --git a/assets/img/aclamada_12.jpg b/assets/img/aclamada_12.jpg
diff --git a/assets/img/aclamada_2.jpg b/assets/img/aclamada_2.jpg
diff --git a/assets/img/aclamada_3.jpg b/assets/img/aclamada_3.jpg
diff --git a/assets/img/aclamada_4.jpg b/assets/img/aclamada_4.jpg
diff --git a/assets/img/aclamada_5.jpg b/assets/img/aclamada_5.jpg
diff --git a/assets/img/aclamada_6.jpg b/assets/img/aclamada_6.jpg
diff --git a/assets/img/aclamada_7.jpg b/assets/img/aclamada_7.jpg
diff --git a/assets/img/aclamada_8.jpg b/assets/img/aclamada_8.jpg
diff --git a/assets/img/aclamada_9.jpg b/assets/img/aclamada_9.jpg
diff --git a/assets/img/banner-bg.jpg b/assets/img/banner-bg.jpg
diff --git a/assets/img/bg-register.jpg b/assets/img/bg-register.jpg
diff --git a/assets/img/flecha-hacia-arriba.png b/assets/img/flecha-hacia-arriba.png
diff --git a/assets/img/mario-bg.jpg b/assets/img/mario-bg.jpg
diff --git a/assets/img/mario.jpg b/assets/img/mario.jpg
diff --git a/assets/img/peli_1.jpg b/assets/img/peli_1.jpg
diff --git a/assets/img/peli_10.jpg b/assets/img/peli_10.jpg
diff --git a/assets/img/peli_11.jpg b/assets/img/peli_11.jpg
diff --git a/assets/img/peli_12.jpg b/assets/img/peli_12.jpg
diff --git a/assets/img/peli_13.jpg b/assets/img/peli_13.jpg
diff --git a/assets/img/peli_14.jpg b/assets/img/peli_14.jpg
diff --git a/assets/img/peli_15.jpg b/assets/img/peli_15.jpg
diff --git a/assets/img/peli_16.jpg b/assets/img/peli_16.jpg
diff --git a/assets/img/peli_17.jpg b/assets/img/peli_17.jpg
diff --git a/assets/img/peli_18.jpg b/assets/img/peli_18.jpg
diff --git a/assets/img/peli_19.jpg b/assets/img/peli_19.jpg
diff --git a/assets/img/peli_2.jpg b/assets/img/peli_2.jpg
diff --git a/assets/img/peli_3.jpg b/assets/img/peli_3.jpg
diff --git a/assets/img/peli_4.jpg b/assets/img/peli_4.jpg
diff --git a/assets/img/peli_5.jpg b/assets/img/peli_5.jpg
diff --git a/assets/img/peli_6.jpg b/assets/img/peli_6.jpg
diff --git a/assets/img/peli_7.jpg b/assets/img/peli_7.jpg
diff --git a/assets/img/peli_8.jpg b/assets/img/peli_8.jpg
diff --git a/assets/img/peli_9.jpg b/assets/img/peli_9.jpg
diff --git a/css/estilos.css b/css/estilos.css
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,244 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>CAC-MOVIES</title>
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
+    <link rel="stylesheet" href="./css/estilos.css">
+    <script src="https://kit.fontawesome.com/f7fb471b65.js" crossorigin="anonymous"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,300&display=swap" rel="stylesheet">
+    <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
+</head>
+<body>
+    <header class="header">
+        <nav class="navegacion">
+            <a class="anclaLogo" href="#">
+                <i class="fas fa-film" aria-hidden="true"></i>
+                <span>CAC-Movies</span>
+            </a>
+            <ul class="listaNav">
+                <li class="listaItem"><a class="linkNav" href="#tendencias">Tendencias</a></li>
+                <li class="listaItem"><a class="linkNav" href="./pages/registrarse.html">Registrarse</a></li>
+                <li class="listaItem"><a class="linkNav iniciarSesion" href="./pages/iniciosesion.html">Iniciar Sesión</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main id="main" class="main">
+        <section data-aos="zoom-in"  data-aos-duration="1000" class="sectionPrincipal">
+            <h1 class="tituloPrincipal">Películas y series ilimitadas <br> en un solo lugar</h1>
+            <h2 class="subtituloPrincipal">Disfruta donde quieras. <br> Cancela en cualquier momento.</h2>
+            <a class="botonRegistrarse" href="./pages/registrarse.html">Registrate</a>
+        </section>
+        <section data-aos="fade-up" data-aos-offset="300" data-aos-delay="50" data-aos-duration="1000" class="buscadorPrincipal">
+            <h2 class="tituloSection">¿Qué estas buscando para ver?</h2>
+            <form class="buscadorPeliculas">
+                <input class="inputBuscador" type="text" placeholder="Buscar..."/>
+                <input class="botonBuscador" type="submit" value="Buscar">
+            </form>
+
+
+        </section>
+        <hr>
+        <section id="tendencias" data-aos="fade-up" data-aos-offset="400" data-aos-delay="100" data-aos-duration="1000" class="peliculasTendencia">
+            <h3 class="tituloSection">Las tendencias de hoy</h3>
+            <div class="peliculas">
+                <a href="./pages/detalle.html">
+                    <div class="pelicula">
+
+                        <img class="imgTendencia" src="./assets/img/peli_1.jpg" alt="The Beekeeper" loading="lazy">
+
+                        <div class="tituloPelicula">
+                            <h4>The Beekeeper</h4>
+                        </div>
+
+                    </div>
+                </a>
+                <a href="./pages/detalle.html">
+                    <div class="pelicula">
+
+                        <img class="imgTendencia" src="./assets/img/peli_2.jpg" alt="Badland Hunters" loading="lazy">
+
+                        <div class="tituloPelicula">
+                            <h4>Badland Hunters</h4>
+                        </div>
+
+                    </div>
+                </a>
+                <a href="./pages/detalle.html">
+                    <div class="pelicula">
+
+                        <img class="imgTendencia" src="./assets/img/peli_3.jpg" alt="The Marvels" loading="lazy">
+
+                        <div class="tituloPelicula">
+                            <h4>The Marvels</h4>
+                        </div>
+
+                    </div>
+                </a>
+                <a href="./pages/detalle.html">
+                    <div class="pelicula">
+
+                        <img class="imgTendencia" src="./assets/img/peli_4.jpg" alt="Wonka" loading="lazy">
+
+                        <div class="tituloPelicula">
+                                <h4>Wonka</h4>
+                        </div>
+                    </div>
+
+                </a>
+                <a href="./pages/detalle.html">
+                    <div class="pelicula">
+
+                        <img class="imgTendencia" src="./assets/img/peli_5.jpg" alt="Aquaman and the Lost Kingdom" loading="lazy">
+
+                        <div class="tituloPelicula">
+                            <h4>Aquaman and the Lost Kingdom</h4>
+                        </div>
+
+                    </div>
+                </a>
+                <a href="./pages/detalle.html">
+                    <div class="pelicula">
+
+                        <img class="imgTendencia" src="./assets/img/peli_6.jpg" alt="Migration" loading="lazy">
+
+                        <div class="tituloPelicula">
+                            <h4>Migration</h4>
+                        </div>
+
+                    </div>
+                </a>
+                <a href="./pages/detalle.html">
+                    <div class="pelicula">
+
+                        <img class="imgTendencia" src="./assets/img/peli_7.jpg" alt="Sixty Minutes" loading="lazy">
+
+                        <div class="tituloPelicula">
+                            <h4>Sixty Minutes</h4>
+                        </div>
+
+                    </div>
+                </a>
+                <a href="./pages/detalle.html">
+                    <div class="pelicula">
+
+                        <img class="imgTendencia" src="./assets/img/peli_8.jpg" alt="Wish" loading="lazy">
+
+                        <div class="tituloPelicula">
+                            <h4>Wish</h4>
+                        </div>
+
+                    </div>
+                </a>
+                <a href="./pages/detalle.html">
+                    <div class="pelicula">
+
+                        <img class="imgTendencia" src="./assets/img/peli_9.jpg" alt="The Masked Saint" loading="lazy">
+
+                        <div class="tituloPelicula">
+                            <h4>The Masked Saint</h4>
+                        </div>
+
+                    </div>
+                </a>
+                <a href="./pages/detalle.html">
+                    <div class="pelicula">
+
+                        <img class="imgTendencia" src="./assets/img/peli_10.jpg" alt="Due Justice" loading="lazy">
+
+                        <div class="tituloPelicula">
+                            <h4>Due Justice</h4>
+                        </div>
+
+                    </div>
+                </a>
+                <a href="./pages/detalle.html">
+                    <div class="pelicula">
+
+                        <img class="imgTendencia" src="./assets/img/peli_11.jpg" alt="Orion and the Darke" loading="lazy">
+
+                        <div class="tituloPelicula">
+                            <h4>Orion and the Dark</h4>
+                        </div>
+
+                    </div>
+                </a>
+                <a href="./pages/detalle.html">
+                    <div class="pelicula">
+
+                        <img class="imgTendencia" src="./assets/img/peli_12.jpg" alt="Genghis Khan" loading="lazy">
+
+                        <div class="tituloPelicula">
+                            <h4>Genghis Khan</h4>
+                        </div>
+
+                    </div>
+                </a>
+            </div>
+            <button class="boton anterior">Anterior</button>  
+            <button class="boton siguiente">Siguiente</button>
+        </section>
+        <hr>
+        <section data-aos="fade-up" data-aos-offset="200" data-aos-delay="100" data-aos-duration="2000" class="peliculasAclamadas">
+            <h3 class="tituloSection">Las más aclamadas</h3>
+             <div class="aclamadas">
+                <div class="peliculaItem">
+                    <img class="imgAclamada" src="./assets/img/aclamada_1.jpg" alt="aclamada_1" loading="lazy">
+                </div>
+                <div class="peliculaItem">
+                    <img class="imgAclamada" src="./assets/img/aclamada_2.jpg" alt="aclamada_2" loading="lazy">
+                </div>
+                <div class="peliculaItem">
+                    <img class="imgAclamada" src="./assets/img/aclamada_3.jpg" alt="aclamada_3" loading="lazy">
+                </div>
+                <div class="peliculaItem">
+                    <img class="imgAclamada" src="./assets/img/aclamada_4.jpg" alt="aclamada_4" loading="lazy">
+                </div>
+                <div class="peliculaItem">
+                    <img class="imgAclamada" src="./assets/img/aclamada_5.jpg" alt="aclamada_5" loading="lazy">
+                </div>
+                <div class="peliculaItem">
+                    <img class="imgAclamada" src="./assets/img/aclamada_6.jpg" alt="aclamada_6" loading="lazy">
+                </div>
+                <div class="peliculaItem">
+                    <img class="imgAclamada" src="./assets/img/aclamada_7.jpg" alt="aclamada_7" loading="lazy">
+                </div>
+                <div class="peliculaItem">
+                    <img class="imgAclamada" src="./assets/img/aclamada_8.jpg" alt="aclamada_8" loading="lazy">
+                </div>
+                <div class="peliculaItem">
+                    <img class="imgAclamada" src="./assets/img/aclamada_9.jpg" alt="aclamada_9" loading="lazy">
+                </div>
+                <div class="peliculaItem">
+                    <img class="imgAclamada" src="./assets/img/aclamada_10.jpg" alt="aclamada_10" loading="lazy">
+                </div>
+                <div class="peliculaItem">
+                    <img class="imgAclamada" src="./assets/img/aclamada_11.jpg" alt="aclamada_11" loading="lazy">
+                </div>
+                <div class="peliculaItem">
+                    <img class="imgAclamada" src="./assets/img/aclamada_12.jpg" alt="aclamada_12" loading="lazy">
+                </div>               
+            </div>
+        </section>
+
+    </main>
+    <footer class="footer">
+        <nav class="navegacion">
+            <ul class="listaNav">
+                <li class="listaItem"><a class="linkNav" href="">Términos y condiciones</a></li>
+                <li class="listaItem"><a class="linkNav" href="">Preguntas frecuentes</a></li>
+                <li class="listaItem"><a class="linkNav" href="">Ayuda</a></li>
+                <li class="listaItem"><a class="linkNav administradorPeliculas" href="">Administrador Peliculas</a></li>
+            </ul>
+        </nav>
+        <a href="#main" class="flechaArriba">
+            <img src="./assets/img/flecha-hacia-arriba.png" alt="ir arriba flecha">
+        </a>
+    </footer>
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script>
+    AOS.init();
+    </script>
+</body>
+</html>
diff --git a/pages/detalle.html b/pages/detalle.html
@@ -0,0 +1,124 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Detalle | CAC-MOVIES</title>
+    <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css">
+    <link rel="stylesheet" href="../css/estilos.css">
+    <script src="https://kit.fontawesome.com/f7fb471b65.js" crossorigin="anonymous"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,300&display=swap" rel="stylesheet">
+    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon">
+</head>
+<body>
+    <header class="header">
+        <nav class="navegacion">
+            <a class="anclaLogo" href="../index.html">
+                <i class="fas fa-film" aria-hidden="true"></i>
+                <span>CAC-Movies</span>
+            </a>
+            <ul class="listaNav">
+                <li class="listaItem"><a class="linkNav" href="../index#tendencias">Tendencias</a></li>
+                <li class="listaItem"><a class="linkNav" href="./registrarse.html">Registrarse</a></li>
+                <li class="listaItem"><a class="linkNav iniciarSesion" href="./iniciosesion.html">Iniciar Sesión</a></li>
+            </ul>
+        </nav>
+    </header>
+    <main id="mainDetalle" class="mainDetalle">
+      <section class="detalle"  data-aos="zoom-in" >
+        <div class="contenedorDetalle" >
+            <div class="imgDetalle">
+                <img src="../assets/img/mario.jpg" alt="mario pelicula 2023">
+            </div>
+            <div class="textoDetalle">
+                <h1>The Super Mario Bros. Movie (2023)</h1>
+                <p>04/05/2023 • Animation, Family, Adventure, Fantasy, Comedy • 1h 33m</p>
+                <h2>Overview</h2>
+                <p>While working underground to fix a water main, Brooklyn plumbers—and brothers—Mario and Luigi are transported down a mysterious pipe and wander into a magical new world. But when the brothers are separated, Mario embarks on an epic quest to find Luigi.</p>
+                <div class="contenedorCreditos">
+                    <div>
+                        <h3>Aaron Horvath</h3>
+                        <p>Director</p>
+                    </div>
+                    <div>
+                        <h3>Michael Jelenic</h3>
+                        <p>Director</p>
+                    </div>
+                    <div>
+                        <h3>Matthew Fogel</h3>
+                        <p>Writer</p>
+                    </div>
+                </div>
+
+            </div>
+        </div>
+
+
+      </section>
+
+      <section class="trailer"  data-aos="fade-up" data-aos-offset="400" data-aos-delay="50" data-aos-duration="1000"  >
+        <div class="contenedorTrailer">
+            <h2>Ver trailer</h2>
+            <iframe width="560" height="315" src="https://www.youtube.com/embed/RjNcTBXTk4I?si=7fnK8NtlxetW0d1R" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe> 
+        </div>
+        <div class="contenedorInfo">
+            <div class="redes">
+                <ul>
+                    <li><a href="https://www.facebook.com/supermariomovie" target="_blank"><i class="fab fa-facebook"></i></a></li>
+                    <li><a href="https://twitter.com/supermariomovie" target="_blank"><i class="fab fa-twitter"></i></a></li>
+                    <li><a href="https://instagram.com/supermariomovie/"><i class="fab fa-instagram" target="_blank"></i></a></li>
+                    <li><a href="https://www.thesupermariobros.movie/"><i class="fas fa-link" target="_blank"></i></a></li>
+                </ul>
+            </div>
+            <div class="info">
+                <table>
+                    <thead>
+                        <tr>
+                            <th colspan="2">Info</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        <tr>
+                            <td><strong>Status</strong></td>
+                            <td>Released</td>
+                        </tr>
+                        <tr>
+                            <td><strong>Original Language</strong></td>
+                            <td>English</td>
+                        </tr>
+                        <tr>
+                            <td><strong>Budget</strong></td>
+                            <td> $100.000.000,00</td>
+                        </tr>
+                        <tr>
+                            <td><strong>Revenue</strong></td>
+                            <td> $1.347.013.866,00</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+
+        </div>
+
+      </section>
+
+    </main>
+    <footer class="footer">
+        <nav class="navegacion">
+            <ul class="listaNav">
+                <li class="listaItem"><a class="linkNav" href="">Términos y condiciones</a></li>
+                <li class="listaItem"><a class="linkNav" href="">Preguntas frecuentes</a></li>
+                <li class="listaItem"><a class="linkNav" href="">Ayuda</a></li>
+                <li class="listaItem"><a class="linkNav administradorPeliculas" href="">Administrador Peliculas</a></li>
+            </ul>
+        </nav>
+        <a href="#main" class="flechaArriba">
+            <img src="../assets/img/flecha-hacia-arriba.png" alt="ir arriba flecha">
+        </a>
+    </footer>
+    <script src="https://unpkg.com/aos@next/dist/aos.js"></script>
+    <script>
+    AOS.init();
+    </script>
+</body>
+</html>