mi pagina blog

Layout CSS

!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="author" content="Ady">
    <meta name="robots" content="nosnippet">
    <title>yo soy ady Entradas</title>
    <link rel="icon" href="https://static.wikia.nocookie.net/megamitensei/images/f/fd/Jack_frost_dctransparent.png/revision/latest?cb=20240511055128"
        type="image/png">
    <link rel="stylesheet" href="jmy.css"> <!-- Asegúrate de que jmy.css exista y contenga estilos necesarios -->
    <link rel="stylesheet" href="fuentes.css"> <!-- Asegúrate de que fuentes.css exista y contenga estilos necesarios -->
    <style>
        /* Estilos CSS directamente en el HTML para el fondo */
        body {
            background-image: url('https://preview.redd.it/2000s-older-brother-core-wallpapers-join-our-discord-for-v0-02hskkdlyhie1.jpg?width=736&format=pjpg&auto=webp&s=f4b856c128d9f78a11e5ad7ffd394bca1f208562');
            background-size: cover; /* Cubre todo el fondo */
            background-position: center; /* Centra la imagen */
            background-repeat: no-repeat; /* Evita que la imagen se repita */
            margin: 0; /* Elimina el margen por defecto del body */
            font-family: 'Arial', sans-serif; /* Fuente por defecto si no se carga fuentes.css */
            color: #ffffff; /* Color de texto blanco para que sea visible sobre el fondo */
        }

        /* Estilos generales para mantener la legibilidad */
        h1 {
            text-align: center;
            margin-top: 20px;
            font-size: 2.5em; /* Tamaño de fuente reducido para el título principal */
            color: #f0f0f0;
            text-shadow: 2px 2px 4px #000000;
        }

        .entrcuerp1 {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 30px;
        }

        .logo {
            font-size: 2em; /* Tamaño de fuente reducido para el logo */
            font-weight: bold;
            margin-bottom: 20px;
            color: #e0e0e0;
            text-shadow: 1px 1px 3px #000000;
            cursor: pointer; /* Cambia el cursor para indicar que es clickeable */
        }

        .menu {
            display: flex;
            justify-content: center;
            gap: 20px;
            margin-bottom: 40px;
            flex-wrap: wrap; /* Permite que los elementos del menú salten a la siguiente línea si no caben */
        }

        .menu a {
            text-decoration: none;
            color: #cccccc;
            font-size: 1.1em; /* Tamaño de fuente reducido para los enlaces del menú */
            padding: 10px 15px;
            border-radius: 5px;
            transition: background-color 0.3s ease, color 0.3s ease;
            text-shadow: 1px 1px 2px #000000;
        }

        .menu a:hover {
            background-color: rgba(255, 255, 255, 0.2);
            color: #ffffff;
        }

        .entrcuerp2 {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 90%;
            max-width: 1200px; /* Ancho máximo para el contenido */
            margin: 0 auto; /* Centra el contenido */
            background-color: rgba(0, 0, 0, 0.6); /* Fondo semitransparente para el contenido */
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
        }

        .artiz {
            text-align: center;
            margin-bottom: 20px;
            font-size: 1.2em; /* Tamaño de fuente ligeramente aumentado para el texto de la sección */
            padding: 15px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.3);
        }

        .izqtext {
            color: #dddddd;
            text-shadow: 1px 1px 2px #000000;
        }

        .artde {
            width: 100%;
            display: flex; /* Usa flexbox para alinear elementos */
            flex-wrap: wrap; /* Permite que los elementos se envuelvan */
            justify-content: center; /* Centra los elementos */
            gap: 20px; /* Espacio entre los elementos */
        }

        .lista table {
            width: 100%;
            margin-bottom: 30px;
            border-collapse: separate; /* Permite bordes separados para celdas */
            border-spacing: 15px; /* Espacio entre celdas */
        }

        .lista tbody tr {
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 8px;
            transition: background-color 0.3s ease;
        }

        .lista tbody tr:hover {
            background-color: rgba(255, 255, 255, 0.2);
        }

        .lista td,
        .lista th {
            padding: 15px;
            text-align: left;
            vertical-align: top; /* Alinea el contenido a la parte superior */
        }

        .lista th {
            font-size: 1.1em;
            color: #e0e0e0;
            text-shadow: 1px 1px 2px #000000;
        }

        .lista td {
            font-size: 1em;
            color: #dddddd;
            text-shadow: 1px 1px 2px #000000;
        }

        /* Estilos para las entradas de blog */
        .entrada {
            background-color: rgba(0, 0, 0, 0.7);
            border-radius: 10px;
            padding: 20px;
            margin-bottom: 30px;
            width: 100%;
            max-width: 800px; /* Ancho máximo para cada entrada */
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
            transition: transform 0.3s ease;
        }

        .entrada:hover {
            transform: translateY(-5px); /* Efecto de elevación al pasar el ratón */
        }

        .entrada h2 {
            color: #f0f0f0;
            margin-top: 0;
            font-size: 1.8em;
            text-shadow: 1px 1px 3px #000000;
        }

        .entrada .fecha {
            font-size: 0.9em;
            color: #aaaaaa;
            margin-bottom: 15px;
            display: block; /* Asegura que la fecha esté en su propia línea */
        }

        .entrada .resumen {
            font-size: 1.1em;
            color: #dddddd;
            line-height: 1.6;
            text-shadow: 1px 1px 2px #000000;
        }

        .entrada .leer-mas {
            display: inline-block;
            margin-top: 15px;
            padding: 8px 15px;
            background-color: #4CAF50; /* Un color de botón llamativo */
            color: white;
            text-decoration: none;
            border-radius: 5px;
            transition: background-color 0.3s ease;
        }

        .entrada .leer-mas:hover {
            background-color: #45a049;
        }

        /* Estilos para el pie de página */
        footer {
            text-align: center;
            padding: 20px;
            margin-top: 40px;
            background-color: rgba(0, 0, 0, 0.5);
            color: #cccccc;
            font-size: 0.9em;
            text-shadow: 1px 1px 2px #000000;
        }

        /* Media queries para responsividad */
        @media (max-width: 768px) {
            h1 {
                font-size: 2em;
            }

            .menu {
                flex-direction: column;
                align-items: center;
            }

            .menu a {
                font-size: 1em;
                width: 80%;
                text-align: center;
            }

            .entrcuerp2 {
                width: 95%;
            }

            .lista table {
                border-spacing: 5px; /* Reduce el espacio en tablas en pantallas pequeñas */
            }

            .lista td,
            .lista th {
                padding: 10px;
            }
        }

        @media (max-width: 480px) {
            h1 {
                font-size: 1.7em;
            }

            .logo {
                font-size: 1.7em;
            }

            .artiz {
                font-size: 1.1em;
            }

            .entrada h2 {
                font-size: 1.5em;
            }

            .entrada .resumen {
                font-size: 1em;
            }
        }
    </style>
