Login Page

index.html

<section class="login-cliente">
  <div class="container">
    <div class="row spaced-out">
    <div class="col-md-6">
      <h2>Login</h2>
      <p>Aqui pode ver e alterar os seus dados pessoais, consultar uma listagem com os descontos e promoções de que já usufruiu e aceder aos seus vouchers.</p>
      
      <label>Email</label>
        <input type="email">
      
       <label>Password</label>
        <input type="password"> 
      <button type="button">Entrar</button>
      </div>
    
    <div class="col-md-6">
      <h2>Novo Utilizador?</h2>
      <p>Não faça os descontos esperar</p>
      <a href="#" target="_blank"> <button type="button">
        REGISTO</button></a>
       <h2>Esqueceu a Password?</h2>
      <p>Não faça os descontos esperar</p>
     <a href="#" target="_blank"> <button type="button">
        Recuperar</button></a>
    </div>
    </div>
  </div>
</section>


   
  

login-page.markdown

Login Page

A Pen by Aderito on CodePen.

License.

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

style.css

@import url('https://fonts.googleapis.com/css?family=PT+Sans');
@import url('https://fonts.googleapis.com/css?family=Arvo');
body{
  background:linear-gradient(0deg,#226194, #35a5ff);
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
  
}

.login-cliente .spaced-out{
  margin-top:200px;
  margin-bottom:20px;
}
.login-cliente .spaced-out h2{
  color:#fff;
  text-shadow:2px 2px 2px #000;
  font-weight:500;
  font-size:40px;
  font-family: 'Arvo', serif;
}

.login-cliente .spaced-out p{
  color:#fff;
  font-size:16px;
  font-family: 'PT Sans', serif;
  text-shadow:1px 1px 1px #000;
  font-weight:500;
  
}
.login-cliente .spaced-out label{
  font-size:25px;
  font-family: 'PT Sans', serif;
  text-shadow:1px 1px 1px #000;
  font-weight:500;
  display:block;
  color:#fff;
  margin-top:50px;
  
}
.login-cliente .spaced-out input{
  display:block;
  height:40px;
  width:100%;
  border-radius:5px;
  border:1px solid #ccc;
  outline:none;
}

.login-cliente .spaced-out button{
  background:transparent;
  font-size:30px;
  color:#fff;
  font-family: 'PT Sans', serif;
  text-align:center;
  outline:none;
  width:200px;
  border:4px solid #fff;
  border-radius:8px;
  padding:10px;
  position:relative;
  margin:auto;
  display:block;
  margin-top:30px;
  margin-bottom:10px;
  margin-left:40px;

  
  
}
.login-cliente .spaced-out button:hover{
  text-decoration:none;
  border:none;
  color:#226194;
  background:#fff;
}

styles

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />