Scribd
Cargar
138 vistas28 páginas

5 18 Taller Retos HTML CSS Bootstrap

El documento presenta las instrucciones para un taller sobre desarrollo front-end con HTML, CSS y Bootstrap. El taller consiste en dos retos: 1) crear un formulario con efectos al pasar el cursor y recibir foco y 2) crear otro formulario con líneas que cambien de color al pasar el cursor y recibir foco. Se proveen consejos pero no soluciones para que los participantes resuelvan los retos por su cuenta.

Cargado por

Samuel Barrantes
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
138 vistas28 páginas

5 18 Taller Retos HTML CSS Bootstrap

El documento presenta las instrucciones para un taller sobre desarrollo front-end con HTML, CSS y Bootstrap. El taller consiste en dos retos: 1) crear un formulario con efectos al pasar el cursor y recibir foco y 2) crear otro formulario con líneas que cambien de color al pasar el cursor y recibir foco. Se proveen consejos pero no soluciones para que los participantes resuelvan los retos por su cuenta.

Cargado por

Samuel Barrantes
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 28

Servicio Nacional de Aprendizaje

Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

Guia 5. Desarrollo Front End.


TALLER No. 4
RETO HTML-CSS-BOOTSTRAP

ACTIVIDADES POR DESARROLLAR:


Indicaciones Generales: Para cada uno de los puntos debes ir guardando el código y
pantallazo del resultado en un archivo web, al final debes tener un solo archivo con todos
los ejercicios desarrollados y los deberás guardar en formato pdf

RETO HTML – CSS - BOOTSTRAP


1. Crea una página web con un formulario que tenga el mismo aspecto que la siguiente
imagen:

En la imagen animada se muestra:

● El efecto que se debe configurar cuando el cursor del ratón se sitúe encima de un control
del formulario: se debe destacar con un fondo de color rojo.
● El efecto que se debe configurar cuando un control del formulario reciba el foco del
teclado: se debe destacar con un fondo de color amarillo.

GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

Además:

● Contenido de la página centrado.


● Título y subtítulo: tipo de letra Georgia, serif.
● Tipo de letra principal: Arial, Helvetica, sans-serif.
● Leyendas (legend) y etiquetas: negrita.

Consejo: existen muchas formas de resolver este ejercicio, lo normal es que tu solución no se
parezca a la solución que te proporcionamos.
Solución:

<!DOCTYPE html>

<html lang="es">
<head>
<meta charset="utf-8" />
<title>Registro - iDESWEB</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
width: 90%;
margin: 0 auto;
}
header {
text-align: center;
}
h1, h2 {
font-family: Georgia, serif;
}
h1 {
font-size: 3em;
}
fieldset {
margin: 1em auto;
}
legend {
font-size: 1.2em;
font-weight: bold;
text-transform: uppercase;
}
label {
GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

font-weight: bold;
display: block;
}
input:focus, select:focus {
background-color: yellow;
}
input:hover, select:hover {
background-color: red;
}
#boton-crear {
font-size: 2em;
padding: 0.5em;
}
.inline {
display: inline;
}
.centrado {
text-align: center;
}
</style>
</head>
<body>
<header>
<h1>iDESWEB</h1>
<h2>Formulario de registro</h2>
</header>

<form action="" method="post">


<fieldset>
<legend>¿Quién eres?</legend>
<p>
<label for="nombre">Nombre</label>
<input type="text" name="nombre" id="nombre" />
<label for="apellidos">Apellidos</label>
<input type="text" name="apellidos" id="apellidos" />
</p>

<p>
<label for="nombre">Correo electrónico</label>
<input type="text" name="correo" id="correo" />
GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

</p>

<p>
<label for="dia">Fecha de nacimiento</label>
<select name="dia" id="dia">
<option>Día</option>
</select>

<select name="mes" id="mes">


<option>Mes</option>
</select>

<select name="anyo" id="anyo">


<option>Año</option>
</select>
</p>
</fieldset>

<fieldset>
<legend>¿De dónde eres?</legend>
<p>
<label for="ciudad">Ciudad</label>
<input type="text" name="ciudad" id="ciudad" />
</p>

<p>
<label for="cp">Código postal</label>
<input type="text" name="cp" id="cp" />
</p>

<p>
<label for="pais">País</label>
<select name="pais" id="pais">
<option>País</option>
</select>
</p>
</fieldset>

<fieldset>
<legend>¿Cómo quieres iniciar sesión?</legend>
GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

<p>
<label for="nomusu">Nombre de usuario</label>
<input type="text" name="nomusu" id="nomusu" />
</p>

<p>
<label for="contrasenya">Contraseña</label>
<input type="password" name="contrasenya" id="contrasenya" />
</p>

<p>
<label for="repcontrasenya">Vuelve a escribir la contraseña</label>
<input type="password" name="repcontrasenya" id="repcontrasenya" />
</p>
</fieldset>

<fieldset>
<legend>Condiciones de registro</legend>
<p>
<label>Deseo recibir ofertas de iDESWEB</label>
<input type="radio" name="ofertas" id="ofertas1" value="1" /> <label for="ofertas1"
class="inline">Una vez al día</label>
<input type="radio" name="ofertas" id="ofertas2" value="2" /> <label for="ofertas2"
class="inline">Una vez a la semana</label>
<input type="radio" name="ofertas" id="ofertas3" value="3" /> <label for="ofertas3"
class="inline">Una vez al mes</label>
</p>

<p>
<input type="checkbox" name="acepto" id="acepto" />
<label for="acepto" class="inline">Acepto el acuerdo de servicios, la declaración de privacidad y la
declaración de uso de cookies</label>
</p>
</fieldset>

<p class="centrado">
<input type="submit" value="Crear cuenta" id="boton-crear" />
</p>

</form>
GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

</body>
</html>

GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

2. Crea una página web con un formulario que tenga el mismo aspecto que la siguiente
imagen:

En la imagen animada se muestra:

● El efecto que se debe configurar cuando el cursor del ratón se sitúe encima de una línea
del formulario.
● El efecto que se debe configurar cuando un control del formulario reciba el foco del
teclado.

Consejo: existen muchas formas de resolver este ejercicio, lo normal es que tu solución no
se parezca a la solución que te proporcionamos.

<html>

GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

