generated from marquez.juan/Ejercicio-inicial--git-y-HTML
subida de diagnostico a gitea
This commit is contained in:
wiLson
2
.gitignore
vendored
Normal file
2
.gitignore
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
keyprog1
|
||||||
|
keyprog1.pub
|
||||||
BIN
apple_logo.png
Normal file
BIN
apple_logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.9 KiB |
161
index.html
Normal file
161
index.html
Normal file
@@ -0,0 +1,161 @@
|
|||||||
|
<!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>
|
||||||
24
script.js
Normal file
24
script.js
Normal file
@@ -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');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
53
style.css
Normal file
53
style.css
Normal file
@@ -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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user