![[Dark]Doki-.](https://2img.net/u/1717/45/34/10/avatars/20-0.jpg)
Página de login Qua 19 Mar 2014 - 21:10
[Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]
Nome do Arquivo: Página de loginAutor: Creative3x. e eu por passar para forumeiros u.u pq sou lindão de gostoso.
Funcionalidade: Todas as versões
Categoria: Recursos de Outros Autores
Apenas adicionem isso á uma página HTML:
- Código:
<!DOCTYPE html>
<html>
<head>
<title>Login</title>
<!-- stylesheet -->
<link rel="shortcut icon" href="http://darknetwork.com.br/servers/favicon.ico" type="image/x-icon"/>
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>
<script type="text/javascript" src="js/jquery.placeholder.min.js"></script>
<script type="text/javascript">
$(function() {
$('.form-login input').placeholder({force: true});
});
</script>
<script type="text/javascript" src="http://www.okilla.com/js/ga.js"></script>
</head>
<body>
<style>
#ads-okilla {
text-align: center;
min-width: 180px;
height: auto;
right: 15px;
top: 32px;
position: fixed;
background: rgba(255,255,255,0.7);
box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
z-index: 1000000;
font-family: Arial;
/*min-width: 250px;*/
}
.influads_block {
padding: 20px 0;
}
</style><div id="ads-okilla">
<script type='text/javascript'>(function(){var acc='acc_1048d771_pub';var st='css';var or='s';var e=document.getElementsByTagName('script')[0];var d=document.createElement('script');d.src=('https:' == document.location.protocol ?'https://' : 'http://') +'engine.influads.com/show/'+or+'/'+st+'/'+acc;d.type='text/javascript';d.async=true;d.defer=true; e.parentNode.insertBefore(d,e);})();</script>
</div>
<a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>
<div id="center-container">
<div id="container">
<div id="header">
<div class="title-text">Entrar</div>
<div class="title-social-links">
<ul>
<li><a href="https://www.facebook.com/DarkCheatsHackinGames" title="facebook"><img src="http://darkcheatsbr.com/shareyourlife/images/facebook.png"></a></li>
<li><a href="http://twitter.com/dokigamer27" title="twitter"><img src="http://darkcheatsbr.com/shareyourlife/images/twitter.png"></a></li>
<li><a href="#" title="google plus"><img src="http://darkcheatsbr.com/shareyourlife/images/google-plus.png"></a></li>
</ul>
</div>
</div>
<div id="body">
<div class="form-login">
<form action='/login' id='qstring' name="form_login" method='post'>
<div class="input-email">
<input id="ips_username" type="text" class="input_text" name="username" size="15" tabindex="1">
<span class="add-icon-email"><img src="http://darkcheatsbr.com/shareyourlife/images/email.png"></span>
</div>
<div class="input-password">
<input id="ips_password" type="password" class="input_text" name="password" width="" size="15" tabindex="2" style="display: inline-block; float: left; width: 268px; padding: 15px 8px;">
<span class="add-icon-locked"><img src="http://darkcheatsbr.com/shareyourlife/images/locked.png"></span>
</div>
<input type="submit" name="login" class="input_submit" value="Logar">
</form>
</div>
</div>
<div id="footer">
<div class="bottom-text">Novo por aqui? <a href="/register" class="sign-up">Registre-se</a></div>
</div>
</div>
</div>
</body>
</html>
<style>
@import url(http://fonts.googleapis.com/css?family=Lato:300);
/*
YUI 3.10.3 (build 2fb5187)
Copyright 2013 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/
*/
html{color:#000;background:#FFF}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}
table{border-collapse:collapse;border-spacing:0}
fieldset,img{border:0; margin: 0; padding: 0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}
ol,ul{list-style:none}
caption,th{text-align:left}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}
q:before,q:after{content:''}
abbr,acronym{border:0;font-variant:normal}
sup{vertical-align:text-top}
sub{vertical-align:text-bottom}
input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}
input,textarea,select{*font-size:100%}
legend{color:#000}
/* content */
html,
body {
margin:0;
padding:0;
background: #F2F2F2;
font-family: 'Lato', sans-serif;
font-weight: 400;
}
#center-container {
width:422px;
height:442px;
position:absolute;
left:50%;
top:50%;
margin:-221px 0 0 -211px;
}
#container {
display: inline-block;
background: #FFFFFF;
border: 1px solid #D7D7D7;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#header {
border: 0;
padding: 0;
display: block;
background: #4C6DA6;
height: 60px;
display: block;
overflow: hidden;
-webkit-border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.title-text {
border: 0;
margin: 0 0 0 31px;
padding: 15px 0;
background: transparent;
color: #FFFFFF;
font-size: 22px;
float: left;
display: block;
text-shadow: 1px 1px 1px rgba(0, 0, 0, 1);
}
.title-social-links {
border: 0;
padding: 0;
float: right;
display: block;
}
.title-social-links ul li {
background: url(http://www.okilla.com/example/2013/7/942/images/separator.png) no-repeat;
border: 0;
padding: 20px 25px;
display: block;
float: left;
}
#body {
background: transparent;
margin: 0;
padding: 0;
display: block;
overflow: hidden;
width: 420px;
}
.form-login {
display: block;
overflow: hidden;
width: 350px;
margin: 0 auto;
}
form {
display: block;
float: left;
overflow: hidden;
width: 350px;
margin: 0 auto;
padding: 25px 0 40px 0;
}
.input-email,
.input-password {
float: left;
padding: 0 0 0 1px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
border: 1px solid #D7D7D7;
-moz-box-shadow: 0 0 1px #888;
-webkit-box-shadow: 0 0 1px #888;
box-shadow: 0 0 1px #888;
width: 345px;
background: #f9f9f9;
margin-top: 30px;
}
.add-icon-email,
.add-icon-locked {
float: left;
}
.add-icon-email { margin: 15px 0 0 16px; }
.add-icon-locked { margin: 10px 0 0 20px; }
form input{
display: block;
float: left;
overflow: hidden;
border: 0;
}
form input[type="text"]{
display: inline-block;
float: left;
width: 268px;
padding: 15px 8px;
background: #f9f9f9;
}
form input[type="submit"]{
display: block;
border: 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background: #F3585E;
width: 350px;
font-size: 16px;
color: #FFFFFF;
padding: 15px 90px;
margin: 22px 0 0 1px;
}
#footer {
padding: 0;
display: block;
background: #f3f3f3;
height: 60px;
display: block;
overflow: hidden;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
.bottom-text {
padding: 21px 0;
display: block;
overflow: hidden;
width: 190px;
margin: 0 auto;
}
.bottom-text a {
color: #F35B61;
text-decoration: none;
}
</style>
Demo: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
Última edição por [Dark]Doki-. em Qua 19 Mar 2014 - 21:22, editado 1 vez(es)
