generated from marquez.juan/Ejercicio-inicial--git-y-HTML
161 lines
7.0 KiB
HTML
161 lines
7.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="es">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Suscripción a Apple Music</title>
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<header class="bg-dark text-white p-3">
|
|
<div class="container d-flex justify-content-between align-items-center">
|
|
<h1>Apple Music</h1>
|
|
<nav>
|
|
<ul class="nav">
|
|
<li class="nav-item"><a class="nav-link text-white" href="#inicio">Inicio</a></li>
|
|
<li class="nav-item"><a class="nav-link text-white" href="#servicios">Servicios</a></li>
|
|
<li class="nav-item"><a class="nav-link text-white" href="#contacto">Suscribirse</a></li>
|
|
</ul>
|
|
</nav>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="container my-5">
|
|
|
|
<section id="inicio" class="text-center mb-5">
|
|
<img src="apple_logo.png" alt="Banner de Apple Music" class="img-fluid rounded shadow-sm m-5">
|
|
<h2>Escucha todo lo que quieras. Sin anuncios.</h2>
|
|
<p class="lead">Millones de canciones. Todo en un solo lugar. Apple Music te acerca a las canciones, álbumes
|
|
y artistas que más te gustan.</p>
|
|
</section>
|
|
|
|
<hr>
|
|
|
|
<article id="servicios" class="mb-5">
|
|
<h2>¿Por qué elegir Apple Music?</h2>
|
|
<p>Con nuestra plataforma, disfrutarás de beneficios exclusivos diseñados para los amantes de la música.</p>
|
|
<ul>
|
|
<li>Más de 100 millones de canciones sin anuncios.</li>
|
|
<li>Audio espacial con Dolby Atmos.</li>
|
|
<li>Descarga tu música favorita y escucha sin conexión.</li>
|
|
<li>Listas de reproducción personalizadas para ti.</li>
|
|
</ul>
|
|
|
|
<!-- Table: Comparativa de planes -->
|
|
<div class="table-responsive my-4">
|
|
<table class="table table-striped table-hover">
|
|
<thead class="table-dark">
|
|
<tr>
|
|
<th>Plan</th>
|
|
<th>Precio Mensual</th>
|
|
<th>Dispositivos</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>Estudiante</td>
|
|
<td>$2.000</td>
|
|
<td>1</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Individual</td>
|
|
<td>$4.000</td>
|
|
<td>1</td>
|
|
</tr>
|
|
<tr>
|
|
<td>Familiar</td>
|
|
<td>$6.000</td>
|
|
<td>Hasta 6</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</article>
|
|
|
|
<hr>
|
|
|
|
<!-- Section: Formulario de invitación/suscripción -->
|
|
<section id="contacto" class="text-center">
|
|
<h2>¡Únete hoy mismo!</h2>
|
|
<p>Haz clic en el botón de abajo para completar tu suscripción.</p>
|
|
|
|
<button id="btn-toggle" class="btn btn-primary mb-4">Mostrar Formulario de Registro</button>
|
|
|
|
<!-- Div que contiene el formulario, inicialmente oculto mediante CSS -->
|
|
<div id="contenedor-formulario" class="d-none border p-4 rounded bg-light text-start shadow-sm mx-auto"
|
|
style="max-width: 600px;">
|
|
|
|
<form action="#" method="POST">
|
|
<div class="mb-3">
|
|
<label for="nombre" class="form-label">Nombre:</label>
|
|
<input type="text" class="form-control" id="nombre" name="nombre" required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="apellido" class="form-label">Apellido:</label>
|
|
<input type="text" class="form-control" id="apellido" name="apellido" required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label class="form-label d-block">Elige tu plan:</label>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="plan" id="plan1" value="individual"
|
|
checked>
|
|
<label class="form-check-label" for="plan1">Individual</label>
|
|
</div>
|
|
<div class="form-check form-check-inline">
|
|
<input class="form-check-input" type="radio" name="plan" id="plan2" value="familiar">
|
|
<label class="form-check-label" for="plan2">Familiar</label>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="email" class="form-label">Correo Electrónico:</label>
|
|
<input type="email" class="form-control" id="email" name="email"
|
|
placeholder="ejemplo@correo.com" required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="cuotas" class="form-label">Cantidad de cuotas para el pago:</label>
|
|
<input type="number" class="form-control" id="cuotas" name="cuotas" min="1" value="1" required>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="provincia" class="form-label">Provincia:</label>
|
|
<select class="form-select" id="provincia" name="provincia">
|
|
<option value="s">Santa Fe</option>
|
|
<option value="e">Entre Ríos</option>
|
|
<option value="c">Córdoba</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="mb-3 form-check">
|
|
<input type="checkbox" class="form-check-input" id="estudiante" name="estudiante">
|
|
<label class="form-check-label" for="estudiante">¿Eres estudiante?</label>
|
|
</div>
|
|
|
|
<div class="mb-3">
|
|
<label for="comentarios" class="form-label">Comentarios adicionales:</label>
|
|
<textarea class="form-control" id="comentarios" name="comentarios" rows="3"
|
|
placeholder="Escribe aquí..."></textarea>
|
|
</div>
|
|
|
|
<button type="submit" class="btn btn-success w-100">Enviar Registro</button>
|
|
</form>
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
<footer class="bg-dark text-white text-center py-4 mt-5">
|
|
<p>© 2026 TP1 - Materia: Programación I</p>
|
|
</footer>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="script.js"></script>
|
|
</body>
|
|
|
|
</html> |