<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 ----------> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-1"> <div class="wrap"> <div class="panel with-nav-tabs panel-default" > <!--<img src="images/sign.jpg" alt="sign" width="387" height="310">--> </div> </div> </div></div></div> <div class="container"> <div class="row"> <div class="col-md-4 col-md-offset-1"> <div class="wrap"> <div class="panel with-nav-tabs panel-default" > <div class="panel-heading" > <table> <tr> <td> <ul class="nav nav-tabs" role="tablist"> <!-- <li><img src="images/sign.jpg" alt="sign" width="355" height="100"></li>--> <li class="active"><a href="#login" data-toggle="tab" class="glyphicon glyphicon-lock">Login</a></li> <li><a href="#contact" data-toggle="tab">Contact Us</a></li> <li><a href="#register" data-toggle="tab">Register</a></li> </ul> </td> </table> </div> <div class="panel-body"> <div class="tab-content"> <!--////////////////////////////////////////////////////////////////////////////////////////////////////--> <div class="tab-pane fade" id="contact"> <form class="form-horizontal" role="form" method="post" id="contactform"> <div class="row"> <div class="col-md-20"> <!--<div class="well well-sm">--> <form class="form-horizontal" method="post"> <h4 class="text-center header">Contact us</h4> <div class="form-group"><div class="col-sm-9"><i class="fa fa-user bigicon"></i><input name="Password" class="form-control" id="Password" type="password" placeholder="First Name" value="@Request["First_Name"]" required> </div></div> <div class="form-group"><div class="col-sm-9"><input name="Password" class="form-control" id="Password" type="password" placeholder="Second Name" value="@Request["Second_Name"]" required></div></div> <div class="form-group"><div class="col-sm-9"><i class="fa fa-user bigicon"></i><input name="Password" class="form-control" id="Password" type="password" placeholder="Email Adress" value="@Request["Email_Adress"]" required> </div></div> <div class="form-group"><div class="col-sm-9"><i class="fa fa-envelope-o bigicon"></i> <input name="Password" class="form-control" id="Password" type="password" placeholder="Phone Number" value="@Request["Phone"]" required> </div></div> <div class="form-group"><div class="col-sm-9"> <i class="fa fa-pencil-square-o bigicon"></i><textarea class="form-control" id="message" name="message" placeholder="Enter your massage for us here. We will get back to you within 2 business days." rows="7"></textarea> </div></div> <div class="form-group"> <input type="submit" value="Contact Us" class="btn btn-primary btn-lg"/><br> </div> <!-- <div class="form-group"> <span class="col-md-1 col-md-offset-0 text-center"><i class="fa fa-user bigicon"></i></span> <div class="col-md-9"> <input id="fname" name="name" type="text" placeholder="First Name" class="form-control"> </div> </div> <div class="form-group"> <span class="col-md-1 col-md-offset-0 text-center"><i class="fa fa-user bigicon"></i></span> <div class="col-md-9"> <input id="lname" name="name" type="text" placeholder="Last Name" class="form-control"> </div> </div> <div class="form-group"> <span class="col-md-1 col-md-offset-0 text-center"><i class="fa fa-envelope-o bigicon"></i></span> <div class="col-md-9"> <input id="email" name="email" type="text" placeholder="Email Address" class="form-control"> </div> </div> <div class="form-group"> <span class="col-md-1 col-md-offset-0 text-center"><i class="fa fa-phone-square bigicon"></i></span> <div class="col-md-9"> <input id="phone" name="phone" type="text" placeholder="Phone" class="form-control"> </div> </div> <div class="form-group"> <span class="col-md-1 col-md-offset-0 text-center"><i class="fa fa-pencil-square-o bigicon"></i></span> <div class="col-md-9"> <textarea class="form-control" id="message" name="message" placeholder="Enter your massage for us here. We will get back to you within 2 business days." rows="7"></textarea> </div> </div> <div class="form-group"> <div class="col-md-12 text-center"> <button type="submit" class="btn btn-primary btn-lg">Submit</button> </div> </div> --> </form> <!-- </div>--> </div> </div> <!--<style> .header { color: #36A0FF; font-size: 27px; padding: 10px; } .bigicon { font-size: 35px; color: #36A0FF; } #circle { border-radius:100% 100% 100% 100%; width:200px; height:185px; } </style>--> <!-- <div class="form-group"> < <div class="col-sm-9"><input name="name" class="form-control" id="name" placeholder="Name" required></div></div> <div class="form-group"> <div class="col-sm-9"><input name="name" class="form-control" id="email" placeholder="Email" required></div></div><br><br> <textarea id="msg" name="message" placeholder="Message"></textarea><a href="javascript:%20check_empty()" id="submit">Send</a> --> </form> </div> <!--////////////////////////////////////////////////////////////////////////////////////////////////////////////--> <div class="tab-pane fade" id="register"> <a type="submit" href="/register" class="btn btn-lg btn-primary" style="color: #ffffff" id="creataccount" rel="popover">Register here</a> </div> <!--////////////////////////////////////////////////////////////////////////////////////////////////////////////--> <div class="tab-pan fade in active" id="login"> <form accept-charset="UTF-8" class="form-horizontal" role="form" method="post" id="contactform"> <div class="form-group"> <div class="col-sm-9"><input name="Email" class="form-control" id="Email" placeholder="Email" value="@Request["Email"]" required></div></div> <div class="form-group"><div class="col-sm-9"><input name="Password" class="form-control" id="Password" type="password" placeholder="Password" value="@Request["Password"]" required></div></div> <div class="remember-forgot"> <div class="row"> <div class="form-group"><div class="col-sm-offset-3 col-sm-9"> <div class="checkbox"><label><input type="checkbox"/>Remember me</label></div></div></div><p id="error"></p> </div> </div> <!--<span class="group-btn">--> <input type="submit" value="Sign in" class="btn btn-success"/><br> <div class=" forgot-pass-content"> <a onclick="myfunction()" href="javascription:void(0)" class="forgot-pass">Forgot Password</a> <p id="demo"></p> </div> <!-- <a href="/home" class="btn btn-success btn-sm" style="color: #ffffff" id="sign" rel="popover">Sign in <i class="fa fa-sign-in"></i></a></span> <div id="error"></div> --> <!-- <fieldset> <div class="form-group input-group"> <span class="input-group-addon"> </span> <input class="form-control" placeholder="Email" name="email" type="email" required="" autofocus=""> </div> <div class="form-group input-group"> <span class="input-group-addon"> <i class="glyphicon glyphicon-lock"> </i> </span> <input class="form-control" placeholder="Password" name="password" type="password" value="" required=""> </div> <div class="form-group"> <button type="submit" class="btn btn-primary btn-block"> Access </button> <p class="help-block"> <a class="pull-right text-muted" href="#" id="olvidado"><small>Forgot your password?</small></a> </p> </div> </fieldset> --> </form> </div> <div class="pr-wrap"> <div class="pass-reset"> <label> Enter the email you signed up with</label> <input type="email" placeholder="Email" /> <input type="submit" value="Submit" class="pass-reset-submit btn btn-success btn-sm" /> </div> </div> </div> </div> </div> </div> </div> </div></div>

