Submenu HTML

Páginas de RKR's Unidos
Bienvenido a Pag1

Esta es la primera página de ejemplo.
Bienvenido a Pag2

Esta es la segunda página de ejemplo.
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Páginas de RKR's Unidos</title>
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        section {
            display: none;
        }
        section.active {
            display: block;
        }
        button {
            margin: 10px;
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
        img {
            max-width: 100%; /* Ajustar la imagen al ancho de la pantalla */
            height: auto; /* Mantener la relación de aspecto */
            display: block; /* Asegurarse de que la imagen esté en su propia línea */
            margin: 20px auto; /* Centrar la imagen horizontalmente */
        }
    </style>
</head>
<body>

    <!-- Botones de navegación -->
    <button onclick="showPage('pag1')">Ir a Pag1</button>
    <button onclick="showPage('pag2')">Ir a Pag2</button>
    <button onclick="showPage('pag3')">Ir a Pag3</button>
    <button onclick="location.href='https://gruporkrs.webnode.es/'">Ir a Inicio</button>

    <!-- Secciones de las páginas -->
    <section id="pag1" class="active">
        <h1>Bienvenido a Pag1</h1>
        <p>Esta es la primera página de ejemplo.</p>
        <img src="https://lh3.googleusercontent.com/pw/AP1GczMwujHHOKICI_3oPKAQpXY_0dshPcXpJrELrkXPGly-iYASueVxgvFY3xgNDopLZ1jyHvt5obBGthx59Cndq_iXTlgAzXmRrEFaekOqQR_w3DxUkRmLu_cPFF9WbkmYNyI-ifVFxquI-QuO0UHZNgAV=w900-h900-s-no-gm?authuser=0" alt="Imagen de Pag1">
    </section>

    <section id="pag2">
        <h1>Bienvenido a Pag2</h1>
        <p>Esta es la segunda página de ejemplo.</p>
    </section>

    <section id="pag3">
        <h1>Bienvenido a Pag3</h1>
        <p>Esta es la tercera página de ejemplo.</p>
    </section>

    <!-- Script para controlar la navegación entre las secciones -->
    <script>
        function showPage(pageId) {
            // Ocultar todas las secciones
            const sections = document.querySelectorAll('section');
            sections.forEach(section => section.classList.remove('active'));
            
            // Mostrar la sección seleccionada
            document.getElementById(pageId).classList.add('active');
        }
    </script>

</body>
</html>
Bienvenido a Pag3

Esta es la tercera página de ejemplo.