From 0c6e9924b930bc7dcfd1dea3c11679283415c1f9 Mon Sep 17 00:00:00 2001 From: Marklogo Date: Tue, 19 Dec 2023 22:18:18 +0100 Subject: [PATCH] pruebas formularios y css --- .../Formularios/misc/css/style.css | 108 ++++++++++++++++++ .../Formularios/misc/index.html | 47 ++++++++ 2 files changed, 155 insertions(+) create mode 100644 Practicas/Practicas HTML/Formularios/misc/css/style.css create mode 100644 Practicas/Practicas HTML/Formularios/misc/index.html diff --git a/Practicas/Practicas HTML/Formularios/misc/css/style.css b/Practicas/Practicas HTML/Formularios/misc/css/style.css new file mode 100644 index 0000000..3fad33f --- /dev/null +++ b/Practicas/Practicas HTML/Formularios/misc/css/style.css @@ -0,0 +1,108 @@ +@charset "UTF-8"; +* { + margin: 0; + padding: 0; + list-style: none; + text-decoration: none; + border: none; + outline: none; +} + +body{ + padding: 1em; + background-color: rgba(168, 164, 164, 0.747); +} + +.fieldset_flex{ + max-width: min-content; + margin: auto; + background-color: white; + border: 2px solid brown; + border-radius: 0.5em; + padding: 0.5em; + display: flex; + flex-direction: column; + gap:0.2em; +} + + +.container{ + margin: auto; + padding: 0.2em; + background-color: #45a049; + max-width: 50%; + +} + + +.flex-responsive{ + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 0.2em; +} + +.flex-col{ + flex-grow: 1; + display: flex; + flex-direction: column; + padding: 0.2em; + background-color: aliceblue; +} + +.fieldset_flex > legend{ + padding: 0 0.2em 0 0.2em; + background-color: white; + border-radius: 0.5em; + margin-left: 1em; +} + +label{ + font-weight: bold; + min-width: 4em; +} + +.input_std{ + /* border: 1px solid rgb(218, 218, 218); + padding: 0.2em; + size: 12em; */ + padding: 12px 20px; + margin: 8px 0; + border: 1px solid #ccc; + border-radius: 4px; + box-sizing: border-box; +} + +.input_std:hover, .input_std:focus { + background-color: rgb(204, 204, 204); +} + +.container_flex{ + display: flex; + flex-direction: row; + gap: 0.3em; + align-items: center; +} + + +.btn { + width: 100%; + background-color: #4CAF50; + color: white; + font-size: 1.4em; + font-weight: bold; + padding: 14px 20px; + margin: 8px 0; + border: none; + border-radius: 4px; + cursor: pointer; +} + +.btn:hover { + background-color: #45a049; +} + +@media(max-width:550px){ + + +} \ No newline at end of file diff --git a/Practicas/Practicas HTML/Formularios/misc/index.html b/Practicas/Practicas HTML/Formularios/misc/index.html new file mode 100644 index 0000000..83eddd0 --- /dev/null +++ b/Practicas/Practicas HTML/Formularios/misc/index.html @@ -0,0 +1,47 @@ + + + + + + + Miscelanea Formularios + + +
+
+
+ Formulario +
+ + +
+
+ + +
+
+ + +
+ +
+
+ + +
+
+

sdfsdf

+

sdfsdf

+

sdfsdf

+
+
+

dfgsdl

+

dfgsdl

+

dfgsdl

+

dfgsdl

+
+
+ +
+ + \ No newline at end of file