Bootstrap Snippet trainer registration using HTML CSS Bootstrap

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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--https://codepen.io/sevilayha/pen/IdGKH-->
<div class="container">
    <div class="row">
        <div class="col-sm-4 get_form_inner">
                                        <h4 class="__head">Register as a New Trainer</h4>
                                        <!-- ngIf: social_error_message != undefined -->
                                        <div class="text-center">
                                            <div class="row ">
                                                <div class="col-sm-12">
                                                    <button type="button" class="btn btn-social btn-block btn-facebook" onclick="onLinkedInLoad('signup')">
                                                        <i class="fa fa-linkedin"></i> Sign up with Linkedin
                                                    </button>
                                                </div>
                                                
                                            </div>
                                        </div>
                                        <hr class="ortext2">
                                        <p></p>
                                        <form name="registerForm" method="post" action="">
                                            
                                            <div class="group">
                                                <input type="text" name="FirstName" required="required">
                                                <span class="highlight"></span>
                                                <span class="bar"></span><label>First Name</label>
                                            </div>                                            
                                            <div class="group">
                                                <input type="text" name="LastName" required="required">
                                                <span class="highlight"></span>
                                                <span class="bar"></span><label>Last Name</label>
                                                
                                            </div>                                            
                                            <div class="group">
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
.group{ 
  position:relative; 
  margin-bottom:20px; 
}
.group input                {
  font-size:18px;
  padding:7px 7px 5px 2px;
  display:block;
  width:100%;
  border:none;
  border-bottom:1px solid #757575;
}
.group input:focus      { outline:none; }
/* LABEL ======================================= */
.group label                 {
  color:#fff; 
  font-size:18px;
  font-weight:normal;
  position:absolute;
  pointer-events:none;
  left:5px;
  top:10px;
  transition:0.2s ease all; 
  -moz-transition:0.2s ease all; 
  -webkit-transition:0.2s ease all;
}
/* active state */
.group input:focus ~ label, input:valid ~ label         {
  top:-15px;
  font-size:14px;
  color:#5264AE;
}
/* BOTTOM BARS ================================= */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"trainer registration"
Bootstrap 3.3.0 Snippet by faisalkhan123

Related: See More

Questions / Comments:

"trainer registration" Bootstrap 3.3.0 Snippet by faisalkhan123

Related: See More

Questions / Comments:

"trainer registration"
Bootstrap 3.3.0 Snippet by faisalkhan123