Created
March 18, 2016 06:17
-
-
Save Min11Benja/8279b8845d75e698b5c5 to your computer and use it in GitHub Desktop.
100 days UI Challange - Day 1: Login & Register Form
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<div class="imagen-fondo"> | |
<div class="inner-box"> | |
<div class="tabs"> | |
<div class="tab"> | |
<input type="radio" id="tab-1" name="tab-group-1" checked> | |
<label for="tab-1">INICIAR SESSION</label> | |
<div class="content" id="tab-content1"> | |
<h3>NOMBRE DE USUARIO</h3> | |
<br> | |
<input type="text" name="usr-nm"><br> | |
<h3>CONTRASEÑA</h3> | |
<br> | |
<input type="password" name="psw"><br> | |
<input type="checkbox" name="remember" value="yes" checked> | |
<h3>Mantenme con session iniciada</h3><br> | |
<button type="button">INICIAR SESSION</button> | |
<hr> | |
<a href="#"><h3>¿Olvidaste tu contraseña?</h3></a> | |
</div> | |
<!--FIN content---> | |
</div> | |
<!--FIN tab---> | |
<div class="tab"> | |
<input type="radio" id="tab-2" name="tab-group-1"> | |
<label for="tab-2">REGISTRATE</label> | |
<div class="content" id="tab-content2"> | |
<h3>NOMBRE DE USUARIO</h3> | |
<br> | |
<input type="text" name="usr-nm"><br> <h3>CORREO</h3> | |
<br> | |
<input type="text" name="usr-nm"><br> <h3>CONTRASEÑA</h3> | |
<br> | |
<input type="password" name="psw"><br> <h3>CONFIRMAR CONTRASEÑA</h3> | |
<br> | |
<input type="password" name="psw"><br> | |
<button type="button">REGISTRARME</button> | |
<hr> | |
<a href="#"><h3>¿Ya tienes cuenta? Inicia Session Aqui</h3></a> | |
</div> | |
<!--FIN content---> | |
</div> | |
<!--FIN tab---> | |
</div> | |
<!--FIN tabs---> | |
</div> | |
<!--FIN imagen-fondo---> | |
</div> | |
<!--FIN inner-box---> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
body { | |
/*#1161ed;*/ | |
font-family: 'Ubuntu', sans-serif; | |
/*Google Fonts*/ | |
background-color: #eee; | |
} | |
.imagen-fondo { | |
box-shadow: 2px 23px 65px #888888; | |
/*sombra*/ | |
width: 29em; | |
height: 40em; | |
border: 3px solid #fff; | |
margin: 0 auto; | |
background: url(http://s9.postimg.org/l5xng858v/Screen_Shot_2016_03_17_at_7_26_48_PM.png)#aaa; | |
/*color de fondo por si no carga la imagen*/ | |
background-size: cover; | |
background-position: center center; | |
} | |
.inner-box { | |
padding-top: 40px; | |
padding-right: 30px; | |
padding-bottom: 50px; | |
padding-left: 30px; | |
} | |
a { | |
text-align: center; | |
} | |
button { | |
color: #ffffff; | |
background-color: #1161ed; | |
border-radius: 50px; | |
width: 100%; | |
height: 10%; | |
margin-left: auto; | |
margin-right: auto; | |
margin-top: 50px; | |
padding: 10px; | |
border: 0px solid; | |
margin-bottom: 1.5em; | |
} | |
label, | |
hr { | |
color: rgba(255, 255, 255, 0.6); | |
font-size: 1.1em; | |
} | |
h3 { | |
color: rgba(255, 255, 255, 0.6); | |
font-size: 0.9em; | |
} | |
.tabs { | |
position: relative; | |
min-height: 420px; | |
clear: both; | |
margin: 25px 0; | |
} | |
.tab { | |
float: left; | |
} | |
.tab label { | |
padding: 10px; | |
margin-left: -1px; | |
position: relative; | |
left: 1px; | |
} | |
.tab [type=radio] { | |
display: none; | |
} | |
.content { | |
box-sizing: border-box; | |
position: absolute; | |
top: 28px; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
padding: 20px; | |
/*aqui*/ | |
display: none; | |
} | |
[type=radio]:checked ~ label { | |
color: #ffffff; | |
border-bottom: 2px solid #1161ed; | |
z-index: 2; | |
} | |
[type=radio]:checked ~ label ~ .content { | |
z-index: 1; | |
display: block; | |
} | |
input[type="text"], | |
input[type="password"] { | |
border-radius: 50px; | |
background: rgba(255, 255, 255, 0.2); | |
width: 80%; | |
height: 4%; | |
margin-left: auto; | |
margin-right: auto; | |
padding: 5px; | |
border: 0px solid; | |
} | |
*:focus { | |
outline-width: 1px; | |
outline-style: dashed; | |
outline-color: #aaa; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment