ArtigosPágina inicial personalizada
2 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Página inicial personalizada
por sucodemaracaju 13.05.20 21:44
Detalhes da questão
Endereço do fórum: http://teste1432.forumeiros.com
Versão do fórum: ModernBB
Descrição
Olá, tenho um código aqui de uma página de login
- HTML:
- Código:
<head>
<meta name="author" content="GianDesign (Wickfield)">
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="css/gian.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Painel: Login</title>
</head>
<body>
<div id="gian">
<h1 style="text-align:center;color:#fff; margin-top: 100px;">Digite seu e-mail ou nome de usuário
<div class="gian2">
<input class="inpt" type="text" name="user" placeholder="Usuário"><br>
<button class="send"><i class="fa fa-sign-in"></i> Continuar</button><br><br>
<p><strong>Crie uma conta</strong>
</p></div>
</h1></div>
</body>
- CSS:
- Código:
/* Desenhado por BSVS (PowerPixel) */
/* Codificada por GianDesign (Skype: gian.wck) */
@import 'https://fonts.googleapis.com/css?family=Poiret+One';
* {
margin: 0;
padding: 0; }
body {
background: #FFF;
font-family: Poiret One; }
#gian {
background: #5BD9C2;
width: 100%;
height: 400px;
position: absolute; }
.gian2 {
background:#FFF;
width: 400px;
height: 350px;
border-radius: 3px;
margin-left: 450px;
margin-top: 100px;
box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1); }
.send {
background: #5BD9C2;
width: 250px;
height: 45px;
border: none;
border-radius: 3px;
color: #FFF;
font-size: 18px;
margin-top: 30px;
margin-left: 10px;
box-shadow: inset 0 -4px 0 rgba(0,0,0,0.1);
transition: all 1s; }
.send:hover {
background:#26A48D;
transition: all 1s; }
textarea:focus, input:focus, button:focus {
outline: 0;
transition: all 1s; }
p {
color: #5BD9C2;
text-align: center;
font-size: 18px; }
.inpt {
border: none;
box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
margin-top: 65px;
font-size: 18px;
}
input[type=text]:hover{
background-color:#fff;
box-shadow: inset 0 -4px 0 rgb(91,217,194);
transition: all 1s;
border: none;
padding: 5px;
}
Queria fazer isso funcionar como uma página de login, agradeço
sucodemaracaju- **
- Membro desde : 04/05/2020
Mensagens : 62
Pontos : 116 -
Re: Página inicial personalizada
por tikky 13.05.20 21:54
Olá @sucodemaracaju,
Aqui esta:
Atenciosamente,
pedxz.
Aqui esta:
- Código:
<!doctype html>
<html lang="pt">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="author" content="GianDesign (Wickfield)">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Painel: Login</title>
<style>
/* Desenhado por BSVS (PowerPixel) */
/* Codificada por GianDesign (Skype: gian.wck) */
@import 'https://fonts.googleapis.com/css?family=Poiret+One';
* {
margin: 0;
padding: 0; }
body {
background: #FFF;
font-family: Poiret One; }
#gian {
background: #5BD9C2;
width: 100%;
height: 400px;
position: absolute; }
.gian2 {
background:#FFF;
width: 400px;
height: 350px;
border-radius: 3px;
margin-left: 450px;
margin-top: 100px;
box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1); }
.send {
background: #5BD9C2;
width: 250px;
height: 45px;
border: none;
border-radius: 3px;
color: #FFF;
font-size: 18px;
margin-top: 30px;
margin-left: 10px;
box-shadow: inset 0 -4px 0 rgba(0,0,0,0.1);
transition: all 1s; }
.send:hover {
background:#26A48D;
transition: all 1s; }
textarea:focus, input:focus, button:focus {
outline: 0;
transition: all 1s; }
p {
color: #5BD9C2;
text-align: center;
font-size: 18px; }
.inpt {
border: none;
box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
margin-top: 65px;
font-size: 18px;
}
input[type=text]:hover{
background-color:#fff;
box-shadow: inset 0 -4px 0 rgb(91,217,194);
transition: all 1s;
border: none;
padding: 5px;
}
</style>
</head>
<body>
<div id="gian">
<h1 style="text-align:center;color:#fff; margin-top: 100px;">
Digite seu e-mail ou nome de usuário
<div class="gian2">
<input class="inpt" type="text" name="user" placeholder="Usuário"><br>
<button class="send"><i class="fa fa-sign-in"></i> Continuar</button><br><br>
<p><strong>Crie uma conta</strong>
</p>
</div>
</h1>
</div>
</body>
</html>
Atenciosamente,
pedxz.
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Página inicial personalizada
por sucodemaracaju 13.05.20 21:57
Valeu cara, brigadão
Mas tem como deixar ele funcional?
Mas tem como deixar ele funcional?
sucodemaracaju- **
- Membro desde : 04/05/2020
Mensagens : 62
Pontos : 116 -
Re: Página inicial personalizada
por tikky 13.05.20 22:09
Altere para:
- Código:
<!doctype html>
<html lang="pt">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="author" content="GianDesign (Wickfield)">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Painel: Login</title>
<style>
/* Desenhado por BSVS (PowerPixel) */
/* Codificada por GianDesign (Skype: gian.wck) */
@import 'https://fonts.googleapis.com/css?family=Poiret+One';
* {
margin: 0;
padding: 0; }
body {
background: #FFF;
font-family: Poiret One; }
#gian {
background: #5BD9C2;
width: 100%;
height: 400px;
position: absolute; }
.gian2 {
background:#FFF;
width: 400px;
height: 350px;
border-radius: 3px;
margin-left: 450px;
margin-top: 100px;
box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1); }
.send {
background: #5BD9C2;
width: 250px;
height: 45px;
border: none;
border-radius: 3px;
color: #FFF;
font-size: 18px;
margin-top: 30px;
margin-left: 10px;
box-shadow: inset 0 -4px 0 rgba(0,0,0,0.1);
transition: all 1s; }
.send:hover {
background:#26A48D;
transition: all 1s; }
textarea:focus, input:focus, button:focus {
outline: 0;
transition: all 1s; }
p {
color: #5BD9C2;
text-align: center;
font-size: 18px; }
.inpt {
border: none;
box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
margin-top: 65px;
font-size: 18px;
}
input[type=text]:hover{
background-color:#fff;
box-shadow: inset 0 -4px 0 rgb(91,217,194);
transition: all 1s;
border: none;
padding: 5px;
}
</style>
</head>
<body>
<div id="gian">
<h1 style="text-align:center;color:#fff; margin-top: 100px;">
Digite seu nome de usuário e senha
<div class="gian2">
<form method="post" action="/login">
<input class="inpt" placeholder="Seu usuário" value="" maxlength="40" size="30" id="username" name="username" tabindex="1" type="text" required autofocus /><br />
<input class="inpt" maxlength="25" size="30" name="password" id="password" tabindex="2" type="password" placeholder="Sua Senha" required /><br />
<!-- Don't delete this -->
<input value="" name="redirect" type="hidden" />
<input value="" name="query" type="hidden" />
<!-- ./End Don't delete this -->
<button tabindex="6" name="login" class="send"><i class="fa fa-sign-in"></i> Continuar</button><br><br>
</form>
<p><strong><a href="/register">Crie uma conta</a></strong>
</p>
</div>
</h1>
</div>
</body>
</html>
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Re: Página inicial personalizada
por sucodemaracaju 13.05.20 22:33
Pedxz escreveu:
Mano, cê é demais!
Vou abrir outro tópico para fazer uma tela de registro com o mesmo estilo da de login, poderia me ajudar?
sucodemaracaju- **
- Membro desde : 04/05/2020
Mensagens : 62
Pontos : 116 -
Re: Página inicial personalizada
por tikky 13.05.20 22:40
Sim, claro!
Tópico resolvidoMovido para "Questões resolvidas". |
tikky- Admineiro
- Membro desde : 13/01/2017
Mensagens : 7964
Pontos : 9219
Tópicos semelhantes» Página inicial personalizada
» Página inicial personalizada
» Página inicial personalizada
» Pagina inicial personalizada
» Pagina inicial personalizada
» Página inicial personalizada
» Página inicial personalizada
» Pagina inicial personalizada
» Pagina inicial personalizada
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos