Showing posts with label login form. Show all posts
 Login Form V9.0 based on Bootstrap

Here's the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Login V9.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="form">
               
        </br>
    <form class="form" role="form">
  <div class="form-group">
    <input type="email" class="form-control  input-lg" id="email" placeholder="Email">
  </div>
  <div class="form-group">
    <input type="password" class="form-control input-lg" id="pwd" placeholder="******">
  </div>
        
          <button type="submit" class="btn btn-default btn-lg btn-block submit">LOGIN</button>
                
        </div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts">&#169; roundCube</a></div>
     

</body>
    <style>
        

    #form{
        position: absolute;
        top:27%;
        left:35%;
        width:30%;
        height:310px;
    }
        
        

        input#email{
            background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3sIy64h08C3L_2nCnyUrMe-N5YbWOvlceyFMIBpvfYA4XAW05BLI9RvHmP6GgrHxFAvM15Gi4DFnK2BPmoy-U8K0yO_hSE6pm6zXMUxI95TWM9wuCI9gO5bBAtrUD0rd874PdDOLoC4s/s1600/user.jpg);
            background-size: 42px 102%;
            background-repeat: no-repeat;
            border-radius: 0px;
            text-indent: 45px;
            border-style: none;
            
        }
        
        #copyright{
            position:absolute;
            top:2px;
            height:20px;
            left:0px;
            width:100%;
            text-align:center;
        }

        #copyright a{
            text-decoration:none;
            color:#333;

        }
        
        input#pwd{
            background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjevFDxfl_tuWUBo5wkVg_ALfCYGAG0ZnfLugc9-N4cTb9eon09vAPdjUp176em9Hk_mppl7zWMnNDD-2j8yIM_LBLzwwo-3JcvPjbSOCMK497O9VIE5ASuyaFYzKRrJLJ5U-7l4uJzlFA/s1600/password.jpg);
            background-size: 43px 100%;
            background-repeat: no-repeat;
            border-radius: 0px;
            text-indent: 45px;
            border-style: none;
            
        }
        
        .submit{
            text-align: left;
            border-radius: 0px;
            background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW0xlMcu9ys_D5ACWEwQSRuEEDc1dB4acKIxXGjOP8qXpDdbAi6ST0eG-BYKyWQBPCr6hRAzOzaVe8QvTGoy1T7nt-WEOl2WgJYhLvcFBz3-nwXBDvb9TaVkJK6qNnzfflRl4bmFKO1rI/s1600/login.jpg);
            background-size: 43px 100%;
            text-indent: 45px;
            background-repeat: no-repeat;
            border-style: none;
        }
        
        @media only screen and (max-width:1040px)
        {
            #form{
                left:30%;
                width:40%;
            }
        }
        
        @media only screen and (max-width:795px)
        {
            #form{
                left:25%;
                width:50%;
            }
        }
        
        @media only screen and (max-width:634px)
        {
            #form{
                left:20%;
                width:60%;
            }
        }
            
        @media only screen and (max-width:528px)
        {
            #form{
                left:10%;
                width:80%;
            }
        }
        
        @media only screen and (max-width:393px)
        {
            #form{
                left:5%;
                width:90%;
            }
        }
        
    
    
    </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.
Responsive form V8.0


Related Articles:

  

  


Here's the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Login V8.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="dots"></div>
    <div id="dots"></div>
    <div id="dots"></div>
    <div id="dots"></div>
<div id="form">
    <h1><b>User Login</b></h1>
    </br></br>
    <img src="http://p.w3layouts.com/demos/user_login/images/avtar.png" height="140" width="140" style="left:25%">
    <div id="login">
    <div id="loginFields">
        </br>
    <form class="form-inline" role="form">
  <div class="form-group">
    <input type="email" class="form-control  input-lg" id="email" placeholder="USERNAME">
  </div>
  <div class="form-group">
    <input type="password" class="form-control input-lg" id="pwd" placeholder="******">
  </div>
        </div>
    <div id="submission">
          <button type="submit" class="btn btn-default btn-lg login">GO</button>
    </div>
    </div>
</form>
</div>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>&#169; roundCube</a></br> Idea By: w3layouts.com</p></div>
</body>
    <style>
        body{
            background-image: url(https://photoshopgimptutorials.files.wordpress.com/2012/08/step-7.jpg);
        }
       
        #form{
            position: absolute;
            top:3%;
            height:500px;
            left:27%;
            width:44%;
            color:white;
            text-align: center;
        }
       
        #dots {
            position: absolute;

            top: 0;
            left: 0;
            right: 0;
            bottom: 0;

            background-image: url('http://www.uiueux.com/wp/flowfolio/wp-content/themes/flowfolio/img/bg_mask.png');
}
       
        #login{
            position: absolute;
            bottom:5px;
            left: 5%;
            width:100%;
            height:17%;
            border-radius: 7px;
        }
       
        .input-lg{
            border-color: #939393;
        }
       
        #loginFields{
            position: absolute;
            top:0px;
            left:0px;
            width:90%;
            height:100%;
            background-color: white;
            border-radius: 7px;
        }
       
        #submission{
            position: absolute;
            top:25%;
            height:50%;
            width:10%;
            right:0%;
        }
       
        .login{
            border-top-left-radius: 0px;
            border-bottom-left-radius: 0px;
            background-color: orange;
            border-color: orange;
            color: white;
        }
       
        .login:Hover{
            background-color: #0080ff;
            border-color: #0080ff;
            color:White;
        }
       
        #copyright{
            position: absolute;
            bottom:2px;
            height:10%;
            left:0px;
            width:100%;
            text-align: center;
            color:white;

        }
       
    #copyright a{
        color:white;
        text-decoration: none;
    }
        #copyright a:hover{
            color:orange;
        }
       
        @media only screen and (max-width:1306px)
        {
            #form{
                width:50%;
                left:25%;
            }
        }
       
        @media only screen and (max-width:1152px)
        {
            #form{
                width:60%;
                left:20%;
            }
        }
       
        @media only screen and (max-width:974px)
        {
            #form{
                width:65%;
                left:17.5%;
            }
        }
       
        @media only screen and (max-width:901px)
        {
            #form{
                width:70%;
                left:15%;
            }
        }
       
       
        @media only screen and (max-width:837px)
        {
            #form{
                width:75%;
                left:12.5%;
            }
        }
       
        @media only screen and (max-width:783px)
        {
            #form{
                width:80%;
                left:10%;
            }
        }
       
        @media only screen and (max-width:765px)
        {
            #login{
                height:29%;
            }
           
            #submission{
                top:38%;
            }
           
            #form{
                left:25%;
                width:50%;
            }
           
            #loginFields{
                padding-right:15px;
                padding-left: 15px;
        }
           
        }
       
        @media only screen and (max-width:618px)
        {
            #form{
                width:60%;
                left:20%;
            }
        }
           
        @media only screen and (max-width:557px)
        {
            #form{
                width:70%;
                left:15%;
            }
        }
       
        @media only screen and (max-width:496px)
        {
            #form{
                width:80%;
                left:10%;
            }
        }
       
        @media only screen and (max-width:460px)
        {
            #form{
                left:3%;
            }
        }
       
    </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.
Responsive Form V7.0 based on Bootstrap



Related Articles

  



Here's the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Login V7.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="form">
        <div id="loginCover"></div>  
        <div id="login">
<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" class="form-control input-lg" id="pwd" placeholder="******">
  </div>
    </br>
  <button type="submit" class="btn btn-default btn-block btn-lg button">Sign In</button>
</form>
            </br>
    <a href="#"><p style="text-align:center;color:white;">Forgot Password?</p></a>
        </div>
   
    <a href="https://www.facebook.com/roundCubeInc?fref=ts"><div id="logo"></div></a>
    <div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>&#169; roundCube</a></p></div>
    </div>  
</body>
   
<style>
  #form{
      position: absolute;
      top:15%;
      left:37%;
      height:480px;
      width:26%;
      background-image: url("http://www.myiphone5wallpaper.com/Gallery/10_Architecture/My-iPhone-5-Wallpaper-HD-Architecture(16).jpg");
      background-size: 100% 100%;
      border-radius: 5px;
  }
  #loginCover{
      position: absolute;
      top:0px;
      left:0px;
      height:100%;
      width:100%;
      background-color: black;
      opacity: 0.6;
      border-radius: 5px;
  }
  #login{
      position: absolute;
      top:34%;
      left:10%;
      width:80%;
      height:50%;
  }
  input#email,input#pwd{
    background-color: rgb(30,30,29);
    border-radius: 0px;
    border-style:none;
    color:white;
    font-size: 14px;
  }

    .button{
        background-color: rgb(234,203,32);
        border-color: rgb(234,203,32);
        color:white;
        border-radius:25px;
        border-width: 4px;
        -webkit-transition:all 0.25s ease;
        -moz-transition:all 0.25s ease 0s;
    }
   
    .button:hover{
        background-color: transparent;
        border-color: rgb(234,203,32);
        border-width: 4px;
        border-style: dotted;
        color:rgb(234,203,32);
    }
   
    #logo{
        position: absolute;
        top:5%;
        height:130px;
        left:32%;
        width: 130px;
        background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYbHa4yCqBX9-eFF6HZOY4hFKCnvBrpInfJ5Nnc1VCAnNRUhbjpZxuf9PqD4vsHBxCIeCm4rD1SHlurEdNrzr8MWa_n6z-0JelbGuhgofpLU9DKNuNPFvsN1TNl6ZFXiisFqPNycaUcQM/s1600/Final.png);
        background-size: 100% 100%;
    }
   
    #copyright{
        position: absolute;
        bottom:0px;
        height:6%;
        left:0px;
        width:100%;
        text-align: center;
     }
   
    #copyright a{
        color:white;
    }
   
    #login a{
        color:white;
        text-decoration: none;
    }


input#email::-webkit-input-placeholder,input#pwd::-webkit-input-placeholder { /* WebKit browsers */
    color:   white;
}
input#email:-moz-placeholder,input#pwd:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    white;
   opacity:  1;
}
input#email::-moz-placeholder,input#pwd::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    white;
   opacity:  1;
}
input#email:-ms-input-placeholder,input#pwd:-ms-input-placeholder { /* Internet Explorer 10+ */
   color:    white;
}
   
   
        @media only screen and (max-width:1158px)
        {
            #form{
                width:30%;
                left:35%;
            }
        }
   
        @media only screen and (max-width:1031px)
        {
            #form{
                width:35%;
                left:32.5%;
            }
        }
   
        @media only screen and (max-width:867px)
        {
            #form{
                width:40%;
                left:30%;
            }
        }
   
        @media only screen and (max-width:760px)
        {
            #form{
                width:45%;
                left:27.5%;
            }
        }
   
        @media only screen and (max-width:663px)
        {
            #form{
                width:50%;
                left:25%;
            }
        }
   
        @media only screen and (max-width:575px)
        {
            #form{
                width:60%;
                left:20%;
            }
        }
   
        @media only screen and (max-width:490px)
        {
            #form{
                width:70%;
                left:15%;
            }
        }
   
        @media only screen and (max-width:420px)
        {
            #form{
                width:80%;
                left:10%;
            }
        }
   
        @media only screen and (max-width:360px)
        {
            #form{
                width:90%;
                left: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.
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.





Related Articles:

 




Here's the code snippet:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Login V5.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="background">
        <div id="form">
            <form role="form">
  <div class="form-group " id="username">
      <div class="arrow" style="background-color: rgb(77,175,124);"></div>

    <input type="email" class="form-control input-lg inputs" id="email" height="40" placeholder="USERNAME">
  </div>
  <div class="form-group" id="password">
      <div class="arrow" style="background-color: rgb(64,66,65);"></div>
    <input type="password" class="form-control input-lg inputs" id="pwd" placeholder="PASSWORD">
  </div>
    <div id="submit">
  <button type="submit" class="btn btn-default btn-block btn-lg button"><b>LOG IN</b></button>
</form>
<div id="copyright"><a href="https://www.facebook.com/roundCubeInc?fref=ts"><p>&#169; roundCube</a></p></div>
                </div>

        </div>
    
    </div>  
    
</body>
    <style>
        #background{
            position: absolute;
            top:0px;
            left:0px;
            width:100%;
            height:100%;
            background-color: rgb(233,200,93);
            
        }
        #form{
            position: absolute;
            top:20%;
            left:37%;
            width:26%;
            height:300px;
        }
        #username{
            position: absolute;
            top:0px;
            height: 100px;
            left:0px;
            width:100%;
            background-color: rgb(77,175,124);
            padding: 27px;
        }
        
        .arrow{
            position: absolute;
            bottom:-5px;
            height: 10px;
            left:48.5%;
            width:10px;
            z-index: 5;
            -ms-transform: rotate(45deg); /* IE 9 */
            -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
            transform: rotate(45deg);
        }
        
        

        #password{
            position: absolute;
            top:100px;
            left:0px;
            width:100%;
            height:100px;
            background-color: rgb(64,66,65);
            padding: 27px;
        }
        #submit{
            position: absolute;
            top:200px;
            left:0px;
            width:100%;
            height:80px;
            background-color: tan;
            padding: 19px;
        }
        
        .inputs{
            background-color: transparent;
            border-radius: 0px;
            border-color: white;
            text-align: center;
            color:white;
            placeholder-color:white;
        }
        
        .button{
            background-color: transparent;
            border-color: transparent;
            -webkit-transition:all 0.7s ease;
            -moz-transition:all 0.7s ease 0s;
        }
        
        .button:hover{
            background-color: transparent;
            border-color: transparent;
            color:white;
        }
        
        #email::-webkit-input-placeholder,#pwd::-webkit-input-placeholder{ color:white; }
        #email::-moz-placeholder,#pwd::-moz-placeholder { color:white; }
        
        #copyright{
            position: absolute;
            left:0px;
            bottom: 1px;
            width:100%;
            height:25%;
            text-align: center;
            color: white;
            
        }
        #copyright a{
            text-decoration: none;
            color: white;
            -webkit-transition:all 0.4s ease;
            -moz-transition:all 0.4s ease 0s;
            opacity: 0.6;
        }
        
        #copyright a:hover{
            text-decoration: none;
            color: black;
        }
        
        @media only screen and (max-width:999px)
        {
            #form{
                width:35%;
                left:30%;
            }
        }

        @media only screen and (max-width:788px)
        {
            #form{
                width:40%;
                left:30%;
            }
        }
        
        @media only screen and (max-width:714px)
        {
            #form{
                width:45%;
                left:27.5%;
            }
        }
        
        @media only screen and (max-width:572px)
        {
            #form{
                width:50%;
                left:25%;
            }
        }
        
        @media only screen and (max-width:497px)
        {
            #form{
                width:60%;
                left:20%;
            }
        }
        
        @media only screen and (max-width:387px)
        {
            #form{
                width:70%;
                left:15%;
            }
        }
        
        @media only screen and (max-width:342px)
        {
            #form{
                width:80%;
                left:10%;
            }
        }
    
    
    </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)