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