Skip to content

Instantly share code, notes, and snippets.

@tacitochaves

tacitochaves/login.html

Created April 6, 2014 23:51
Show Gist options
  • Save tacitochaves/10012734 to your computer and use it in GitHub Desktop.
Save tacitochaves/10012734 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
login.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Acesso ao Sistema</title>
</head>
<style>
body {
background-color: #11a6d4;
}
#login-box {
background-color: #1992b7;
width: 480px;
height: 260px;
margin: 140px auto 0px;
border-radius: 5px;
}
#login-box-interno {
width: 460px;
height: 240px;
background-color: #fdfdfd;
position: absolute;
margin: 10px;
border-radius: 5px;
box-shadow: 0px 0px 5px black;
overflow: hidem;
}
#login-box-label {
height: 45px;
text-align: center;
font: bold 14px/45px sans-serif;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background: #fcfff4; /* Old browsers */
background: -moz-linear-gradient(top, #fcfff4 0%, #e8e8e5 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcfff4), color-stop(100%,#e8e8e5)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #fcfff4 0%,#e8e8e5 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #fcfff4 0%,#e8e8e5 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #fcfff4 0%,#e8e8e5 100%); /* IE10+ */
background: linear-gradient(to bottom, #fcfff4 0%,#e8e8e5 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#e8e8e5',GradientType=0 ); /* IE6-9 */
border-bottom: 1px solid white;
box-shadow: 1px 0px 3px black;
color: $555555;
text-shadow: 1px 0px 1px white;
}
.input-div {
margin: 20px;
padding: 5px;
background-color: #f2f5f7;
border-radius: 3x;
}
.input-div input{
width: 403px;
height: 35px;
padding-left: 5px;
font: normal 13px sans-serif;
color: #aeaeae;
border-radius: 3px;
border: 1px solid #bfc4c6;
outline: none;
}
.input-div:hover {
background-color: #e0f1fc;
}
.input-div:hover input {
border-color: #7dc6dd;
}
#input-senha {
margin-top: -10px;
}
#botoes {
width: 340px;
margin-left: 25px;
}
#botao {
float: right;
background-color: red;
padding: 5px 20px;
font: bold 12px sans-serif;
border-radius: 20px;
text-shadow: 0px 1px white;
border: 1px solid #9eb9c3;
background: #edf6f9; /* Old browsers */
background: -moz-linear-gradient(top, #edf6f9 0%, #d7dee3 100%, #d7dee3 100%, #e5ebee 100%, #d7dee3 100%, #cde5ee 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#edf6f9), color-stop(100%,#d7dee3), color-stop(100%,#d7dee3), color-stop(100%,#e5ebee), color-stop(100%,#d7dee3), color-stop(100%,#cde5ee)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #edf6f9 0%,#d7dee3 100%,#d7dee3 100%,#e5ebee 100%,#d7dee3 100%,#cde5ee 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #edf6f9 0%,#d7dee3 100%,#d7dee3 100%,#e5ebee 100%,#d7dee3 100%,#cde5ee 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #edf6f9 0%,#d7dee3 100%,#d7dee3 100%,#e5ebee 100%,#d7dee3 100%,#cde5ee 100%); /* IE10+ */
background: linear-gradient(to bottom, #edf6f9 0%,#d7dee3 100%,#d7dee3 100%,#e5ebee 100%,#d7dee3 100%,#cde5ee 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#edf6f9', endColorstr='#cde5ee',GradientType=0 ); /* IE6-9 */
color: #527988;
box-shadow: 0px 0px 10px #c9c9c9;
}
#botao:hover{
background: #cde5ee; /* Old browsers */
background: -moz-linear-gradient(top, #cde5ee 0%, #d7dee3 0%, #e5ebee 0%, #d7dee3 0%, #d7dee3 0%, #edf6f9 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#cde5ee), color-stop(0%,#d7dee3), color-stop(0%,#e5ebee), color-stop(0%,#d7dee3), color-stop(0%,#d7dee3), color-stop(100%,#edf6f9)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #cde5ee 0%,#d7dee3 0%,#e5ebee 0%,#d7dee3 0%,#d7dee3 0%,#edf6f9 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #cde5ee 0%,#d7dee3 0%,#e5ebee 0%,#d7dee3 0%,#d7dee3 0%,#edf6f9 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #cde5ee 0%,#d7dee3 0%,#e5ebee 0%,#d7dee3 0%,#d7dee3 0%,#edf6f9 100%); /* IE10+ */
background: linear-gradient(to bottom, #cde5ee 0%,#d7dee3 0%,#e5ebee 0%,#d7dee3 0%,#d7dee3 0%,#edf6f9 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cde5ee', endColorstr='#edf6f9',GradientType=0 ); /* IE6-9 */
cursor: pointer;
}
#lembrar-senha{
font: normal 12px sans-serif;
}
</style>
<body>
<div id="login-box">
<div id="login-box-interno" >
<div id="login-box-label" > CRI - Cadastramento de Recursos Informatizados </div>
<div class="input-div" id="input-usuario">
<input type="text" value="Usuário ou E-mail"/>
</div>
<div class="input-div" id="input-senha">
<input type="text" value="Senha"/>
</div>
<div id="botoes">
<div id="botao">Login</div>
<div id="lembrar-senha"><input type="checkbox"/>Lembrar minha senha</div>
</div>
</div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment