HTML Snippets for Twitter Boostrap framework : Bootsnipp.com

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 ---------->
<!-- Author: ArrayForm
<!-- Author: ArrayForm
Author URL: http://arrayform.com -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/bootstrap.min.css" rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/style.css" type="text/css" />
</head>
<body>
 <div class="main" style="padding:2%;margin-top:5%;">           
 <div class="col-lg-12">
         <div class="container">             
               <div class="col-lg-4"></div>
                 <div class="col-lg-4">
                 <div class="row grids text-center">
                    <div class="view view-tenth">
                        <!--  <a href="single.html">-->
                           <div class="inner_content clearfix">
                    <div class="product_image">
                        <img src="http://www.arrayform.com/wp-content/uploads/2017/02/user@2x.png" class="img-responsive" alt="" style="margin:0% auto;"/>
                     </div>
                    <div class="label-product">
                        <span class="new">USER LOGIN</span> 
                    </div>
                    <div class="mask" style="width:100% !important;">
                        <h2>Welcome User</h2>
                        <div class="main">
                            <form>
                            <input type="text" class="text" value="E-mail address" onfocus="this.value = '';" onblur="if (this.value == '') {this.value = 'E-mail address';}" >
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
/** Author: ArrayForm
Author URL: http://arrayform.com **/
h4, h5, h6,
h1, h2, h3 {margin-top: 0;}
ul, ol {margin: 0;}
p {margin: 0;}
html, body{
    font-family: 'Open Sans', sans-serif;
    background:#F6F6F6;
    background-image:url('http://www.arrayform.com/wp-content/uploads/2017/02/back.jpeg');
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    margin:0;
    padding:0%;
}
body a{
    transition:0.5s all;
    -webkit-transition:0.5s all;
    -moz-transition:0.5s all;
    -o-transition:0.5s all;
    -ms-transition:0.5s all;
}
.view {
   overflow: hidden;
   position: static;
   text-align: center;
   cursor: default;
}
.view .mask,.view .content {
  position: absolute;
   overflow: hidden;
   top: 0;
   left: 0;
   height:auto;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Nightfall | Login Form With Good Hover Effect"
Bootstrap 3.3.0 Snippet by virajp

Related: See More

Questions / Comments:

"Nightfall | Login Form With Good Hover Effect" Bootstrap 3.3.0 Snippet by virajp

Related: See More

Questions / Comments:

"Nightfall | Login Form With Good Hover Effect"
Bootstrap 3.3.0 Snippet by virajp