Criar pagina HTML inicial
3 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
Criar pagina HTML inicial
Qual é minha questão:
Olá,
Gostaria que vocês criassem um página HTML para mim (Caso vcs não dão suporte podem encerrar).
Eu sei que o BrunoH. faz páginas porque já vi ele fazendo para um usuário.
Então quero o seguinte:
A página inicial com Login e Senha para entrar e do lado meu logo e em baixo uma caixa de texto para escrever alguma coisa que eu queira.
Se possível criar, eu agradeço.
Até Mais.
Endereço do meu fórum:
http://pixel-life.forumbrasil.net
Versão do fórum:
PUNBB
Olá,
Gostaria que vocês criassem um página HTML para mim (Caso vcs não dão suporte podem encerrar).
Eu sei que o BrunoH. faz páginas porque já vi ele fazendo para um usuário.
Então quero o seguinte:
A página inicial com Login e Senha para entrar e do lado meu logo e em baixo uma caixa de texto para escrever alguma coisa que eu queira.
Se possível criar, eu agradeço.
Até Mais.
Endereço do meu fórum:
http://pixel-life.forumbrasil.net
Versão do fórum:
PUNBB
Re: Criar pagina HTML inicial
Olá!
Agrada-lhe? se não gostar, seja mais especifico por gentileza.
Até mais.
Agrada-lhe? se não gostar, seja mais especifico por gentileza.
- Código:
<html>
<head><title>Página Inicial - Pixel Life</title>
<style>/* PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS */
.img-1 {
position: relative;
margin-top: 110px;
left: -600px;
}
body {
background: url(http://audentio.com/demo/ipb3/public/style_images/cubic/assets/ad_styler/imgs/bgs/noise_1.png) repeat;
}
.escreve_algo_ai {
border: 1px solid black;
background: #686868;
padding: 15px;
top: 230px;
left: 600px;
position: relative;
width: 400px;
border-radius: 1px 1px 1px;
}</style>
</head>
<body>
<img class="img-1" align: right; style="float: right;" src="http://i44.tinypic.com/ftncsg.png" />
<div class="escreve_algo_ai">AQUI VOCÊ DEVE ESCREVER ALGUMA COISA PRA ISSO NÃO FICAR EM BRANCO \O/ \O/ \O/ \O/</div>
</body>
</html>
<style type="text/css">
/*
CSS RESET
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
body {
line-height: 1;
}
ol,ul {
list-style: none;
}
blockquote,q {
quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* CSS Animations */
@keyframes "login" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
margin-top: -50px;
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
margin-top: -75px;
}
}
@-moz-keyframes login {
0% {
filter: alpha(opacity=0);
opacity: 0;
margin-top: -50px;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
margin-top: -75px;
}
}
@-webkit-keyframes "login" {
0% {
filter: alpha(opacity=0);
opacity: 0;
margin-top: -50px;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
margin-top: -75px;
}
}
@-ms-keyframes "login" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
margin-top: -50px;
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
margin-top: -75px;
}
}
@-o-keyframes "login" {
0% {
filter: alpha(opacity=0);
opacity: 0;
margin-top: -50px;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
margin-top: -75px;
}
}
/* Main CSS */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body {
font-family: sans-serif;
background-color: #383837;
background-image: -webkit-radial-gradient(bottom, #333332 0%, #383837 100%);
background-image: -moz-radial-gradient(bottom, #333332 0%, #383837 100%);
background-image: -o-radial-gradient(bottom, #333332 0%, #383837 100%);
background-image: -ms-radial-gradient(bottom, #333332 0%, #383837 100%);
background-image:radial-gradient(bottom, #333332 0%, #383837 100%);
}
#slick-login {
width: 220px;
height: 155px;
position: absolute;
left: 448px;
top: 219px;
margin-left: -110px;
margin-top: -75px;
-webkit-animation: login 1s ease-in-out;
-moz-animation: login 1s ease-in-out;
-ms-animation: login 1s ease-in-out;
-o-animation: login 1s ease-in-out;
animation: login 1s ease-in-out;
}
#slick-login label {
display: none;
}
.placeholder {
color: #444;
}
#slick-login input[type="text"] {
width: 100%;
height: 40px;
positon: relative;
margin-top: 7px;
font-size: 14px;
color: #444;
outline: none;
border: 1px solid rgba(0, 0, 0, .49);
padding-left: 20px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
border-radius: 6px;
background-image: url(http://img835.imageshack.us/img835/4700/i3c4.png);
background-repeat: no-repeat;
background-position: center left;
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%)
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
-webkit-box-shadow: inset 0px 2px 0px #d9d9d9;
box-shadow: inset 0px 2px 0px #d9d9d9;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#slick-login input[type="password"] {
width: 100%;
height: 40px;
positon: relative;
margin-top: 7px;
font-size: 14px;
color: #444;
outline: none;
border: 1px solid rgba(0, 0, 0, .49);
padding-left: 20px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
border-radius: 6px;
background-image: url(http://img51.imageshack.us/img51/9809/oz.png);
background-repeat: no-repeat;
background-position: center left;
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%)
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
-webkit-box-shadow: inset 0px 2px 0px #d9d9d9;
box-shadow: inset 0px 2px 0px #d9d9d9;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#slick-login input[type="text"]:focus,#slick-login input[type="password"]:focus {
-webkit-box-shadow: inset 0px 2px 0px #a7a7a7;
box-shadow: inset 0px 2px 0px #a7a7a7;
}
#slick-login input:first-child {
margin-top: 0px;
}
#slick-login input[type="submit"] {
width: 100%;
height: 50px;
margin-top: 7px;
color: #fff;
font-size: 18px;
font-weight: bold;
text-shadow: 0px -1px 0px #5b6ddc;
outline: none;
border: 1px solid rgba(0, 0, 0, .49);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
border-radius: 6px;
background-color: #8267e8;
background-image: -webkit-radial-gradient(bottom, #8267e8 0%, #4d0d8f 100%);
background-image: -moz-radial-gradient(bottom, #8267e8 0%, #4d0d8f 100%);
background-image: -o-radial-gradient(bottom, #8267e8 0%, #4d0d8f 100%);
background-image: -ms-radial-gradient(bottom, #8267e8 0%, #4d0d8f 100%);
background-image: radial-gradient(bottom, #8267e8 0%, #4d0d8f 100%);
-webkit-box-shadow: inset 0px 1px 0px #9982ee
box-shadow: inset 0px 1px 0px #9982ee;
cursor: pointer;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#slick-login input[type="submit"]:hover {
background-color: #4d0d8f;
background-image: -webkit-linear-gradient(bottom, #4d0d8f 0%, #8267e8100%);
background-image: -moz-linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
background-image: -o-linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
background-image: -ms-linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
background-image: linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
-webkit-box-shadow: inset 0px 1px 0px #9982ee;
box-shadow: inset 0px 1px 0px #9982ee;
margin-top: 10px;
}
#slick-login input[type="submit"]:active {
background-color: #4d0d8f;
background-image: -webkit-linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
background-image: -moz-linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
background-image: -o-linear-gradient(bottom, #4d0d8f 0%, #8267e8f 100%);
background-image: -ms-linear-gradient(bottom, #4d0d8f 0%, #8267e8100%);
background-image: linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
-webkit-box-shadow: inset 0px 1px 0px #9982ee;
box-shadow: inset 0px 1px 0px #9982ee;
}
</style>
<!DOCTYPE html>
<head>
<title>Login - Pixel Life</title>
<meta name="description" content="Login - Pixel Life">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
</head>
<body>
<form id="slick-login">
<label for="username">{L_USERNAME}</label><input type="text" name="username" class="placeholder" placeholder="Nome do Usuário">
<label for="password">{L_PASSWORD}:</label><input type="password" name="password" class="placeholder" placeholder="Senha">
<input type="submit" value="Login">
</form>
</body>
</html>
Até mais.
Re: Criar pagina HTML inicial
Olá,
Desejo algumas alterações apenas.
Poderia colocar o plano de fundo Branco?
Gostaria que você colocasse ele logo: https://i.imgur.com/yLDMHqC.png e coloca na parte Superior da Esquerda?
e colocar o login a direita e colocar a caixa de texto perto dele?^
Até Mais.
Desejo algumas alterações apenas.
Poderia colocar o plano de fundo Branco?
Gostaria que você colocasse ele logo: https://i.imgur.com/yLDMHqC.png e coloca na parte Superior da Esquerda?
e colocar o login a direita e colocar a caixa de texto perto dele?^
Até Mais.
Re: Criar pagina HTML inicial
Olá!
Agrada-lhe? alguma alteração?
Até mais.
Agrada-lhe? alguma alteração?
- Código:
<html>
<head><title>Página Inicial - Pixel Life</title>
<style>/* PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS */
#slick-login {
position: relative !important;
margin-left: 300px !important;
margin-top: -100px !important;
}
.img-1 {
position: relative;
left: -800px;
}
body {
background: url(http://audentio.com/demo/ipb3/public/style_images/cubic/assets/ad_styler/imgs/bgs/noise_1.png) repeat;
}
.escreve_algo_ai {
border: 1px solid black;
background: #686868;
padding: 15px;
top: 230px;
left: 300px;
position: relative;
width: 400px;
border-radius: 1px 1px 1px;
}</style>
</head>
<body>
<img class="img-1" align: right; style="float: right;" src="http://i.imgur.com/yLDMHqC.png" />
<div class="escreve_algo_ai">AQUI VOCÊ DEVE ESCREVER ALGUMA COISA PRA ISSO NÃO FICAR EM BRANCO \O/ \O/ \O/ \O/</div>
</body>
</html>
<style type="text/css">
/*
CSS RESET
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
body {
line-height: 1;
}
ol,ul {
list-style: none;
}
blockquote,q {
quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* CSS Animations */
@keyframes "login" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
margin-top: -50px;
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
margin-top: -75px;
}
}
@-moz-keyframes login {
0% {
filter: alpha(opacity=0);
opacity: 0;
margin-top: -50px;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
margin-top: -75px;
}
}
@-webkit-keyframes "login" {
0% {
filter: alpha(opacity=0);
opacity: 0;
margin-top: -50px;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
margin-top: -75px;
}
}
@-ms-keyframes "login" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
margin-top: -50px;
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
margin-top: -75px;
}
}
@-o-keyframes "login" {
0% {
filter: alpha(opacity=0);
opacity: 0;
margin-top: -50px;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
margin-top: -75px;
}
}
/* Main CSS */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body {
font-family: sans-serif;
}
#slick-login {
width: 220px;
height: 155px;
position: absolute;
left: 448px;
top: 219px;
margin-left: -110px;
margin-top: -75px;
-webkit-animation: login 1s ease-in-out;
-moz-animation: login 1s ease-in-out;
-ms-animation: login 1s ease-in-out;
-o-animation: login 1s ease-in-out;
animation: login 1s ease-in-out;
}
#slick-login label {
display: none;
}
.placeholder {
color: #444;
}
#slick-login input[type="text"] {
width: 100%;
height: 40px;
positon: relative;
margin-top: 7px;
font-size: 14px;
color: #444;
outline: none;
border: 1px solid rgba(0, 0, 0, .49);
padding-left: 20px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
border-radius: 6px;
background-image: url(http://img835.imageshack.us/img835/4700/i3c4.png);
background-repeat: no-repeat;
background-position: center left;
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%)
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
-webkit-box-shadow: inset 0px 2px 0px #d9d9d9;
box-shadow: inset 0px 2px 0px #d9d9d9;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#slick-login input[type="password"] {
width: 100%;
height: 40px;
positon: relative;
margin-top: 7px;
font-size: 14px;
color: #444;
outline: none;
border: 1px solid rgba(0, 0, 0, .49);
padding-left: 20px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
border-radius: 6px;
background-image: url(http://img51.imageshack.us/img51/9809/oz.png);
background-repeat: no-repeat;
background-position: center left;
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%)
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
-webkit-box-shadow: inset 0px 2px 0px #d9d9d9;
box-shadow: inset 0px 2px 0px #d9d9d9;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#slick-login input[type="text"]:focus,#slick-login input[type="password"]:focus {
-webkit-box-shadow: inset 0px 2px 0px #a7a7a7;
box-shadow: inset 0px 2px 0px #a7a7a7;
}
#slick-login input:first-child {
margin-top: 0px;
}
#slick-login input[type="submit"] {
width: 100%;
height: 50px;
margin-top: 7px;
color: #fff;
font-size: 18px;
font-weight: bold;
text-shadow: 0px -1px 0px #5b6ddc;
outline: none;
border: 1px solid rgba(0, 0, 0, .49);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
border-radius: 6px;
background-color: #8267e8;
background-image: -webkit-radial-gradient(bottom, #8267e8 0%, #4d0d8f 100%);
background-image: -moz-radial-gradient(bottom, #8267e8 0%, #4d0d8f 100%);
background-image: -o-radial-gradient(bottom, #8267e8 0%, #4d0d8f 100%);
background-image: -ms-radial-gradient(bottom, #8267e8 0%, #4d0d8f 100%);
background-image: radial-gradient(bottom, #8267e8 0%, #4d0d8f 100%);
-webkit-box-shadow: inset 0px 1px 0px #9982ee
box-shadow: inset 0px 1px 0px #9982ee;
cursor: pointer;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#slick-login input[type="submit"]:hover {
background-color: #4d0d8f;
background-image: -webkit-linear-gradient(bottom, #4d0d8f 0%, #8267e8100%);
background-image: -moz-linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
background-image: -o-linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
background-image: -ms-linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
background-image: linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
-webkit-box-shadow: inset 0px 1px 0px #9982ee;
box-shadow: inset 0px 1px 0px #9982ee;
margin-top: 10px;
}
#slick-login input[type="submit"]:active {
background-color: #4d0d8f;
background-image: -webkit-linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
background-image: -moz-linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
background-image: -o-linear-gradient(bottom, #4d0d8f 0%, #8267e8f 100%);
background-image: -ms-linear-gradient(bottom, #4d0d8f 0%, #8267e8100%);
background-image: linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
-webkit-box-shadow: inset 0px 1px 0px #9982ee;
box-shadow: inset 0px 1px 0px #9982ee;
}
</style>
<!DOCTYPE html>
<head>
<title>Login - Pixel Life</title>
<meta name="description" content="Login - Pixel Life">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
</head>
<body>
<form id="slick-login">
<label for="username">{L_USERNAME}</label><input type="text" name="username" class="placeholder" placeholder="Nome do Usuário">
<label for="password">{L_PASSWORD}:</label><input type="password" name="password" class="placeholder" placeholder="Senha">
<input type="submit" value="Login">
</form>
</body>
</html>
Até mais.
Re: Criar pagina HTML inicial
Olá,
Quase perfeito :3
Poderia centralizar o logo?
E trazer o login para a direita e depois colocar ele um pouco mais baixo (coisa de 10px)
E deixar a caixa de texto mais para a esquerda e colocar ele mais para baixo? (Coisa de 10px)
E para não te dar mais trabalho poderia me mostrar onde vou para colocar a a caixa de texto e o login?
Até Mais.
Quase perfeito :3
Poderia centralizar o logo?
E trazer o login para a direita e depois colocar ele um pouco mais baixo (coisa de 10px)
E deixar a caixa de texto mais para a esquerda e colocar ele mais para baixo? (Coisa de 10px)
E para não te dar mais trabalho poderia me mostrar onde vou para colocar a a caixa de texto e o login?
Até Mais.
Re: Criar pagina HTML inicial
Olá!
Como o senhor mesmo disse, para não me dar trabalho vou lhe ensinar a modificar.
Caixa de escrever alguma coisa:
[i]Procure por:[/i]
Logo:
[i]Procure por:[/i]
Login
Procure por[/b]:
No código acima procure por "100", quanto mais aumentar este número, mais para a "esquerda" ele ira ficar.
Até mais.
Como o senhor mesmo disse, para não me dar trabalho vou lhe ensinar a modificar.
Caixa de escrever alguma coisa:
[i]Procure por:[/i]
- Código:
.escreve_algo_ai {
border: 1px solid black;
background: #686868;
padding: 15px;
top: 230px;
left: 300px;
position: relative;
width: 400px;
border-radius: 1px 1px 1px;
}
Logo:
[i]Procure por:[/i]
- Código:
.img-1 {
position: relative;
left: -800px;
}
Login
Procure por[/b]:
- Código:
#slick-login {
position: relative !important;
margin-left: 300px !important;
margin-top: -100px !important;
}
No código acima procure por "100", quanto mais aumentar este número, mais para a "esquerda" ele ira ficar.
Até mais.
Re: Criar pagina HTML inicial
Olá!
Assim amigo:
Até mais.
Assim amigo:
- Código:
<html>
<head><title>Página Inicial - Pixel Life</title>
<style>/* PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS PÁGINA FEITA POR CRAZY TODOS OS DIREITOS RESERVADOS */
#slick-login {
position: relative !important;
margin-left: 300px !important;
margin-top: -100px !important;
}
.img-1 {
position: relative;
left: -800px;
}
body {
background: url(http://audentio.com/demo/ipb3/public/style_images/cubic/assets/ad_styler/imgs/bgs/noise_1.png) repeat;
}
.escreve_algo_ai {
border: 1px solid black;
background: #686868;
padding: 15px;
top: 230px;
left: 300px;
position: relative;
width: 400px;
border-radius: 1px 1px 1px;
}</style>
</head>
<body>
<img class="img-1" align: right; style="float: right;" src="http://i.imgur.com/yLDMHqC.png" />
<img class="img-1" align: right; style="float: right;" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQVyMf9Gt4TfqW83yZ0aMrMl4PP4tDdSf3kRWfUlbZK0t9JD288" />
<div class="escreve_algo_ai">AQUI VOCÊ DEVE ESCREVER ALGUMA COISA PRA ISSO NÃO FICAR EM BRANCO \O/ \O/ \O/ \O/</div>
</body>
</html>
<style type="text/css">
/*
CSS RESET
http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
display: block;
}
body {
line-height: 1;
}
ol,ul {
list-style: none;
}
blockquote,q {
quotes: none;
}
blockquote:before,blockquote:after,q:before,q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
/* CSS Animations */
@keyframes "login" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
margin-top: -50px;
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
margin-top: -75px;
}
}
@-moz-keyframes login {
0% {
filter: alpha(opacity=0);
opacity: 0;
margin-top: -50px;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
margin-top: -75px;
}
}
@-webkit-keyframes "login" {
0% {
filter: alpha(opacity=0);
opacity: 0;
margin-top: -50px;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
margin-top: -75px;
}
}
@-ms-keyframes "login" {
0% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
margin-top: -50px;
}
100% {
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
opacity: 1;
margin-top: -75px;
}
}
@-o-keyframes "login" {
0% {
filter: alpha(opacity=0);
opacity: 0;
margin-top: -50px;
}
100% {
filter: alpha(opacity=100);
opacity: 1;
margin-top: -75px;
}
}
/* Main CSS */
* { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
body {
font-family: sans-serif;
}
#slick-login {
width: 220px;
height: 155px;
position: absolute;
left: 448px;
top: 219px;
margin-left: -110px;
margin-top: -75px;
-webkit-animation: login 1s ease-in-out;
-moz-animation: login 1s ease-in-out;
-ms-animation: login 1s ease-in-out;
-o-animation: login 1s ease-in-out;
animation: login 1s ease-in-out;
}
#slick-login label {
display: none;
}
.placeholder {
color: #444;
}
#slick-login input[type="text"] {
width: 100%;
height: 40px;
positon: relative;
margin-top: 7px;
font-size: 14px;
color: #444;
outline: none;
border: 1px solid rgba(0, 0, 0, .49);
padding-left: 20px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
border-radius: 6px;
background-image: url(http://img835.imageshack.us/img835/4700/i3c4.png);
background-repeat: no-repeat;
background-position: center left;
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%)
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
-webkit-box-shadow: inset 0px 2px 0px #d9d9d9;
box-shadow: inset 0px 2px 0px #d9d9d9;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#slick-login input[type="password"] {
width: 100%;
height: 40px;
positon: relative;
margin-top: 7px;
font-size: 14px;
color: #444;
outline: none;
border: 1px solid rgba(0, 0, 0, .49);
padding-left: 20px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
border-radius: 6px;
background-image: url(http://img51.imageshack.us/img51/9809/oz.png);
background-repeat: no-repeat;
background-position: center left;
background-image: -webkit-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%)
background-image: -moz-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: -o-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: -ms-linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
background-image: linear-gradient(bottom, #FFFFFF 0%, #F2F2F2 100%);
-webkit-box-shadow: inset 0px 2px 0px #d9d9d9;
box-shadow: inset 0px 2px 0px #d9d9d9;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#slick-login input[type="text"]:focus,#slick-login input[type="password"]:focus {
-webkit-box-shadow: inset 0px 2px 0px #a7a7a7;
box-shadow: inset 0px 2px 0px #a7a7a7;
}
#slick-login input:first-child {
margin-top: 0px;
}
#slick-login input[type="submit"] {
width: 100%;
height: 50px;
margin-top: 7px;
color: #fff;
font-size: 18px;
font-weight: bold;
text-shadow: 0px -1px 0px #5b6ddc;
outline: none;
border: 1px solid rgba(0, 0, 0, .49);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
border-radius: 6px;
background-color: #8267e8;
background-image: -webkit-radial-gradient(bottom, #8267e8 0%, #4d0d8f 100%);
background-image: -moz-radial-gradient(bottom, #8267e8 0%, #4d0d8f 100%);
background-image: -o-radial-gradient(bottom, #8267e8 0%, #4d0d8f 100%);
background-image: -ms-radial-gradient(bottom, #8267e8 0%, #4d0d8f 100%);
background-image: radial-gradient(bottom, #8267e8 0%, #4d0d8f 100%);
-webkit-box-shadow: inset 0px 1px 0px #9982ee
box-shadow: inset 0px 1px 0px #9982ee;
cursor: pointer;
-webkit-transition: all .1s ease-in-out;
-moz-transition: all .1s ease-in-out;
-o-transition: all .1s ease-in-out;
-ms-transition: all .1s ease-in-out;
transition: all .1s ease-in-out;
}
#slick-login input[type="submit"]:hover {
background-color: #4d0d8f;
background-image: -webkit-linear-gradient(bottom, #4d0d8f 0%, #8267e8100%);
background-image: -moz-linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
background-image: -o-linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
background-image: -ms-linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
background-image: linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
-webkit-box-shadow: inset 0px 1px 0px #9982ee;
box-shadow: inset 0px 1px 0px #9982ee;
margin-top: 10px;
}
#slick-login input[type="submit"]:active {
background-color: #4d0d8f;
background-image: -webkit-linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
background-image: -moz-linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
background-image: -o-linear-gradient(bottom, #4d0d8f 0%, #8267e8f 100%);
background-image: -ms-linear-gradient(bottom, #4d0d8f 0%, #8267e8100%);
background-image: linear-gradient(bottom, #4d0d8f 0%, #8267e8 100%);
-webkit-box-shadow: inset 0px 1px 0px #9982ee;
box-shadow: inset 0px 1px 0px #9982ee;
}
</style>
<!DOCTYPE html>
<head>
<title>Login - Pixel Life</title>
<meta name="description" content="Login - Pixel Life">
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="http://www.modernizr.com/downloads/modernizr-latest.js"></script>
</head>
<body>
<form id="slick-login">
<label for="username">{L_USERNAME}</label><input type="text" name="username" class="placeholder" placeholder="Nome do Usuário">
<label for="password">{L_PASSWORD}:</label><input type="password" name="password" class="placeholder" placeholder="Senha">
<input type="submit" value="Login">
</form>
</body>
</html>
Até mais.
Tópicos semelhantes
» Criar uma página HTML inicial
» Criar uma página HTML inicial
» Criar uma página HTML inicial
» Criar uma página inicial HTML personalizada
» Criar uma página inicial HTML personalizada
» Criar uma página HTML inicial
» Criar uma página HTML inicial
» Criar uma página inicial HTML personalizada
» Criar uma página inicial HTML 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