@import "http://fonts.googleapis.com/css?family=Raleway"; /*---------------------------------------------- CSS settings for HTML div Exact Center ------------------------------------------------*/ #abc { width:100%; height:100%; opacity:.95; top:0; left:0; display:none; position:fixed; background-color:#313131; overflow:auto } img#close { position:absolute; right:-14px; top:-14px; cursor:pointer } div#popupContact { position:absolute; left:50%; top:17%; margin-left:-202px; font-family:'Raleway',sans-serif } form { max-width:300px; min-width:250px; padding:10px 50px; border:2px solid gray; border-radius:10px; font-family:raleway; background-color:#fff } p { margin-top:30px } h2 { background-color:#FEFFED; padding:20px 35px; margin:-10px -50px; text-align:center; border-radius:10px 10px 0 0 } hr { margin:10px -50px; border:0; border-top:1px solid #ccc } input[type=text] { width:82%; padding:10px; margin-top:30px; border:1px solid #ccc; padding-left:40px; font-size:16px; font-family:raleway } #name { background-image:url(../images/name.jpg); background-repeat:no-repeat; background-position:5px 7px } #email { background-image:url(../images/email.png); background-repeat:no-repeat; background-position:5px 7px } textarea { background-image:url(../images/msg.png); background-repeat:no-repeat; background-position:5px 7px; width:82%; height:95px; padding:10px; resize:none; margin-top:30px; border:1px solid #ccc; padding-left:40px; font-size:16px; font-family:raleway; margin-bottom:30px } #submit { text-decoration:none; width:100%; text-align:center; display:block; background-color:#FFBC00; color:#fff; border:1px solid #FFCB00; padding:10px 0; font-size:20px; cursor:pointer; border-radius:5px } span { color:red; font-weight:700 } button { width:10%; height:45px; border-radius:3px; background-color:#cd853f; color:#fff; font-family:'Raleway',sans-serif; font-size:18px; cursor:pointer } body { background: url("images/final_background.jpg") no-repeat center center fixed; -webkit-background-size: inherit; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .panel-default { opacity: 0.9; margin-top:30px; } .form-group.last { margin-bottom:0px; } .wrap { width: 100%; height: 100%; min-height: 100%; position: absolute; top: 0; left: 0; z-index: 99; } p.form-title { font-family: 'Open Sans' , sans-serif; font-size: 20px; font-weight: 600; text-align: center; color: #FFFFFF; margin-top: 5%; text-transform: uppercase; letter-spacing: 4px; } form { width: 250px; margin: 0 auto; } form.login input[type="text"], form.login input[type="password"] { width: 100%; margin: 0; padding: 5px 10px; background: 0; border: 0; border-bottom: 1px solid #FFFFFF; outline: 0; font-style: italic; font-size: 12px; font-weight: 400; letter-spacing: 1px; margin-bottom: 5px; color: #FFFFFF; outline: 0; } form.login input[type="submit"] { width: 100%; font-size: 14px; text-transform: uppercase; font-weight: 500; margin-top: 16px; outline: 0; cursor: pointer; letter-spacing: 1px; } form.login input[type="submit"]:hover { transition: background-color 0.5s ease; } form.login .remember-forgot { float: left; width: 100%; margin: 10px 0 0 0; } form.login .forgot-pass-content { min-height: 20px; margin-top: 10px; margin-bottom: 10px; } form.login label, form.login a { font-size: 12px; font-weight: 400; color: #FFFFFF; } form.login a { transition: color 0.5s ease; } form.login a:hover { color: #2ecc71; } .pr-wrap { width: 100%; height: 100%; min-height: 100%; position: absolute; top: 0; left: 0; z-index: 999; display: none; } .show-pass-reset { display: block !important; } .pass-reset { margin: 0 auto; width: 250px; position: relative; margin-top: 22%; z-index: 999; background: #FFFFFF; padding: 20px 15px; } .pass-reset label { font-size: 12px; font-weight: 400; margin-bottom: 15px; } .pass-reset input[type="email"] { width: 100%; margin: 5px 0 0 0; padding: 5px 10px; background: 0; border: 0; border-bottom: 1px solid #000000; outline: 0; font-style: italic; font-size: 12px; font-weight: 400; letter-spacing: 1px; margin-bottom: 5px; color: #000000; outline: 0; } .pass-reset input[type="submit"] { width: 100%; border: 0; font-size: 14px; text-transform: uppercase; font-weight: 500; margin-top: 10px; outline: 0; cursor: pointer; letter-spacing: 1px; } .pass-reset input[type="submit"]:hover { transition: background-color 0.5s ease; } .posted-by { position: absolute; bottom: 26px; margin: 0 auto; color: #FFF; background-color: rgba(0, 0, 0, 0.66); padding: 10px; left: 45%; }

$(document).ready(function () { $("#sign").click(function () { if ($("#Email").val() != "aseel@hotmail.com" && $("#Password").val != "aseel") { $("#error").html("WRONG"); } }); }); $(document).ready(function () { $('.forgot-pass').click(function(event) { $(".pr-wrap").toggleClass("show-pass-reset"); }); $('.pass-reset-submit').click(function(event) { $(".pr-wrap").removeClass("show-pass-reset"); }); }); /* function myFunction() { var person = prompt("Please enter your name", "Harry Potter"); if (person != null) { document.getElementById("demo").innerHTML = "Hello " + person + "! How are you today?"; } }*/ /*/////////////////////////////////////////////////////////////////////////////////////*/ /* $(document).ready(function() { $('#olvidado').click(function(e) { e.preventDefault(); $('div#form-olvidado').toggle('500'); }); $('#acceso').click(function(e) { e.preventDefault(); $('div#form-olvidado').toggle('500'); }); });*/ /*///////////////////////////////////////////////////////////////////////////////*/