Pestañas de soportal con arcos
Un soportal de piedra con cuatro arcos: el elegido deja pasar el sol, que dibuja su forma en el suelo al cambiar.
Ajustes
Código
<div class="uvq12-ar"><div class="pt" role="tablist" aria-label="Arquitectura"><button type="button" role="tab" id="uvq12-ar-t0" aria-selected="true" aria-controls="uvq12-ar-p0" tabindex="0"><span class="fz">Estudio</span><span class="op" aria-hidden="true"></span></button><button type="button" role="tab" id="uvq12-ar-t1" aria-selected="false" aria-controls="uvq12-ar-p1" tabindex="-1"><span class="fz">Obras</span><span class="op" aria-hidden="true"></span></button><button type="button" role="tab" id="uvq12-ar-t2" aria-selected="false" aria-controls="uvq12-ar-p2" tabindex="-1"><span class="fz">Equipo</span><span class="op" aria-hidden="true"></span></button><button type="button" role="tab" id="uvq12-ar-t3" aria-selected="false" aria-controls="uvq12-ar-p3" tabindex="-1"><span class="fz">Contacto</span><span class="op" aria-hidden="true"></span></button></div><div class="fl" aria-hidden="true"><span class="sun"></span></div><div class="pn" role="tabpanel" id="uvq12-ar-p0" aria-labelledby="uvq12-ar-t0">Arquitectura y rehabilitación desde 1998.</div><div class="pn" role="tabpanel" id="uvq12-ar-p1" aria-labelledby="uvq12-ar-t1" hidden>Treinta edificios en seis ciudades.</div><div class="pn" role="tabpanel" id="uvq12-ar-p2" aria-labelledby="uvq12-ar-t2" hidden>Nueve personas entre Madrid y Oporto.</div><div class="pn" role="tabpanel" id="uvq12-ar-p3" aria-labelledby="uvq12-ar-t3" hidden>Calle del Prado, 14. Te esperamos.</div></div>Prompt para IA
Pégalo en ChatGPT, Claude o Cursor y adaptará el bloque a tu proyecto con estos ajustes, aunque no uses React.
Más en Navegación
Ver todos: NavegaciónDónde usarlo
Pestañas construidas como un soportal clásico de travertino: los nombres van grabados en el friso y cada arco es una pestaña. El arco elegido se abre a un cielo luminoso mientras los demás quedan en la sombra de la galería, y una mancha de sol con la forma del arco se desliza por el suelo de baldosas. Encaja en estudios de arquitectura, hoteles, museos y webs inmobiliarias.
El color principal da el tono del sol y el secundario el de la piedra. Cuatro arcos es lo que mejor queda; deja los nombres grabados en una palabra y usa el panel de abajo para una frase corta de cada sección.