Bootstrap Snippet Login Form 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 ---------->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<div class="container">  
    <div class="row">
        <div class="col-lg-12">
            <div class="form_hover " style="background-color: #cccccc;">
                <p style="text-align: center; margin-top: 20px;">
                    <i class="fa fa-gears" style="font-size:187px;"></i>
                </p>
                <div class="header">
                    <div class="blur"></div>
                    <div class="header-text">
                        <div class="panel panel-primary" style="height:320px;">
                            <div class="panel-heading">
                                <h3 style="background-color:#428BCA; color:white;">
                                    <i class="fa fa-arrows-v"></i>    Login Form    <i class="fa fa-arrows-v"></i></h3>
                            </div>
                            <div class="panel-body">
                                <div class="form-group">
                                    <input type="text" class="form-control input-lg" placeholder="Email">
                                </div>
                                <div class="form-group">
                                    <input type="password" class="form-control input-lg" placeholder="Password">
                                </div>                                
                                <div class="form-group">
                                    <button class="btn btn-primary btn-lg btn-block">Sign In</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
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
 .form_hover {
        padding: 0px;
        position: relative;
        overflow: hidden;
        height: 300px;
    }
        .form_hover:hover .header {
            opacity: 1;
            transform: translateY(-250px);
            -webkit-transform: translateY(-250px);
            -moz-transform: translateY(-250px);
            -ms-transform: translateY(-250px);
            -o-transform: translateY(-250px);
        }
        .form_hover img {
            z-index: 4;
        }
        .form_hover .header {
            position: absolute;
            top: 250px;
            -webkit-transition: all 0.3s ease;
            -moz-transition: all 0.3s ease;
            -o-transition: all 0.3s ease;
            -ms-transition: all 0.3s ease;
            transition: all 0.3s ease;
            width: 100%;
        }
        .form_hover .blur {            
            height: 300px;
            z-index: 5;
            position: absolute;
            width: 100%;
        }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Login Form "
Bootstrap 3.3.0 Snippet by Besnikhetemi

Related: See More

Questions / Comments:

"Login Form " Bootstrap 3.3.0 Snippet by Besnikhetemi

Related: See More

Questions / Comments:

"Login Form "
Bootstrap 3.3.0 Snippet by Besnikhetemi