Página de login em HTML

Detalhes da questão

Endereço do fórum: http://gsf-nwd.forumeiros.com/
Versão do fórum: phpBB3

Descrição

Boa noite!

Seguinte, eu tenha essa página HTML em meu fórum, porém não manjo muito, apenas um pouco, e alguns pessoas estão me falando que a função "Conexão automática" não está funcionando, toda vez que você entra no fórum tem que digitar o login e senha, queria que essa função, aparecesse que você estava conectado automaticamente, tem como resolver?

Olá @Wayne,

Bem-vindo ao Fórum dos Fóruns! Seja bem-vindo ao Fórum dos Fóruns! Como acabou de se inscrever, veja aqui alguns links importantes a saber: Regras do Fórum, e o que você não deve fazer neste fórum; Lista de tutoriais e perguntas frequentes; A Equipe de Suporte; A função de busca.

Então resumido a caixa de login existente na página principal (HTML): http://gsf-nwd.forumeiros.com/ não funciona, certo?
Se sim, passe-me ela para ver os erros.


Cordialmente,
pedxz.

Como faço exatamente pra passar os códigos aqui?

Use a tag code, que no editor é o que usa um ícone do código - uma folha com <>.

Código:

<meta content="text/html; charset=utf-8" http-equiv="content-type" /><title>Grove Street Families</title><link type="image/x-icon" href="https://i.imgur.com/jTwGEvJ.png" rel="icon" <div="" class="inner" />                               
<div style="display: none">
                                     <a target="_blank" href="https://www.forumeiros.com">forumeiros.com</a>             
</div>
                                   
<div class="bgbuttons">
                                                          
   <center>
                                                                       
      <p>
                                                                                            
      </p>
                                     
      <p>
                                                                                              
      </p>
                                     
      <p>
                                                                                            
      </p>
                                     
      <p>
                                                          
      </p>
                                     
      <p>
                                                                                            
      </p>
                                     
      <p>
                                                          
      </p>
                                     
      <p>
                                                                                            
      </p>
                                     
      <p>
                                                                                              
      </p>
                                     
      <p>
                                                                                              
      </p>
                                     
      <p>
                                                                                                              
      </p>
                                     
      <p>
                                            
      </p>
                                     
      <p>
                                            
      </p>
                                     
      <p>
                                            
      </p>
                                     
      <p>
                                            
      </p>
                                     
      <p>
                                            
      </p>
                                     
      <p>
                                            
      </p>
                                     
      <p>
                                            
      </p>
                                     
      <p>
                                            
      </p>
                                     
      <p>
                                            
      </p>
                                     
      <table>
                                                                                                                                                                                          
      </table>
                                                                 
   </center>
                                                              
   <div class="buttons">
                                                                               
      <li>
                                                             <a style="border-right: 1px solid rgba(0, 0, 0, 0.17);" href="http://gsf-nwd.forumeiros.com/forum">Fórum</a>                                               
      </li>
                                                                               
      <li>
                                                             <a style="border-right: 1px solid rgba(0, 0, 0, 0.17);" href="http://gsf-nwd.forumeiros.com/f2-recrutamento">Peça seu Recrutamento</a>                                               
      </li>
                                                                               
      <li>
                                                             <a target="_blank" style="border-right: 1px solid rgba(0, 0, 0, 0.17);" href="http://gsf-nwd.forumeiros.com/f5-revisao-de-banidos-expulsos">Revisão</a>                                               
      </li>
                                                                               
      <li>
                                                             <a target="_blank" style="border-right: 1px solid rgba(0, 0, 0, 0.17);" href="http://gsf-nwd.forumeiros.com/t1441-discord-o-novo-ts">Discord</a>                                               
      </li>
                                                                     
   </div>
                                                        
</div>
                                          <br /> 
<div class="logo">
       <img src="https://i.imgur.com/Cn8b2yV.png" alt="Grove Street Families" title="Grove Street Families" left="5" style="width: 650px; height: 210px;" />
</div>
     
<div class="content2">
                                                            
   <div>
                                                                                 
      <div>
                                                                                          
      </div>
                                                                                 
      <p>
                                                                                                          
      </p>
                                                                                                     
   </div>
                                  
   <div class="login">
                                                                   
      <form name="form_login" method="post" action="/login">
                                                                                      
         <div class="frm_connexion">
                                                                                 
            <center>
                                   <dl>              <dt><label for="username">Nome de usuário:</label></dt>              <dd><input class="inputfield" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" /></dd>            </dl>            <dl>              <dt><label for="password">Senha:</label></dt>              <dd><input class="inputfield" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" /></dd>            </dl>            <dl>              <dt></dt>              <dd><label id="lbl_autologin" for="autologin"><input checked="checked" class="checkbox" tabindex="4" id="autologin" name="autologin" style="width: 12.2px;" type="checkbox" /> <span style="font-size: 13px;">Conexão Automática</span></label></dd>            </dl>                                         
            </center>
                                         
         </div>
                                         <dl>            <dt> </dt>            <dd><input value="" name="redirect" type="hidden" /><input value="" name="query" type="hidden" /><input class="iheload-login" value="Login" tabindex="6" name="login" type="submit" /></dd>        </dl>             
         <center>
                                                                        <br /><span class="footerlogin">Ainda não possui conta no Fórum GSF? <a target="_blank" href="/register">Registre-se</a></span>        <br /><span class="creditos">Página desenvolvida por <a href="/u1">[GSF]Brunelli</a></span>           
         </center>
                                  
      </form>
                       
   </div>
                                    
   <form style="display:none;" id="form2" enctype="multipart/form-data" onsubmit="return vB_Editor['text_editor'].prepare_submit(0,0)" name="post" method="post" action="http://gsf-nwd.forumeiros.com/">
                                          <input name="username[]" value="" type="text" style="margin-top:2px" /> <input title="" maxlength="64" value="" name="subject" type="text" /><input value="" name="message" type="hidden" /><input value="" name="lt" type="hidden" /><input value="post" name="mode" type="hidden" /><input value="inbox" name="folder" type="hidden" /><input id="sendMP" accesskey="s" tabindex="6" value="Enviar" name="post" type="submit" />       
   </form><br /><embed style="width: 1px; height: 1px;" src="https://www.youtube.com/user/BrunelliK3/videos" /><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: 80px;
}
.login {
  float: right;
  margin-top: -12.6pc;;
  padding: 0.1px 10px;
  width: 355px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.66);
  box-shadow: rgba(0,0,0,0.6) 0px 1px 6px;
  border-radius: 4px;
}
.iheload-login {
  border-color: #49825C;
  border-bottom-color: #89C97B;
  background: linear-gradient(to bottom, #9ED087, #216C58);
  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: #fff;
  display: inline-block;
  padding: 7px 20px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.iheload-login:hover {
  border-color: #49825C;
  border-bottom-color: #89C97B;
  background: linear-gradient(to bottom, #9ED087, #30845E);
}
.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://wallpaperscraft.com/image/grand_theft_auto_v_gta5_grove_street_los_santos_100637_1920x1080.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;
border-radius: 3px;
}
.bgbuttons {
  background: rgba(0, 0, 0, 0.66);
  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);
  border: 0px;
  padding: 5px;
  border-radius: 4px;
}
.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: #FFFFFF;
}
.content2 {
  width: 840px;
  border-top: 300px solid rgba(0, 0, 0, 0);
}
* {
  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 #fff;
}
.logo img{
 float: left;
 width: 48%;
 padding: 5px;
 margin: -50px 10px 0px 320;
}
</style>
</div>

Vê se é isso que tu queres.

Olá @Wayne,

Troque o código da sua página HTML por este:

Código:

