"Login"
Bootstrap 3.3.0 Snippet by AyaalShahim

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 ----------> <!DOCTYPE html> <html> <head> <title>Login</title> <script src="jQuery/jquery-3.1.1.min.js" type="text/javascript"></script> </head> <body background="https://farm4.staticflickr.com/3940/32677535044_606bd74352_c.jpg" style="background-repeat:no-repeat;background-size:cover;" > <br> <hr> <h1 align="center" style="color:#00cccc;">Login Form</h1> <hr> <br> <form> <center> <div id="circle"> <h1 id="blinking" style="color: #00cccc;">Please Login Here</h1> <div id="box"> <input type="text" name="uname" id="in" placeholder="Username"><br> <input type="password" name="pwrd" placeholder="Password" id="in"> <input type="button" name="login" value="Login" id="inBtn" style="color:white;"> </div> </div> </center> </form> <br><br><br><br> <!-- <hr> <p id="footer">Misfar ©</p> <hr> --> <footer> <hr> <p id="copy">Ayaal Shahim ©</p> <hr> </footer> </body> </html>
body{ background-color: black; } #box{ height: 2px; width: 1px; padding: 5px; background-color: #66f9ff; border-radius: 10px; line-height:90px; box-shadow: 0 0 15px #66ffff; } #circle{ height: 100%; width: 75%; border-radius: 400px; background-color: none; padding-bottom: 30px; border : 4px solid #00cccc; } #in{ width: 90%; height: 50px; border-radius: 10px; padding: 8px; border : 4px solid #00cccc; background-color: #333333; color: white; } #in:focus{ border:6px solid #00cccc; } #inBtn{ width: 90%; height: 50px; border-radius: 10px; line-height:10px; border : 4px solid #00cccc; background-color: #333333; color:white; cursor: pointer; } #copy{ color: #00cccc; text-align: center; font-style: italic; } footer{ position:fixed; bottom:0px; left:0px; right:0px; margin-bottom:0px; } hr{ color: #00cccc; }
$(document).ready(function(){ $("#circle").hide(); $("#box").animate({height:"280px"},"slow"); $("#box").animate({width:"450px"},"slow"); $("#circle").fadeIn(1000); }); function blinker(){ $('#blinking').fadeOut("slow"); $('#blinking').fadeIn("slow"); } setInterval(blinker, 1000);

Related: See More

Datepicker
login-form
Login Form
Bootstrap 4 login from

Questions / Comments:

why the animation cant work?? i need a jquery?

antoniobenalcazar () - 7 years ago - Reply 0

Yes, you need jquery

skyhighpn (-1) - 7 years ago - Reply 0