diff --git a/Practicas/Practicas HTML/Formularios/Practica 4/css/style.css b/Practicas/Practicas HTML/Formularios/Practica 4/css/style.css index 02b36fb..3f6a837 100644 --- a/Practicas/Practicas HTML/Formularios/Practica 4/css/style.css +++ b/Practicas/Practicas HTML/Formularios/Practica 4/css/style.css @@ -7,97 +7,124 @@ border: none; outline: none; } +/*Para evitar los estilos de los autocompletados de los Inputs, pero no va muy bien con el fondo transparente de los mismos*/ +/* input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +input:-webkit-autofill:active { + box-shadow: 0 0 0 1000px rgba(0, 0, 0, 1) inset !important; + -webkit-text-fill-color: white ; +} */ -body{ - font-family: 'Roboto', sans-serif; - background-image: url("../img/fondo_taller.jpg"); - background-size: cover; - background-position: center; - background-repeat: repeat; - height: 100vh; +html { + height: 100%; +} +body { + font-family: "Roboto", sans-serif; + padding: 0 0.5em; + background-image: url("../img/fondo_taller.jpg"); + background-size: cover; + background-position: center; + background-attachment: fixed; + height: 100%; } -.form_flex{ - margin: auto; - display: flex; - flex-direction: row; - flex-wrap: wrap; - max-width: 650px; - width: 100%; - gap: 2em; +/* 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{ - width: 100%; - margin-top: 2em; - background-color: rgba(0, 0, 0, 0.7); - border: 2px solid rgb(83, 99, 224); - border-radius: 2em; - text-align: center; -} -.form_title h1 { - color: yellow; +.form_title { + background-color: rgba(0, 0, 0, 0.6); + border: 2px solid rgb(41, 93, 170); + box-sizing: border-box; + border-radius: 0.5em; + box-shadow: 5px 5px 10px rgba(0, 0, 0, 1); /* offsetX, offsetY, blurRadius, color */ + padding: 0.2em 0; + text-align: center; + color: yellow; } -.fieldset_std{ - width: 100%; - background-color: rgba(0, 0, 0, 0.7); - border: 2px solid rgb(83, 99, 224); - border-radius: 0.6em; - padding: 1em; - color: yellow; - display: flex; - flex-direction: column; - gap: 1em; +.form_main { + background-color: rgba(0, 0, 0, 0.6); + border: 2px solid rgb(41, 93, 170); + box-sizing: border-box; + border-radius: 0.5em; + box-shadow: 5px 5px 10px rgba(0, 0, 0, 1); /* offsetX, offsetY, blurRadius, color */ + padding: 0.3em; + color: yellow; + display: flex; + flex-direction: column; + gap: 0.5em; +} +.form_main > fieldset { + border: 2px solid rgb(41, 93, 170); + box-sizing: border-box; + border-radius: 0.5em; + box-shadow: 10px; + padding: 0.5em; + display: flex; + flex-direction: column; + gap: 0.6em; } -.form_fieldset{ - border: 2px solid rgb(83, 99, 224); - border-radius: 0.6em; - padding: 1em; - display: flex; - flex-direction: column; - gap: 0.6em; +.flex_responsive { + display: flex; + flex-direction: row; + gap: 0.5em; + align-items: center; } -.responsive_flex{ - display: flex; - flex-direction: row; - gap:1em; +/* Estilos para aplicar a elementos directamente*/ +.form_main > fieldset legend { + margin-left: 1em; + padding: 0 0.2em; + font-weight: bold; } -.label_std{ - display: inline-block; - width: 5em; - color: white; +label { + display: inline-block; + font-weight: 400; + color: white; + width: 6em; } input { - background-color: transparent; - border: 1px solid white; - border-radius: 0.2em; - color: white; - padding: 0.2em 0.5em; + padding: 0.2em; + flex-grow: 1; + font-size: large; + background-color: transparent; + border: 1px solid white; + border-radius: 0.2em; + color: white; +} +input:hover, +input:focus { + background-color: rgba(0, 0, 0, 0.4); } -.btn{ - border: 2px solid rgb(83, 99, 224); - padding: 0.4em; - border-radius: 0.5em; +.btn { + border: 2px solid rgb(41, 93, 170); + box-sizing: border-box; +} +.btn:hover { + background-color: rgb(41, 93, 170); } -@media(max-width: 550px){ -body{ +/* Media Queries */ +@media (max-width: 550px) { + body { background-image: url("../img/fondo_vertical_taller.jpg"); - background-size: cover; - background-position: center; - background-repeat: no-repeat; - height: 100%; - padding: 0.5em; -} -.responsive_flex{ + } + + .flex_responsive { display: flex; + align-items: normal; flex-direction: column; - gap:0.1em; + } } -} \ No newline at end of file diff --git a/Practicas/Practicas HTML/Formularios/Practica 4/img/fondo_taller.jpg b/Practicas/Practicas HTML/Formularios/Practica 4/img/fondo_taller.jpg index 9877b76..94246f5 100644 Binary files a/Practicas/Practicas HTML/Formularios/Practica 4/img/fondo_taller.jpg and b/Practicas/Practicas HTML/Formularios/Practica 4/img/fondo_taller.jpg differ diff --git a/Practicas/Practicas HTML/Formularios/Practica 4/img/fondo_vertical_taller.jpg b/Practicas/Practicas HTML/Formularios/Practica 4/img/fondo_vertical_taller.jpg index 01b9673..98b4630 100644 Binary files a/Practicas/Practicas HTML/Formularios/Practica 4/img/fondo_vertical_taller.jpg and b/Practicas/Practicas HTML/Formularios/Practica 4/img/fondo_vertical_taller.jpg differ diff --git a/Practicas/Practicas HTML/Formularios/Practica 4/index.html b/Practicas/Practicas HTML/Formularios/Practica 4/index.html new file mode 100644 index 0000000..b19e548 --- /dev/null +++ b/Practicas/Practicas HTML/Formularios/Practica 4/index.html @@ -0,0 +1,138 @@ + + + + + + + + Practica 4 Formularios + + + + +
+ +
+

Pide Cita

+
+ +
+
+ Datos Cliente +
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ Datos de reserva +

* Tarjeta de descuento

+
+
+ + +
+
+ + +
+
+ + +
+
+ +

* Marca del vehiculo

+ + + + +

* Tipo de reparacion

+
+
+ + +
+
+ + +
+
+ + +
+
+ +

* Vehiculo de sustitucion

+
+
+ + +
+
+ + +
+
+ + +
+
+ +

* Preferencia de horario de entrega

+
+
+ + +
+
+ + +
+
+ +

* Fecha de entrega

+ + + + +
+ + +
+
+

* Los campos marcados con asterisco son obligatorios

+
+ +
+
+ + + +
+ + + + + + + \ No newline at end of file diff --git a/Practicas/Practicas HTML/Formularios/Practica 4/practica 4.html b/Practicas/Practicas HTML/Formularios/Practica 4/practica 4.html deleted file mode 100644 index aa68c72..0000000 --- a/Practicas/Practicas HTML/Formularios/Practica 4/practica 4.html +++ /dev/null @@ -1,142 +0,0 @@ - - - - - - - - - - - Practica 4 - - - - - -
- -
-

Pide Cita

-
- -
-
- Datos del Cliente -
- - -
-
- - -
-
- - -
-
- - -
-
- -
- Datos de reserva -
-

* Tarjeta de descuento

-
-
- - -
-
- - -
-
- - -
-
-
-
-

* Marca del vehiculo

- - - -
-
-

* Reparacion

-
-
- - -
-
- - -
-
- - -
-
-
-
-

* Vehiculo de sustitucion

-
-
- - -
-
- - -
-
- - -
-
-
-
-

* Preferencia de horario de entrega

-
-
- - -
-
- - -
-
-
-
-

* Fecha de entrega

- - -
-
- - -
-
-

* Los campos marcados con asterisco son obligatorios

-
- -
-
- - - - \ No newline at end of file