generar una pagina similar a netflix
Aquí te presento un ejemplo básico de cómo crear una página similar a Netflix utilizando JavaScript, HTML y CSS. Este ejemplo no es una implementación real de Netflix, sino más bien una simulación básica. **Nota:** Para hacer que esta página sea más realista, necesitarías una base de datos para almacenar la información de las películas y series, así como una API para obtener la información de las películas y series de Netflix. **index.html** ```html <!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Página de Netflix</title> <link rel="stylesheet" href="styles.css"> </head> <body> <header> <nav> <ul> <li><a href="#" class="active">Inicio</a></li> <li><a href="#">Películas</a></li> <li><a href="#">Series</a></li> <li><a href="#">Documentales</a></li> </ul> </nav> </header> <main> <section class="banner"> <h1>Bienvenido a Netflix</h1> <p>Descubre tus películas y series favoritas</p> <button>Ver ahora</button> </section> <section class="categorias"> <h2>Categorías</h2> <ul> <li> <a href="#"> <img src="imagenes/pelicula1.jpg" alt="Pelicula 1"> <p>Pelicula 1</p> </a> </li> <li> <a href="#"> <img src="imagenes/pelicula2.jpg" alt="Pelicula 2"> <p>Pelicula 2</p> </a> </li> <li> <a href="#"> <img src="imagenes/pelicula3.jpg" alt="Pelicula 3"> <p>Pelicula 3</p> </a> </li> </ul> </section> <section class="recomendaciones"> <h2>Recomendaciones</h2> <ul> <li> <a href="#"> <img src="imagenes/pelicula4.jpg" alt="Pelicula 4"> <p>Pelicula 4</p> </a> </li> <li> <a href="#"> <img src="imagenes/pelicula5.jpg" alt="Pelicula 5"> <p>Pelicula 5</p> </a> </li> <li> <a href="#"> <img src="imagenes/pelicula6.jpg" alt="Pelicula 6"> <p>Pelicula 6</p> </a> </li> </ul> </section> </main> <script src="script.js"></script> </body> </html> ``` **styles.css** ```css body { font-family: Arial, sans-serif; margin: 0; padding: 0; } header { background-color: #333; color: #fff; padding: 1em; text-align: center; } header nav ul { list-style: none; margin: 0; padding: 0; } header nav ul li { display: inline-block; margin-right: 20px; } header nav a { color: #fff; text-decoration: none; } header nav a.active { color: #ccc; } main { display: flex; flex-direction: column; align-items: center; padding: 2em; } .banner { background-image: linear-gradient(to bottom, #333, #555); background-size: 100% 300px; background-position: 0% 100%; height: 300px; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #fff; } .banner h1 { font-size: 36px; margin-bottom: 10px; } .banner p { font-size: 18px; margin-bottom: 20px; } .banner button { background-color: #333; color: #fff; border: none; padding: 10px 20px; font-size: 18px; cursor: pointer; } .categorias { background-color: #f7f7f7; padding: 20px; margin-bottom: 20px; } .categorias h2 { margin-top: 0; } .categorias ul { list-style: none; margin: 0; padding: 0; } .categorias li { display: inline-block; margin-right: 20px; } .categorias a { text-decoration: none; color: #333; } .categorias a img { width: 100px; height: 150px; object-fit: cover; border-radius: 10px; } .recomendaciones { background-color: #f7f7f7; padding: 20px; } .recomendaciones h2 { margin-top: 0; } .recomendaciones ul { list-style: none; margin: 0; padding: 0; } .recomendaciones li { display: inline-block; margin-right: 20px; } .recomendaciones a { text-decoration: none; color: #333; } .recomendaciones a img { width: 100px; height: 150px; object-fit: cover; border-radius: 10px; } ``` **script.js** ```javascript // Obtener elementos del DOM const banner = document.querySelector('.banner'); const categorias = document.querySelector('.categorias'); const recomendaciones = document.querySelector('.recomendaciones'); // Agregar evento de clic al banner banner.addEventListener('click', () => { console.log('Banner clicado'); }); // Agregar evento de clic a las categorías categorias.addEventListener('click', (e) => { if (e.target.tagName === 'A') { console.log('Categoría clicada'); } }); // Agregar evento de clic a las recomendaciones recomendaciones.addEventListener('click', (e) => { if (e.target.tagName === 'A') { console.log('Recomendación clicada'); } }); ``` Este ejemplo básico muestra una página con un banner, categorías y recomendaciones. Al clicar en cada elemento, se muestra un mensaje en la consola del navegador. Recuerda que para hacer que esta página sea más realista, necesitarías una base de datos para almacenar la información de las películas y series, así como una API para obtener la información de las películas y series de Netflix.