</head>

<body>
    <div class="entrcuerp1">
        <div class="logo" id="logoAdi">Ady</div>
        <nav class="menu">
            <a href="https://soyyoady.neocities.org/01">Inicio</a>
            <a href="https://soyyoady.neocities.org/entrada">Entradas</a>
           
        </nav>
    </div>

    <div class="entrcuerp2">
        <h1 id="inicio">Bienvenido al Blog de Ady</h1> <!-- Añadido id="inicio" para el enlace del menú -->

        <div id="entradas" class="artde">
            <!-- Ejemplo de una entrada de blog -->
            <article class="entrada">
                <h2>Mi Primera Entrada en el Blog</h2>
                <span class="fecha">Publicado el 10 de Mayo de 2024</span>
                <p class="resumen">
                   hola a todos la verdad me gustaria compartir en este blog mi gusto por los videojuegos y poder dar recomendaciones de juegos que me gustan 
                </p>
                <a href="https://soyyoady.neocities.org/blog01">Leer más...</a>
            </article>

         
                
           
                
             

            <article class="entrada">
                <h2></h2>
                <span class="fecha">Publicado el 09 de Mayo de 2026</span>
                <p class="resumen">
                    sean bienvenidos aca les dejo un video de historias de terror de dross que me gusto =)
                </p>
                <a href="https://youtu.be/ifa-F8OY0KY?si=R3jQ3XQHUyKizVDm">.dross</a>
            </article>
        </div>

        <!-- Sección "Sobre Mí" -->
        <section id="sobre-mi" class="artiz">
            <h2>Sobre Mí</h2> <!-- Añadido encabezado para la sección -->
            <p class="izqtext">
               hola yo soy Ady me encanta muchos los videojuegos y me gusta muchos todo lo que es pokemon u otros juegos de rpg ,me gusta las historias de terror y todo lo que son las series de ciencia ficcion
            </p>
        </section>

       
        <section id="contacto" class="lista">
            <h3>Contáctame</h3>
            <table>
                <thead>
                    <tr>
                        
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        
                    </tr>
                    <tr>
                        
                    </tr>
                </tbody>
            </table>
        </section>
    </div>

    <footer>
     
    </footer>

    <script>
        // JavaScript básico para interactividad (opcional)
        document.getElementById('logoAdi').addEventListener('click', function() {
            alert('¡Hola! Soy Ady. ¡Gracias por visitar mi blog!');
        });

        // Añadir funcionalidad a los enlaces del menú para hacer scroll suave
        document.querySelectorAll('.menu a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();

                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>

</html>