Focos Motivacionales Interactivos: Una Experiencia Visual en HTML, CSS y JavaScript

Descripción del Código:

Este proyecto consiste en una página web interactiva que permite a los usuarios visualizar frases motivacionales al interactuar con focos (bombillas) gráficos. El diseño incluye cuatro focos que, al pasar el cursor sobre ellos, se iluminan y muestran una frase específica relacionada con el éxito, la motivación o la superación personal. Además, se ha implementado un interruptor que, al activarlo, ilumina todos los focos simultáneamente y muestra una frase aleatoria de una lista predefinida. El código está dividido en tres partes principales:

HTML (Focoindex.html):

Define la estructura básica de la página, incluyendo los contenedores de los focos y el interruptor. Cada foco contiene una frase motivacional en sus atributos de datos.

CSS (styles.css):

Aplica el estilo visual a la página, incluyendo la apariencia de los focos, la animación de encendido y apagado, y la disposición del interruptor y las frases. El diseño es responsivo, adaptándose a diferentes tamaños de pantalla.

JavaScript (script.js):

Controla la interactividad de la página. Permite que los focos se iluminen y muestren una frase cuando se pasa el cursor sobre ellos. También gestiona el funcionamiento del interruptor, que alterna el estado de todos los focos y muestra una frase aleatoria de una lista de frases motivacionales.

Cómo usarlo:

Puedes utilizar este código en tu sitio web para añadir un elemento visual atractivo e interactivo. Es ideal para páginas relacionadas con la motivación, el coaching, o simplemente para agregar un toque dinámico a la interfaz de usuario.