Optimizacion formulario
This commit is contained in:
parent
1afaa1b1c0
commit
07bb166f86
|
|
@ -16,6 +16,7 @@ body {
|
|||
background-size: cover;
|
||||
}
|
||||
|
||||
/* Estilos para la cabecera con menu */
|
||||
#main_header {
|
||||
width: 100%;
|
||||
height: 120px;
|
||||
|
|
@ -34,13 +35,11 @@ body {
|
|||
#main_header > img {
|
||||
height: 100px;
|
||||
}
|
||||
|
||||
.menu {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.menu li {
|
||||
float: left;
|
||||
margin: 0 5px;
|
||||
|
|
@ -54,13 +53,17 @@ body {
|
|||
text-shadow: 1px 1px 1px black;
|
||||
}
|
||||
|
||||
|
||||
/* Ajustes para el posicionamento en las anclas del menu*/
|
||||
#inicio,
|
||||
#equipo,
|
||||
#contacto {
|
||||
scroll-margin-top: 150px;
|
||||
}
|
||||
|
||||
main {
|
||||
|
||||
/* Ajustes generales para contenedor general de la web*/
|
||||
.main_container {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
|
|
@ -71,21 +74,20 @@ main {
|
|||
text-align: center;
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
}
|
||||
|
||||
h1 {
|
||||
.main_container h1 {
|
||||
font-size: 4em;
|
||||
font-style: italic;
|
||||
font-weight: lighter;
|
||||
text-shadow: 1px 1px 2px black;
|
||||
}
|
||||
|
||||
h2 {
|
||||
.main_container h2 {
|
||||
font-size: 2em;
|
||||
font-style: italic;
|
||||
font-weight: lighter;
|
||||
text-shadow: 1px 1px 2px black;
|
||||
}
|
||||
|
||||
/* Ajustes generales para todas las secciones de la web */
|
||||
section {
|
||||
margin-top: 2em;
|
||||
display: flex;
|
||||
|
|
@ -98,6 +100,7 @@ section p {
|
|||
text-align: left;
|
||||
}
|
||||
|
||||
/* Ajuste especifico para la seccion equipo */
|
||||
.equipo-content {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
|
@ -105,17 +108,16 @@ section p {
|
|||
gap: 2em;
|
||||
}
|
||||
|
||||
/* Estilos para las tarjetas de la seccion equipo*/
|
||||
.card {
|
||||
width: 320px;
|
||||
padding: 0.5em;
|
||||
border: 4px solid #2795de;
|
||||
color: #2795de;
|
||||
}
|
||||
.card > img {
|
||||
margin-top: 1em;
|
||||
max-height: 320px;
|
||||
max-height: 300px;
|
||||
}
|
||||
|
||||
.card-details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -129,12 +131,14 @@ section p {
|
|||
color: white;
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
.card-details span {
|
||||
color: #2795de;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Estilos del footer */
|
||||
footer {
|
||||
width: 70%;
|
||||
margin: auto;
|
||||
|
|
@ -146,7 +150,6 @@ footer {
|
|||
padding: 1em;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
footer img {
|
||||
width: 80%;
|
||||
max-width: 200px;
|
||||
|
|
@ -165,32 +168,48 @@ footer p {
|
|||
height: 48px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/*Estilos para el Formulario*/
|
||||
.form_main {
|
||||
width: 100%;
|
||||
border: 4px solid #2795de;
|
||||
color: #2795de;
|
||||
box-sizing: border-box;
|
||||
padding: 0.3em;
|
||||
padding: 1em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.5em;
|
||||
}
|
||||
|
||||
.form_main > fieldset {
|
||||
.form_main fieldset {
|
||||
text-align: start;
|
||||
border: 4px solid #2795de;
|
||||
background-color: rgb(0, 0, 0, 0.3);
|
||||
box-sizing: border-box;
|
||||
padding: 0.5em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.6em;
|
||||
gap: 1em;
|
||||
}
|
||||
|
||||
label {
|
||||
.form_main fieldset label {
|
||||
display: inline-block;
|
||||
font-weight: bold;
|
||||
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 {
|
||||
display: flex;
|
||||
|
|
@ -208,6 +227,10 @@ textarea {
|
|||
padding: 0 0.2em;
|
||||
vertical-align: middle;
|
||||
}
|
||||
input[type="radio"] + label {
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
textarea {
|
||||
width: 98%;
|
||||
|
|
@ -220,10 +243,23 @@ textarea {
|
|||
position: fixed;
|
||||
right: 10px;
|
||||
bottom: 10px;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
#subircaja:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
#subirimg {
|
||||
width: 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;
|
||||
}
|
||||
|
||||
main {
|
||||
.main_container {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.card {
|
||||
width: 230px;
|
||||
}
|
||||
|
||||
footer {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
.flex_responsive {
|
||||
display: flex;
|
||||
align-items: normal;
|
||||
|
|
|
|||
|
|
@ -23,7 +23,7 @@
|
|||
</header>
|
||||
|
||||
|
||||
<main>
|
||||
<main class="main_container">
|
||||
<section id="inicio">
|
||||
<H1>AlexCG Design</H1>
|
||||
<h2>Agencia de desarrollo web</h2>
|
||||
|
|
@ -92,25 +92,25 @@
|
|||
<form class="form_main" action="./gracias.html" method="get">
|
||||
<fieldset>
|
||||
<div class="flex_responsive">
|
||||
<label for="nombre">Nombre</label>
|
||||
<input type="text" name="nombre" id="nombre" placeholder="Escribe tu nombre .." required>
|
||||
<label for="nombre">Nombre:</label>
|
||||
<input type="text" name="nombre" id="nombre" placeholder="Escribe tu nombre..." required>
|
||||
</div>
|
||||
<div class="flex_responsive">
|
||||
<label for="correo">Correo</label>
|
||||
<input type="text" name="correo" id="correo" placeholder="Escribe tu correo" required>
|
||||
<label for="correo">Correo:</label>
|
||||
<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>
|
||||
</fieldset>
|
||||
<fieldset>
|
||||
<div>
|
||||
<label for="asunto">Asunto</label>
|
||||
<label for="asunto">Asunto:</label>
|
||||
<select name="asunto" id="asunto" required>
|
||||
<option value="" disabled selected>-- Selecciona --</option>
|
||||
<option value="">opcion 1</option>
|
||||
<option value="">opcion 1</option>
|
||||
<option value="">opcion 1</option>
|
||||
<option value="opcion1">Opción 1</option>
|
||||
<option value="opcion2">Opción 2</option>
|
||||
<option value="opcion3">Opción 3</option>
|
||||
</select>
|
||||
</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>
|
||||
<input type="radio" name="radiostats" id="amigo" value="amigo" required>
|
||||
|
|
@ -129,16 +129,15 @@
|
|||
<label for="otros">Otros</label>
|
||||
</div>
|
||||
</div>
|
||||
<label style="width: auto;" for="observaciones">Escribe tu mensaje</label>
|
||||
<textarea name="observaciones" id="observaciones" rows="10" required></textarea>
|
||||
<label for="observaciones" style="width: auto;">Escribe tu mensaje:</label>
|
||||
<textarea name="observaciones" id="observaciones" rows="5" required></textarea>
|
||||
<div>
|
||||
<input type="checkbox" name="politica" id="politica" minlength="10" required>
|
||||
<label for="politica" style="width: auto;">He leído y acepto <a href="">aviso legal y la
|
||||
politica de privacidad</a> </label>
|
||||
<input type="checkbox" name="politica" id="politica" required>
|
||||
<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>
|
||||
</div>
|
||||
</fieldset>
|
||||
<div>
|
||||
<input class="btn" type="submit" value="Ok">
|
||||
<input class="form_btn" type="submit" value="Ok">
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user