Página de login inicial HTML

Item: Página de login inicial HTML
Rating: 1

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'"><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.

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:

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.

Recentemente atualizei esse código para o seguinte:

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>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'"><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::  <!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'"><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>