Created
October 19, 2025 21:51
-
-
Save r3xakead0/2261d417dc51722fec79fd8d161b8119 to your computer and use it in GitHub Desktop.
Ejemplo de una página web sencilla con HTML, CSS y JS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!doctype html> | |
| <html lang="es"> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta name="viewport" content="width=device-width,initial-scale=1" /> | |
| <title>Ejemplo: index.html con CSS y JS</title> | |
| <style> | |
| /* CSS embebido: estilos simples */ | |
| :root{ | |
| --bg: #f7f9fc; | |
| --card: #ffffff; | |
| --text: #0b2545; | |
| --accent: #1e90ff; | |
| --muted: #6b7280; | |
| } | |
| html,body{ | |
| height:100%; | |
| margin:0; | |
| font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; | |
| background:var(--bg); | |
| color:var(--text); | |
| -webkit-font-smoothing:antialiased; | |
| -moz-osx-font-smoothing:grayscale; | |
| } | |
| .wrap{ | |
| min-height:100%; | |
| display:flex; | |
| align-items:center; | |
| justify-content:center; | |
| padding:32px; | |
| } | |
| .card{ | |
| width:100%; | |
| max-width:760px; | |
| background:var(--card); | |
| border-radius:12px; | |
| box-shadow:0 6px 18px rgba(11,37,69,0.08); | |
| padding:28px; | |
| box-sizing:border-box; | |
| } | |
| h1{margin:0 0 8px 0;font-size:20px} | |
| p.lead{margin:0 0 16px 0;color:var(--muted)} | |
| .controls{display:flex;gap:12px;align-items:center;margin-bottom:18px} | |
| button{ | |
| background:var(--accent); | |
| color:white; | |
| border:none; | |
| padding:10px 14px; | |
| border-radius:8px; | |
| cursor:pointer; | |
| font-weight:600; | |
| } | |
| button.secondary{background:transparent;color:var(--accent);border:1px solid rgba(30,144,255,0.18)} | |
| .info{padding:12px;border-radius:8px;background:#f1f5f9;border:1px solid rgba(11,37,69,0.04)} | |
| .muted{color:var(--muted);font-size:14px} | |
| /* modo oscuro (toggle con clase .dark en body) */ | |
| body.dark{background:#071029;color:#e6eef9} | |
| body.dark .card{background:#071a2b;box-shadow:0 8px 24px rgba(0,0,0,0.5)} | |
| body.dark .info{background:#052032;border-color:rgba(255,255,255,0.04)} | |
| body.dark .muted{color:#9fb3d1} | |
| footer{margin-top:18px;font-size:13px;text-align:right;color:var(--muted)} | |
| @media (max-width:520px){ | |
| .card{padding:18px} | |
| h1{font-size:18px} | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="wrap"> | |
| <div class="card"> | |
| <h1>Archivo <code>index.html</code> — con CSS y JS embebidos</h1> | |
| <p class="lead">Ejemplo mínimo: incluye estilos, interacción con JavaScript y cambio de tema claro/oscuro.</p> | |
| <div class="controls"> | |
| <button id="toggleTheme">Cambiar a modo oscuro</button> | |
| <button id="showTime" class="secondary">Mostrar hora</button> | |
| <div id="status" style="margin-left:12px" class="muted">Estado: listo</div> | |
| </div> | |
| <div class="info" id="output"> | |
| <p class="muted">Aquí aparecerá información generada por JavaScript.</p> | |
| </div> | |
| <footer>Ejemplo creado: <span id="date"></span></footer> | |
| </div> | |
| </div> | |
| <script> | |
| // JavaScript embebido: comportamiento simple | |
| (function(){ | |
| const btnTheme = document.getElementById('toggleTheme'); | |
| const btnTime = document.getElementById('showTime'); | |
| const output = document.getElementById('output'); | |
| const status = document.getElementById('status'); | |
| const dateSpan = document.getElementById('date'); | |
| // mostrar fecha de creación | |
| const today = new Date(); | |
| dateSpan.textContent = today.toLocaleDateString(); | |
| // alternar tema claro/oscuro | |
| function updateThemeLabel(){ | |
| const isDark = document.body.classList.contains('dark'); | |
| btnTheme.textContent = isDark ? 'Cambiar a modo claro' : 'Cambiar a modo oscuro'; | |
| } | |
| btnTheme.addEventListener('click', () => { | |
| document.body.classList.toggle('dark'); | |
| updateThemeLabel(); | |
| status.textContent = document.body.classList.contains('dark') ? 'Modo oscuro' : 'Modo claro'; | |
| }); | |
| // mostrar la hora actual | |
| btnTime.addEventListener('click', () => { | |
| const now = new Date(); | |
| output.innerHTML = `<strong>Hora actual:</strong> ${now.toLocaleTimeString()} <br/><span class=\"muted\">Fecha: ${now.toLocaleDateString()}</span>`; | |
| status.textContent = 'Hora mostrada'; | |
| }); | |
| // accesos rápidos: tecla t = toggle theme, h = mostrar hora | |
| document.addEventListener('keydown', (e) => { | |
| if(e.key === 't'){ btnTheme.click(); } | |
| if(e.key === 'h'){ btnTime.click(); } | |
| }); | |
| // inicializar | |
| updateThemeLabel(); | |
| })(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment