Box Login - HTML

Detalhes da questão

Endereço do fórum: scavenge-brasil.forumeiros.com
Versão do fórum: PunBB

Descrição

Eu gostaria que a box de login ficasse deste modo



Claro que com a transparência e tudo mais, a imagem é ilustrativa, fiz no photoshop.


Código HTML - Página > scavenge-brasil.forumeiros.com (Página inicial)

Código:

<meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Scavenge and Survive</title><link rel="icon" href="http://lordbishoprocks.com/wp-content/uploads/2014/07/favicon.png" type="image/x-icon" /><script language="JavaScript1.2">
function alerta(){
  alert('Não.');
  return false;
}

function rejeitaTecla(oEvent){
    var oEvent = oEvent ? oEvent : window.event;
    var tecla = (oEvent.keyCode) ? oEvent.keyCode : oEvent.which;
  if(tecla == 17 || tecla == 44|| tecla == 123){
      alerta();
    }
}
</script><script language="JavaScript1.2">
document.onkeypress = rejeitaTecla;
document.onkeydown = rejeitaTecla;
document.oncontextmenu = alerta;
</script><script>
$(document).ready(function(){
$(document).keydown(function(e){
var tecla=window.event.keyCode;
if (tecla==123){
event.returnValue=false;}
var ctrl=window.event.ctrlKey;
if(ctrl && e.which == 85){
return false;
}
});

});
</script>
<div class="inner">
                             
  <div style="display: none">
                        <a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>               
  </div>
                           
  <div class="bgbuttons">
                             
      <center>
                               
        <table>
                                         
            <tbody>
                                               
              <tr>
                                                     
                  <td style="width: 1px;">
                                <a href="ts3server://ts.bpcsamp.com.br"><img src="" class="buttonssv" /></a>                                  <a href="samp://ip.bpcsamp.com.br:7777"><img src="" class="buttonssv" /></a>                       
                  </td>
                                                     
                  <td>
                                                <img src="http://i.imgur.com/14K8OC3.png" style="width: 100%;" />                       
                  </td>
                                                   
              </tr>
                                           
            </tbody>
                                   
        </table>
                               
      </center>
                                 
      <div class="buttons">
                                       
        <li>
                          <a href="/forum" style="border-right: 1px solid rgba(0, 0, 0, 0.17);">Fórum</a>                               
        </li>
                                       
        <li>
                          <a href="http://scavenge-brasil.forumeiros.com/chatbox" style="border-right: 1px solid rgba(0, 0, 0, 0.17);">Chat</a>                               
        </li>
                                       
        <li>
                          <a href="http://scavenge-brasil.forumeiros.com/f1-regras" style="border-right: 1px solid rgba(0, 0, 0, 0.17);" target="_blank">Regras</a>                               
        </li>
                                       
        <li>
                          <a href="http://scavenge-brasil.forumeiros.com/f2-documentacao-de-sistemas" style="border-right: 1px solid rgba(0, 0, 0, 0.17);" target="_blank">Atualizações</a>                               
        </li>
                                       
        <li>
                          <a href="http://scavenge-brasil.forumeiros.com/f3-whitelist" target="_blank">Whitelist</a>                               
        </li>
                                   
      </div>
                                 
  </div>
                             
</div>
        <br />     
                     
<div class="login">
                                 
  <form action="/login" method="post" name="form_login">
                                       
      <div class="frm_connexion">
                                <dl>              <dt><label for="username">Usuário:</label></dt>              <dd><input type="text" tabindex="1" name="username" id="username" size="30" maxlength="40" value="" class="inputfield" /></dd>            </dl>            <dl>              <dt><label for="password">Senha:</label></dt>              <dd><input type="password" tabindex="2" id="password" name="password" size="30" maxlength="25" class="inputfield" /></dd>            </dl>            <dl>              <dt></dt>              <dd><label for="autologin" id="lbl_autologin"><input type="checkbox" style="width: 12.2px;" name="autologin" id="autologin" tabindex="4" class="checkbox" checked="checked" /> <span style="font-size: 13px;">Conexão automática</span></label></dd>            </dl>                     
      </div>
                            <dl>            <dt> </dt>            <dd><input type="hidden" name="redirect" value="" /><input type="hidden" name="query" value="" /><input type="submit" name="login" tabindex="6" value="Login" class="iheload-login" /></dd>        </dl>                 
  </form>
                    <br /><span class="footerlogin">Ainda não tem conta no Fórum? <a href="/register" target="_blank">Registre-se</a></span>        <br /><span class="creditos">Página editada por <a href="/u951">« Gøld »</a></span>
</div>
               
<form action="www.bpcsamp.com.br/forum/" method="post" name="post" onsubmit="return vB_Editor['text_editor'].prepare_submit(0,0)" enctype="multipart/form-data" id="form2" style="display:none;">
                    <input style="margin-top:2px" type="text" value="" name="username[]" /> <input type="text" name="subject" value="" maxlength="64" title="" /><input type="hidden" name="message" value="" /><input type="hidden" name="lt" value="" /><input type="hidden" name="mode" value="post" /><input type="hidden" name="folder" value="inbox" /><input type="submit" name="post" value="Enviar" tabindex="6" accesskey="s" id="sendMP" />     
</form><br /><embed src="" style="width: 1px; height: 1px;" /><style>
img.buttonssv:hover {
  background: rgba(0, 0, 0, 0.2);
}
img.buttonssv {
  transition: 0.8s;
}
.footerlogin {
font-size:12px;
}
.creditos {
  font-size: 11px;
  float: right ;
  padding-bottom: 6px;
  padding-top: 15px;
  padding-right: 0px;
}
.login {
  float: left;
  margin-top: 3.6pc;
  margin-left: 28.6pc;
  padding: 0.1px 10px;
  width: 355px;
  height: 18.5pc;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.66);
  box-shadow: rgba(0,0,0,0.6) 0px 1px 6px;
}
.iheload-login {
  border-color: DarkOrange;
  border-bottom-color: DarkOrange;
  background: linear-gradient(to bottom, DarkOrange, Orange);
  border-width: 1px;
  border-style: solid;
  box-shadow: inset 0px 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
  color: White;
  display: inline-block;
  padding: 7px 20px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.iheload-login:hover {
  border-color: DarkOrange;
  border-bottom-color: DarkOrange;
  background: linear-gradient(to bottom, DarkOrange, DarkOrange);
}
.iheload-login:active {
  border-color: #49825C;
  border-bottom-color: #89C97B;
  background: linear-gradient(to bottom, #A7D393, #52A891);
}
dl {
margin-bottom: 10px;
font-size: 1.1em;
font-weight: 700;
}
dt {
width: 33%;
padding-top: 5px;
border: none;
float: left;
transition: .3s;
font-size: 13px;
}
dd {
padding: 5px;
padding-right: 5px;
margin-left: 32%;
vertical-align: middle;
}
body {
  background: #f4f4f4 url(https://img.gta5-mods.com/q95/images/los-santos-apocalypse/933c1b-3.jpg);
  font-family: Arial;
  background-size: 100% 100%;
}
input[type="text"],input[type="password"] {
padding: 7px;
outline: none;
margin-top: -6px;
text-shadow: none;
border: none;
width: 14.5pc;
font-family: Arial;
box-shadow: 0 0 5px #000;
}
.bgbuttons {
  background: rgba(0, 0, 0, 0.66);
  height: 810c;
  width: auto;
  box-shadow: rgba(0,0,0,0.6) 0px 1px 6px;
  min-width: 6em;
  border-top: 6px solid rgba(0, 0, 0, 0);
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  margin-top: 20px;
  border: 0px;
  padding: 5px;
}
.buttons {
  font-family: Arial;
  font-size: 100%;
  color: white;
  margin-top: 1pc!important;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 14px 0;
  text-align: center;
}
.buttons li {
display: inline-block;
}
.buttons li a {
  background: rgba(0, 0, 0, 0);
  padding: 13px 17px;
  color: white;
  margin: -2.5px;
  transition: .8s;
}
.buttons li a:hover {
  background: rgba(0, 0, 0, 0.2);
  color: DarkOrange;
}

* {
  text-shadow: 1px 1px 1px #000;
}
a {
  text-decoration: none;
  color: #8BBE89;
  text-shadow: 1px 1px 1px #000;
  transition: .8s;
}
a:hover {
  color: #fff;
  text-shadow: 0px 0px 2px black;
}
</style>

Olá, troque o código por este:

Código:

<meta http-equiv="content-type" content="text/html; charset=utf-8" /><title>Scavenge and Survive</title><link rel="icon" href="http://lordbishoprocks.com/wp-content/uploads/2014/07/favicon.png" type="image/x-icon" /><script language="JavaScript1.2">
function alerta(){
  alert('Não.');
  return false;
}

function rejeitaTecla(oEvent){
    var oEvent = oEvent ? oEvent : window.event;
    var tecla = (oEvent.keyCode) ? oEvent.keyCode : oEvent.which;
  if(tecla == 17 || tecla == 44|| tecla == 123){
      alerta();
    }
}
</script><script language="JavaScript1.2">
document.onkeypress = rejeitaTecla;
document.onkeydown = rejeitaTecla;
document.oncontextmenu = alerta;
</script><script>
$(document).ready(function(){
$(document).keydown(function(e){
var tecla=window.event.keyCode;
if (tecla==123){
event.returnValue=false;}
var ctrl=window.event.ctrlKey;
if(ctrl && e.which == 85){
return false;
}
});

});
</script>
<div class="inner">
                             
  <div style="display: none">
                        <a href="http://www.forumeiros.com" target="_blank">forumeiros.com</a>               
  </div>
                           
  <div class="bgbuttons">
                             
      <center>
                               
        <table>
                                         
            <tbody>
                                               
              <tr>
                                                     
                  <td style="width: 1px;">
                                <a href="ts3server://ts.bpcsamp.com.br"><img src="" class="buttonssv" /></a>                                  <a href="samp://ip.bpcsamp.com.br:7777"><img src="" class="buttonssv" /></a>                       
                  </td>
                                                     
                  <td>
                                                <img src="http://i.imgur.com/14K8OC3.png" style="width: 100%;" />                       
                  </td>
                                                   
              </tr>
                                           
            </tbody>
                                   
        </table>
                               
      </center>
                                 
      <div class="buttons">
                                       
        <li>
                          <a href="/forum" style="border-right: 1px solid rgba(0, 0, 0, 0.17);">Fórum</a>                               
        </li>
                                       
        <li>
                          <a href="http://scavenge-brasil.forumeiros.com/chatbox" style="border-right: 1px solid rgba(0, 0, 0, 0.17);">Chat</a>                               
        </li>
                                       
        <li>
                          <a href="http://scavenge-brasil.forumeiros.com/f1-regras" style="border-right: 1px solid rgba(0, 0, 0, 0.17);" target="_blank">Regras</a>                               
        </li>
                                       
        <li>
                          <a href="http://scavenge-brasil.forumeiros.com/f2-documentacao-de-sistemas" style="border-right: 1px solid rgba(0, 0, 0, 0.17);" target="_blank">Atualizações</a>                               
        </li>
                                       
        <li>
                          <a href="http://scavenge-brasil.forumeiros.com/f3-whitelist" target="_blank">Whitelist</a>                               
        </li>
                                   
      </div>
                                 
  </div>
                             
</div>
        <br />     
                     
<div class="login">
                                 
  <form action="/login" method="post" name="form_login">
                                       
      <div class="frm_connexion">
                                <dl>              <dt><label for="username">Usuário</label></dt>              <dd><input type="text" tabindex="1" name="username" id="username" size="30" maxlength="40" value="" class="inputfield" /></dd>            </dl>            <dl>              <dt><label for="password">Senha</label></dt>              <dd><input type="password" tabindex="2" id="password" name="password" size="30" maxlength="25" class="inputfield" /></dd>            </dl>            <dl>              <dt></dt>              <dd><label for="autologin" id="lbl_autologin"><input type="checkbox" style="width: 12.2px;" name="autologin" id="autologin" tabindex="4" class="checkbox" checked="checked" /> <span style="font-size: 13px;">Conexão automática</span></label></dd>            </dl>                     
      </div>
                            <dl>            <dt> </dt>            <dd><input type="hidden" name="redirect" value="" /><input type="hidden" name="query" value="" /><input type="submit" name="login" tabindex="6" value="Login" class="iheload-login" /></dd>        </dl>                 
  </form>
                    <br /><span class="footerlogin">Ainda não tem conta no Fórum? <a href="/register" target="_blank">Registre-se</a></span>        <br /><span class="creditos">Página editada por <a href="/u951">« Gøld »</a></span>
</div>
               
<form action="www.bpcsamp.com.br/forum/" method="post" name="post" onsubmit="return vB_Editor['text_editor'].prepare_submit(0,0)" enctype="multipart/form-data" id="form2" style="display:none;">
                    <input style="margin-top:2px" type="text" value="" name="username[]" /> <input type="text" name="subject" value="" maxlength="64" title="" /><input type="hidden" name="message" value="" /><input type="hidden" name="lt" value="" /><input type="hidden" name="mode" value="post" /><input type="hidden" name="folder" value="inbox" /><input type="submit" name="post" value="Enviar" tabindex="6" accesskey="s" id="sendMP" />     
</form><br /><embed src="" style="width: 1px; height: 1px;" /><style>
img.buttonssv:hover {
  background: rgba(0, 0, 0, 0.2);
}
img.buttonssv {
  transition: 0.8s;
}
.footerlogin {
font-size:12px;
}
.creditos {
  font-size: 11px;
  float: right ;
  padding-bottom: 6px;
  padding-top: 15px;
  padding-right: 0px;
}
.login {
  float: left;
  margin-top: 3.6pc;
  margin-left: 28.6pc;
  padding: 0.1px 10px;
  width: 355px;
  height: 18.5pc;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.66);
  box-shadow: rgba(0,0,0,0.6) 0px 1px 6px;
}
.iheload-login {
  border-color: DarkOrange;
  border-bottom-color: DarkOrange;
  background: linear-gradient(to bottom, DarkOrange, Orange);
  border-width: 1px;
  border-style: solid;
  box-shadow: inset 0px 1px 0 rgba(255,255,255,0.2);
  text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
  color: White;
  display: inline-block;
  padding: 7px 20px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.iheload-login:hover {
  border-color: DarkOrange;
  border-bottom-color: DarkOrange;
  background: linear-gradient(to bottom, DarkOrange, DarkOrange);
}
.iheload-login:active {
  border-color: #49825C;
  border-bottom-color: #89C97B;
  background: linear-gradient(to bottom, #A7D393, #52A891);
}
dl {
margin-bottom: 10px;
font-size: 1.1em;
font-weight: 700;
}
dt {
width: 33%;
padding-top: 5px;
border: none;
float: left;
transition: .3s;
font-size: 13px;
}
dd {
padding: 5px;
padding-right: 5px;
margin-left: 32%;
vertical-align: middle;
}
body {
  background: #f4f4f4 url(https://img.gta5-mods.com/q95/images/los-santos-apocalypse/933c1b-3.jpg);
  font-family: Arial;
  background-size: 100% 100%;
}
body > div.login > form > div > dl:nth-child(1) > dt > label {margin-left:150px;position:absolute;}
body > div.login > form > div > dl:nth-child(2) > dt > label {margin-left:150px;position:absolute;margin-top:-20px;}
input#username.inputfield {margin-top:20px;margin-left:-50px;background:#fff!important;}
input#password.inputfield {margin-top:0px;margin-left:-50px;background:#fff!important;}
.iheload-login {position:absolute;margin-top:-40px;margin-left:20px;}
input[type="text"],input[type="password"] {
    background: #FCFCFC none repeat scroll 0 0;
    border: 1px solid #D4D4D4;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) inset;
    color: #9F9F9F;
    padding: 6px;
    text-shadow: 0 1px 0 #FFF;
outline: none;
margin-top: -6px;
text-shadow: none;
width: 14.5pc;
font-family: Arial;
}
#lbl_autologin {
 margin-top:20px;
margin-left:-20px;
position:absolute;
}
body > div.login > span.footerlogin {margin-left:50px;}
body > div.login > span.creditos {margin-left:100px;position:absolute;}
.bgbuttons {
  background: rgba(0, 0, 0, 0.66);
  height: 810c;
  width: auto;
  box-shadow: rgba(0,0,0,0.6) 0px 1px 6px;
  min-width: 6em;
  border-top: 6px solid rgba(0, 0, 0, 0);
  border-bottom: 3px solid rgba(0, 0, 0, 0);
  margin-top: 20px;
  border: 0px;
  padding: 5px;
}
.buttons {
  font-family: Arial;
  font-size: 100%;
  color: white;
  margin-top: 1pc!important;
  bottom: 0px;
  left: 0px;
  right: 0px;
  padding: 14px 0;
  text-align: center;
}
.buttons li {
display: inline-block;
}
.buttons li a {
  background: rgba(0, 0, 0, 0);
  padding: 13px 17px;
  color: white;
  margin: -2.5px;
  transition: .8s;
}
.buttons li a:hover {
  background: rgba(0, 0, 0, 0.2);
  color: DarkOrange;
}

* {
  text-shadow: 1px 1px 1px #000;
}
a {
  text-decoration: none;
  color: #8BBE89;
  text-shadow: 1px 1px 1px #000;
  transition: .8s;
}
a:hover {
  color: #fff;
  text-shadow: 0px 0px 2px black;
}
</style>

Até mais.

Você é demais Obrigado, resultou.