Add files via upload

CodeO-pixel · Jul 20, 2024 · 22e8444 · 22e8444
1 parent 794b7fd
commit 22e8444
Show file tree

Hide file tree

Showing 3 changed files with 340 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,92 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Mi Blog de Cine</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <header>
+        <h1>Mi Blog de Cine</h1>
+    </header>
+
+    <main>
+        <section class="blog-posts">
+            <h2>Últimas Entradas</h2>
+            <article class="promare">
+                <h3>Título de la entrada 1 (Promare)</h3>
+                <p>Fecha de publicación: 2023-10-26</p>
+
+            </article>
+            <article class="onepiece-red">
+                <h3>Título de la entrada 2 (One Piece Red)</h3>
+                <p>Fecha de publicación: 2023-10-25</p>
+
+            </article>
+            <article class="dragon-ball-super-broly">
+                <h3>Título de la entrada 3 (Dragon Ball Super: Broly)</h3>
+                <p>Fecha de publicación: 2023-10-24</p>
+
+            </article>
+        </section>
+
+        <!-- Secciones de las películas (ocultas por defecto) -->
+        <section class="movie-section" id="promare-section">
+            <div class="movie-info">
+                <img src="https://m.media-amazon.com/images/M/MV5BZDVhN2Q4ODEtNjUxYy00YTFlLWIzZWUtOGZiMzllYzJhYjZlXkEyXkFqcGdeQXVyMTA4NjE0NjEy._V1_.jpg" alt="Promare" class="movie-poster">
+                <h3>Promare</h3>
+                <p>Sinopsis de Promare: En un futuro cercano, una catástrofe mundial llamada "Burning" ha creado una nueva especie de humanos con poderes de fuego. El equipo de bomberos de élite, "Burning Rescue", lucha contra estos "Burnish" para proteger a la humanidad. </p>
+            </div>
+        </section>
+
+        <section class="movie-section" id="onepiece-red-section">
+            <div class="movie-info">
+                <img src="https://m.media-amazon.com/images/M/MV5BODY4OWM5M2UtM2Y1Yi00YjAyLTlhMDktMDkzZjFmMjI5MmI5XkEyXkFqcGdeQXVyMTA1NjQyNjkw._V1_FMjpg_UX1000_.jpg" alt="One Piece Red" class="movie-poster">
+                <h3>One Piece Red</h3>
+                <p>Sinopsis de One Piece Red: Uta, la cantante más famosa del mundo, revela su identidad como hija de Shanks, el "Pelirrojo". Luffy y la tripulación de los Piratas del Sombrero de Paja se encuentran con Uta en un concierto, pero una amenaza surge cuando su identidad secreta se revela. </p>
+            </div>
+        </section>
+
+        <section class="movie-section" id="dragon-ball-super-broly-section">
+            <div class="movie-info">
+                <img src="https://www.elsoldeacapulco.com.mx/incoming/mbjyrl-dragon-ball-super-broly.jpg/ALTERNATES/LANDSCAPE_1140/Dragon-Ball-Super-Broly.jpg" alt="Dragon Ball Super: Broly" class="movie-poster">
+                <h3>Dragon Ball Super: Broly</h3>
+                <p>Sinopsis de Dragon Ball Super: Broly: Broly, un Saiyan legendario con un poder inmenso, se libera de su prisión y se dirige a la Tierra para buscar venganza contra Goku. Goku, Vegeta y sus aliados deben unirse para enfrentarse a la amenaza de Broly.</p>
+            </div>
+        </section>
+
+        <aside class="sidebar">
+            <h2>Películas</h2>
+            <ul>
+                <li>
+                    <a href="#promare-section" data-category="promare">
+                        <img src="https://m.media-amazon.com/images/M/MV5BZDVhN2Q4ODEtNjUxYy00YTFlLWIzZWUtOGZiMzllYzJhYjZlXkEyXkFqcGdeQXVyMTA4NjE0NjEy._V1_.jpg" alt="Promare" class="movie-poster">
+                        <h3>Promare</h3>
+                    </a>
+                </li>
+                <li>
+                    <a href="#onepiece-red-section" data-category="onepiece-red">
+                        <img src="https://m.media-amazon.com/images/M/MV5BODY4OWM5M2UtM2Y1Yi00YjAyLTlhMDktMDkzZjFmMjI5MmI5XkEyXkFqcGdeQXVyMTA1NjQyNjkw._V1_FMjpg_UX1000_.jpg" alt="One Piece Red" class="movie-poster">
+                        <h3>One Piece Red</h3>
+                    </a>
+                </li>
+                <li>
+                    <a href="#dragon-ball-super-broly-section" data-category="dragon-ball-super-broly">
+                        <img src="https://www.elsoldeacapulco.com.mx/incoming/mbjyrl-dragon-ball-super-broly.jpg/ALTERNATES/LANDSCAPE_1140/Dragon-Ball-Super-Broly.jpg" alt="Dragon Ball Super: Broly" class="movie-poster">
+                        <h3>Dragon Ball Super: Broly</h3>
+                    </a>
+                </li>
+            </ul>
+        </aside>
+    </main>
+
+    <footer>
+        <p>&copy; 2023 Mi Blog de Cine</p>
+    </footer>
+
+    <button id="backToTop">Volver arriba</button>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/script.js b/script.js
@@ -0,0 +1,40 @@
+const categories = document.querySelectorAll('.sidebar ul li a');
+const movieSections = document.querySelectorAll('.movie-section');
+
+// Función para mostrar la información de la película
+function showMovieInfo(selectedCategory) {
+    movieSections.forEach(section => {
+        if (section.id === selectedCategory + "-section") {
+            section.style.display = 'block';
+        } else {
+            section.style.display = 'none';
+        }
+    });
+}
+
+// Evento click para las categorías
+categories.forEach(category => {
+    category.addEventListener('click', (event) => {
+        event.preventDefault();
+        const selectedCategory = event.target.dataset.category;
+        showMovieInfo(selectedCategory);
+    });
+});
+
+// Botón para volver arriba
+const backToTopButton = document.getElementById('backToTop');
+
+window.addEventListener('scroll', () => {
+    if (window.pageYOffset > 100) {
+        backToTopButton.style.display = 'block';
+    } else {
+        backToTopButton.style.display = 'none';
+    }
+});
+
+backToTopButton.addEventListener('click', () => {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+    });
+});
diff --git a/style.css b/style.css
@@ -0,0 +1,208 @@
+body {
+    font-family: 'Roboto', sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f0f0f0;
+    color: #333;
+}
+
+header {
+    background-color: #333;
+    color: #fff;
+    padding: 20px;
+    text-align: center;
+}
+
+h1 {
+    font-size: 2.5em;
+    margin: 0;
+}
+
+main {
+    display: flex;
+    padding: 20px;
+    gap: 20px;
+}
+
+.blog-posts {
+    flex: 2;
+    padding-right: 20px;
+}
+
+.blog-posts article {
+    border: 1px solid #ddd;
+    padding: 20px;
+    margin-bottom: 20px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s ease-in-out;
+}
+
+.blog-posts article:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+.blog-posts h3 {
+    margin-top: 0;
+    font-size: 1.5em;
+}
+
+.blog-posts p {
+    margin-bottom: 10px;
+    line-height: 1.6;
+}
+
+.blog-posts a {
+    color: #333;
+    text-decoration: none;
+    font-weight: bold;
+}
+
+.blog-posts a:hover {
+    text-decoration: underline;
+}
+
+.sidebar {
+    flex: 1;
+    background-color: #fff;
+    padding: 20px;
+    border: 1px solid #ddd;
+    border-radius: 10px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+}
+
+.sidebar h2 {
+    margin-top: 0;
+    font-size: 1.8em;
+    margin-bottom: 20px;
+}
+
+.sidebar ul {
+    list-style: none;
+    padding: 0;
+}
+
+.sidebar li {
+    margin-bottom: 20px;
+}
+
+.movie-poster {
+    width: 100%; /* Ancho del contenedor */
+    height: auto; /* Altura se ajusta automáticamente para mantener la proporción */
+    border-radius: 10px;
+    margin-bottom: 10px;
+}
+
+.sidebar a {
+    display: block;
+    text-align: center;
+    text-decoration: none;
+    color: #333;
+    font-weight: bold;
+}
+
+.sidebar a:hover {
+    text-decoration: underline;
+}
+
+footer {
+    background-color: #333;
+    color: #fff;
+    padding: 20px;
+    text-align: center;
+    position: relative; /* Para posicionar el botón dentro del footer */
+    bottom: 0; /* Para que el footer se mantenga en la parte inferior */
+    width: 100%; /* Ancho completo del footer */
+}
+
+#backToTop {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    padding: 10px 20px;
+    background-color: #333;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+    display: none; /* Oculto por defecto */
+    border-radius: 5px;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+    transition: transform 0.2s ease-in-out;
+}
+
+#backToTop:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
+}
+
+/* Estilos para la sección de películas */
+.sidebar ul li {
+    border: 1px solid #ddd;
+    padding: 15px;
+    border-radius: 10px;
+    margin-bottom: 15px;
+    background-color: #fff;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s ease-in-out;
+}
+
+.sidebar ul li:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
+}
+
+.sidebar ul li h3 {
+    margin-top: 0;
+    font-size: 1.2em;
+    margin-bottom: 10px;
+}
+
+.sidebar ul li p {
+    margin-bottom: 10px;
+    line-height: 1.5;
+}
+
+.movie-section {
+    display: none; /* Oculto por defecto */
+}
+
+.movie-info {
+    text-align: center;
+}
+
+.movie-info img {
+    width: 300px; /* Ajusta el tamaño de la imagen */
+    height: auto;
+    margin-bottom: 10px;
+}
+
+.movie-info h3 {
+    font-size: 2em;
+    margin-bottom: 10px;
+}
+
+.movie-info p {
+    margin-bottom: 20px;
+    line-height: 1.5;
+}
+
+/* Media Query para dispositivos móviles */
+@media (max-width: 768px) {
+    main {
+        display: block; /* Mostrar elementos en bloque para dispositivos móviles */
+    }
+
+    .blog-posts {
+        padding-right: 0; /* Eliminar el padding derecho en dispositivos móviles */
+    }
+
+    .sidebar {
+        margin-top: 20px; /* Agregar margen superior a la barra lateral en dispositivos móviles */
+    }
+
+    .movie-info img {
+        width: 90%; /* Ajustar el ancho de la imagen en dispositivos móviles */
+    }
+}