<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="main">
<div class="one">
<div class="register">
<h3>Create your account</h3>
<form id="reg-form">
<div>
<label for="name">Name</label>
<input type="text" id="name" spellcheck="false" placeholder="Hashim Al-Qataberi"/>
</div>
<div>
<label for="email">Email</label>
<input type="text" id="email" spellcheck="false" placeholder="Anesi_90@hotmail.com"/>
</div>
<div>
<label for="username">Username</label>
<input type="text" id="username" spellcheck="false" placeholder="Hashim" />
</div>
<div>
<label for="password">Password</label>
<input type="password" id="password" />
</div>
<div>
<label for="password-again">Password Again</label>
<input type="password" id="password-again" />
</div>
<!-- Button -->
<div class="control-group">
<label class="control-label" for="singlebutton"></label>
<div class="controls">
<button id="singlebutton" name="singlebutton" class="btn btn-success">Create acount</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
$back-color: #F0F0F0;
$green-border: #72B372;
@mixin linear-gradient($top, $bottom) {
background: $top;
background: -webkit-linear-gradient($top, $bottom);
background: -moz-linear-gradient($top, $bottom);
background: -o-linear-gradient($top, $bottom);
background: linear-gradient($top, $bottom);
}
.main > div {
display: inline-block;
width: 49%;
margin-top: 10px;
}
.two{
.register {
border: none;
h3 {
border-bottom-color: #909090;
}
.sep{
border-color: #909090;
}
}
}
.register {
width: 500px;
margin: 10px auto;
padding: 10px;
border: 7px solid $green-border;
border-radius: 10px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #444;
background-color: $back-color;
box-shadow: 0 0 20px 0 #000000;
h3 {
margin: 0 15px 20px;
border-bottom: 2px solid $green-border;
padding: 5px 10px 5px 0;
font-size: 1.1em;
}
div{
margin: 0 0 15px 0;
border : none;
}
label {
display: inline-block;
width: 25%;
text-align: right;
margin: 10px
}
input[type=text], input[type=password]{
width: 65%;
font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
padding: 5px;
font-size: 0.9em;
border-radius: 5px;
background: rgba(0, 0, 0, 0.07);
}
input[type=text]:focus, input[type=password]:focus{
background: #FFFFFF;
}
.button {
font-size: 1em;
border-radius: 8px;
padding: 10px;
border: 1px solid #59B969;
box-shadow: 0 1px 0 0 #60BD49 inset;
@include linear-gradient(#63E651, #42753E);
&:hover {
@include linear-gradient(#51DB1C, #6BA061);
}
}
.sep {
border: 1px solid $green-border;
position: relative;
margin: 35px 20px;
}
a {
display: block;
height: 100%;
text-decoration: none;
color: #FFFFFF;
padding: 10px 15px;
}
span {
font-size: 30px;
margin-left: 35px;
}
}
$(document).ready(function(){
var placeholder = null;
$('input[type=text]').focus(function(){
placeholder = $(this).attr("placeholder");
$(this).attr("placeholder","");
});
$('input[type=text]').blur(function(){
$(this).attr("placeholder", placeholder);
});
});
