CodingKid Posted September 18, 2014 Share Posted September 18, 2014 (edited) So once again another free item for you all, just a simple bootstrap login I created this morning. Login HTML Code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content=""> <meta name="author" content="CodingKid"> <link rel="icon" href="../../favicon.ico"> <title>Free Bootstrap Login</title> <!-- Credits --> <!-- Image Credit --> <!-- https://www.flickr.com/photos/ragnagne/2473176843/in/photolist-fxaD6m-4LxFj4-8ginSy-fwViYX-8HPiov-fxaCMd-8TE6a-fwVjXr-oWUfCD-dwfjaE-3EdLYm-9w9HqZ-dkH9DV-8zHPyH-769aHi-qHMnr-2Ho25t-5SzASB-9z3V5b-5SDXe9-fmRzgE-2iXuiB-58Xpo-7U3ZY-hMQvp-fwVjiK-7ivUMs-es6EVW-dmyfCP-5EKYcN-8TE8y-66URV8-4uL9Sb-eaE97-b1Br7-6U9GB1-5ERs8L-8pLdHz-bQB2He-2Ho3uM-nYxGuM-nYfvja-nYfwVg-o1k8Et-rnoDj-dNrxfQ-9hoEeP-4DWCjY-dA6ygq-dRAzXS/ --> <!-- Bootstrap core CSS --> <link href="css/bootstrap.min.css" rel="stylesheet"> <!-- Custom CSS files --> <link href="css/login.css" rel="stylesheet"> <!--- Fonts --> <link href='http://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'> <!-- Just for debugging purposes. Don't actually copy these 2 lines! --> <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]--> <script src="js/ie-emulation-modes-warning.js"></script> <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!--- Nav bar start ---> <div class="navbar navbar-inverse navbar-fixed-top" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="#">Game Name</a> </div> <div class="collapse navbar-collapse"> <ul class="nav navbar-nav"> <li class="active"><a href="#">Login</a></li> <li><a href="#">Storyline</a></li> <li><a href="#">Screenshots</a></li> <li><a href="#">Register</a></li> <li><a href="#">Contact Us</a></li> </ul> </div> </div> </div> </div> <!--- End Nav bar ---> <!--- Gap ---> <div STYLE="height:45px;"> </div> <!--- <!--- Top Section ---> <div class="topsection"> <div class="mafia"> </div> <div class="title"> <h1>Game Name</h1> <h3>Game Slogan Here...</h3> <br /> <button type="button" class="btn btn-danger">Register Today</button> </div> </div> <!--- End Top Section ---> <!--- Login Section ---> <div class="jumbatron"> <div class="row"> <!-- Col 2 --> <div class="col-md-2"></div> <!-- Col 4 --> <div class="col-md-4"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus massa neque, maximus non nunc vel, commodo vehicula nunc. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum sed ipsum at neque gravida scelerisque. Ut orci sapien, ultrices a augue eu, fringilla rhoncus lectus. Pellentesque eu nibh a augue cursus condimentum id ac metus. Nam elementum purus justo, pellentesque laoreet elit tincidunt vitae. Donec semper risus ut dolor mattis tempus. </div> <!-- Col 4 --> <div class="col-md-4"> <form method="#" action="#"> <div class="form-group"> <label for="Username">Username</label> <input type="text" class="form-control" id="Username" placeholder="Enter username..."> </div> <div class="form-group"> <label for="Password">Password</label> <input type="text" class="form-control" id="Password" placeholder="Enter password..."> </div> <button type="button" class="btn btn-primary">Sign In</button> </form> </div> <!-- Col 2 --> <div class="col-md-2"></div> </div> </div> <!--- End Login Section ---> <!-- Bootstrap core JavaScript ================================================== --> <!-- Placed at the end of the document so the pages load faster --> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="../../dist/js/bootstrap.min.js"></script> <!-- IE10 viewport hack for Surface/desktop Windows 8 bug --> <script src="../../assets/js/ie10-viewport-bug-workaround.js"></script> </body> </html> Login CSS Code: [CSS] body { color: #FFFFFF; background-color: #000000; } .topsection { background-color: #000000; width:100%; height: 425px; } .mafia { background-image: url(http://alacritymma.com/images/backgroundtwo.jpg); padding-top: 80px; width: 50%; float: left; height: 425px; } .title { float: right; padding-top: 20px; padding-right: 300px; } .title h1 { font-family: 'Montserrat', sans-serif; color: #FE2E2E; font-size: 48px; } .title h3 { margin-top: -15px; color: #BDBDBD; } [/CSS] Image: [ATTACH]1690[/ATTACH] Screenshot: [ATTACH]1691[/ATTACH] Please note you must have bootstrap installed on your server for this to work! You can download bootstrap at getbootstrap.com enjoy! Edited September 18, 2014 by KyleMassacre Added correct tags Quote Link to comment Share on other sites More sharing options...
CodingKid Posted September 18, 2014 Author Share Posted September 18, 2014 If their is interest I will also create a register and in-game to go with this. Quote Link to comment Share on other sites More sharing options...
Samurai Legend Posted September 18, 2014 Share Posted September 18, 2014 This looks great! Quote Link to comment Share on other sites More sharing options...
Tangled Posted September 18, 2014 Share Posted September 18, 2014 Very nice! Quote Link to comment Share on other sites More sharing options...
CodingKid Posted September 18, 2014 Author Share Posted September 18, 2014 Thanks guys, noticed an issue with the responsiveness of the top section so I will fix this when I get some time! Quote Link to comment Share on other sites More sharing options...
AnonymousUser Posted October 21, 2014 Share Posted October 21, 2014 I've already set up jQuery and Bootstrap to my login and it includes registration functions. It's for my upcoming game Demons Reign. http://demonsreign.com/ Quote Link to comment Share on other sites More sharing options...
Monkey644 Posted May 14, 2015 Share Posted May 14, 2015 I would be very interested in seeing the in-game and register. May look at using this. Quote Link to comment Share on other sites More sharing options...
krballard94 Posted May 14, 2015 Share Posted May 14, 2015 (edited) I've updated your code as I wanted to do something different for a little bit. There was quite a bit of unnecessary mark up but good effort! I've added the CDN references and a few little bits to make it look better on a mobile display as well. HTML - http://pastebin.com/n7uBb0Dn CSS - http://pastebin.com/Q0Vfscjz Edit: I didn't even realise that this was from last year... Edited May 14, 2015 by krballard94 Quote Link to comment Share on other sites More sharing options...
CodingKid Posted May 14, 2015 Author Share Posted May 14, 2015 Yes this was from sometime ago, I may re-code another bootstrap template and release it to the community for free when I get some time Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.