durso.bruno/TP-Diagnostico
1
0
Fork 0
generated from marquez.juan/Ejercicio-inicial--git-y-HTML
Code Issues Pull Requests Projects Releases Wiki Activity

Subir archivos a "/"

Browse Source
This commit is contained in:
durso.bruno
2026-05-08 01:20:14 +00:00
parent 3df0866cc6
commit 856821bc6c
1 changed files with 210 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

210
Trabajo Diagnostico.html Normal file
View File

@@ -0,0 +1,210 @@
<!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 CodeMaster</title>
<!-- CSS interno -->
<style>
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
margin: 0;
}
header, footer {
background-color: #222;
color: white;
text-align: center;
padding: 15px;
}
nav {
background-color: #444;
padding: 10px;
text-align: center;
}
nav a {
color: white;
margin: 10px;
text-decoration: none;
}
main {
padding: 20px;
}
section {
background: white;
margin-bottom: 20px;
padding: 15px;
border-radius: 10px;
}
table {
width: 100%;
border-collapse: collapse;
}
table, th, td {
border: 1px solid black;
}
th, td {
padding: 10px;
text-align: center;
}
button {
padding: 10px 15px;
background-color: #007BFF;
color: white;
border: none;
cursor: pointer;
border-radius: 5px;
}
button:hover {
background-color: #0056b3;
}
form {
margin-top: 15px;
}
input, select, textarea {
width: 100%;
margin-bottom: 10px;
padding: 8px;
}
</style>
</head>
<body>
<!-- Comentario HTML: Página completa con formulario -->
<header>
<h1>Bienvenido a CodeMaster</h1>
<h2>Aprendé programación desde cero</h2>
</header>
<nav>
<a href="#beneficios">Beneficios</a>
<a href="#planes">Planes</a>
<a href="#formulario">Suscripción</a>
</nav>
<main>
<section>
<p>Aprendé desarrollo web con proyectos reales.</p>
<img src="https://via.placeholder.com/400x200" alt="Programación">
</section>
<section id="beneficios">
<h2>Beneficios</h2>
<ul>
<li>Acceso ilimitado</li>
<li>Clases prácticas</li>
<li>Certificados</li>
</ul>
</section>
<section id="planes">
<h2>Planes</h2>
<table>
<tr>
<th>Plan</th>
<th>Precio</th>
</tr>
<tr>
<td>Básico</td>
<td>$10</td>
</tr>
<tr>
<td>Pro</td>
<td>$25</td>
</tr>
</table>
</section>
<!-- Botón para mostrar/ocultar -->
<section>
<h2>Formulario</h2>
<button onclick="toggleFormulario()">Mostrar/Ocultar formulario</button>
</section>
<!-- FORMULARIO -->
<section id="formulario" style="display:none;">
<h2>Suscribite</h2>
<form>
<!-- Nombre -->
<label>Nombre:</label>
<input type="text" required>
<!-- Apellido -->
<label>Apellido:</label>
<input type="text" required>
<!-- Radio buttons -->
<label>Plan:</label><br>
<input type="radio" name="plan"> Básico
<input type="radio" name="plan"> Pro
<br><br>
<!-- Email -->
<label>Email:</label>
<input type="email" required>
<!-- Número -->
<label>Cantidad de cuotas:</label>
<input type="number" min="1" required>
<!-- Select -->
<label>Provincia:</label>
<select>
<option value="s">Santa Fe</option>
<option value="e">Entre Ríos</option>
<option value="c">Córdoba</option>
</select>
<!-- Checkbox -->
<label>
<input type="checkbox"> Soy estudiante
</label>
<!-- Textarea -->
<label>Comentarios:</label>
<textarea rows="4"></textarea>
<!-- Botón -->
<button type="submit">Enviar</button>
</form>
</section>
</main>
<footer>
<p>Contacto: codemaster@email.com</p>
</footer>
<!-- JavaScript -->
<script>
function toggleFormulario() {
var form = document.getElementById("formulario");
if (form.style.display === "none") {
form.style.display = "block";
} else {
form.style.display = "none";
}
}
</script>
</body>
</html>