marklogo/IFCD0210
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

pruebas formularios y css

Browse Source
This commit is contained in:
Marklogo 2023-12-19 22:18:18 +01:00
parent 9310ef6ca4
commit 0c6e9924b9
2 changed files with 155 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

108
Practicas/Practicas HTML/Formularios/misc/css/style.css Normal file
View File

@ -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){
}

47
Practicas/Practicas HTML/Formularios/misc/index.html Normal file
View File

@ -0,0 +1,47 @@
<!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>Miscelanea Formularios</title>
</head>
<body>
<section>
<form action="" method="get">
<fieldset class="fieldset_flex">
<legend>Formulario</legend>
<div class="container_flex">
<label for="input1">Nombre</label>
<input class="input_std" type="text" name="input1" placeholder="Introduzca su nombre...">
</div>
<div class="container_flex">
<label for="input1">Nombre</label>
<input class="input_std" type="text" name="input1" placeholder="Introduzca su nombre...">
</div>
<div class="container_flex">
<label for="input1">Nombre</label>
<input class="input_std" type="tel" name="input1" placeholder="Introduzca su nombre...">
</div>
<input class="btn" type="button" value="Enviar">
</fieldset>
</form>
<div class="container flex-responsive">
<div class="flex-col">
<p>sdfsdf</p>
<p>sdfsdf</p>
<p>sdfsdf</p>
</div>
<div class="flex-col">
<p>dfgsdl</p>
<p>dfgsdl</p>
<p>dfgsdl</p>
<p>dfgsdl</p>
</div>
</div>
</section>
</body>
</html>