<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Descripción corta de la web para SEO" />
<title>Mi sitio moderno</title>
<!-- Favicon -->
<link rel="icon" href="/favicon.ico" />
<!-- Hoja de estilos interna (puedes mover a styles.css) -->
<style>
:root{
--bg:#ffffff; --text:#111;
--accent:#0b71ea; --muted:#666;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);line-height:1.45}
header{border-bottom:1px solid #eee;background:#fafafa}
.container{max-width:1100px;margin:0 auto;padding:1rem}
nav ul{display:flex;gap:1rem;list-style:none;padding:0;margin:0;align-items:center}
a{color:inherit;text-decoration:none}
.brand{font-weight:700;color:var(--accent)}
.hero{padding:3rem 0;display:grid;grid-template-columns:1fr;gap:1.5rem}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}
footer{border-top:1px solid #eee;padding:1rem 0;margin-top:2rem;color:var(--muted)}
/* accesibilidad foco */
a:focus, button:focus{outline:3px solid rgba(11,113,234,0.25);outline-offset:2px}
@media(min-width:800px){
.hero{grid-template-columns:1fr 420px;align-items:center}
}
</style>
</head>
<body>
<header role="banner">
<div class="container" style="display:flex;justify-content:space-between;align-items:center">
<div class="brand" aria-label="Nombre del sitio">MiSitio</div>
<nav role="navigation" aria-label="Menú principal">
<ul>
<li><a href="#inicio">Inicio</a></li>
<li><a href="#servicios">Servicios</a></li>
<li><a href="#equipo">Equipo</a></li>
<li><a href="#contacto">Contacto</a></li>
</ul>
</nav>
</div>
</header>
<main role="main" class="container">
<section id="inicio" class="hero" aria-labelledby="hero-title">
<div>
<h1 id="hero-title">Título principal de la página</h1>
<p>Un párrafo breve que explique el propósito de tu sitio. Llamado a la acción claro y conciso.</p>
<p><a href="#contacto" class="cta">Contáctanos →</a></p>
</div>
<aside aria-label="Información destacada">
<div style="padding:1rem;border:1px solid #eee;border-radius:8px">
<h3>Destacado</h3>
<p>Información corta o formulario, imagen, etc.</p>
</div>
</aside>
</section>
<section id="servicios" aria-labelledby="servicios-title">
<h2 id="servicios-title">Servicios</h2>
<div class="grid" aria-hidden="false">
<article>
<h3>Servicio A</h3>
<p>Descripción breve.</p>
</article>
<article>
<h3>Servicio B</h3>
<p>Descripción breve.</p>
</article>
<article>
<h3>Servicio C</h3>
<p>Descripción breve.</p>
</article>
</div>
</section>
<section id="equipo" aria-labelledby="equipo-title">
<h2 id="equipo-title">Equipo</h2>
<p>Presentación de personas, roles o testimonios.</p>
</section>
<section id="contacto" aria-labelledby="contacto-title">
<h2 id="contacto-title">Contacto</h2>
<form action="#" method="post" style="max-width:420px">
<label for="nombre">Nombre</label><br/>
<input id="nombre" name="nombre" type="text" required style="width:100%;padding:.5rem;margin:.25rem 0"/>
<label for="email">Email</label><br/>
<input id="email" name="email" type="email" required style="width:100%;padding:.5rem;margin:.25rem 0"/>
<label for="mensaje">Mensaje</label><br/>
<textarea id="mensaje" name="mensaje" rows="4" style="width:100%;padding:.5rem;margin:.25rem 0"></textarea>
<button type="submit" style="padding:.6rem 1rem;border:0;background:var(--accent);color:white;border-radius:6px;cursor:pointer">Enviar</button>
</form>
</section>
</main>
<footer role="contentinfo">
<div class="container" style="display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap">
<small>© <span id="year"></span> MiSitio. Todos los derechos reservados.</small>
<nav aria-label="Enlaces secundarios">
<a href="/privacidad">Política de privacidad</a> · <a href="/terminos">Términos</a>
</nav>
</div>
</footer>
<!-- Script pequeño: año dinámico y espacio para más JS -->
<script>
document.getElementById('year').textContent = new Date().getFullYear();
// Aquí puedes añadir tu JS: menú hamburguesa, llamadas a APIs, animaciones, etc.
</script>
</body>
</html>
/* styles.css */
body {
background-color: black;
color: yellow;
font-family: Arial, sans-serif;
}