diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..fdb2493 --- /dev/null +++ b/.gitignore @@ -0,0 +1,2 @@ +keyprog1 +keyprog1.pub \ No newline at end of file diff --git a/apple_logo.png b/apple_logo.png new file mode 100644 index 0000000..0495494 Binary files /dev/null and b/apple_logo.png differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..eaab11a --- /dev/null +++ b/index.html @@ -0,0 +1,161 @@ + + + + + + + Suscripción a Apple Music + + + + + + +
+
+

Apple Music

+ +
+
+ +
+ +
+ Banner de Apple Music +

Escucha todo lo que quieras. Sin anuncios.

+

Millones de canciones. Todo en un solo lugar. Apple Music te acerca a las canciones, álbumes + y artistas que más te gustan.

+
+ +
+ +
+

¿Por qué elegir Apple Music?

+

Con nuestra plataforma, disfrutarás de beneficios exclusivos diseñados para los amantes de la música.

+ + + +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
PlanPrecio MensualDispositivos
Estudiante$2.0001
Individual$4.0001
Familiar$6.000Hasta 6
+
+
+ +
+ + +
+

¡Únete hoy mismo!

+

Haz clic en el botón de abajo para completar tu suscripción.

+ + + + +
+ +
+
+ + +
+ +
+ + +
+ +
+ +
+ + +
+
+ + +
+
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+ + +
+
+
+
+ + + + + + + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..5439a61 --- /dev/null +++ b/script.js @@ -0,0 +1,24 @@ +/** + * Función para mostrar u ocultar el formulario de suscripción. + * Este script se activa al hacer clic en el botón 'btn-toggle'. + */ + +document.addEventListener('DOMContentLoaded', () => { + + const btnToggle = document.getElementById('btn-toggle'); + const contenedorFormulario = document.getElementById('contenedor-formulario'); + + btnToggle.addEventListener('click', () => { + + if (contenedorFormulario.classList.contains('d-none')) { + contenedorFormulario.classList.remove('d-none'); + btnToggle.textContent = 'Ocultar Formulario'; + btnToggle.classList.replace('btn-primary', 'btn-secondary'); + } else { + contenedorFormulario.classList.add('d-none'); + btnToggle.textContent = 'Mostrar Formulario de Registro'; + btnToggle.classList.replace('btn-secondary', 'btn-primary'); + } + }); + +}); diff --git a/style.css b/style.css new file mode 100644 index 0000000..1fc9882 --- /dev/null +++ b/style.css @@ -0,0 +1,53 @@ +/* Estilos personalizados para la página de Apple Music */ + +body { + font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; + background-color: #f5f5f7; + color: #1d1d1f; +} + +header { + box-shadow: 0 2px 4px rgba(0,0,0,0.1); +} + +header h1 { + font-size: 1.5rem; + font-weight: 600; + margin: 0; +} + +/* Transición suave para el formulario */ +#contenedor-formulario { + transition: all 0.3s ease-in-out; +} + +/* Estilo para los títulos de sección */ +h2 { + font-weight: 700; + margin-bottom: 1.5rem; +} + +/* Ajustes para la tabla */ +.table { + border-radius: 8px; + overflow: hidden; +} + +/* Efecto hover en el botón principal */ +#btn-toggle { + border-radius: 20px; + padding: 10px 30px; + font-weight: 600; +} + +footer { + font-size: 0.9rem; +} + +footer a { + text-decoration: none; +} + +footer a:hover { + text-decoration: underline; +}