Add new class

2026-04-20 21:09:48 -03:00
parent 86afc4dde2
commit 60900e4cb3
3 changed files with 152 additions and 0 deletions
--- a/imagen.png
+++ b/imagen.png
--- a/index.html
+++ b/index.html
@@ -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>
--- a/style.css
+++ b/style.css
@@ -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;
+
+}
+