The Battlefield Web UI

ui.html 5.6KB

    <!DOCTYPE html> <html> <head> <link href="css/login.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> </head> <body> <div class="container"> <div class="header"> <div class="date-time"> Saturday, October 17<sup>th</sup> <strong> 15:32:54 </strong> </div> <div class="round"> Round 7 </div> <div class="login"> <div class="grid"> <div data-tip="Wrong username" class="col-12 error"> <input class="large" placeholder="Username" type="text" /> </div> </div> <div class="grid"> <div class="col-12"> <input class="large" placeholder="Password" type="password" /> </div> </div> <div class="grid"> <div class="col-7"> <small> <a href="#">Forgot password</a> </small> </div> <div class="col-5 text-right"> <button class="large">Login</button> </div> </div> </div> </div> <div class="body"></div> <div class="faux-body"> <div class="module-container"> <div class="grid"> <div class="col-6"> <div class="text-area"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ac magna mi. In et neque sit amet mauris porttitor scelerisque pellentesque vitae lacus. Sed mi nisi, convallis at nisi quis, vestibulum euismod urna. Sed velit velit, rhoncus et vestibulum eget, malesuada et nibhntesque vitae lacus. Sed mi nisi, convallis at nisi quis, vestibulum euismod urna. Sed velit velit, rhoncus et vestibulum eget, malesuada et nibh. Aenean at commodo massa. Nunc facilisis quis erat non ornare. Vestibulum vitae sodales odio, quis facilisis eros. </div> </div> <div class="col-6"> <table class="table"> <thead> <tr> <th width="">Col 1</th> <th width="">Col 2</th> <th width="120px">Col 3</th> </tr> </thead> <tbody> <tr> <td>Odd Col 1</td> <td>Odd Col 2</td> <td class="text-right"> <input maxlength="5" type="text" style="width:50px" /> <button> Buy </button> </td> </tr> <tr> <td>Even Col 1</td> <td>Even Col 2</td> <td class="text-right"> <input maxlength="5" type="text" style="width:50px" /> <button> Buy </button> </td> </tr> <tr> <td>Odd Col 1</td> <td>Odd Col 2</td> <td class="text-right"> <input maxlength="5" type="text" style="width:50px" /> <button> Buy </button> </td> </tr> <tr> <td>Even Col 1</td> <td>Even Col 2</td> <td class="text-right"> <input maxlength="5" type="text" style="width:50px" /> <button> Buy </button> </td> </tr> </tbody> </table> </div> </div> <div class="grid"> <div class="col-4"> <div class="message success" data-tip="Tooltip types">Success message</div> </div> <div class="col-4"> <div class="message error" data-tip="Tooltip types">Error message</div> </div> <div class="col-4"> <div class="message info" data-tip="Tooltip types">Info message</div> </div> </div> </div> </div> <div class="footer"></div> </div> <script type="text/javascript" src="js/jquery.min.js"></script> <script src="js/scroll.js" type="application/javascript"></script> </body> </html>