Showing posts with label Password. Show all posts
Responsive Login Form based on Bootstrap


Related Articles

   




Here's the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Login V6.0 By roundCube</title>
  <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>
   <div id="login">
       <form role="form">
        <div id="user">
              <div class="form-group">
                  <p>USERNAME</p>
    <input type="email" class="form-control" id="email">
  </div>
        </div>
        <div id="pass">
          <div class="form-group">
              <p>PASSWORD</p>
    <input type="password" class="form-control" id="pwd">
  </div>
        </div>
        <div id="submit">
              <button type="submit" class="btn btn-default btn-block">LOG IN</button>
              <div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>&#169; roundCube</a></p></div>
        </div>
       </form>
    </div>
</body>
    <style>
    body{
        background-color: rgb(38,38,38);
    }
   
    #login{
        position: absolute;
        top:20%;
        left:35%;
        width:30%;
        height: 260px;
    }
   
    #copyright{
        position: absolute;
        bottom;0px;
        height:20%;
        left:0px;
        width:100%;
        text-align: center;
        opacity: 0.5;
        }
   
    p a{
        color: white;
        text-decoration: none;
    }
       
    p a:hover{
        text-decoration: none;
        color:white;
       
    }
       
    #user{
        position: absolute;
        top:0px;
        left:10%;
        height:35%;
        width:80%;
        background-color: rgb(31,187,166);
        border-radius: 4px;
        padding-top:12px;
        padding-left: 13px;
        padding-right: 13px;
       
    }
   
    #pass{
        position: absolute;
        top:38%;
        left:10%;
        height:35%;
        width:80%;
        background-color: rgb(233,102,56);
        border-radius: 4px;
        padding-top:12px;
        padding-left: 13px;
        padding-right: 13px;
    }    
       
    #submit{
        position: absolute;
        top:73%;
        left:10%;
        height:25%;
        width:80%;
        padding-top: 14px;
    }
    p {
        text-align: center;
        color: white;
        font-weight: 600;
    }
       
    input#email{
        border-radius: 0px;
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhEmOQh419GjM0Kx37j19xeKRGdVtSNbe1lKgMafmO-xdmn_fZr8dn3qpgfL-NxP1nrDYzbZCkZznsD5PWJk_OFX1SetkOwuGZQy5YJ988AwDLbXqza57JBzZs3K-pY6KclvXsl8psNwg/s320/user1.png);
        background-size: 10% 100%;
        background-repeat: no-repeat;
        text-indent: 25px;
    }
       
    input#pwd{
        border-radius: 0px;
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjBt4-1B9povet0QLMBXgGk6dx8IPPCYs9fxkpDFOQQdXbaKqbpfpwiHv9zCk3qe72ZI9osvPUssDYReZaUKu8NPPao_YnaL7gyyTNdUtHvfvFA94F7JnrZQXD6VLbdO5EOsI9G6-9hyzI/s1600/lock2.png);
        background-size: 25% 140%;
        background-repeat: no-repeat;
        text-indent: 25px;
        background-position: -20px -6px;
    }
       
    .btn-block{
        color: gray;
    }
       
        @media only screen and (max-width:1078px)
        {
            #login{
                width:35%;
                left:32.5%;
            }
        }
       
        @media only screen and (max-width:953px)
        {
            #login{
                width:40%;
                left:30%;
            }
        }
       
        @media only screen and (max-width:801px)
        {
            #login{
                width:45%;
                left:27.5%;
            }
        }
       
        @media only screen and (max-width:696px)
        {
            #login{
                width:50%;
                left:25%;
            }
        }
       
        @media only screen and (max-width:647px)
        {
            #login{
                width:60%;
                left:20%;
            }
        }
       
        @media only screen and (max-width:538px)
        {
            #login{
                width:70%;
                left:15%;
            }
        }
       
        @media only screen and (max-width:449px)
        {
            #login{
                width:80%;
                left:10%;
            }
        }
       
        @media only screen and (max-width:385px)
        {
            #login{
                width:90%;
                left:5%;
            }
        }

        @media only screen and (max-width:338px)
        {
            #login{
                width:95%;
                left:2.5%;
            }
        }
   
    </style>
</html>




If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page

If you like our work please don't remove the hyperlink to our Facebook page.
3 layered login with Registration,Login & and Reset Password Forms.


Here's the code snippet:

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Loader V2.0 by roundCube</title>
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
 
 </head>
