Skip to content

Instantly share code, notes, and snippets.

@Yeswanth-JG

Yeswanth-JG/dabblet.css

Last active January 2, 2016 02:39
Show Gist options
  • Save Yeswanth-JG/8238208 to your computer and use it in GitHub Desktop.
Save Yeswanth-JG/8238208 to your computer and use it in GitHub Desktop.
Download ZIP
Untitled
Raw
dabblet.css
* {
margin:0;
padding:0;
}
body {
background-color:#ccc;
font-family:calibri,sans-serif;
font-size:20px;
}
form {
display:block;
width:100%;
height:100%;
}
fieldset {
width:400px;
height:250px;
box-sizing:border-box;
background-color:#fff;
position:absolute;
border:none;
padding:25px;
padding-top:34px;
border-radius:12px;
left:50%;
margin-left:-200px;
top:50%;
margin-top:-125px;
box-shadow:0 0 30px 0 #888;
}
legend {
position:absolute;
background-color:#0094c3;
display:inline-block;
box-sizing:border-box;
width:100%;
left:0;
top:0;
color:#fff;
border-top-left-radius:10px;
border-top-right-radius:10px;
padding:5px;
padding-left:17px;
font-weight:bold;
}
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;
}
a {
margin-top:15px;
color:#0094c3;
text-decoration:none;
display:inline-block;
width:auto;
font-size:0.8em;
font-weight:bold;
}
a:first-child {
margin-right:35px;
}
p {
position:absolute;
bottom:15px;
right:0;
margin:0;
padding:0;
}
Raw
dabblet.html
<!-- content to be placed inside <body>…</body> -->
<form>
<fieldset>
<legend>Sign In</legend>
<span id="nameSpan">
<label for="fname">UserName/Email:</label>
<input type="text" id="fname" onblur="commonValidate()">
</span>
<span id="passwordSpan">
<label for="pass">Password:</label>
<input type="password" id="pass">
</span>
<button type="button">Sign In</button>
<span id="create-forget">
<a href="#">Create A New Account!</a>
<a href="#">Forgot Password!?</a>
</span>
</fieldset>
</form>
<p>
<a href="http://jigsaw.w3.org/css-validator/check/referer">
<img style="border:0;width:88px;height:31px"
src="http://jigsaw.w3.org/css-validator/images/vcss-blue"
alt="Valid CSS!" />
</a>
</p>
<script type="text/javascript">
function commonValidate() {
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
</script>
Raw
dabblet.js
// alert('Hello world!');
Raw
settings.json
{"view":"split-vertical","fontsize":"80","seethrough":"","prefixfree":"1","page":"html"}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment