Dia 21
This commit is contained in:
Marcos Lopez
@@ -174,6 +174,82 @@ iframe {
|
||||
float: left;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* estilos para contenedores de elementos del formularios */
|
||||
.form_citas {
|
||||
margin: auto;
|
||||
padding: 2em 0 4em;
|
||||
max-width: 650px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2em;
|
||||
}
|
||||
|
||||
.form_title {
|
||||
border: 2px solid #1a89dc;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0.5em;
|
||||
padding: 0.2em 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.form_main {
|
||||
border: 2px solid #1a89dc;
|
||||
color: #1a89dc;
|
||||
box-sizing: border-box;
|
||||
padding: 0.3em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.form_main > fieldset {
|
||||
border: 2px solid #1a89dc;
|
||||
box-sizing: border-box;
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6em;
|
||||
}
|
||||
|
||||
.flex_responsive {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 0.5em;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
/* Estilos para aplicar a elementos del formulario directamente*/
|
||||
.form_main > fieldset legend {
|
||||
margin-left: 1em;
|
||||
padding: 0 0.2em;
|
||||
font-weight: 900;
|
||||
}
|
||||
label {
|
||||
font-weight: 400;
|
||||
width: 6em;
|
||||
}
|
||||
|
||||
select, textarea, input {
|
||||
padding: 0.2em;
|
||||
flex-grow: 1;
|
||||
font-size: large;
|
||||
background-color: transparent;
|
||||
border: 1px solid #1a89dc;
|
||||
border-radius: 0.2em;
|
||||
}
|
||||
input:hover,
|
||||
input:focus {
|
||||
background-color: rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*Media Querys para aplicar a dispositivos moviles*/
|
||||
@media (max-width: 550px) {
|
||||
.lista_menu li {
|
||||
@@ -194,6 +270,11 @@ iframe {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.flex_responsive {
|
||||
display: flex;
|
||||
align-items: normal;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
10
Practicas/Practicas HTML/Repaso/gracias.html
Normal file
10
Practicas/Practicas HTML/Repaso/gracias.html
Normal file
@@ -0,0 +1,10 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Gracias por contactar</title>
|
||||
</head>
|
||||
<body>
|
||||
<p>Gracias por contactar</p>
|
||||
</body>
|
||||
</html>
|
||||
@@ -211,11 +211,6 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<br>
|
||||
<!-- Aqui empieza la pagina Contactos -->
|
||||
<hr>
|
||||
@@ -239,6 +234,76 @@
|
||||
|
||||
<p class="contacto_info"><span>Móvil |
|
||||
</span> 690 900 700</p>
|
||||
|
||||
|
||||
<form class="form_citas" action="./gracias.html" method="get">
|
||||
<div class="form_main">
|
||||
<fieldset>
|
||||
<legend>Datos Cliente</legend>
|
||||
<div class="flex_responsive">
|
||||
<label for="nombre">* Nombre</label>
|
||||
<input type="text" name="nombre" id="nombre" minlength="1" maxlength="40"
|
||||
pattern="[A-Za-zÁÉÍÓÚáéíóúñÑ\s]{1,40}"
|
||||
title="El nombre puede contener entre 1 y 40 caracteres letras y numeros" required>
|
||||
</div>
|
||||
<div></div>
|
||||
<div class="flex_responsive">
|
||||
<label for="apellidos">* Apellidos</label>
|
||||
<input type="text" name="apellidos" id="apellidos" minlength="1" maxlength="40"
|
||||
pattern="[A-Za-zÁÉÍÓÚáéíóúñÑ\s]{1,40}"
|
||||
title="Los apellidos pueden contener entre 1 y 40 caracteres en total" required>
|
||||
</div>
|
||||
<div class="flex_responsive">
|
||||
<label for="telefono">* Telefono</label>
|
||||
<input type="tel" name="telefono" id="telefono" pattern="[0-9]{9}"
|
||||
title="El numero de telefono debe ser de 9 digitos" required>
|
||||
</div>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<div>
|
||||
<label for="asunto">Asunto</label>
|
||||
<select name="asunto" id="asunto" required>
|
||||
<option value="" disabled selected>-- Selecciona --</option>
|
||||
<option value="">opcion 1</option>
|
||||
<option value="">opcion 1</option>
|
||||
<option value="">opcion 1</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<label style="width: auto;">¿Cómo nos ha conocido?</label>
|
||||
<div class="flex_responsive">
|
||||
<div>
|
||||
<input type="radio" name="radiostats" id="amigo" value="amigo" required>
|
||||
<label for="amigo">Un amigo</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="radiostats" id="google" value="google">
|
||||
<label for="google">Googleando</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="radiostats" id="buzoneo" value="buzoneo">
|
||||
<label for="buzoneo">Buzoneo</label>
|
||||
</div>
|
||||
<div>
|
||||
<input type="radio" name="radiostats" id="otros" value="otros">
|
||||
<label for="otros">Otros</label>
|
||||
</div>
|
||||
</div>
|
||||
<label style="width: auto;" for="observaciones">Escribe tu mensaje</label>
|
||||
<textarea style="max-width: 600px;" name="observaciones" id="observaciones" rows="10" required></textarea>
|
||||
<div>
|
||||
<input type="checkbox" name="politica" id="politica"
|
||||
minlength="10"
|
||||
required>
|
||||
<label for="politica" style="width: auto;">He leído y acepto <a href="">aviso legal y la politica de privacidad</a> </label>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div>
|
||||
<input class="btn" type="submit" value="Ok">
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<iframe
|
||||
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2917.2975090229866!2d-7.5559269234771165!3d43.0141246935289!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0xd31ce9094468525%3A0xc6b267162d7eabde!2sR%C3%BAa%20Castelao%2C%20Lugo!5e0!3m2!1ses!2ses!4v1701343489810!5m2!1ses!2ses"
|
||||
width="600" height="450" allowfullscreen="" loading="lazy"
|
||||
|
||||
Reference in New Issue
Block a user