A continuación, te presento un ejemplo de página web HTML con una imagen animada y un menú de navegación responsive. He incluido comentarios en el código para que sea más fácil de entender:

Planeta DooDom
Planeta DooDom

Ver demo

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 con Imagen Animada y Menú Responsive</title>
    <style>
        /* Estilos generales */
        body {
            font-family: sans-serif;
            margin: 0; /* Elimina márgenes predeterminados */
        }

        /* Estilos del encabezado y menú */
        header {
            background-color: #333;
            color: white;
            padding: 10px 0;
            position: sticky; /* Mantiene el encabezado fijo en la parte superior */
            top: 0;
            z-index: 100; /* Asegura que el encabezado esté por encima de otros elementos */
        }

        nav {
            display: flex;
            justify-content: space-around; /* Distribuye los elementos del menú */
            align-items: center;
            max-width: 960px; /* Limita el ancho del menú en pantallas grandes */
            margin: 0 auto;/*Centra el menú*/
        }

        nav a {
            color: white;
            text-decoration: none;
            padding: 10px;
        }
                
        /*Estilos para el menú hamburguesa (para pantallas pequeñas)*/
         .menu-toggle {
            display: none; /*Oculto por defecto*/
            cursor: pointer;
            font-size: 24px;
         }

        /* Estilos para la imagen animada */
        .imagen-animada {
            width: 200px;
            height: 200px;
            margin: 20px auto; /* Centra la imagen */
            background-image: url("imagen.gif"); /* Reemplaza con la ruta de tu imagen/gif */
            background-size: cover;
            animation: rotar 4s linear infinite; /* Ajusta la duración y función de temporización */
        }

        @keyframes rotar {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        /* Media query para responsive design */
        @media (max-width: 768px) { /* Ajusta el valor según necesites */
            nav {
                flex-direction: column; /* Los enlaces se apilan verticalmente */
                align-items: flex-start; /* Alinea a la izquierda */
                display: none;
            }

            nav.active{
                display: flex;
            }

            .menu-toggle{
                display: block; /*Muestro el menú hamburguesa*/
                position: absolute; /*Posiciono el menu hamburguesa*/
                top: 10px;
                right: 10px;
            }

            nav a{
                width: 100%;
                text-align: center;
                border-bottom: 1px solid white;
            }
        }

        /* Estilos del contenido principal */
        main {
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>

    <header>
        <div class="menu-toggle">&#9776;</div>
        <nav id="menu">
            <a href="#">Inicio</a>
            <a href="#">Servicios</a>
            <a href="#">Contacto</a>
        </nav>
    </header>

    <main>
        <h1>Bienvenido a mi página</h1>
        <div class="imagen-animada"></div>
        <p>Este es un ejemplo de página web con una imagen animada y un menú de navegación responsive.</p>
    </main>
    <script>
        document.querySelector('.menu-toggle').addEventListener('click', () =>{
            document.getElementById('menu').classList.toggle('active');
        });
    </script>
</body>
</html>

Explicación y mejoras:

  • meta viewport: Esencial para el responsive design. Asegura que la página se adapte a diferentes tamaños de pantalla.
  • headernavmain: Se utilizan elementos semánticos para estructurar el contenido.
  • flexbox: Se utiliza flexbox para el diseño del menú, lo que facilita la creación de menús responsive.
  • Media Query: La regla @media (max-width: 768px) aplica estilos diferentes cuando la pantalla tiene un ancho máximo de 768 píxeles (un tamaño común para tablets). Puedes ajustar este valor según tus necesidades.
  • Menú hamburguesa: Se añade un icono de «hamburguesa» (☰) que aparece en pantallas pequeñas y sirve para desplegar/ocultar el menú.
  • position: sticky: El encabezado se mantiene fijo en la parte superior al hacer scroll.
  • z-index: Se usa z-index para asegurar que el encabezado se superponga al resto del contenido.
  • Imagen animada: Se utiliza background-image y @keyframes para animar la imagen. Asegúrate de reemplazar "imagen.gif" con la ruta correcta a tu archivo GIF o imagen.
  • Javascript para el menú hamburguesa: He añadido un pequeño script en Javascript para que al hacer click en el menú hamburguesa se muestre o se oculte el menú.

Para usar este código:

  1. Guarda el código como un archivo .html (por ejemplo, index.html).
  2. Crea un archivo GIF o usa una imagen existente y colócalo en la misma carpeta que el archivo HTML. Asegúrate de cambiar la ruta en background-image: url("imagen.gif");.
  3. Abre el archivo index.html en tu navegador.

Este ejemplo te proporciona una base sólida para crear tu propia página web con una imagen animada y un menú responsive. Puedes personalizar los estilos, añadir más contenido y funcionalidades según tus necesidades. Recuerda que para que la animación funcione, la imagen que uses debe ser un .gif o un formato que soporte animación como .apng o .webp animado. Si usas un formato estático como .jpg o .png la animación no funcionará. Si tienes más preguntas, no dudes en consultarme.

Agregar al código anterior un menú hamburguesa responsive. 

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 con Imagen Animada y Menú Responsive</title>
    <style>
        /* Estilos generales */
        body {
            font-family: sans-serif;
            margin: 0;
        }

        /* Estilos del encabezado */
        header {
            background-color: #333;
            color: white;
            padding: 10px 0;
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex; /* Usamos flexbox para alinear el menú y el toggle */
            justify-content: space-between; /* Espacio entre elementos */
            align-items: center; /* Centrar verticalmente */
            padding: 10px 20px; /* Añadimos padding lateral */
        }

        /* Estilos del menú */
        nav {
            display: flex;
            /* justify-content: space-around; Ya no es necesario aquí*/
            align-items: center;
            max-width: 960px;
            margin: 0 auto;
        }

        nav a {
            color: white;
            text-decoration: none;
            padding: 10px;
        }

        /* Estilos del menú hamburguesa */
        .menu-toggle {
            display: none;
            cursor: pointer;
            font-size: 24px;
        }
        .bar{
            display: block;
            width: 25px;
            height: 3px;
            margin: 5px auto;
            -webkit-transition: all 0.3s ease-in-out;
            transition: all 0.3s ease-in-out;
            background-color: white;
        }

        /* Estilos de la imagen animada */
        .imagen-animada {
            width: 200px;
            height: 200px;
            margin: 20px auto;
            background-image: url("imagen.gif"); /* Reemplazar */
            background-size: cover;
            animation: rotar 4s linear infinite;
        }

        @keyframes rotar {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }

        /* Media query para responsive */
        @media (max-width: 768px) {
            nav {
                display: none; /* Ocultamos el menú en pantallas pequeñas */
                flex-direction: column;
                width: 100%; /*Ocupa todo el ancho*/
                background-color: #333; /*Le agregamos un color de fondo para cuando se despliega*/
                position: absolute; /*Para que se ponga debajo del header*/
                top: 52px; /*Para que se muestre justo debajo del header*/
                left: 0;
            }

            nav.active { /* Estilo para cuando el menú está activo */
                display: flex;
            }

            .menu-toggle {
                display: block; /* Mostramos el menú hamburguesa */
            }
             .menu-toggle.active .bar:nth-child(2){
                opacity: 0;
            }
            .menu-toggle.active .bar:nth-child(1){
                transform: translateY(8px) rotate(45deg);
            }
            .menu-toggle.active .bar:nth-child(3){
                transform: translateY(-8px) rotate(-45deg);
            }
            nav a {
                width: 100%; /*Para que los links ocupen todo el ancho*/
                text-align: center; /*Centramos el texto*/
                padding: 10px;
                border-bottom: 1px solid white;
            }
        }

        /* Estilos del contenido principal */
        main {
            padding: 20px;
            text-align: center;
        }
    </style>
</head>
<body>

    <header>
        <div class="menu-toggle" id="mobile-menu">
            <span class="bar"></span>
            <span class="bar"></span>
            <span class="bar"></span>
        </div>
        <nav id="menu">
            <a href="#">Inicio</a>
            <a href="#">Servicios</a>
            <a href="#">Contacto</a>
        </nav>
    </header>

    <main>
        <h1>Bienvenido a mi página</h1>
        <div class="imagen-animada"></div>
        <p>Este es un ejemplo de página web con una imagen animada y un menú de navegación responsive.</p>
    </main>

    <script>
        const menuToggle = document.getElementById('mobile-menu');
        const nav = document.getElementById('menu');

        menuToggle.addEventListener('click', () => {
            nav.classList.toggle('active');
            menuToggle.classList.toggle('active'); //Toggle para la animación del menu hamburguesa
        });
    </script>

</body>
</html>

Cambios y explicaciones importantes:

  • Estructura del menú hamburguesa: Ahora el menú hamburguesa está compuesto por 3 spans con la clase bar, esto nos permite animar las líneas del menú cuando este se abre o se cierra, dandole un aspecto mucho mas visual.
  • Flexbox en el header: Se añade display: flex al header para controlar mejor la posición del menú y el botón de hamburguesa. Usamos justify-content: space-between para separarlos a los extremos y align-items: center para alinearlos verticalmente.
  • Media Query Refinada: Se han ajustado los estilos dentro de la media query para que el menú se comporte correctamente en pantallas pequeñas.
  • Javascript mejorado: El Javascript ahora utiliza classList.toggle('active') para alternar la clase activetanto en el menú como en el menu hamburguesa. Esto facilita la gestión del estado del menú y es una mejor práctica. También se usa const para declarar las variables que no se van a modificar.
  • Animación del menú hamburguesa: Se agregaron estilos para que el menú hamburguesa se transforme en una «x» cuando este se abre, esto se logra ocultando la barra de en medio y rotando las barras superior e inferior.

Con estas mejoras, el menú hamburguesa funciona de manera más robusta y ofrece una mejor experiencia de usuario. Ahora, al hacer clic en el icono de hamburguesa en pantallas pequeñas, el menú se despliega suavemente y el icono se transforma en una «x», y al volver a hacer clic, el menú se oculta y el icono vuelve a su forma original. Recuerda reemplazar "imagen.gif" con la ruta de tu imagen.

Añade el código html para el pie de página con el copyright en php. 

Añadir un pie de página con copyright en PHP es sencillo y te permite actualizar automáticamente el año. Aquí te presento cómo integrarlo en el código HTML que hemos estado trabajando, y te explico las diferentes maneras de hacerlo, incluyendo una opción para mostrar un rango de años si es necesario:

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    </head>
<body>

    <footer>
        <div class="footer-content">
            <p>&copy; <?php echo date("Y"); ?> Nombre de la Empresa. Todos los derechos reservados.</p>
           <nav>
            <a href="#">Aviso Legal</a>
            <a href="#">Politica de Privacidad</a>
           </nav>
        </div>
    </footer>

    <style>
        footer{
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center; /*Centrar el texto del copyright*/
            margin-top: 20px; /*Separar del contenido principal*/
        }
        .footer-content{
            max-width: 960px; /* Ancho máximo para el footer */
            margin: 0 auto; /* Centrar el contenido del footer */
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        footer nav{
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        footer nav a{
            color: white;
            text-decoration: none;
        }

        @media (max-width: 768px){
             .footer-content{
                flex-direction: column;
                text-align: center;
                gap: 10px; /*Espacio entre el parrafo y el nav*/
            }
        }
    </style>

    <script>
       // ... (javascript anterior)
    </script>

</body>
</html>

Explicación y mejoras:

  • Etiqueta <footer>: Se utiliza la etiqueta semántica <footer> para definir el pie de página.
  • Código PHP <?php echo date("Y"); ?>: Este código PHP inserta dinámicamente el año actual. date("Y")devuelve el año con cuatro dígitos (ej. 2024).
  • &copy;: Este es el código HTML para el símbolo de copyright (©).
  • Estilos CSS: Se han añadido estilos CSS para dar formato al pie de página, incluyendo color de fondo, padding, centrado del texto y un margen superior para separarlo del contenido principal. Se usa flexbox para centrar el contenido del footer y para mostrar las opciones del nav uno al lado del otro. También se agrego un media query para que el footer sea responsive, apilando los elementos verticalmente en pantallas pequeñas.
  • Contenido Adicional en el Footer: Se agregó un nav para mostrar links al aviso legal o a la politica de privacidad.

Otras opciones y consideraciones:

  1. Rango de años: Si el sitio web se creó en un año anterior al actual, es común mostrar un rango de años:

PHP

&copy; <?php 
    $anio_inicio = 2020; // Año de inicio
    $anio_actual = date("Y");
    if ($anio_inicio == $anio_actual) {
        echo $anio_actual;
    } else {
        echo $anio_inicio . " - " . $anio_actual;
    }
?> Nombre de la Empresa.

Este código mostrará «2020» si el año actual es 2020, y «2020 – 2024» si el año actual es 2024.

  1. Archivo separado (recomendado para proyectos más grandes): Para una mejor organización, puedes crear un archivo separado para el pie de página (ej. footer.php) y luego incluirlo en tu archivo principal con <?php include 'footer.php'; ?>.

Ejemplo de footer.php:

PHP

<footer>
    <div class="footer-content">
        <p>&copy; <?php 
            $anio_inicio = 2020;
            $anio_actual = date("Y");
            if ($anio_inicio == $anio_actual) {
                echo $anio_actual;
            } else {
                echo $anio_inicio . " - " . $anio_actual;
            }
        ?> Nombre de la Empresa. Todos los derechos reservados.</p>
         <nav>
            <a href="#">Aviso Legal</a>
            <a href="#">Politica de Privacidad</a>
        </nav>
    </div>
</footer>
<style>
        footer{
            background-color: #333;
            color: white;
            padding: 20px;
            text-align: center; /*Centrar el texto del copyright*/
            margin-top: 20px; /*Separar del contenido principal*/
        }
         .footer-content{
            max-width: 960px; /* Ancho máximo para el footer */
            margin: 0 auto; /* Centrar el contenido del footer */
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        footer nav{
            display: flex;
            justify-content: center;
            gap: 20px;
        }
        footer nav a{
            color: white;
            text-decoration: none;
        }

        @media (max-width: 768px){
             .footer-content{
                flex-direction: column;
                text-align: center;
                gap: 10px; /*Espacio entre el parrafo y el nav*/
            }
        }
    </style>

Y en tu archivo principal:

PHP

<?php include 'footer.php'; ?>

Esta última opción es la más limpia y mantenible, especialmente si tienes un sitio web con varias páginas. Recuerda que para que el código PHP se ejecute, tu archivo principal debe tener la extensión .php (ej. index.php). Con estas mejoras, tu pie de página estará completo, dinámico y bien estructurado.

Abre el Código Completo de la Página Web de la Demo

Abrir Código

Pin It on Pinterest

Share This