Skip to content

Instantly share code, notes, and snippets.

@pars3c
Created February 3, 2018 11:21
Show Gist options
  • Save pars3c/52829c5b4f6c6d949c595eeecdb9b368 to your computer and use it in GitHub Desktop.
Save pars3c/52829c5b4f6c6d949c595eeecdb9b368 to your computer and use it in GitHub Desktop.
Login Page
<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>
<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>
@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;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment