Add new class

This commit is contained in:
DevMate-Jar
2026-04-20 21:09:48 -03:00
parent 86afc4dde2
commit 60900e4cb3
3 changed files with 152 additions and 0 deletions

BIN
imagen.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

112
index.html Normal file
View File

@@ -0,0 +1,112 @@
<!DOCTYPE html>
<html>
<head>
<title>Programación I</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<h1>Tipo de Formulario</h1>
<h2>Actividad de Programación</h2>
</header>
<nav>
<a href="#">Inicio</a> |
<a href="#">Formulario</a> |
<a href="#">Contacto</a>
</nav>
<main>
<!-- Sección del formulario -->
<section>
<form>
<label>Nombre</label>
<input type="text" name="nombre">
<label>Apellido</label>
<input type="text" name="apellido">
<label>Cuotas</label>
<input type="number" name="cuotas" min="1">
<label>Provincia</label>
<select name="provincia">
<option value="s">Santa Fe</option>
<option value="e">Entre Ríos</option>
<option value="c">Córdoba</option>
</select>
<label>Email</label>
<input type="email" name="email" required>
<br><br>
<label>
<input type="checkbox" name="estudiante"> Soy estudiante
</label>
<br><br>
<input type="submit" value="Enviar">
</form>
</section>
<section>
<h2>Descripción de los campos</h2>
<ol>
<li>Nombre: Campo de texto para el nombre</li>
<li>Apellido: Campo de texto para el apellido</li>
<li>Cuotas: Número mayor a cero</li>
<li>Provincia: Selección de provincia</li>
<li>Email: Correo electrónico válido</li>
</ol>
<table border="1">
<tr>
<th>Campo</th>
<th>Tipo</th>
</tr>
<tr>
<td>Nombre</td>
<td>Texto</td>
</tr>
<tr>
<td>Email</td>
<td>Email</td>
</tr>
</table>
</section>
<section>
<img src="imagen.png" class="img-formulario">
</section>
</main>
<footer>
<p>Mateo Arteche - Programación I</p>
</footer>
</body>
</html>

40
style.css Normal file
View File

@@ -0,0 +1,40 @@
body {
background-color: #686567;
color: #333333;
font-family: 'Arial', sans-serif;
margin: 0;
padding: 20px;
}
form{
background-color: rgba(255, 255, 255, 0.8);
padding: 20px;
border-radius: 10px;
}
h1, h3{
color: #00eeda;
text-align: center;
}
ul {
list-style-type: square;
padding-left: 20px;
}
table {
width: 100%;
border-collapse: collapse;
margin-top: 20px;
}
th, td {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
.img-formulario {
display: block;
margin: 20px auto;
width: 300px;
}