generated from marquez.juan/Ejercicio-inicial--git-y-HTML
Se subio el index.html e imagenes
This commit is contained in:
Nicolas Juan Murua
committed by
Nicolas Murua
Nicolas Murua
parent
b3cd722617
commit
8eb8f58807
27
.gitignore
vendored
Normal file
27
.gitignore
vendored
Normal file
@@ -0,0 +1,27 @@
|
||||
# Archivos del sistema (Windows)
|
||||
Thumbs.db
|
||||
desktop.ini
|
||||
|
||||
# Archivos temporales
|
||||
*.log
|
||||
*.tmp
|
||||
|
||||
# Configuración de editores
|
||||
.vscode/
|
||||
.idea/
|
||||
|
||||
# Node (por si después usás algo)
|
||||
node_modules/
|
||||
|
||||
# Archivos de entorno
|
||||
.env
|
||||
|
||||
# Archivos comprimidos
|
||||
*.zip
|
||||
*.rar
|
||||
|
||||
# Archivos innecesarios
|
||||
*.bak
|
||||
|
||||
# Mac (por si compartís)
|
||||
.DS_Store
|
||||
BIN
imagenes/imagen_ia.jfif
Normal file
BIN
imagenes/imagen_ia.jfif
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 14 KiB |
179
index.html
Normal file
179
index.html
Normal file
@@ -0,0 +1,179 @@
|
||||
<!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 GameAI Pro</title>
|
||||
|
||||
<!-- Bootstrap -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||||
|
||||
<style>
|
||||
body {
|
||||
background-color: #0f172a;
|
||||
color: #e2e8f0;
|
||||
}
|
||||
header, footer {
|
||||
background: #1e293b;
|
||||
text-align: center;
|
||||
padding: 20px;
|
||||
}
|
||||
.card {
|
||||
background: #1e293b;
|
||||
color: white;
|
||||
}
|
||||
.btn-custom {
|
||||
background-color: #22c55e;
|
||||
color: black;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<!-- Comentario: Página de suscripción -->
|
||||
|
||||
<header>
|
||||
<h1>GameAI Pro</h1>
|
||||
<p>Aprendé IA para videojuegos como un profesional</p>
|
||||
</header>
|
||||
|
||||
<nav class="navbar navbar-dark bg-dark justify-content-center">
|
||||
<a class="nav-link text-white" href="#beneficios">Beneficios</a>
|
||||
<a class="nav-link text-white" href="#planes">Planes</a>
|
||||
<a class="nav-link text-white" href="#formulario">Suscribirse</a>
|
||||
</nav>
|
||||
|
||||
<main class="container mt-4">
|
||||
|
||||
<section id="beneficios">
|
||||
<h2>¿Por qué elegirnos?</h2>
|
||||
<article>
|
||||
<p>Con GameAI Pro vas a aprender desde cero hasta sistemas avanzados como Utility AI, Pathfinding y Perception.</p>
|
||||
|
||||
<ul>
|
||||
<li>Clases prácticas</li>
|
||||
<li>Proyectos reales</li>
|
||||
<li>Mentoría personalizada</li>
|
||||
</ul>
|
||||
|
||||
<img src="imagenes/imagen_ia.jfif" class="img-fluid" alt="IA en videojuegos">
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section id="planes" class="mt-4">
|
||||
<h2>Planes disponibles</h2>
|
||||
<table class="table table-dark table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Plan</th>
|
||||
<th>Precio</th>
|
||||
<th>Duración</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>Básico</td>
|
||||
<td>$5000</td>
|
||||
<td>1 mes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Pro</td>
|
||||
<td>$12000</td>
|
||||
<td>3 meses</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
<section id="formulario" class="mt-4">
|
||||
<button class="btn btn-warning mb-3" onclick="toggleForm()">Mostrar/Ocultar Formulario</button>
|
||||
|
||||
<div id="formContainer">
|
||||
<div class="card p-4">
|
||||
<h2>Formulario de Suscripción</h2>
|
||||
|
||||
<!-- SOLO SE AGREGÓ onsubmit -->
|
||||
<form onsubmit="mostrarMensaje(event)">
|
||||
<div class="mb-3">
|
||||
<label>Nombre</label>
|
||||
<input type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Apellido</label>
|
||||
<input type="text" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Email</label>
|
||||
<input type="email" class="form-control" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Tipo de plan</label><br>
|
||||
<input type="radio" name="plan" value="basico"> Básico
|
||||
<input type="radio" name="plan" value="pro"> Pro
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Cantidad de cuotas</label>
|
||||
<input type="number" class="form-control" min="1" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Provincia</label>
|
||||
<select class="form-select">
|
||||
<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">
|
||||
<input type="checkbox"> Soy estudiante
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label>Comentarios</label>
|
||||
<textarea class="form-control" rows="4"></textarea>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-custom">Enviar</button>
|
||||
|
||||
<!-- SOLO SE AGREGÓ ESTE MENSAJE -->
|
||||
<p id="mensajeExito" style="display:none; color: lightgreen; margin-top:10px;">
|
||||
✅ Formulario enviado correctamente
|
||||
</p>
|
||||
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
</main>
|
||||
|
||||
<footer>
|
||||
<p>© NICOLAS JUAN MURUA</p>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
function toggleForm() {
|
||||
const form = document.getElementById("formContainer");
|
||||
if (form.style.display === "none") {
|
||||
form.style.display = "block";
|
||||
} else {
|
||||
form.style.display = "none";
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<script>
|
||||
function mostrarMensaje(event) {
|
||||
event.preventDefault();
|
||||
const mensaje = document.getElementById("mensajeExito");
|
||||
mensaje.style.display = "block";
|
||||
}
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user