<head>
<title>Formulario de registro</title>
<meta charset="utf-8"/>
<style>
select{border-color: #FFF;}
</style>
<style>
select{border-bottom: 2px solid black;}
</style>
<style>
select{background-color: #FFF;}
</style>
<style type="text/css">
H1 {text-align: left;}
</style>
<style type="text/css">
H2{text-align: left;}
</style>
<style type="text/css">
H3{text-align: right;}
</style>
<style type="text/css">
h1{border-bottom: 0.5px solid #6f6f6f;}
</style>
<style>
input:focus, select:focus
{background-color: white;}
input:hover, select:hover {border-color: red;}
</style>
<style type="text/css">
input{border: 2px solid #FFF;}
</style>
<style type="text/css">
input{border-bottom: 2px solid rgb(0, 0, 0);}
</style>
<style>
h3{text-align:bottom, center;}
</style>
</head>
<body>
GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

<p><h1>Formulario de registro</h1></p>
<table>
<tr name="Nombreyapellidos">
<th rowspan="7">
<h3>Nombre y apellidos</h3>
</th>
</tr>
<tr>
<td>
<input type="text" name="nombre">
</td>
</tr>
<tr>
<td>
<p>Nombre</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="primer apellido">
</td>
</tr>
<tr>
<td>
<p>Primer apellido</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="segundo apellido">
</td>
</tr>
<tr>
<td>
<p>Segundo apellido</p>
</td>
</tr>
<tr>
<th rowspan="7">
<h3><p>Direcion</p></h3>
GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

</th>
</tr>
<tr>
<td>
<input type="text" name="direccion">
</td>
</tr>
<tr>
<td>
<p>Calle, numero, piso, puerta</p>
</td>
</tr>
<tr>
<td colspan="2">
<input type="number" name="codigo postal">
</td>
<td>
<input type="text" name="municipio">
</td>
</tr>
<tr>
<td colspan="2">
<p>Codigo postal</p>
</td>
<td>
<p>Municipio</p>
</td>
</tr>
<tr>
<td colspan="2">
<select style="width: 120px; height: 30px;">
<option value="1"></option>
<option value="2">Barcelona</option>
<option value="3">Ciudad Real</option>
<option value="4">Córdoba</option>
<option value="5">León</option>
</select>
</td>
<td>
<select style="width: 200px; height: 30px">
GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

<option value="1"></option>
<option value="2">España</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<p>Provincia</p>
</td>
<td>
<p>Pais</p>
</td>
</tr>
<tr>
<td>
<h3>Email</h3>
</td>
<td>
<input type="email" name="email">
</td>
</tr>
<tr>
<td>
<h3>Telefono</h3>
</td>
<td colspan="4">
<input type="number" name="Fijo">
<p>Fijo</p>
</td>
<td>
<input type="number" name="movil">
<p>Movil</p>
</td>
<td>
<div style="text-align: q;">
<button style="position: absolute;top: 50%;">Registrarse</button>
</td>
</tr>
</div>
</table>
GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

</body>
</html>

3. Escribe el código fuente HTML y CSS para obtener el siguiente formulario:

Debes tener en cuenta los siguientes aspectos:

● Agregar una imagen de fondo


GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

● Usa sombras en el div del login


● Los colores del div y las líneas de los bordes los puedes modificar según desees

Solución:

<!DOCTYPE html>
<html lang="es" dir="ltr">

<head>
<meta charset="utf-8">
<title>Formulario Login</title>
<link rel="stylesheet" href="estilo login1.css">
</head>

<body>
<header>
<input type="checkbox" id="btn-menu">
<label for="btn-menu"> <img src="menu arrow.png"></label>

<nav class="menu">
<ul>
<li><a href="pagina principal.html">INICIO</a></li>
<li><a href="Servicios.html">SERVICIO</a></li>
<li><a href="Mision.html">MISIÓN</a></li>
<li><a href="Vision.html">VISIÓN</a></li>
</ul>
</nav>
</header>

<section class="form-login">

<h5>Formulario Login</h5>
<form method='post' action='Validar.php'>
<input class="controls" type="text" name="usuario" value="" placeholder="Usuario">
<input class="controls" type="password" name="contrasena" value=""
placeholder="contrasena">

GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

<input class="buttons" href="pagina admin.html" type="submit" name="" value="Inicio">


</form>

</section>

</body>
</html>

4. Entra a la siguiente página web: https://www.goclases.com/sistema-administrativo-para-


control-de-colegios.php

Teniendo en cuenta la navegabilidad de la página principal y el botón de Registrarse, Escribe el


código que permita obtener un resultado similar.

Nota: Solo página principal y registro similar a las imágenes.

GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

INICIO
<!DOCTYPE html>

<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Punto 4 Taller retos</title>

<link rel="stylesheet" href="styles.css">


</head>
<body>
<header class="header">
<nav class="nav">
<a href="#" class="logo nav-link">Logo</a>
<ul class="nav-menu">
<li class="nav-menu-item">
<a href="#" class="nav-menu-link nav-link">Inicio</a></li>
<li class="nav-menu-item">
<a href="#" class="nav-menu-link nav-link">Contáctanos</a></li>
<li class="nav-menu-item">
<a href="C:\xampp\Archivos y pruebas\Punto 4 html-css-
bootstrap\Login\Login.html" class="nav-menu-link nav-link">Iniciar Sesión</a></li>
<li class="nav-menu-item">
<a href="#" class="nav-menu-link nav-link">Registrarse</a></li>
</ul>
</header>
<div>
<img src="C:\xampp\Archivos y pruebas\Punto 4 html-css-
bootstrap\Recursos\imagen.png"width="400px" style="float: left;" />
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

</div>
<p></p>
</body>

CSS INICIO
*{

margin: 0;
box-sizing: border-box;
}

body {
font-family: sans-serif;
padding: 90px 20px 0;
}

.header {
background-color: #0769e9;
height: 80px;
position: fixed;
width: 100%;

GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

top: 0;
left: 0;
}

.nav {
display: flex;
justify-content: space-between;
max-width: 992px;
margin: 0 auto;
}

.nav-link {
color: white;
text-decoration: none;
}

.logo {
font-size: 30px;
font-weight: bold;
padding: 0 40px;
line-height: 80px;
}

.nav-menu {
display: flex;
margin-right: 40px;
list-style: none;
}

.nav-menu-item {
font-size: 18px;
margin: 0 10px;
line-height: 80px;
text-transform: uppercase;
width: max-content;
}

.nav-menu-link {
padding: 8px 12px;
border-radius: 3px;
GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

}
.nav-menu-link:hover {
background-color: #034574;
transition: 0.5s;
}

LOGIN

<!DOCTYPE html>

<html>
<title>Login</title>
<style>>@import url(https://fonts.googleapis.com/css?family=Roboto:300);

.login-page {
width: 360px;
padding: 8% 0 0;
margin: auto;
}
.form {
position: relative;
z-index: 1;
background: #FFFFFF;
max-width: 360px;
margin: 0 auto 100px;
padding: 45px;
text-align: center;
box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}
.form input {
font-family: "Roboto", sans-serif;
outline: 0;
background: #f2f2f2;
width: 100%;
border: 0;
margin: 0 0 15px;
padding: 15px;
box-sizing: border-box;
font-size: 14px;
}

GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

.form button {
font-family: "Roboto", sans-serif;
text-transform: uppercase;
outline: 0;
background: #13232f;
width: 100%;
border: 0;
padding: 15px;
color: #FFFFFF;
font-size: 14px;
-webkit-transition: all 0.3 ease;
transition: all 0.3 ease;
cursor: pointer;
}
.form button:hover,.form button:active,.form button:focus {
background: #0c7257;
}
.form .message {
margin: 15px 0 0;
color: #b3b3b3;
font-size: 12px;
}
.form .message a {
color: #13232f;
text-decoration: none;
}
.form .register-form {
display: none;
}
.container {
position: relative;
z-index: 1;
max-width: 300px;
margin: 0 auto;
}
.container:before, .container:after {
content: "";
display: block;
clear: both;
}
GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

.container .info {
margin: 50px auto;
text-align: center;
}
.container .info h1 {
margin: 0 0 15px;
padding: 0;
font-size: 36px;
font-weight: 300;
color: #1a1a1a;
}
.container .info span {
color: #4d4d4d;
font-size: 12px;
}
.container .info span a {
color: #000000;
text-decoration: none;
}
.container .info span .fa {
color: #EF3B3A;
}
body {
background: #13232f; /* fallback for old browsers */
background: -webkit-linear-gradient(right, #13232f, #0f79aa);
background: -moz-linear-gradient(right, #13232f, #0f79aa);
background: -o-linear-gradient(right, #13232f, #0f79aa);
background: linear-gradient(to left, #13232f, #0f79aa);
font-family: "Roboto", sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
</style>
<body>
<div class="login-page">
<div class="form">
<form class="register-form">
<input type="text" placeholder="name"/>
<input type="password" placeholder="password"/>
<input type="text" placeholder="email address"/>
GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

<button>crear</button>
<p class="message">Ya registrado? <a href="#">Inicia Sesión</a></p>
</form>
<form class="login-form">
<input type="text" placeholder="username"/>
<input type="password" placeholder="password"/>
<button>login</button>
<p class="message">No registrado? <a href="#">Crear una cuenta</a></p>
</form>
</div>
</div>
</body>
</html>

GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

5. Usando Bootstrap realiza el siguiente formulario de registro.

✔ El formulario debe tener un título (h1).


✔ El formulario debe contar como mínimo con los siguientes elementos:
● Email
● Contraseña
● Confirmación de contraseña
● Dropdown de países
● Checkbox de "recordarme"
● Botón de envío de formulario
● Validar Correo Electrónico y que las contraseñas coincidan

GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

Registro
<!DOCTYPE html>

<html>
<head>
<meta chartset="utf8"/>
<title>Register Form</title>
</head>
<body>
<div class="container">

<form id="signup">

<div class="header">

<h3>Sign Up</h3>

<p>You want to fill out this form</p>

</div>

<div class="sep"></div>

<div class="inputs">

<input type="email" placeholder="e-mail" autofocus />

<input type="password" placeholder="Password" />

<div class="checkboxy">
<input name="cecky" id="checky" value="1" type="checkbox" /><label
class="terms">Remember my password</label>
</div>

<a id="submit" href="#">SIGN UP</a>

</div>

</form>
GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

</div>
</body>
</html>

CSS
body {

background-image: url(http://kreativo.se/backlogin.jpg);
font-family: "Helvetica Neue", Helvetica, Arial;
padding-top: 20px;
}

.container {
width: 406px;
max-width: 406px;
margin: 0 auto;
}

#signup {
padding: 0px 25px 25px;
background: #fff;
box-shadow:
0px 0px 0px 5px rgba( 255,255,255,0.4 ),
0px 4px 20px rgba( 0,0,0,0.33 );
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
display: table;
position: static;
}

#signup .header {
margin-bottom: 20px;
}

#signup .header h3 {
color: #333333;
font-size: 24px;

GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

font-weight: bold;
margin-bottom: 5px;
}

#signup .header p {
color: #8f8f8f;
font-size: 14px;
font-weight: 300;
}

#signup .sep {
height: 1px;
background: #e8e8e8;
width: 406px;
margin: 0px -25px;
}

#signup .inputs {
margin-top: 25px;
}

#signup .inputs label {


color: #8f8f8f;
font-size: 12px;
font-weight: 300;
letter-spacing: 1px;
margin-bottom: 7px;
display: block;
}

input::-webkit-input-placeholder {
color: #b5b5b5;
}

input:-moz-placeholder {
color: #b5b5b5;
}

#signup .inputs input[type=email], input[type=password] {


background: #f5f5f5;
GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

font-size: 0.8rem;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
border: none;
padding: 13px 10px;
width: 330px;
margin-bottom: 20px;
box-shadow: inset 0px 2px 3px rgba( 0,0,0,0.1 );
clear: both;
}

#signup .inputs input[type=email]:focus, input[type=password]:focus {


background: #fff;
box-shadow: 0px 0px 0px 3px #fff38e, inset 0px 2px 3px rgba( 0,0,0,0.2 ), 0px 5px 5px
rgba( 0,0,0,0.15 );
outline: none;
}

#signup .inputs .checkboxy {


display: block;
position: static;
height: 25px;
margin-top: 10px;
clear: both;
}

#signup .inputs input[type=checkbox] {


float: left;
margin-right: 10px;
margin-top: 3px;
}

#signup .inputs label.terms {


float: left;
font-size: 14px;
font-style: italic;
}

#signup .inputs #submit {


GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

width: 100%;
margin-top: 20px;
padding: 15px 0;
color: #fff;
font-size: 14px;
font-weight: 500;
letter-spacing: 1px;
text-align: center;
text-decoration: none;
background: -moz-linear-gradient(
top,
#b9c5dd 0%,
#a4b0cb);
background: #b9c5dd
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #737b8d;
-moz-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
-webkit-box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
box-shadow:
0px 5px 5px rgba(000,000,000,0.1),
inset 0px 1px 0px rgba(255,255,255,0.5);
text-shadow:
0px 1px 3px rgba(000,000,000,0.3),
0px 0px 0px rgba(255,255,255,0);
display: table;
position: static;
clear: both;
}

#signup .inputs #submit:hover {


background: -moz-linear-gradient(
top,
#a4b0cb 0%,
#b9c5dd)
GC-F -005 V. 05
Servicio Nacional de Aprendizaje
Formato Taller
Centro de Gestión de Mercados, Logística y Tecnologías de la Información.

(
linear, left top, left bottom,
from(#a4b0cb),
to(#b9c5dd);

GC-F -005 V. 05

También podría gustarte