Dia 19
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
Binary file not shown.
Reference in New Issue
Block a user