0

Boa Noite Pessoal :), sou novo aqui gostaria de respostar para uma questão!, Queria saber como deixar a parte de email e password igual o da imagem abaixo. inserir a descrição da imagem aqui tentei fazer aqui mais acabou ficando desse jeito! inserir a descrição da imagem aqui

sou novato com html, css, e javascript, comecei a faculdade de Analise e desenvolvimento de sistemas a aproximadamente 1 mês, e na matéria De Desenvolvimento para web estamos criando alguns sites básicos mais acho o professor lerdo de mais quero algo mais desafiador... Então estou estudando e descobrindo coisas sozinho! mas dessa vez preciso de ajuda não faço ideia de como deixar a estilização do e-mail e password ficar daquele jeito... Referencia de onde avistei esse modelo de site!(Colocar uma imagem de background e deixa-la responsiva)

Se alguem poder me ajudar Muito obrigado

1
  • Posta seu html e css pra vermos até onde voce foi Commented 14/03/2016 às 2:47

3 Respostas 3

1

Faz da seguinte forma abaixo, pórem por você não ter disponibilidado seu HTML e CSS, provavelmente você vai precisar fazer algumas poucas alterações.

.login-page {
    background-image: url('nature.jpg');
    background-repeat: no-repeat;
    background-size:100%;
    bottom: 0;
    color: black;
    left: 0;
    overflow: auto;
    padding: 3em;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
}
.login-page h1 {
    font-weight: 300;
}
.login-page h1 small {
    color: gray;
}
.login-page .form-group {
    padding: 8px 0;
}
.login-page .form-content {
    padding: 0;
}

form {
  border: 3px solid #000;
  padding: 15px;
}

form input[type=text],
form input[type=password]{
  border: none;
  border-bottom: 2px solid #000;
  border-radius: 5px;
  box-shadow: none;
}

button {
  border: 1px solid #000 !important;
  border-radius: 25px !important;
  color: #000;
  background: none;
}

::-webkit-input-placeholder {
   color: #000 !important;
}

:-moz-placeholder {
   color: #000 !important;
}

::-moz-placeholder {
   color: #000 !important;
}

:-ms-input-placeholder {  
   color: #000 !important;
}
    <div class=login-page>

   <div class=row>
      <div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
        <br>
         <h1>Sistema Teste<small> versão 1.0</small></h1>
         <form role=form ng-submit=submit()>
            <div class=form-content>
               <div class=form-group> <input type=text class="form-control input-underline input-lg" placeholder=Email> </div>
               <div class=form-group> <input type=password class="form-control input-underline input-lg" placeholder=Password> </div>
            </div>
            <button type=submit class="btn btn-white btn-outline btn-lg btn-rounded">Login</button> 
         </form>
      </div>
   </div>
</div>

Visialize melhor aqui.

3
  • Muito obrigado mesmo ajudou muito (y) Commented 14/03/2016 às 3:04
  • Yure dentro dos espaços email e password a cor de dentro e branca e o texto preto onde configuro o valor deles ? teria como deixar transparente igual a imagem? Commented 14/03/2016 às 3:40
  • Sim teria, você pode usar background: transparent ou background: none. Commented 14/03/2016 às 3:57
0

nesse link do tutorial que você passou na pergunta ele mostra a resposta, veja o código HTML novamente:

<html>
<head>
    <meta charset="utf-8">
    <title>Meus Contatos</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width">
    <link rel="stylesheet" href="public/libs/bootstrap/dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="public/styles/style.css"/>

</head>
<body>
    <div class=login-page>

   <div class=row>
      <div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
         <h1>Sistema Teste<small> versão 1.0</small></h1>
         <form role=form ng-submit=submit()>
            <div class=form-content>
               <div class=form-group> <input type=text class="form-control input-underline input-lg" placeholder=Email> </div>
               <div class=form-group> <input type=password class="form-control input-underline input-lg" placeholder=Password> </div>
            </div>
            <button type=submit class="btn btn-white btn-outline btn-lg btn-rounded">Login</button> 
         </form>
      </div>
   </div>
</div>
</body>
<html>

Veja a classe que ele está atribuindo ao input, input-underline, ela pertencente a folha de estilo padrão do bootstrap e permite deixar o campo input com esse estilo, apenas uma linha em baixo em vez daquela caixa feia padrão do HTML:

<input type=text class="form-control input-underline input-lg" placeholder=Email>

Esse código está usando a Framework Twitter Bootstrap como você pode ver a declaração abaixo:

<link rel="stylesheet" href="public/libs/bootstrap/dist/css/bootstrap.css"/>

Dê uma estudada depois nessa Framework! Ela é muito boa para iniciar o desenvolvimento de sistemas simples e multi-responsivos!

Depois aconselho você a começar a desenvolver seus próprios sistemas web em formato MVC com Zend, CodeIgniter, CakePHP ou outra Framework que lhe agrade.

Pois seu trabalho terá mais credibilidade e organização do que um sistema desenvolvido em PHP puro ou JQuery!

Boa Sorte com a faculdade meu amigo!

Espero ter ajudado ^^

1
  • Obrigado amigo irei aplicar os seus conselhos em meus estudos :), e muito obrigado também ! Ajudou muito! Commented 14/03/2016 às 3:25
-1

Pediram para deixar o HTML e Css o site ficou identico! :) e ainda adicionei o botão recuperar senha obrigado pela ajuda de todos :)

[inserir a descrição da imagem aqui][2]

css

.login-page {
  background-image: url('nature.jpg');
  background-repeat: no-repeat;
  background-size: 100%;
  bottom: 0;
  color: black;
  left: 0;
  overflow: auto;
  padding: 3em;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
}
.login-page h1 {
  font-weight: 300;
}
.login-page h1 small {
  color: red;
}
.login-page .form-group {
  padding: 8px 0;
}
.login-page .form-content {
  padding: 10;
}
form {
  border: 0px solid #000;
  padding: 0px;
}
form input[type=text],
form input[type=password] {
  border: none;
  border-bottom: 2px solid #000;
  border-radius: 25px;
  box-shadow: none;
  background: transparent;
}
button {
  border: 2px solid #000 !important;
  border-radius: 25px !important;
  color: #000;
  background: transparent;
}
::-webkit-input-placeholder {
  color: #000 !important;
}
:-moz-placeholder {
  color: #000 !important;
}
::-moz-placeholder {
  color: #000 !important;
}
:-ms-input-placeholder {
  color: #fff000 !important;
}

html

<html>

<head>
  <meta charset="utf-8">
  <title>Meus Contatos</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="public/libs/bootstrap/dist/css/bootstrap.css" />
  <link rel="stylesheet" href="public/styles/style.css" />

</head>

<body>
  <div class=login-page>

    <div class=row>
      <div class="col-md-4 col-lg-4 col-md-offset-4 col-lg-offset-4">
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
        </br>
        <h1>Sistema Teste<small> versão 1.0</small></h1>
        <form role=form ng-submit=submit()>
          <div class=form-content>
            <div class=form-group>
              <input type=text class="form-control input-underline input-lg" placeholder=E-mail>
            </div>
            <div class=form-group>
              <input type=password class="form-control input-underline input-lg" placeholder=Senha>
            </div>
          </div>
          <button type=submit class="btn btn-white btn-outline btn-lg btn-rounded">Entrar</button>
          <button type=recovery class="btn btn-white btn-outline btn-lg btn-rounded">Recuperar Senha</button>
        </form>
      </div>
    </div>
  </div>
</body>
<html>

agora estou em um projeto de site Responsivo ta ficando otimo, minha duvida agora seria com os menus superiores como inserir coloquei um em css bem basico mais esta enserido diretamente no corpo html da pagina, (esse não e o site suspensivo ainda quando tiver completo posto os resultados!) vou deixar uma foto para vocês! :) inserir a descrição da imagem aqui

Ja tentei postar isso aqui, mais sou meio nub e acho que postei 5 vezes nos comentários do pessoal, se eu tiver feito cagada desculpas rs.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .