This commit is contained in:
Marcos Lopez
2023-12-19 13:40:01 +01:00
parent 85e8122aa3
commit 9310ef6ca4
6 changed files with 253 additions and 39 deletions

View File

@@ -0,0 +1,80 @@
@charset "UTF-8";
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
border: none;
outline: none;
}
body{
padding: 2em;
}
h2{
color: #718751;
margin-bottom: 1em;
}
form{
margin: auto;
border: 3px;
border-style: solid;
border-color: #718751;
border-radius: 0.5em;
padding:1em;
max-width: 350px;
min-width: 250px;
background-color: #E2001A;
color: white;
box-sizing: border-box;
}
fieldset {
border: 3px;
padding: 0.5em;
border-style: solid;
border-color: #718751;
border-radius: 0.5em;
margin-bottom: 1em;
}
legend{
margin-left: 0.5em;
font-size: 1em;
font-weight: bold;
color: #718751;;
}
input[type=text], input[type=tel]{
background-color:#718751;
color: white;
}
label{
width: 5em;
}
.input_flex{
display: flex;
flex-direction:row;
gap: 0.5em;
padding: 0.1em;
}
.btn{
padding: 0.2em;
background-color: #E2001A;
border: 2px solid #718751;
color: white;
font-weight: bold;
font-size: 1em;
}
@media (max-width: 550px) {
.input_flex{
display: flex;
flex-direction:column;
gap: 0.5em;
padding: 0.1em;
}
}

View File

@@ -0,0 +1,61 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./css/style.css">
<title>Practica 3</title>
</head>
<body>
<h2>Pedido de pizza</h2>
<form action="../gracias.html">
<fieldset>
<legend>La pizza</legend>
<p>
<p>Ingresdientes</p>
<input type="checkbox" name="queso"> Queso <input type="checkbox" name="pimiento"> Pimiento <br>
<input type="checkbox" name="cebolla"> Cebolla <input type="checkbox" name="atun"> Atún <br>
<input type="checkbox" name="tomate"> Toamte <input type="checkbox" name="jamon"> Jamon
</p>
<label for="tamano">Tamaño</label><br>
<input type="radio" name="tamano" value="pequena" checked> Pequeña <br>
<input type="radio" name="tamano" value="mediana"> Mediana <br>
<input type="radio" name="tamano" value="grande"> Grande <br>
</fieldset>
<fieldset>
<legend>Datos de entrega</legend>
<p class="input_flex">
<label for="name">Nombre </label>
<input type="text" name="nombre" placeholder="Escribe tu nombre...">
</p>
<p class="input_flex">
<label for="direccion">Direccion</label>
<input type="text" name="direccion" placeholder="Escribe tu direccion...">
</p>
<p class="input_flex">
<label for="telefono">Telefono</label>
<input type="tel" name="telefono" placeholder="982210251">
</p>
<p>
<label for="instrucciones">Instrucciones especiales</label> <br>
<textarea name="instrucciones" rows="10" cols="24"></textarea>
</p>
</fieldset>
<fieldset>
<legend>Metodo de pago</legend>
<select name="pago">
<option value="efectivo" selected>Efectivo</option>
<option value="tarjeta">Tarjeta</option>
<option value="bizum">Bizum</option>
</select>
</fieldset>
<input type="submit" class="btn" value="ok">
</form>
</body>
</html>