question related to site style [closed]

Navigation
0

Good Night Personal :), I'm new here I would like to reply to an issue !, I wanted to know how to leave the email part and password equal to the image below. Itriedtodomorehereanditendedupgettingthisway!

Iamnewbiewithhtml,css,andjavascript,IstartedtheFacultyofAnalysisanddevelopmentofsystemsabout1month,andinthematterOfDevelopmentforwebwearecreatingsomebasicwebsitesmoreIfindtheteachermorenerdIwantsomethingmorechallenging...SoI'mstudyinganddiscoveringthingsbymyself!butthistimeIneedhelpIhavenoideahowtoletthestylizationoftheemailandpasswordstaythatway...ReferralfromwhereIsawthissitetemplate!( Placing a background image and leave it responsive )

If someone can help me Thank you very much

    
asked by anonymous 14.03.2016 / 03:18

3 answers

1

Do as follows below, because you have not provided your HTML and CSS, you will probably need to make a few changes. 

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

Visit here .

    
14.03.2016 / 03:56
0

In this link of the tutorial that you passed in the question it shows the answer, see the HTML code again: 

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

See the class that it is assigning to the input, input-underline , which belongs to the default bootstrap style sheet and lets you leave the input field with this style, just one line down instead of that standard HTML box: 

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

This code is using the Framework Twitter Bootstrap as you can see the statement below: 

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

Take a look at this Framework! It is very good to start developing simple and multi-responsive systems!

  

Then I advise you to start developing your own web systems in the format MVC with Zend, CodeIgniter, CakePHP or another Framework that suits you.

     
    

Because your work will have more credibility and organization than a system developed in pure PHP or JQuery!

  

Good luck with college my friend!

I hope I have helped ^^

    
14.03.2016 / 04:11
-1

They asked to leave the HTML and Css the site was identical! :) and even added the button recover password thanks for everyone's help:)

[][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-pageh1{font-weight:300;}.login-pageh1small{color:red;}.login-page.form-group{padding:8px0;}.login-page.form-content{padding:10;}form{border:0pxsolid#000;padding:0px;}forminput[type=text],forminput[type=password]{border:none;border-bottom:2pxsolid#000;border-radius:25px;box-shadow:none;background:transparent;}button{border:2pxsolid#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><metacharset="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>

Now I'm in a site project Responsible is getting great, my doubt now would be with the top menus as insert I placed one in css very basic plus this enserido directly in the html body of the page, (this is not the suspensive site yet when you have completed the results!) I will leave a photo for you! :)

I tried to post this here, but I'm half nub and I think I posted 5 times in the comments of the staff, if I have made crappy excuses rs.

    
15.03.2016 / 02:39
Get all Steam Items Doubt SQL Beginner