Skip to content

Instantly share code, notes, and snippets.

@Yeswanth-JG
Created January 3, 2014 11:40
Show Gist options
  • Save Yeswanth-JG/8236620 to your computer and use it in GitHub Desktop.
Save Yeswanth-JG/8236620 to your computer and use it in GitHub Desktop.
Untitled
* {
margin:0;
padding:0;
}
body {
background-color:#ccc;
font-family:calibri,sans-serif;
font-size:20px;
}
form {
display:block;
margin:0 auto;
width:400px;
}
fieldset {
background-color:#fff;
position:relative;
border:2px solid #bbb;
padding:25px;
padding-top:34px;
border-top-left-radius:12px;
border-top-right-radius:12px;
}
legend {
position:absolute;
background-color:#0094c3;
display:inline-block;
width:100%;
left:0;
top:0;
color:#fff;
border-top-left-radius:10px;
border-top-right-radius:10px;
padding:5px 0px;
}
span, button {
display:block;
}
label, input {
display:inline-block;
}
label {
text-align:right;
width:150px;
margin-bottom:25px;
color:#0094c3;
}
#nameSpan label {
margin-top:25px;
}
input {
padding:4px;
margin-left:10px;
border:1px solid #ddd;
box-shadow:inset 0px 1px 0 0 #ccc;
}
button {
background:linear-gradient(to top,#2d86b2,#3bb2ed);
border:none;
border-radius:10px;
padding:8px;
padding-left:5px;
margin-left:auto;
margin-right:15%;
color:#fff;
font-weight:bold;
font-size:1em;
}
<!-- content to be placed inside <body>…</body> -->
<form>
<fieldset>
<legend>Sign In:</legend>
<span id="nameSpan">
<label for="name">UserName/Email:</label>
<input type="text" id="name">
</span>
<span id="passwordSpan">
<label for="pass">Password:</label>
<input type="password" id="pass">
</span>
<button type="button">Sign In</button>
</fieldset>
</form>
// alert('Hello world!');
{"view":"split-vertical","fontsize":"70","seethrough":"1","prefixfree":"1","page":"all"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment