Bootstrap Snippet Register using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
$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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
$(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);
  });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Register"
Bootstrap 2.3.2 Snippet by mohammed

Related: See More

Questions / Comments:

"Register" Bootstrap 2.3.2 Snippet by mohammed

Related: See More

Questions / Comments:

"Register"
Bootstrap 2.3.2 Snippet by mohammed