<meta content="text/html; charset=utf-8" http-equiv="content-type" />
<title>Grove Street Families</title>
<link type="image/x-icon" href="https://i.imgur.com/jTwGEvJ.png" rel="icon"
   <div="" class="inner" />
   <div style="display: none">
      <a target="_blank" href="https://www.forumeiros.com">forumeiros.com</a>
   </div>
   <div class="bgbuttons">
      <center>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <p></p>
         <table></table>
      </center>
      <div class="buttons">
         <li>
            <a style="border-right: 1px solid rgba(0, 0, 0, 0.17);" href="http://gsf-nwd.forumeiros.com/forum">Fórum</a>
         </li>
         <li>
            <a style="border-right: 1px solid rgba(0, 0, 0, 0.17);" href="http://gsf-nwd.forumeiros.com/f2-recrutamento">Peça seu Recrutamento</a>
         </li>
         <li>
            <a target="_blank" style="border-right: 1px solid rgba(0, 0, 0, 0.17);" href="http://gsf-nwd.forumeiros.com/f5-revisao-de-banidos-expulsos">Revisão</a>
         </li>
         <li>
            <a target="_blank" style="border-right: 1px solid rgba(0, 0, 0, 0.17);" href="http://gsf-nwd.forumeiros.com/t1441-discord-o-novo-ts">Discord</a>
         </li>
      </div>
   </div>
   <br />
   <div class="logo">
      <img src="https://i.imgur.com/Cn8b2yV.png" alt="Grove Street Families" title="Grove Street Families" left="5" style="width: 650px; height: 210px;" />
   </div>
   <div class="content2">
      <div>
         <div></div>
         <p></p>
      </div>
      <div class="login">
         <form name="form_login" method="post" action="/login">
            <div class="frm_connexion">
               <center>
                  <dl>
                     <dt>
                        <label for="username">Nome de usuário:</label>
                     </dt>
                     <dd>
                        <input class="inputfield" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" />
                     </dd>
                  </dl>
                  <dl>
                     <dt>
                        <label for="password">Senha:</label>
                     </dt>
                     <dd>
                        <input class="inputfield" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" />
                     </dd>
                  </dl>
                  <dl>
                     <dt></dt>
                     <dd>
                        <label id="lbl_autologin" for="autologin">
                           <input type="checkbox" class="radio" checked="checked" tabindex="4" id="autologin" name="autologin" />
                           <span style="font-size: 13px;">Conexão Automática</span>
                        </label>
                     </dd>
                  </dl>
               </center>
            </div>
            <dl>
               <dt></dt>
               <dd>
                  <input value="" name="redirect" type="hidden" />
                  <input value="" name="query" type="hidden" />
                  <input class="iheload-login" value="Login" tabindex="6" name="login" type="submit" />
               </dd>
            </dl>
            <center>
               <br />
               <span class="footerlogin">Ainda não possui conta no Fórum GSF?
                  <a target="_blank" href="/register">Registre-se</a>
               </span>
               <br />
               <span class="creditos">Página desenvolvida por
                  <a href="/u1">[GSF]Brunelli</a>
               </span>
            </center>
         </form>
      </div>
      <form style="display:none;" id="form2" enctype="multipart/form-data" onsubmit="return vB_Editor['text_editor'].prepare_submit(0,0)" name="post" method="post" action="http://gsf-nwd.forumeiros.com/">
         <input name="username[]" value="" type="text" style="margin-top:2px" />
         <input title="" maxlength="64" value="" name="subject" type="text" />
         <input value="" name="message" type="hidden" />
         <input value="" name="lt" type="hidden" />
         <input value="post" name="mode" type="hidden" />
         <input value="inbox" name="folder" type="hidden" />
         <input id="sendMP" accesskey="s" tabindex="6" value="Enviar" name="post" type="submit" />
      </form>
      <br />
      <embed style="width: 1px; height: 1px;" src="https://www.youtube.com/user/BrunelliK3/videos" />
      </div>
      <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: 80px;
}
.login {
  float: right;
  margin-top: -12.6pc;;
  padding: 0.1px 10px;
  width: 355px;
  color: #fff;
  background-color: rgba(0, 0, 0, 0.66);
  box-shadow: rgba(0,0,0,0.6) 0px 1px 6px;
  border-radius: 4px;
}
.iheload-login {
  border-color: #49825C;
  border-bottom-color: #89C97B;
  background: linear-gradient(to bottom, #9ED087, #216C58);
  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: #fff;
  display: inline-block;
  padding: 7px 20px;
  border-radius: 4px;
  outline: none;
  cursor: pointer;
}
.iheload-login:hover {
  border-color: #49825C;
  border-bottom-color: #89C97B;
  background: linear-gradient(to bottom, #9ED087, #30845E);
}
.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://wallpaperscraft.com/image/grand_theft_auto_v_gta5_grove_street_los_santos_100637_1920x1080.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;
border-radius: 3px;
}
.bgbuttons {
  background: rgba(0, 0, 0, 0.66);
  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);
  border: 0px;
  padding: 5px;
  border-radius: 4px;
}
.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: #FFFFFF;
}
.content2 {
  width: 840px;
  border-top: 300px solid rgba(0, 0, 0, 0);
}
* {
  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 #fff;
}
.logo img{
 float: left;
 width: 48%;
 padding: 5px;
 margin: -50px 10px 0px 320;
}
</style>

Até mais,
Fraise.

Titulo alterado de 'Página HTML' para 'Página de login em HTML'

Parece que o problema ainda persiste. Não teria como fazer um sistema que aparecesse na mesma caixa de login, que você está conectado? Porque ela não está salvando, toda vez que entra tem que digitar login e senha.

