"PT. FLYING EAGLE"
Bootstrap 4.1.1 Snippet by ahmadirfani

Post to Facebook Tweet this

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <html> <head> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> </head> <body id="LoginForm"> <div class="container"> <h1 class="form-heading">Login Admin GA</h1> <div class="login-form"> <div class="main-div"> <div class="panel"> <h2>Admin General Affair</h2> <p>Masukan email and password</p> </div> <form id="Login"> <div class="form-group"> <input type="email" class="form-control" id="inputEmail" placeholder="Email Address"> </div> <div class="form-group"> <input type="password" class="form-control" id="inputPassword" placeholder="Password"> </div> <div class="forgot"> <a href="reset.html">Forgot password?</a> </div> <button type="submit" class="btn btn-primary">Login</button> </form> </div> <p class="botto-text"> Designed by Ahmad Irfani</p> </div></div></div> </body> </html> <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/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="btn-toolbar"> <button class="btn btn-primary">New User</button> <button class="btn">Import</button> <button class="btn">Export</button> </div> <div class="well"> <table class="table"> <thead> <tr> <th>Kode Produk</th> <th>Nama Produk</th> <th>Jumlah Produk</th> <th>Harga Produk</th> <th>Hapus</th> <th style="width: 36px;"></th> </tr> </thead> <tbody> <tr> <td>001</td> <td>Mesin Bubut</td> <td>1</td> <td>Rp.1000.000,-</td> <td> <a href="user.html"><i class="icon-pencil"></i></a> <a href="#myModal" role="button" data-toggle="modal"><i class="icon-remove"></i></a> </td> </tr> <tr> <td>002</td> <td>Komputer</td> <td>20</td> <td>Rp.5000.000-,</td> <td> <a href="user.html"><i class="icon-pencil"></i></a> <a href="#myModal" role="button" data-toggle="modal"><i class="icon-remove"></i></a> </td> </tr> <tr> <td>003</td> <td>Genset</td> <td>1</td> <td>Rp.20.000.000-,</td> <td> <a href="user.html"><i class="icon-pencil"></i></a> <a href="#myModal" role="button" data-toggle="modal"><i class="icon-remove"></i></a> </td> </tr> <tr> <td>004</td> <td>Control Automatic</td> <td>1</td> <td>Rp.40.000.000-,</td> <td> <a href="user.html"><i class="icon-pencil"></i></a> <a href="#myModal" role="button" data-toggle="modal"><i class="icon-remove"></i></a> </td> </tr> <tr> <td>005</td> <td>Headpalet</td> <td>3</td> <td>Rp.2.000.000-,</td> <td> <a href="user.html"><i class="icon-pencil"></i></a> <a href="#myModal" role="button" data-toggle="modal"><i class="icon-remove"></i></a> </td> </tr> <tr> <td>006</td> <td>Laptop</td> <td>4</td> <td>Rp.3000.000-,</td> <td> <a href="user.html"><i class="icon-pencil"></i></a> <a href="#myModal" role="button" data-toggle="modal"><i class="icon-remove"></i></a> </td> </tr> </tbody> </table> </div> <div class="pagination"> <ul> <li><a href="#">Prev</a></li> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">Next</a></li> </ul> </div> <div class="modal small hide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h3 id="myModalLabel">Delete Confirmation</h3> </div> <div class="modal-body"> <p class="error-text">Are you sure you want to delete the user?</p> </div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button> <button class="btn btn-danger" data-dismiss="modal">Delete</button> </div> </div>
body#LoginForm{ background-image:url("https://hdwallsource.com/img/2014/9/blur-26347-27038-hd-wallpapers.jpg"); background-repeat:no-repeat; background-position:center; background-size:cover; padding:10px;} .form-heading { color:#fff; font-size:23px;} .panel h2{ color:#444444; font-size:18px; margin:0 0 8px 0;} .panel p { color:#777777; font-size:14px; margin-bottom:30px; line-height:24px;} .login-form .form-control { background: #f7f7f7 none repeat scroll 0 0; border: 1px solid #d4d4d4; border-radius: 4px; font-size: 14px; height: 50px; line-height: 50px; } .main-div { background: #ffffff none repeat scroll 0 0; border-radius: 2px; margin: 10px auto 30px; max-width: 38%; padding: 50px 70px 70px 71px; } .login-form .form-group { margin-bottom:10px; } .login-form{ text-align:center;} .forgot a { color: #777777; font-size: 14px; text-decoration: underline; } .login-form .btn.btn-primary { background: #f0ad4e none repeat scroll 0 0; border-color: #f0ad4e; color: #ffffff; font-size: 14px; width: 100%; height: 50px; line-height: 50px; padding: 0; } .forgot { text-align: left; margin-bottom:30px; } .botto-text { color: #ffffff; font-size: 14px; margin: auto; } .login-form .btn.btn-primary.reset { background: #ff9900 none repeat scroll 0 0; } .back { text-align: left; margin-top:10px;} .back a {color: #444444; font-size: 13px;text-decoration: none;}

Related: See More

Paper Dashboard

Questions / Comments:

L

ahmadirfani () - 2 years ago - Reply 0