Skip to content

Instantly share code, notes, and snippets.

@gfarrell
Created August 21, 2013 15:29
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save gfarrell/6295956 to your computer and use it in GitHub Desktop.
Untitled
.clear { clear: both; }
.authenticationWidget {
position: relative;
font-family: Helvetica Neue;
font-size: 0.9em;
}
h2 {
margin: 30px 0 0 10px;
padding: 0;
float: left;
z-index: 100;
font-size: 22px;
}
.authIcon {
border-radius: 50%;
border: white 10px solid;
float: left;
margin-left: 15px;
z-index: 100;
}
.inner {
background: #ff6600;
margin-top: -35px;
z-index: 10;
padding: 40px 20px 10px;
width: 275px;
background: linear-gradient(#ff9a67, #ffc181);
}
input {
width: 130px;
float: right;
}
input[type=checkbox] {
width: auto;
}
.layout {
clear: both;
overflow: hidden;
}
.layout label {
width: 100px;
display: block;
float: left;
}
.layout.rememberMe {
margin: 10px 0;
}
.layout.rememberMe label{
width: 250px;
}
.buttons {
text-align: center;
}
button {
width: 100%;
}
.forgottenPassword {
margin-top: 5px;
text-align: right;
font-size: small;
}
<div class="authenticationWidget">
<h2>authentification</h2>
<img class="authIcon" src="http://placehold.it/75x75" />
<div class="clear"></div>
<div class="inner">
<form>
<div class="layout">
<label>identifiant</label>
<input placeholder="identifiant" />
<div>
<div class="layout">
<label>mot de passe</label>
<input type="password" placeholder="mot de passe" />
</div>
<div class="layout rememberMe">
<label>se souvenir de ce mot de passe</label>
<input type="checkbox" />
</div>
<div class="buttons">
<button type="submit" class="strong">login</button>
</div>
<div class="forgottenPassword">
<a href="#">oubli mot de passe?</a>
</div>
</form>
</div>
</div>
// alert('Hello world!');
{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment