"register.html"
Bootstrap 3.3.0 Snippet by r4j35h

Post to Facebook Tweet this

<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 ----------> <html> <head> <title> Sales Tax </title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> <style> /* ToolTip CSS classses */ .imgcontainer { text-align: center; margin: 24px 0 12px 0; position: relative; } .container1 { padding: 16px; } /* Add Zoom Animation */ .animate { -webkit-animation: animatezoom 0.6s; animation: animatezoom 0.6s } @-webkit-keyframes animatezoom { from {-webkit-transform: scale(0)} to {-webkit-transform: scale(1)} } @keyframes animatezoom { from {transform: scale(0)} to {transform: scale(1)} } /* Change styles for span and cancel button on extra small screens */ @media screen and (max-width: 300px) { span.psw { display: block; float: none; } .cancelbtn { width: 100%; } } .modal-content { background-color: #fefefe; margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ border: 1px solid #888; width: 30%; /* Could be more or less, depending on screen size */ } .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ padding-top: 60px; padding-left: 60px; } .navbar-default { background-color: #e09f7d ; border-color: #E71A1A ; } /* unvisited link */ a:link { color: red; } /* visited link */ a:visited { color: navy; } /* mouse over link */ a:hover { color: blue; } /* selected link */ a:active { color: blue; } active {background-color:#cc5a71} </style> </head> <body> <nav class="navbar" style="background:#311847"> <div class="container-fluid"> <div class="navbar-header"> <a class="navbar-brand" href="#"> <img alt="Brand" src="Logo.png" height="90"> </a> </div> <h2 align="center" style="color:#ffffff;"> Department of Sales Tax</h2> <div class="navbar-right"> <img alt="Brand" src="info.gif" > </div> </div> </nav> <nav class="navbar navbar-default"> <div class="container-fluid" > <!-- Brand and toggle get grouped for better mobile display --> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a style="color:#34344a" class="navbar-brand" href="#">Home</a> </div> <!-- Collect the nav links, forms, and other content for toggling --> <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <ul class="nav navbar-nav"> <li class="dropdown"> <a style="color:#34344a" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">About Us <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Profile</a></li> <li><a href="#">Vision Mission</a></li> <li><a href="#">Citizen Charter </a></li> <li role="separator" class="divider"></li> <li><a href="#">Department at a Glance </a></li> <li><a href="#">Organizational Structure</a></li> <li><a href="#">Location of Offices </a></li> <li><a href="#">Statistics</a></li> <li><a href="#">Budget</a></li> </ul> </li> = <li class="dropdown"> <a style="color:#34344a" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Acts & Rules <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Acts</a></li> <li><a href="#">Rules</a></li> <li><a href="#">Trade Circulars</a></li> <li><a href="#">Notifications</a></li> <li><a href="#">Rate Schedule</a></li> <li><a href="#">Govt. Resolution</a></li> <li><a href="#">DDQ </a></li> <li><a href="#">Advance Ruling </a></li> <li><a href="#">GST </a></li> </ul> </li> <li class="dropdown"> <a style="color:#34344a" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Downloads <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Forms</a></li> <li><a href="#">Trade Circulars</a></li> <li><a href="#">Notifications</a></li> <li><a href="#">Download Acrobat</a></li> <li><a href="#">e-CST Forms view</a></li> <li><a href="#">PTEC Registration Certificate </a></li> </ul> </li> <li class="dropdown"> <a style="color:#34344a" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dealer Services <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Tax Calendar</a></li> <li><a href="#">Know Your TIN </a></li> <li><a href="#">Manuals of Procedures </a></li> <li><a href="#"> Short / Non Filers </a></li> <li><a href="#">New Automation</a></li> <li><a href="#">Amnesty Scheme-2016</a></li> </ul> </li> <li class="dropdown"> <a style="color:#34344a" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">RTI <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Acts</a></li> <li><a href="#">Rules </a></li> <li><a href="#">Information </a></li> <li><a href="#">PIO </a></li> <li><a href="#">Appellate Authority </a></li> <li><a href="#">Faq's </a></li> </ul> </li> </ul> <form class="navbar-form navbar-right"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Search</button> </form> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a style="color:#34344a" class="navbar-brand" href="#">Contact Us</a> </div> </div><!-- /.navbar-collapse --> </div><!-- /.container-fluid --> </nav> <div class="container"> <div style="position: absolute; top: 200px; left: 10px; width: 250px; height: 500px; background-color:#ffffff;"> <ul class="nav nav-pills nav-stacked" > <li class="active" style="color:#cc5a71"><a href="#">Home</a></li> <li><a href="#">e-Registration </a></li> <li><a href="#">e-Returns </a></li> <li><a href="#">e-CST Declarations </a></li> <li><a href="#">e-Audit Form </a></li> <li><a href="#">e-Refund Application</a></li> <li><a href="#">Upload_F424URD </a></li> <li><a href="#">e-payment</a></li> <li><a href="#">e-Payment thru GRAS </a></li> <li><a href="#">e-Amnesty 2016 </a></li> <li><a href="#">Instruction sheets for e-Services</a></li> <li><a href="#">Driver Recruitment</a></li> </ul> </div> </div> <div class="container" style="position: absolute; top: 200px; left: 1000px; width: 350px; height: 500px; overflow-y: scroll;"> <div class="list-group"> <a href="#" class="list-group-item active"> <h4 class="list-group-item-heading"> What's New</h4> <a href="#" class="list-group-item"> <p class="list-group-item-text">"INSTRUCTION SHEET Entry Tax_e-return upload"</p> </a><a href="#" class="list-group-item"> <p class="list-group-item-text">" 25 Frequently Asked Questions (FAQ) regarding Advance Ruling"</p> </a><a href="#" class="list-group-item"> <p class="list-group-item-text">" Advance Ruling Authority Regulations, 2016 "</p> </a><a href="#" class="list-group-item"> <p class="list-group-item-text">" FAQ in respect of Return Filing in New Automation System"</p> </a><a href="#" class="list-group-item"> <p class="list-group-item-text">"Documents required for the Registration under various Acts"</p> </a><a href="#" class="list-group-item"> <p class="list-group-item-text">" Existing dealer Manual"</p> </a><a href="#" class="list-group-item"> <p class="list-group-item-text">"Updated list of non genuine dealer as on July 2016"</p> </a><a href="#" class="list-group-item"> <p class="list-group-item-text">"Help Desk details for Mumbai location"</p> </a><a href="#" class="list-group-item"> <p class="list-group-item-text">"Help Desk details for locations other than Mumbai"</p> </a><a href="#" class="list-group-item"> <p class="list-group-item-text">"CASES OF BENEFICIARIES OF RETURN NON -FILER AND ZERO FILER FOR THE PERIOD 2011-12 NOW ELIGIBLE FOR REFUND".</p> </a> <a href="#" class="list-group-item"> <p class="list-group-item-text">" Work Planning 2016-17 Circular"</p> </a> <a href="#" class="list-group-item"> <p class="list-group-item-text">"Inspection Programme for the year 2016-2017"</p> </a> <a href="#" class="list-group-item"> <p class="list-group-item-text">"List of Nodal officer's in vikrikar Bhavan Mazgaon & Bandra office along with their contact details"</p> </a> <a href="#" class="list-group-item"> <p class="list-group-item-text">"Flow chart of validation of digital signature" </p> </a> </div> </div> <div class="btn-group-horizontal" role="group" style=" position: absolute; top: 700px; left: 310px; width: 750px; height: 40px;"> <button style="background-color:#e09f7d;" type="button" class="btn btn-default">Know Your TIN </button> <button style="background-color:#e09f7d;" type="button" class="btn btn-default">Forms</button> <button style="background-color:#e09f7d;" type="button" class="btn btn-default">Trade Circulars</button> <button style="background-color:#e09f7d;" type="button" class="btn btn-default">Help Desk </button> <button style="background-color:#e09f7d;" type="button" class="btn btn-default">e-Amnesty 2016</button> <button style="background-color:#e09f7d;" type="button" class="btn btn-default">Rate Schedule</button> </div> <div align=center style=" position: absolute; top: 200px; left: 310px; width: 700px; height: 700px;"> <h2 class="list-group-item-heading" align=center> --- User Registration ---</h2> <h4 align=left> Registration Instruction's</h4> <h5 align=left style="color:#128429">* Cli:ck on 'New Dealer' if you do not have any active registration certificates under any of the acts administered by MSTD.<br> * Click on 'Registered Dealer' if you have an active registration certificate under at least one of the acts administered by MSTD.<br> * If you have an active registration certificate under PTEC only and not under any of the other acts administered by MSTD, please click on 'New Dealer' and if your PAN is not allowed there for creation of temporary profile, only then go through 'Registered Dealer'.</h5> <br><br> <div align=left class="input-group"> <input name="type" type="radio" aria-label="sdfsdf"> New Dealer<br/> <input name="type" type="radio" aria-label="..."> Registered Dealer<br><br> </div> <div class="col-lg-6"> <div align=center ><div class="input-group"> <span class="input-group-addon"> <input name="tanp" type="radio" aria-label="sdfsdf">  PAN </span> <input type="text" class="form-control" aria-label="..."> </div></div><br> <div class="input-group"> <span class="input-group-addon"> <input name="tanp" type="radio" aria-label="sdfsdf">  TAN </span> <input type="text" class="form-control" aria-label="..."> </div> </div> <div align=center> <h4></h4> <div id="id01" class="modal"> <form class="modal-content animate" method="post" action="" onsubmit="return onLogin();"> <div class="container1"> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">@</span> <input id="user" class="form-control" placeholder="Username" aria-describedby="basic-addon1" required data-toggle="tooltip" title="Hooray!" data-placement="right" > <span id="cvvNull" style="color:red" title="Enter 3 digit pin"></span> </div> <br/> <br> <div class="input-group"> <span class="input-group-addon" id="basic-addon1">#</span> <input id="pass" class="form-control" type="password" placeholder="Password" aria-describedby="basic-addon1" required data-toggle="tooltip" data-placement="right" title="asdasdas"> </div> <br><button class="btn btn-primary" type="submit" name="submit">Login</button> <button class="btn btn-warning " onclick="document.getElementById('id01').style.display='none'" type="button" >Cancel</button> <input type="checkbox">Remember me   </div> <div class="container" style="background-color:#f1f1f1"> </div> <!--<div style = "font-size:11px; color:#cc0000; margin-top:10px"><?php echo $error; ?></div>--> </form> </div> <script> function onLogin(){ if(document.getElementById("user").value =="admin"){ if(document.getElementById("pass").value=="password"){ window.location.href="loggedin.html"; alert("Successfully logged in"); }else{ alert("Wrong Paswrod : Pleasae enter right password") } } else{ alert("Wrong username : Pleasae enter right username") } } </script> </body> </html>
new{color:red;}

Related: See More

Now UI Kit Angular
BS4 Login, Register FORM + Mobile
Register form, html bootstrap4 registration form card panel
register page and login page together fully responsive

Questions / Comments: