Criar pagina HTML inicial Hitskin_logo Hitskin.com

Isto é uma pré-visualização de um tema em Hitskin.com
Instalar o tema • Voltar para a ficha do tema

Fórum dos Fóruns

Fórum grátis: ajuda e atendimento ao utilizador Forumeiros.com

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

Ir para baixo

Tópico resolvido Criar pagina HTML inicial

Mensagem 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
Yrley
Yrley
Membro

Membro desde : 14/11/2011
Mensagens : 556
Pontos : 897

http://servidorplaybr.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar pagina HTML inicial

Mensagem por MateusA 30.07.13 0:35

Olá!

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
MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar pagina HTML inicial

Mensagem 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.
Yrley
Yrley
Membro

Membro desde : 14/11/2011
Mensagens : 556
Pontos : 897

http://servidorplaybr.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar pagina HTML inicial

Mensagem por MateusA 30.07.13 15:41

Olá!

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
MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar pagina HTML inicial

Mensagem 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.
Yrley
Yrley
Membro

Membro desde : 14/11/2011
Mensagens : 556
Pontos : 897

http://servidorplaybr.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar pagina HTML inicial

Mensagem 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]
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;
        }
Seta 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;
        }
Seta 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;
}
Seta No código acima procure por "[u]300", quanto mais aumentar este número, mais "auto" ele ira ficar.
Seta No código acima procure por "100", quanto mais aumentar este número, mais para a "esquerda" ele ira ficar.

Até mais.
MateusA
MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar pagina HTML inicial

Mensagem por Yrley 30.07.13 22:38

Olá,

Tem como colocar uma imagem em cima da caixa de texto?

Até Mais.
Yrley
Yrley
Membro

Membro desde : 14/11/2011
Mensagens : 556
Pontos : 897

http://servidorplaybr.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar pagina HTML inicial

Mensagem por MateusA 30.07.13 22:43

Olá!

Qual seria a imagem? poderia me fornecer a url?

Até mais.
MateusA
MateusA
Hiper Membro

Membro desde : 13/05/2013
Mensagens : 3225
Pontos : 4215

https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar pagina HTML inicial

Mensagem por Yrley 30.07.13 22:45

Yrley
Yrley
Membro

Membro desde : 14/11/2011
Mensagens : 556
Pontos : 897

http://servidorplaybr.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar pagina HTML inicial

Mensagem por Yrley 31.07.13 20:23

Olá,

Não sei se é UP, mais infelizmente irei te que dar.

UP

Até Mais.
Yrley
Yrley
Membro

Membro desde : 14/11/2011
Mensagens : 556
Pontos : 897

http://servidorplaybr.forumeiros.com/

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar pagina HTML inicial

Mensagem por Sennior 01.08.13 5:53

Olá!

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
Sennior
Principal Contribuidor
Principal Contribuidor

Membro desde : 10/06/2011
Mensagens : 16379
Pontos : 20903

https://ajuda.forumeiros.com/forum https://www.facebook.com/GladstonHenriq https://twitter.com/UmGladston

Ir para o topo Ir para baixo

Tópico resolvido Re: Criar pagina HTML inicial

Mensagem por Yrley 01.08.13 15:07

Podem Fechar.
Yrley
Yrley
Membro

Membro desde : 14/11/2011
Mensagens : 556
Pontos : 897

http://servidorplaybr.forumeiros.com/

Ir para o topo Ir para baixo

Ir para o topo

- Tópicos semelhantes

Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode

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