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

Optimizacion formulario

Browse Source
This commit is contained in:
Marklogo 2024-01-10 01:49:32 +01:00
parent 1afaa1b1c0
commit 07bb166f86
2 changed files with 70 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
Practicas/Practicas HTML/Repaso 2/css/style.css
View File

@ -16,6 +16,7 @@ body {
background-size: cover; background-size: cover;
} }
/* Estilos para la cabecera con menu */
#main_header { #main_header {
width: 100%; width: 100%;
height: 120px; height: 120px;
@ -34,13 +35,11 @@ body {
#main_header > img { #main_header > img {
height: 100px; height: 100px;
} }
.menu { .menu {
list-style-type: none; list-style-type: none;
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.menu li { .menu li {
float: left; float: left;
margin: 0 5px; margin: 0 5px;
@ -54,13 +53,17 @@ body {
text-shadow: 1px 1px 1px black; text-shadow: 1px 1px 1px black;
} }
/* Ajustes para el posicionamento en las anclas del menu*/
#inicio, #inicio,
#equipo, #equipo,
#contacto { #contacto {
scroll-margin-top: 150px; scroll-margin-top: 150px;
} }
main {
/* Ajustes generales para contenedor general de la web*/
.main_container {
background-color: rgba(0, 0, 0, 0.2); background-color: rgba(0, 0, 0, 0.2);
width: 70%; width: 70%;
margin: auto; margin: auto;
@ -71,21 +74,20 @@ main {
text-align: center; text-align: center;
font-family: Arial, Helvetica, sans-serif; font-family: Arial, Helvetica, sans-serif;
} }
.main_container h1 {
h1 {
font-size: 4em; font-size: 4em;
font-style: italic; font-style: italic;
font-weight: lighter; font-weight: lighter;
text-shadow: 1px 1px 2px black; text-shadow: 1px 1px 2px black;
} }
.main_container h2 {
h2 {
font-size: 2em; font-size: 2em;
font-style: italic; font-style: italic;
font-weight: lighter; font-weight: lighter;
text-shadow: 1px 1px 2px black; text-shadow: 1px 1px 2px black;
} }
/* Ajustes generales para todas las secciones de la web */
section { section {
margin-top: 2em; margin-top: 2em;
display: flex; display: flex;
@ -98,6 +100,7 @@ section p {
text-align: left; text-align: left;
} }
/* Ajuste especifico para la seccion equipo */
.equipo-content { .equipo-content {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
@ -105,17 +108,16 @@ section p {
gap: 2em; gap: 2em;
} }
/* Estilos para las tarjetas de la seccion equipo*/
.card { .card {
width: 320px;
padding: 0.5em; padding: 0.5em;
border: 4px solid #2795de; border: 4px solid #2795de;
color: #2795de; color: #2795de;
} }
.card > img { .card > img {
margin-top: 1em; margin-top: 1em;
max-height: 320px; max-height: 300px;
} }
.card-details { .card-details {
display: flex; display: flex;
align-items: center; align-items: center;
@ -129,12 +131,14 @@ section p {
color: white; color: white;
font-size: 0.9em; font-size: 0.9em;
} }
.card-details span { .card-details span {
color: #2795de; color: #2795de;
font-weight: bold; font-weight: bold;
} }
/* Estilos del footer */
footer { footer {
width: 70%; width: 70%;
margin: auto; margin: auto;
@ -146,7 +150,6 @@ footer {
padding: 1em; padding: 1em;
box-sizing: border-box; box-sizing: border-box;
} }
footer img { footer img {
width: 80%; width: 80%;
max-width: 200px; max-width: 200px;
@ -165,32 +168,48 @@ footer p {
height: 48px; height: 48px;
} }
/*Estilos para el Formulario*/
.form_main { .form_main {
width: 100%; width: 100%;
border: 4px solid #2795de; border: 4px solid #2795de;
color: #2795de; color: #2795de;
box-sizing: border-box; box-sizing: border-box;
padding: 0.3em; padding: 1em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.5em; gap: 0.5em;
} }
.form_main fieldset {
.form_main > fieldset {
text-align: start; text-align: start;
border: 4px solid #2795de; border: 4px solid #2795de;
background-color: rgb(0, 0, 0, 0.3);
box-sizing: border-box; box-sizing: border-box;
padding: 0.5em; padding: 0.5em;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 0.6em; gap: 1em;
} }
.form_main fieldset label {
label {
display: inline-block; display: inline-block;
font-weight: bold; font-weight: bold;
width: 6em; width: 6em;
} }
.form_btn {
color: #fff;
cursor: pointer;
border: 2px solid #2795de;
border-radius: 0.4em;
font-size: 16px;
padding: 0.4em;
height: 100%;
}
.form_btn:hover {
background-color: #1769aa;
}
.flex_responsive { .flex_responsive {
display: flex; display: flex;
@ -208,6 +227,10 @@ textarea {
padding: 0 0.2em; padding: 0 0.2em;
vertical-align: middle; vertical-align: middle;
} }
input[type="radio"] + label {
color: white;
}
textarea { textarea {
width: 98%; width: 98%;
@ -220,10 +243,23 @@ textarea {
position: fixed; position: fixed;
right: 10px; right: 10px;
bottom: 10px; bottom: 10px;
opacity: 0.7;
transition: opacity 0.3s ease-in-out;
}
#subircaja:hover {
opacity: 1;
} }
#subirimg { #subirimg {
width: 64px; width: 64px;
height: 64px; height: 64px;
border-radius: 50%;
border: 2px solid #fff;
background-color: #2795de;
cursor: pointer;
transition: background-color 0.3s ease-in-out;
}
#subirimg:hover {
background-color: #1769aa;
} }
/*********************************************/ /*********************************************/
@ -239,18 +275,12 @@ textarea {
font-size: 1em; font-size: 1em;
} }
main { .main_container {
width: 90%; width: 90%;
} }
.card {
width: 230px;
}
footer { footer {
width: 90%; width: 90%;
} }
.flex_responsive { .flex_responsive {
display: flex; display: flex;
align-items: normal; align-items: normal;

31
Practicas/Practicas HTML/Repaso 2/index.html
View File

@ -23,7 +23,7 @@
</header> </header>
<main> <main class="main_container">
<section id="inicio"> <section id="inicio">
<H1>AlexCG Design</H1> <H1>AlexCG Design</H1>
<h2>Agencia de desarrollo web</h2> <h2>Agencia de desarrollo web</h2>
@ -92,25 +92,25 @@
<form class="form_main" action="./gracias.html" method="get"> <form class="form_main" action="./gracias.html" method="get">
<fieldset> <fieldset>
<div class="flex_responsive"> <div class="flex_responsive">
<label for="nombre">Nombre</label> <label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" placeholder="Escribe tu nombre .." required> <input type="text" name="nombre" id="nombre" placeholder="Escribe tu nombre..." required>
</div> </div>
<div class="flex_responsive"> <div class="flex_responsive">
<label for="correo">Correo</label> <label for="correo">Correo:</label>
<input type="text" name="correo" id="correo" placeholder="Escribe tu correo" required> <input type="email" name="correo" id="correo" placeholder="Escribe tu correo" pattern="[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}" required>
</div> </div>
</fieldset> </fieldset>
<fieldset> <fieldset>
<div> <div>
<label for="asunto">Asunto</label> <label for="asunto">Asunto:</label>
<select name="asunto" id="asunto" required> <select name="asunto" id="asunto" required>
<option value="" disabled selected>-- Selecciona --</option> <option value="" disabled selected>-- Selecciona --</option>
<option value="">opcion 1</option> <option value="opcion1">Opción 1</option>
<option value="">opcion 1</option> <option value="opcion2">Opción 2</option>
<option value="">opcion 1</option> <option value="opcion3">Opción 3</option>
</select> </select>
</div> </div>
<label style="width: auto;">¿Cómo nos ha conocido?</label> <label style="width: auto;">¿Como nos ha conocido?</label>
<div class="flex_responsive"> <div class="flex_responsive">
<div> <div>
<input type="radio" name="radiostats" id="amigo" value="amigo" required> <input type="radio" name="radiostats" id="amigo" value="amigo" required>
@ -129,16 +129,15 @@
<label for="otros">Otros</label> <label for="otros">Otros</label>
</div> </div>
</div> </div>
<label style="width: auto;" for="observaciones">Escribe tu mensaje</label> <label for="observaciones" style="width: auto;">Escribe tu mensaje:</label>
<textarea name="observaciones" id="observaciones" rows="10" required></textarea> <textarea name="observaciones" id="observaciones" rows="5" required></textarea>
<div> <div>
<input type="checkbox" name="politica" id="politica" minlength="10" required> <input type="checkbox" name="politica" id="politica" required>
<label for="politica" style="width: auto;">He leído y acepto <a href="">aviso legal y la <label for="politica" style="width: auto; color: white;">He leído y acepto <a style="color: #2795de;" href="#">aviso legal y la política de privacidad</a></label>
politica de privacidad</a> </label>
</div> </div>
</fieldset> </fieldset>
<div> <div>
<input class="btn" type="submit" value="Ok"> <input class="form_btn" type="submit" value="Ok">
</div> </div>
</form> </form>
</section> </section>