Criar pagina HTML inicial

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Criar pagina HTML inicial

Mensagem por Yrley em 29/07/13, 08:09 pm

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
avatar

Yrley
Usuário destaque

Masculino
Inscrito dia : 14/11/2011
Mensagens : 556
Pontos Ativos : 897

Ver perfil do usuário http://servidorplaybr.forumeiros.com/

Resolvido Re: Criar pagina HTML inicial

Mensagem por MateusA em 29/07/13, 08:35 pm

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.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Criar pagina HTML inicial

Mensagem por Yrley em 30/07/13, 10:11 am

Olá,

Desejo algumas alterações apenas.

Poderia colocar o plano de fundo Branco?
Gostaria que você colocasse ele logo: http://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.
avatar

Yrley
Usuário destaque

Masculino
Inscrito dia : 14/11/2011
Mensagens : 556
Pontos Ativos : 897

Ver perfil do usuário http://servidorplaybr.forumeiros.com/

Resolvido Re: Criar pagina HTML inicial

Mensagem por MateusA em 30/07/13, 11:41 am

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.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Criar pagina HTML inicial

Mensagem por Yrley em 30/07/13, 02:29 pm

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.
avatar

Yrley
Usuário destaque

Masculino
Inscrito dia : 14/11/2011
Mensagens : 556
Pontos Ativos : 897

Ver perfil do usuário http://servidorplaybr.forumeiros.com/

Resolvido Re: Criar pagina HTML inicial

Mensagem por MateusA em 30/07/13, 05:23 pm

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.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Criar pagina HTML inicial

Mensagem por Yrley em 30/07/13, 06:38 pm

Olá,

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

Até Mais.
avatar

Yrley
Usuário destaque

Masculino
Inscrito dia : 14/11/2011
Mensagens : 556
Pontos Ativos : 897

Ver perfil do usuário http://servidorplaybr.forumeiros.com/

Resolvido Re: Criar pagina HTML inicial

Mensagem por MateusA em 30/07/13, 06:43 pm

Olá!

Qual seria a imagem? poderia me fornecer a url?

Até mais.
avatar

MateusA
Hiperativo

Masculino
Inscrito dia : 13/05/2013
Mensagens : 3225
Pontos Ativos : 4215

Ver perfil do usuário https://www.facebook.com/forumeirospt https://twitter.com/forumeiros_pt

Resolvido Re: Criar pagina HTML inicial

Mensagem por Yrley em 30/07/13, 06:45 pm

avatar

Yrley
Usuário destaque

Masculino
Inscrito dia : 14/11/2011
Mensagens : 556
Pontos Ativos : 897

Ver perfil do usuário http://servidorplaybr.forumeiros.com/

Resolvido Re: Criar pagina HTML inicial

Mensagem por Yrley em 31/07/13, 04:23 pm

Olá,

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

UP

Até Mais.
avatar

Yrley
Usuário destaque

Masculino
Inscrito dia : 14/11/2011
Mensagens : 556
Pontos Ativos : 897

Ver perfil do usuário http://servidorplaybr.forumeiros.com/

Resolvido Re: Criar pagina HTML inicial

Mensagem por Sennior em 01/08/13, 01:53 am

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.
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Criar pagina HTML inicial

Mensagem por Yrley em 01/08/13, 11:07 am

Podem Fechar.
avatar

Yrley
Usuário destaque

Masculino
Inscrito dia : 14/11/2011
Mensagens : 556
Pontos Ativos : 897

Ver perfil do usuário http://servidorplaybr.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum