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 @@ + + + +
+ + + +