Página de login inicial HTML

3 participantes

Ir para baixo

Tópico resolvido Página de login inicial HTML

Mensagem por SOUT 08.01.19 14:48

Detalhes da questão


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

Descrição


Olá, gostaria de uma ajuda de alguém que entenda mais de estrutura html...
Estou querendo fazer uma página inicial em html pra começar no meu novo fórum.
Meu código não está muito bom, peguei um aqui no fórum mesmo e fui editando.
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>Bem vindo(a)</title>
    <link type="image/png" href="https://2img.net/r/ihimg/a/img924/5586/p1t1aM.jpg" rel="icon" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/font-awesome/css/font-awesome.min.css" />
    <script src="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.js"></script>
    <script src="https://forumeiros.github.io/resources/bootstrap/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
 
<body class="bg-light" style="background: url('https://2img.net/r/ihimg/a/img922/351/wGnjmr.jpg');">
<script type="text/javascript">
        (function($) {
            'use strict';
 
            $(function() {
                $.get('/forum')
                    .done(function(context) {
 
                        if ($('a[id="logout"]', context).length != 0) {
                            $('.alert-success').fadeIn();
                            setTimeout(
                                function() {
                                    window.location.replace("/forum");
                                }, 3000);
 
                        }
 
                    })
                    .fail(function() {
                        alert('Contacte o Suporte Forumeiros!');
                    });
 
            });
        }(jQuery));
    </script>
 
 
    <div class="container">
    <div class="py-5 text-center">
      <h2>Fórum Filmes</h2>
      <p class="lead">+Filmes e +Séries por favor!</p>
      </div>
    <div class="row">
      <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
        <div class="card card-signin my-5">
          <div class="card-body">
            <h5 class="card-title text-center">Entrar no fórum</h5>
            <form class="form-signin" method="post" action="/login">
              <div class="alert alert-success" style="display:none;" role="alert">
                  Sessão iniciada, redirecionado...
              </div>
              <div class="form-label-group">
                <input class="form-control" placeholder="Seu usuário" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" required autofocus />
              </div>
 
              <div class="form-label-group">
                <input class="form-control" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" placeholder="Sua Senha" required />
              </div>
 
              <div class="custom-control custom-checkbox mb-3">
                <input type="checkbox" class="custom-control-input" name="autologin" id="customCheck1" />
                <label class="custom-control-label" for="customCheck1">Lembrar dados</label>
              </div>
              <input value="" name="redirect" type="hidden" />
              <input value="" name="query" type="hidden" />
              <input class="btn btn-lg btn-primary btn-block text-uppercase" value="Entrar" tabindex="6" name="login" type="submit" />
              </form>
              <hr class="my-4" />
              <button class="btn btn-lg btn-google btn-block text-uppercase" name="login" type="submit" onclick="location.href='/register?change_temp=2'"><i class="fa fa-user mr-2"></i> Criar Conta</button>
          </div>
        </div>
      </div>
    </div>
    <footer class="my-5 pt-5 text-muted text-center text-small">
        <p class="mb-1">©️️️️ 2019 FF - Fórum Filmes</p>
        <ul class="list-inline">
          <li class="list-inline-item"><a href="/forum">Início</a></li>
          <li class="list-inline-item"><a href="/faq">FAQ</a></li>
          <li class="list-inline-item"><a href="/profile?mode=sendpassword">Esqueci a senha</a></li>
        <li class="list-inline-item"><a href="https://www.forumeiros.com" target="_blank">Forumeiros</a></li>
        </ul>
      </footer>
</div>
</body>
 
</html>
Eu gostaria que o fundo coubesse em todas as telas e em versões mobile também, na minha fica repetindo a imagem. O titulo e subtitulo que esta em cima gostaria da cor branca assim como o rodapé onde está o nome do site.
o que posso fazer? o que vocês conseguem me ajudar e explicar ?
Aguardo respostas, muito obrigado.
SOUT
SOUT
Novo Membro

Membro desde : 07/01/2019
Mensagens : 2
Pontos : 4

http://forumfilmes.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Página de login inicial HTML

Mensagem por tikky 08.01.19 18:05

Olá @SOUT,

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:

Recentemente atualizei esse código para o seguinte:
Código:
<!-- Página Login Simples by pedxz <Forumeiros> -->
<!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>Entrar no fórum</title>
    <link type="image/png" href="https://illiweb.com/fa/favicon/discussion.ico" rel="icon" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/font-awesome/css/font-awesome.min.css" />
    <script src="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.js"></script>
    <script src="https://forumeiros.github.io/resources/bootstrap/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
 
<body class="bg-light">
<script type="text/javascript">
        (function($) {
            'use strict';
 
            $(function() {
                $.get('/forum')
                    .done(function(context) {
 
                        if ($('a[id="logout"]', context).length != 0) {
                              $('.alert-success').fadeIn();
                              $('.register').html('Sessão iniciada, redirecionado...').prop('onclick', null);
                              $('input').attr('disabled', true);
                            setTimeout(
                                function() {
                                    window.location.replace('/forum');
                                }, 3000);
 
                        }
 
                    })
                    .fail(function() {
                        alert('Contacte o Suporte Forumeiros!');
                    });
 
            });
        }(jQuery));
    </script>
 
    <div class="container">
    <div class="pt-5 text-center">
      <img src="https://2img.net/r/frmste/images/sigle.png" />
      </div>
    <div class="row">
      <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
        <div class="card border-0 shadow-lg my-5">
          <div class="card-body">
            <h5 class="card-title text-center">Entrar no fórum</h5>
            <form class="form-signin" method="post" action="/login">
              <div class="form-label-group mb-3">
                <input class="form-control" placeholder="Seu usuário" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" required autofocus />
              </div>
 
              <div class="form-label-group mb-3">
                <input class="form-control" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" placeholder="Sua Senha" required />
              </div>
 
              <div class="custom-control custom-checkbox mb-3 float-right">
                <input type="checkbox" class="custom-control-input" name="autologin" id="autologin" />
                <label class="custom-control-label" for="autologin">Lembrar dados</label>
              </div>
              <input value="" name="redirect" type="hidden" />
              <input value="" name="query" type="hidden" />
              <input class="btn btn-lg btn-primary btn-block text-uppercase rounded-0" value="Entrar" tabindex="6" name="login" type="submit" />
              </form>
              <hr class="my-4" />
              <button class="btn btn-lg btn-google btn-block text-uppercase register rounded-0 text-truncate"  type="submit" onclick="location.href='/register?change_temp=2'"><i class="fa fa-user mr-2"></i> Criar Conta</button>
          </div>
        </div>
      </div>
    </div>
      <footer class="text-muted text-center text-small">
      <p class="mb-1">️ Feita com <i class="fa fa-heart text-danger"></i> <a class="text-muted" href="https://forumeiros.com">Forumeiros.com</a> com <b>Bootstrap</b>.</p>
        <ul class="list-inline">
          <li class="list-inline-item"><a href="/forum">Início</a></li>
          <li class="list-inline-item"><a href="/faq">FAQ</a></li>
          <li class="list-inline-item"><a href="/privacy">Política de Confidencialidade</a></li>
          <li class="list-inline-item"><a href="/profile?mode=sendpassword">Esqueceu a senha?</a></li>
        </ul>
      </footer>
</div>
</body>
 
</html>

Com as edições que o Senhor pediu:
Código:
<!-- Página Login Simples by pedxz <Forumeiros> -->
<!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>Entrar no fórum</title>
    <link type="image/png" href="https://illiweb.com/fa/favicon/discussion.ico" rel="icon" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.css" />
    <link rel="stylesheet" href="https://forumeiros.github.io/resources/font-awesome/css/font-awesome.min.css" />
    <script src="https://forumeiros.github.io/resources/bootstrap/bootstrap.min.js"></script>
    <script src="https://forumeiros.github.io/resources/bootstrap/popper.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
 
<body class="bg-dark" style="background: url('https://2img.net/r/ihimg/a/img922/351/wGnjmr.jpg')
no-repeat black; background-size: cover; background-position: center center;">
<script type="text/javascript">
        (function($) {
            'use strict';
 
            $(function() {
                $.get('/forum')
                    .done(function(context) {
 
                        if ($('a[id="logout"]', context).length != 0) {
                              $('.alert-success').fadeIn();
                              $('.register').html('Sessão iniciada, redirecionado...').prop('onclick', null);
                              $('input').attr('disabled', true);
                            setTimeout(
                                function() {
                                    window.location.replace('/forum');
                                }, 3000);
 
                        }
 
                    })
                    .fail(function() {
                        alert('Contacte o Suporte Forumeiros!');
                    });
 
            });
        }(jQuery));
    </script>
 
    <div class="container">
    <div class="pt-5 text-center text-light">
      <h2>Fórum Filmes</h2>
      <p class="lead">+Filmes e +Séries por favor!</p>
      </div>
    <div class="row">
      <div class="col-sm-9 col-md-7 col-lg-5 mx-auto">
        <div class="card border-0 shadow-lg my-5">
          <div class="card-body">
            <h5 class="card-title text-center">Entrar no fórum</h5>
            <form class="form-signin" method="post" action="/login">
              <div class="form-label-group mb-3">
                <input class="form-control" placeholder="Seu usuário" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" required autofocus />
              </div>
 
              <div class="form-label-group mb-3">
                <input class="form-control" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" placeholder="Sua Senha" required />
              </div>
 
              <div class="custom-control custom-checkbox mb-3 float-right">
                <input type="checkbox" class="custom-control-input" name="autologin" id="autologin" />
                <label class="custom-control-label" for="autologin">Lembrar dados</label>
              </div>
              <input value="" name="redirect" type="hidden" />
              <input value="" name="query" type="hidden" />
              <input class="btn btn-lg btn-primary btn-block text-uppercase rounded-0" value="Entrar" tabindex="6" name="login" type="submit" />
              </form>
              <hr class="my-4" />
              <button class="btn btn-lg btn-google btn-block text-uppercase register rounded-0 text-truncate"  type="submit" onclick="location.href='/register?change_temp=2'"><i class="fa fa-user mr-2"></i> Criar Conta</button>
          </div>
        </div>
      </div>
    </div>
      <footer class="text-light text-center text-small">
      <p class="mb-1">️ 2019 FF - Fórum Filmes. <a class="text-light" href="https://forumeiros.com">Forumeiros.com</a></p>
        <ul class="list-inline">
          <li class="list-inline-item"><a
class="text-light" href="/forum">Início</a></li>
          <li class="list-inline-item"><a
class="text-light" href="/faq">FAQ</a></li>
          <li class="list-inline-item"><a
class="text-light" href="/privacy">Política de Confidencialidade</a></li>
          <li class="list-inline-item"><a
class="text-light" href="/profile?mode=sendpassword">Esqueceu a senha?</a></li>
        </ul>
      </footer>
</div>
</body>
 
</html>
Qualquer dúvida, exponha!

Cordialmente,
pedxz.
tikky
tikky
Admineiro
Admineiro

Membro desde : 13/01/2017
Mensagens : 7962
Pontos : 9217

Ir para o topo Ir para baixo

Tópico resolvido Re: Página de login inicial HTML

Mensagem por SOUT 08.01.19 18:45

Deu certinho muito obrigadoo
SOUT
SOUT
Novo Membro

Membro desde : 07/01/2019
Mensagens : 2
Pontos : 4

http://forumfilmes.forumeiros.com

Ir para o topo Ir para baixo

Tópico resolvido Re: Página de login inicial HTML

Mensagem por RafaelS. 08.01.19 19:12

Tópico resolvido


Movido para "Questões resolvidas".
avatar
RafaelS.
Membro Entusiasta

Membro desde : 26/04/2014
Mensagens : 5746
Pontos : 7156

http://techmais.forumeiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

 
Permissões neste sub-fórum
Não podes responder a tópicos