doubts related to site style

Asked

Viewed 105 times

0

Good Evening Personal :), I am new here I would like to answer for a question! , I wanted to know how to make the email and password part equal to the image below. inserir a descrição da imagem aqui I tried to do here but ended up staying like this! inserir a descrição da imagem aqui

I’m a beginner with html, css, and javascript, I started the school of Analysis and Systems Development about 1 month ago, and in the Web Development we are creating some basic sites but I think the teacher is too slow to want something more challenging... So I’m studying and discovering things on my own! but this time I need help I have no idea how to let the stylization of email and password stay that way... Reference from where I saw this website template!(Put a background image and make it responsive)

If anyone can help me Thank you very much

javascript html css

  • Post your html and css to see how far you’ve gone

3 answers

1


Do as follows below, just because you have not made your HTML and CSS available, 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>

Visialize better here.

  • Thank you very much indeed helped a lot (y)

  • Yure inside the email spaces and password the color inside and white and black text where I set their value ? would have left transparent equal to image?

  • Yes would, you can use background: Transparent or background: None.

0

in this tutorial link you passed on 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 it is assigning to input, input-underline, it belongs to standard bootstrap style sheet and lets you leave the input field with this style, just one line down instead of that standard ugly 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 closer look at this Framework! It is very good to start the development of simple and multi-responsive systems!

Then I advise you to start developing your own web systems in format MVC with Zend, Codeigniter, Cakephp or other Framework that you like.

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’ve helped ^^

  • Thank you friend I will apply your advice in my studies :), and thank you very much too ! It helped a lot!

-1

Asked to leave HTML and CSS the site was identical! : ) and even added the recover password button thanks for everyone’s help :)

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

now I am in a site project Responsive ta getting great, my doubt now would be with the top menus as insert put one in pretty basic css plus this enserido directly in the html body of the page, (this is not the suspensive site yet when I have completed posting the results!) I will leave a photo for you guys! :) inserir a descrição da imagem aqui

I’ve tried to post this here, but I’m half nub and I think I’ve posted 5 times in the staff comments, if I’ve made excuses.

Browser other questions tagged javascript html css

You are not signed in. Login or sign up in order to post.