Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to make Login and Signup in a single template

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 423
    Comment on it

    Hello Reader's if you are making the resposive website then you can make login and signup in same desing template.

    Then you just have to create a front page in html and use the following code:-

    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
    
        <div id="login-overlay" class="modal-dialog">
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true"></span><span class="sr-only">Close</span></button>
                  <h4 class="modal-title" id="myModalLabel">Login to site.com</h4>
              </div>
              <div class="modal-body">
                  <div class="row">
                      <div class="col-xs-6">
                          <div class="well">
                              <form id="loginForm" method="POST" action="/login/" novalidate="novalidate">
                                  <div class="form-group">
                                      <label for="username" class="control-label">Username</label>
                                      <input type="text" class="form-control" id="username" name="username" value="" required="" title="Please enter you username" placeholder="example@gmail.com">
                                      <span class="help-block"></span>
                                  </div>
                                  <div class="form-group">
                                      <label for="password" class="control-label">Password</label>
                                      <input type="password" class="form-control" id="password" name="password" value="" required="" title="Please enter your password">
                                      <span class="help-block"></span>
                                  </div>
                                  <div id="loginErrorMsg" class="alert alert-error hide">Wrong username og password</div>
                                  <div class="checkbox">
                                      <label>
                                          <input type="checkbox" name="remember" id="remember"> Remember login
                                      </label>
                                      <p class="help-block">(if this is a private computer)</p>
                                  </div>
                                  <button type="submit" class="btn btn-success btn-block">Login</button>
                                  <a href="/forgot/" class="btn btn-default btn-block">Help to login</a>
                              </form>
                          </div>
                      </div>
                      <div class="col-xs-6">
                          <p class="lead">Register now for <span class="text-success">FREE</span></p>
                          <ul class="list-unstyled" style="line-height: 2">
                              <li><span class="fa fa-check text-success"></span> See all your orders</li>
                              <li><span class="fa fa-check text-success"></span> Fast re-order</li>
                              <li><span class="fa fa-check text-success"></span> Save your favorites</li>
                              <li><span class="fa fa-check text-success"></span> Fast checkout</li>
                              <li><span class="fa fa-check text-success"></span> Get a gift <small>(only new customers)</small></li>
                              <li><a href="/read-more/"><u>Read more</u></a></li>
                          </ul>
                          <p><a href="/new-customer/" class="btn btn-info btn-block">Yes please, register now!</a></p>
                      </div>
                  </div>
              </div>
          </div>
      </div>
    

    This template can be integrate in any design format, also this support bootstrap. Here you can make on click to switch between login and signup. Also this template will offers you to do login via github. And you can show new terms and conditions on this page in pre formated way. This template works fine for me in all the designs and save my time.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: