generated from marquez.juan/Ejercicio-inicial--git-y-HTML
Add new class
This commit is contained in:
BIN
imagen.png
Normal file
BIN
imagen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
112
index.html
Normal file
112
index.html
Normal 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
40
style.css
Normal 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;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
Reference in New Issue
Block a user