<body>
    <div id="background">
        <div id="signUp">
            <div id="signUpInner">
            <h3><b>Sign Up</b></h3>
            <h4>It's free and always will be</h4>
            <div id="signUpForm">
            <form role="form">
  <div class="form-group">
    <input type="email" class="form-control input-lg" id="email" placeholder="Email Address">
  </div>
  <div class="form-group">
    <input type="password" placeholder="Password" class="form-control input-lg" id="pwd">
  </div>
  <div class="form-group">
    <input type="password" class="form-control input-lg" id="pwd1" placeholder="Confirm Password">
  </div>

           
           
            </div>
                <div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube 2015</a></div>
        </div>
            <div id="signUpButton">
                <button type="submit" class="btn btn-default btn-block btn-lg regButton"><b>REGISTER</b></button>
                </form>
            </div>
       
        </div>
       
        <div id="login">
            <div id="loginInner">
                <h3><b>Login form</b></h3>
                <h4>Welcome you back to our site</h4>
                <div id="loginForm">
                <form role="form">
                    </br>
  <div class="form-group">
    <input type="email" class="form-control input-lg" id="email" placeholder="Email Address">
  </div>
  <div class="form-group">
    <input type="password" placeholder="Password" class="form-control input-lg" id="pwd">
  </div>
                </div>
            </div>
            <div id="loginButton">
                <button type="submit" class="btn btn-default btn-block btn-lg logButton"><b>LOGIN</b></button>
                </form>
            </div>
        </div>
        <div id="reset">
            <div id="resetInner">
                <h3><b>Reset Password</b></h3>
                <h4>Enter your new password</h4>
                <div id="resetForm">
                <form role="form">
                    </br>
  <div class="form-group">
    <input type="email" class="form-control input-lg" id="email" placeholder="Email Address">
  </div>
  <div class="form-group">
    <input type="password" placeholder="New Password" class="form-control input-lg" id="pwd">
  </div>
                </div>
            </div>
            <div id="resetButton">
                <button type="submit" class="btn btn-default btn-block btn-lg resetButton"><b>RESET PASSWORD</b></button>
                </form>
            </div>
        </div>
    </div>
</body>
    <style>
    #background{
        position: absolute;
        top:0px;
        left:0px;
        height:100%;
        width:100%;
        background-color:rgb(38, 38, 38);
    }
    #signUp{
        position: absolute;
        top:15%;
        left:35%;
        width:30%;
        height:400px;
        border-radius: 10px;
        text-align: center;
        z-index: 10;

    }
    #signUpForm{
        position: absolute;
        top:30%;
        left:10%;
        width:80%;
        height:60%;
    }
   
    #signUpInner{
        position: absolute;
        top:0%;
        left:0%;
        width:100%;
        height:80%;
        background-color: white;
        border-radius: 10px;
            box-shadow:0px 0px 20px 20px rgba(0,0,0,0.1);
    }
   
    #signUpButton{
        position: absolute;
        bottom:0%;
        left:7%;
        width:86%;
        height:17%;
    }
       
    .regButton{
        background-color: rgb(139, 199, 25);
        border-color: rgb(139, 199, 25);
        color: white;
    }
    .regButton:hover{
        background-color: rgb(106, 144, 34);
        border-color: rgb(106, 144, 34);
        color: white;
    }      
   
    input{
        text-align: center;
    }
   
    #login{
        position: absolute;
        left:12%;
        width:25%;
        top:17%;
        height:300px;
        border-radius: 10px;
        z-index: 1;
        opacity: 0.7;
    }
       
    #loginInner{
        position: absolute;
        top:0%;
        left:0%;
        width:100%;
        height:80%;
        background-color: white;
        border-radius: 10px;
        text-align: center;
    }
   
    #loginButton{
        position: absolute;
        bottom:0%;
        left:7%;
        width:86%;
        height:17%;
    }
       
    #loginForm{
        position: absolute;
        top:30%;
        left:10%;
        width:80%;
        height:60%;
    }
       
    .logButton{
        background-color: rgb(25, 108, 240);
        border-color: rgb(25, 108, 240);
        color: white;
    }
    .logButton:hover{
        background-color: rgb(23, 86, 185);
        border-color: rgb(23, 86, 185);
        color: white;
    }  
       
    #reset{
        position: absolute;
        right:12%;
        width:25%;
        top:17%;
        height:300px;
        border-radius: 10px;
        z-index: 1;
        opacity: 0.7;
    }
       
    #resetInner{
        position: absolute;
        top:0%;
        left:0%;
        width:100%;
        height:80%;
        background-color: white;
        border-radius: 10px;
        text-align: center;
    }
   
    #resetButton{
        position: absolute;
        bottom:0%;
        left:7%;
        width:86%;
        height:17%;
    }
       
    #resetForm{
        position: absolute;
        top:30%;
        left:10%;
        width:80%;
        height:60%;
    }
       
    .resetButton{
        background-color: rgb(229, 34, 42);
        border-color: rgb(229, 34, 42);
        color: white;
    }
    .resetButton:hover{
        background-color: rgb(222, 20, 28);
        border-color: rgb(222, 20, 28);
        color: white;
    }
       
    #copyright{
        position: absolute;
        bottom:0px;
        left:0px;
        height:7%;
        width: 100%;
        opacity: 0.5;
    }
   
    #copyright a{
        text-decoration: none;
        color:black;
    }
   
@media only screen and (max-width:888px)
{
#signUp{
    left:32.5%;
    width:35%;
}
#login{
    left:8%;
    width:30%;
}
#reset{
    right:8%;
    width:30%;  
}
    </style>
</html>


If you have any confusions in mind or want to ask for snippets leave a comment below or leave a message on our page

If you like our work please don't remove the hyperlink to our Facebook page.
Subscribe to: Posts (Atom)