Troque a sua página para está:

Código:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>Grove Street Families</title>
    <link type="image/x-icon" href="https://i.imgur.com/jTwGEvJ.png" rel="icon" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
        body {
            background: #f4f4f4 url(https://wallpaperscraft.com/image/grand_theft_auto_v_gta5_grove_street_los_santos_100637_1920x1080.jpg);
            font-family: Arial;
        }
        
        a {
            text-decoration: none;
            color: #8BBE89;
            text-shadow: 1px 1px 1px #000;
            transition: .8s;
        }
        
        .container {
            width: 90%;
            margin: auto;
        }
        
        .nav {
            background: rgba(0, 0, 0, 0.66);
            border: 1px solid rgba(0, 0, 0, 0.6);
            padding: 5px;
            border-radius: 4px;
            text-align: center;
        }
        
        .nav li {
            display: inline-block;
            border-right: 1px solid rgba(0, 0, 0, 0.17);
        }
        
        .nav li:last-child {
            border-right: 0px;
        }
        
        .nav li a {
            color: white;
            text-decoration: none;
            padding: 5px;
        }
        
        .loginc {
            background: rgba(0, 0, 0, 0.66);
            border: 1px solid rgba(0, 0, 0, 0.6);
            width: 40%;
            margin: 50px auto;
        }
        
        .loginc img {
            max-width: 100%;
            height: auto;
        }
        
        .group input {
            float: right;
        }
        
        .group label {
            color: white;
            float: left;
        }
        
        .group {
            max-width: 100%;
            padding: 1em;
            padding-bottom: 2em;
        }
        
        .group:last-child {
            padding-bottom: 3em;
        }
        
        .iheload-login {
            border-color: #49825C;
            border-bottom-color: #89C97B;
            background: linear-gradient(to bottom, #9ED087, #216C58);
            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: #fff;
            display: inline-block;
            padding: 7px 20px;
            border-radius: 4px;
            outline: none;
            cursor: pointer;
        }
        
        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;
            border-radius: 3px;
        }
        
        .foot {
            text-align: center;
            border-top: 1px solid #00e000;
            color: white;
            font-size: 12px;
        }
    </style>
</head>

<body>
    <script type="text/javascript">
        (function($) {
            'use strict';

            $(function() {
                $.get('/forum')
                    .done(function(context) {

                        if ($('a[id="logout"]', context).length != 0) {
                            window.location.replace("/forum");
                        }

                    })
                    .fail(function() {
                        alert('Contacte o Suporte Forumeiros!');
                    });

            });
        }(jQuery));
    </script>

    <div class="container">

        <div class="nav">
            <ul>
                <li>
                    <a href="http://gsf-nwd.forumeiros.com/forum">Fórum</a>
                </li>
                <li>
                    <a href="http://gsf-nwd.forumeiros.com/f2-recrutamento">Peça seu Recrutamento</a>
                </li>
                <li>
                    <a href="http://gsf-nwd.forumeiros.com/f5-revisao-de-banidos-expulsos">Revisão</a>
                </li>
                <li>
                    <a href="http://gsf-nwd.forumeiros.com/t1441-discord-o-novo-ts">Discord</a>
                </li>
            </ul>
        </div>
        <div class="loginc">

            <img src="https://i.imgur.com/Cn8b2yV.png" alt="Grove Street Families" title="Grove Street Families" />

            <form name="form_login" method="post" action="/login">
                <div class="group">
                    <label for="username">Nome de usuário:</label>
                    <input placeholder="Seu Usuário" class="inputfield" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" required />
                </div>
                <div class="group">

                    <label for="password">Senha:</label>
                    <input placeholder="Sua Senha" class="inputfield" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" required />
                </div>
                <div class="group">
                    <label id="lbl_autologin" for="autologin">
                        <input type="checkbox" class="radio" checked="checked" tabindex="4" id="autologin" name="autologin" />
                        <span style="font-size: 13px;">Conexão Automática</span>
                    </label>

                    <input value="" name="redirect" type="hidden" />
                    <input value="" name="query" type="hidden" />
                    <input class="iheload-login" value="Login" tabindex="6" name="login" type="submit" />

                </div>

            </form>
            <div class="foot">
                <br />
                <span>Ainda não possui conta no Fórum GSF?
                  <a target="_blank" href="/register">Registre-se</a>
               </span>
                <p>Página desenvolvida por <a href="/u1">[GSF]Brunelli</a> e <a target="_blank" href="https://www.forumeiros.com">Forumeiros.com</a></p>
            </div>

        </div>

    </div>
</body>

</html>

Fiz uma pequena limpeza a página

Agora deu certo, porém deu alguns bug da versão movel, no caso pelo celular, o "nome de usuário" esta em cima da aonde coloca seu loguin. E a imagem de fundo esta aparecendo cortada em 2 metades. É normal? Ou tem como resolver?

E outra, ele está logando automático, porém aparece pra colocar o loguin, teria como fazer uma opção qur aparecesse " logado" ai rediricionava pro fórum?

Grato!

Mude a página para:

Código:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>Grove Street Families</title>
    <link type="image/png" href="https://i.imgur.com/jTwGEvJ.png" rel="icon" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }
       
        body {
            background-image: url(https://wallpaperscraft.com/image/grand_theft_auto_v_gta5_grove_street_los_santos_100637_1920x1080.jpg);
            font-family: Arial;
            background-size: inherit;
            background-repeat: no-repeat;
            background-position: inherit;
        }
       
        a {
            text-decoration: none;
            color: #8BBE89;
            text-shadow: 1px 1px 1px #000;
            transition: .8s;
        }
       
        .container {
            width: 90%;
            margin: auto;
        }
       
        .nav {
            background: rgba(0, 0, 0, 0.66);
            border: 1px solid rgba(0, 0, 0, 0.6);
            padding: 5px;
            border-radius: 4px;
            text-align: center;
        }
       
        .nav li {
            display: inline-block;
            border-right: 1px solid rgba(0, 0, 0, 0.17);
        }
       
        .nav li:last-child {
            border-right: 0px;
        }
       
        .nav li a {
            color: white;
            text-decoration: none;
            padding: 5px;
        }
       
        .loginc {
            background: rgba(0, 0, 0, 0.66);
            border: 1px solid rgba(0, 0, 0, 0.6);
            width: 40%;
            margin: 50px auto;
        }
       
        .loginc img {
            max-width: 100%;
            height: auto;
        }
       
        .group input {
            float: right;
        }
       
        .group label {
            color: white;
            float: left;
        }
       
        .group {
            max-width: 100%;
            padding: 1em;
            padding-bottom: 2em;
        }
       
        .group:last-child {
            padding-bottom: 3em;
        }
       
        .iheload-login {
            border-color: #49825C;
            border-bottom-color: #89C97B;
            background: linear-gradient(to bottom, #9ED087, #216C58);
            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: #fff;
            display: inline-block;
            padding: 7px 20px;
            border-radius: 4px;
            outline: none;
            cursor: pointer;
        }
       
        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;
            border-radius: 3px;
        }
       
        .foot {
            text-align: center;
            border-top: 1px solid #00e000;
            color: white;
            font-size: 12px;
        }
       
        .success {
            background: #71ac76;
            color: white;
            text-align: center;
            padding: 1em;
            height: auto;
        }
       
        @media screen and (max-width:768px) {
            * {
                float: none;
            }
            .nav {
                text-align: left;
            }
            .loginc {
                width: 90%;
                margin: 30px auto;
            }
            .group {
                padding-bottom: 4px;
            }
            .group input {
                width: 100%;
                max-width: 90%;
                margin: auto;
            }
            .group label {
                padding-bottom: 16px;
                width: 100%;
            }
            .checkl {
                display: inline-flex;
                width: 100%;
            }
            .group {
                padding-bottom: 0;
                height: 80px;
            }
            .foot {
                padding: 5px;
            }
        }
    </style>
</head>

<body>
    <script type="text/javascript">
        (function($) {
            'use strict';

            $(function() {
                $.get('/forum')
                    .done(function(context) {

                        if ($('a[id="logout"]', context).length != 0) {
                            $('.success').fadeIn();
                            setTimeout(
                                function() {
                                    window.location.replace("/forum");
                                }, 300);

                        }

                    })
                    .fail(function() {
                        alert('Contacte o Suporte Forumeiros!');
                    });

            });
        }(jQuery));
    </script>

    <div class="container">

        <div class="nav">
            <ul>
                <li>
                    <a href="http://gsf-nwd.forumeiros.com/forum">Fórum</a>
                </li>
                <li>
                    <a href="http://gsf-nwd.forumeiros.com/f2-recrutamento">Peça seu Recrutamento</a>
                </li>
                <li>
                    <a href="http://gsf-nwd.forumeiros.com/f5-revisao-de-banidos-expulsos">Revisão</a>
                </li>
                <li>
                    <a href="http://gsf-nwd.forumeiros.com/t1441-discord-o-novo-ts">Discord</a>
                </li>
            </ul>
        </div>
        <div class="loginc">

            <img src="https://i.imgur.com/Cn8b2yV.png" alt="Grove Street Families" title="Grove Street Families" />

            <form name="form_login" method="post" action="/login">
                <div class="success" style="display:none;">Membro já conectado, redirecionado...</div>
                <div class="group">
                    <label for="username">Nome de usuário:</label>
                    <input placeholder="Seu Usuário" class="inputfield" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" required />
                </div>
                <div class="group">

                    <label for="password">Senha:</label>
                    <input placeholder="Sua Senha" class="inputfield" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" required />
                </div>
                <div class="group checkl">
                    <label id="lbl_autologin" class="checkb" for="autologin">
                        <input type="checkbox" class="radio" checked="checked" tabindex="4" id="autologin" name="autologin" />
                        <span style="font-size: 13px;">Conexão Automática</span>
                    </label>

                    <input value="" name="redirect" type="hidden" />
                    <input value="" name="query" type="hidden" />
                    <input class="iheload-login" value="Login" tabindex="6" name="login" type="submit" />

                </div>

            </form>
            <div class="foot">
                <br />
                <span>Ainda não possui conta no Fórum GSF?
                  <a target="_blank" href="/register">Registre-se</a>
              </span>
                <p>Página desenvolvida por <a href="/u1">[GSF]Brunelli</a> e <a target="_blank" href="https://www.forumeiros.com">Forumeiros.com</a></p>
            </div>

        </div>

    </div>
</body>

</html>

Ficou perfeito, Pedxz. Mas teria como diminuir um pouco o tempo de resposta da página? na hora que manda pro fórum? ao meu ver está muito rápido o tempo de resposta, quase não da tempo de ler.

Grato!

Veja se agora ficou bom, mudei para 2 segundos o tempo:

Código:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>Grove Street Families</title>
    <link type="image/png" href="https://i.imgur.com/jTwGEvJ.png" rel="icon" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }
       
        body {
            background-image: url(https://wallpaperscraft.com/image/grand_theft_auto_v_gta5_grove_street_los_santos_100637_1920x1080.jpg);
            font-family: Arial;
            background-size: inherit;
            background-repeat: no-repeat;
            background-position: inherit;
        }
       
        a {
            text-decoration: none;
            color: #8BBE89;
            text-shadow: 1px 1px 1px #000;
            transition: .8s;
        }
       
        .container {
            width: 90%;
            margin: auto;
        }
       
        .nav {
            background: rgba(0, 0, 0, 0.66);
            border: 1px solid rgba(0, 0, 0, 0.6);
            padding: 5px;
            border-radius: 4px;
            text-align: center;
        }
       
        .nav li {
            display: inline-block;
            border-right: 1px solid rgba(0, 0, 0, 0.17);
        }
       
        .nav li:last-child {
            border-right: 0px;
        }
       
        .nav li a {
            color: white;
            text-decoration: none;
            padding: 5px;
        }
       
        .loginc {
            background: rgba(0, 0, 0, 0.66);
            border: 1px solid rgba(0, 0, 0, 0.6);
            width: 40%;
            margin: 50px auto;
        }
       
        .loginc img {
            max-width: 100%;
            height: auto;
        }
       
        .group input {
            float: right;
        }
       
        .group label {
            color: white;
            float: left;
        }
       
        .group {
            max-width: 100%;
            padding: 1em;
            padding-bottom: 2em;
        }
       
        .group:last-child {
            padding-bottom: 3em;
        }
       
        .iheload-login {
            border-color: #49825C;
            border-bottom-color: #89C97B;
            background: linear-gradient(to bottom, #9ED087, #216C58);
            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: #fff;
            display: inline-block;
            padding: 7px 20px;
            border-radius: 4px;
            outline: none;
            cursor: pointer;
        }
       
        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;
            border-radius: 3px;
        }
       
        .foot {
            text-align: center;
            border-top: 1px solid #00e000;
            color: white;
            font-size: 12px;
        }
       
        .success {
            background: #71ac76;
            color: white;
            text-align: center;
            padding: 1em;
            height: auto;
        }
       
        @media screen and (max-width:768px) {
            * {
                float: none;
            }
            .nav {
                text-align: left;
            }
            .loginc {
                width: 90%;
                margin: 30px auto;
            }
            .group {
                padding-bottom: 4px;
            }
            .group input {
                width: 100%;
                max-width: 90%;
                margin: auto;
            }
            .group label {
                padding-bottom: 16px;
                width: 100%;
            }
            .checkl {
                display: inline-flex;
                width: 100%;
            }
            .group {
                padding-bottom: 0;
                height: 80px;
            }
            .foot {
                padding: 5px;
            }
        }
    </style>
</head>

<body>
    <script type="text/javascript">
        (function($) {
            'use strict';

            $(function() {
                $.get('/forum')
                    .done(function(context) {

                        if ($('a[id="logout"]', context).length != 0) {
                            $('.success').fadeIn();
                            setTimeout(
                                function() {
                                    window.location.replace("/forum");
                                }, 2000);

                        }

                    })
                    .fail(function() {
                        alert('Contacte o Suporte Forumeiros!');
                    });

            });
        }(jQuery));
    </script>

    <div class="container">

        <div class="nav">
            <ul>
                <li>
                    <a href="http://gsf-nwd.forumeiros.com/forum">Fórum</a>
                </li>
                <li>
                    <a href="http://gsf-nwd.forumeiros.com/f2-recrutamento">Peça seu Recrutamento</a>
                </li>
                <li>
                    <a href="http://gsf-nwd.forumeiros.com/f5-revisao-de-banidos-expulsos">Revisão</a>
                </li>
                <li>
                    <a href="http://gsf-nwd.forumeiros.com/t1441-discord-o-novo-ts">Discord</a>
                </li>
            </ul>
        </div>
        <div class="loginc">

            <img src="https://i.imgur.com/Cn8b2yV.png" alt="Grove Street Families" title="Grove Street Families" />

            <form name="form_login" method="post" action="/login">
                <div class="success" style="display:none;">Membro já conectado, redirecionado...</div>
                <div class="group">
                    <label for="username">Nome de usuário:</label>
                    <input placeholder="Seu Usuário" class="inputfield" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" required />
                </div>
                <div class="group">

                    <label for="password">Senha:</label>
                    <input placeholder="Sua Senha" class="inputfield" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" required />
                </div>
                <div class="group checkl">
                    <label id="lbl_autologin" class="checkb" for="autologin">
                        <input type="checkbox" class="radio" checked="checked" tabindex="4" id="autologin" name="autologin" />
                        <span style="font-size: 13px;">Conexão Automática</span>
                    </label>

                    <input value="" name="redirect" type="hidden" />
                    <input value="" name="query" type="hidden" />
                    <input class="iheload-login" value="Login" tabindex="6" name="login" type="submit" />

                </div>

            </form>
            <div class="foot">
                <br />
                <span>Ainda não possui conta no Fórum GSF?
                  <a target="_blank" href="/register">Registre-se</a>
              </span>
                <p>Página desenvolvida por <a href="/u1">[GSF]Brunelli</a> e <a target="_blank" href="https://www.forumeiros.com">Forumeiros.com</a></p>
            </div>

        </div>

    </div>
</body>

</html>

Olá @Wayne,

Aqui está:

Código:

<!DOCTYPE html>
<html>
 
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
    <title>Grove Street Families</title>
    <link type="image/png" href="https://i.imgur.com/jTwGEvJ.png" rel="icon" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <style type="text/css">
        * {
            box-sizing: border-box;
        }
      
        body {
            background-image: url(https://wallpaperscraft.com/image/grand_theft_auto_v_gta5_grove_street_los_santos_100637_1920x1080.jpg);
            font-family: Arial;
            background-size: inherit;
            background-repeat: no-repeat;
            background-position: inherit;
        }
      
        a {
            text-decoration: none;
            color: #8BBE89;
            text-shadow: 1px 1px 1px #000;
            transition: .8s;
        }
      
        .container {
            width: 90%;
            margin: auto;
        }
      
        .nav {
            background: rgba(0, 0, 0, 0.66);
            border: 1px solid rgba(0, 0, 0, 0.6);
            padding: 5px;
            border-radius: 4px;
            text-align: center;
        }
      
        .nav li {
            display: inline-block;
            border-right: 1px solid rgba(0, 0, 0, 0.17);
        }
      
        .nav li:last-child {
            border-right: 0px;
        }
      
        .nav li a {
            color: white;
            text-decoration: none;
            padding: 5px;
        }
      
        .loginc {
            background: rgba(0, 0, 0, 0.66);
            border: 1px solid rgba(0, 0, 0, 0.6);
            width: 40%;
            margin: 50px auto;
        }
      
        .loginc img {
            max-width: 100%;
            height: auto;
        }
      
        .group input {
            float: right;
        }
      
        .group label {
            color: white;
            float: left;
        }
      
        .group {
            max-width: 100%;
            padding: 1em;
            padding-bottom: 2em;
        }
      
        .group:last-child {
            padding-bottom: 3em;
        }
      
        .iheload-login {
            border-color: #49825C;
            border-bottom-color: #89C97B;
            background: linear-gradient(to bottom, #9ED087, #216C58);
            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: #fff;
            display: inline-block;
            padding: 7px 20px;
            border-radius: 4px;
            outline: none;
            cursor: pointer;
        }
      
        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;
            border-radius: 3px;
        }
      
        .foot {
            text-align: center;
            border-top: 1px solid #00e000;
            color: white;
            font-size: 12px;
        }
      
        .success {
            background: #71ac76;
            color: white;
            text-align: center;
            padding: 1em;
            height: auto;
        }
      
        @media screen and (max-width:768px) {
            * {
                float: none;
            }
            .nav {
                text-align: left;
            }
            .loginc {
                width: 90%;
                margin: 30px auto;
            }
            .group {
                padding-bottom: 4px;
            }
            .group input {
                width: 100%;
                max-width: 90%;
                margin: auto;
            }
            .group label {
                padding-bottom: 16px;
                width: 100%;
            }
            .checkl {
                display: inline-flex;
                width: 100%;
            }
            .group {
                padding-bottom: 0;
                height: 80px;
            }
            .foot {
                padding: 5px;
            }
        }
    </style>
</head>
 
<body>
    <script type="text/javascript">
        (function($) {
            'use strict';
 
            $(function() {
                $.get('/forum')
                    .done(function(context) {
 
                        if ($('a[id="logout"]', context).length != 0) {
                            $('.success').fadeIn();
                            setTimeout(
                                function() {
                                    window.location.replace("/forum");
                                }, 3000);
 
                        }
 
                    })
                    .fail(function() {
                        alert('Contacte o Suporte Forumeiros!');
                    });
 
            });
        }(jQuery));
    </script>
 
    <div class="container">
 
        <div class="nav">
            <ul>
                <li>
                    <a href="http://gsf-nwd.forumeiros.com/forum">Fórum</a>
                </li>
                <li>
                    <a href="http://gsf-nwd.forumeiros.com/f2-recrutamento">Peça seu Recrutamento</a>
                </li>
                <li>
                    <a href="http://gsf-nwd.forumeiros.com/f5-revisao-de-banidos-expulsos">Revisão</a>
                </li>
                <li>
                    <a href="http://gsf-nwd.forumeiros.com/t1441-discord-o-novo-ts">Discord</a>
                </li>
            </ul>
        </div>
        <div class="loginc">
 
            <img src="https://i.imgur.com/Cn8b2yV.png" alt="Grove Street Families" title="Grove Street Families" />
 
            <form name="form_login" method="post" action="/login">
                <div class="success" style="display:none;">Membro já conectado, redirecionado...</div>
                <div class="group">
                    <label for="username">Nome de usuário:</label>
                    <input placeholder="Seu Usuário" class="inputfield" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" required />
                </div>
                <div class="group">
 
                    <label for="password">Senha:</label>
                    <input placeholder="Sua Senha" class="inputfield" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" required />
                </div>
                <div class="group checkl">
                    <label id="lbl_autologin" class="checkb" for="autologin">
                        <input type="checkbox" class="radio" checked="checked" tabindex="4" id="autologin" name="autologin" />
                        <span style="font-size: 13px;">Conexão Automática</span>
                    </label>
 
                    <input value="" name="redirect" type="hidden" />
                    <input value="" name="query" type="hidden" />
                    <input class="iheload-login" value="Login" tabindex="6" name="login" type="submit" />
 
                </div>
 
            </form>
            <div class="foot">
                <br />
                <span>Ainda não possui conta no Fórum GSF?
                  <a target="_blank" href="/register">Registre-se</a>
              </span>
                <p>Página desenvolvida por <a href="/u1">[GSF]Brunelli</a> e <a target="_blank" href="https://www.forumeiros.com">Forumeiros.com</a></p>
            </div>
 
        </div>
 
    </div>
</body>
 
</html>

Se ainda não estiver ao seu agrado procure por 3000 e altere o valor.

Até mais.

Ficou perfeito! Muito obrigado pela atenção, Pedxz e Fraise. 

Resolvido!