InícioCriar 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 • Compartilhe
Criar pagina HTML inicial
por Yrley 30.07.13 0:09
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
Yrley- Membro
- Membro desde : 14/11/2011
Mensagens : 556
Pontos : 897 -
Re: Criar pagina HTML inicial
por MateusA 30.07.13 0:35
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.
MateusA- Hiper Membro
- Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215 -
Re: Criar pagina HTML inicial
por Yrley 30.07.13 14:11
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.
Yrley- Membro
- Membro desde : 14/11/2011
Mensagens : 556
Pontos : 897 -
Re: Criar pagina HTML inicial
por MateusA 30.07.13 15:41
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.
MateusA- Hiper Membro
- Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215 -
Re: Criar pagina HTML inicial
por Yrley 30.07.13 18:29
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.
Yrley- Membro
- Membro desde : 14/11/2011
Mensagens : 556
Pontos : 897 -
Re: Criar pagina HTML inicial
por MateusA 30.07.13 21:23
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]
No código acima procure por "230px", "300px" basta ir aumentando, o que esta escrito top ao lado ele ira para cima, e, o que esta escrito left ao lado ele ira para a esquerda.
Logo:
[i]Procure por:[/i]
No código acima procure por "800px", "300px" basta ir aumentando para centralizar/mover para o outro lado.
Login
Procure por[/b]:
No código acima procure por "[u]300", quanto mais aumentar este número, mais "auto" ele ira ficar.
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;
}
No código acima procure por "230px", "300px" basta ir aumentando, o que esta escrito top ao lado ele ira para cima, e, o que esta escrito left ao lado ele ira para a esquerda.Logo:
[i]Procure por:[/i]
- Código:
.img-1 {
position: relative;
left: -800px;
}
No código acima procure por "800px", "300px" basta ir aumentando para centralizar/mover para o outro lado.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 "[u]300", quanto mais aumentar este número, mais "auto" ele ira ficar. No código acima procure por "100", quanto mais aumentar este número, mais para a "esquerda" ele ira ficar.Até mais.
MateusA- Hiper Membro
- Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215 -
Re: Criar pagina HTML inicial
por Yrley 30.07.13 22:38
Olá,
Tem como colocar uma imagem em cima da caixa de texto?
Até Mais.
Tem como colocar uma imagem em cima da caixa de texto?
Até Mais.
Yrley- Membro
- Membro desde : 14/11/2011
Mensagens : 556
Pontos : 897 -
Re: Criar pagina HTML inicial
por MateusA 30.07.13 22:43
Olá!
Qual seria a imagem? poderia me fornecer a url?
Até mais.
Qual seria a imagem? poderia me fornecer a url?
Até mais.
MateusA- Hiper Membro
- Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215 -
Re: Criar pagina HTML inicial
por Yrley 30.07.13 22:45
Yrley- Membro
- Membro desde : 14/11/2011
Mensagens : 556
Pontos : 897 -
Re: Criar pagina HTML inicial
por Yrley 31.07.13 20:23
Olá,
Não sei se é UP, mais infelizmente irei te que dar.
UP
Até Mais.
Não sei se é UP, mais infelizmente irei te que dar.
UP
Até Mais.
Yrley- Membro
- Membro desde : 14/11/2011
Mensagens : 556
Pontos : 897 -
Re: Criar pagina HTML inicial
por Sennior 01.08.13 5:53
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.
Sennior- Principal Contribuidor
- Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903 -
Yrley- Membro
- Membro desde : 14/11/2011
Mensagens : 556
Pontos : 897 -
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 página inicial de login com HTML
» Criar uma página HTML inicial
» Criar uma página HTML inicial
» Criar uma página inicial HTML personalizada
» Criar página inicial de login com HTML
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
Facebook
Twitter
Youtube
