No puedo dejar de pensar en este sitio. Parece una tarifa bastante estándar; un sitio web con enlaces a diferentes páginas. No hay nada que destacar excepto que… todo el sitio web está contenido en un solo archivo HTML.
¿Qué hay de hacer clic en los enlaces de navegación, te preguntarás? Cada enlace simplemente muestra y oculta ciertas partes del HTML.
<section id="home">
<!-- home content goes here -->
</section>
<section id="about">
<!-- about page goes here -->
</section>Cada <section> está oculto con CSS:
section { display: none; }Cada enlace en la navegación principal apunta a un ancla en la página:
<a href="https://css-tricks.com/a-whole-website-in-a-single-html-file/#home">Home</a>
<a href="https://css-tricks.com/a-whole-website-in-a-single-html-file/#about">About</a>Y una vez que haces clic en un enlace, el <section> para ese enlace en particular se muestra a través de:
section:target { display: block; }Mira eso :target pseudoselector? ¡Esa es la magia! Claro, ha existido durante años, pero esta es una forma inteligente de usarlo con seguridad. La mayoría de las veces, se usa para resaltar el ancla en la página una vez que se ha hecho clic en un enlace de ancla. Esa es una forma práctica de ayudar al usuario a saber a dónde acaba de saltar.
De todos modos, usando :target ¡Así es algo súper inteligente! Termina pareciendo un sitio web normal cuando haces clic:
Enlace directo →