This article shows you a login page created using HTML5 and Bootstrap.
You need to familiarize with HTML5 and Bootstrap.
HTML5 is the latest evolution of the standard that defines HTML. The term represents two different concepts. It is a new version of the language HTML, with new elements, attributes, and behaviors, and a larger set of technologies that allows the building of more diverse and powerful Web sites and applications. This set is sometimes called HTML5 & friends and often shortened to just HTML5.
See: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5
Bootstrap is an open source toolkit for developing with HTML, CSS, and JS. Quickly prototype your ideas or build your entire app with our Sass variables and mixins, responsive grid system, extensive prebuilt components, and powerful plugins built on jQuery.
See Full documentation of Bootstrap here: https://getbootstrap.com/docs/4.2/getting-started/introduction/
First is create your index.html using your Code/Text Editor.
Start coding html document.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <!-- Required meta tags --> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
| <link rel="icon" href="../assets/images/favicon.ico"> | |
| <title>Login Page | KSolutions PH</title> | |
| <!-- Bootstrap CSS --> | |
| <link rel="stylesheet" href="../assets/bootstrap/css/bootstrap.min.css"> | |
| <!-- Font Awesome CSS --> | |
| <link rel="stylesheet" href="../assets/plugins/font-awesome/css/fontawesome-all.min.css"> | |
| </head> | |
| <body class="bg-dark"> | |
| <!-- jQuery first, then Popper.js, then Bootstrap JS --> | |
| <script src="../assets/plugins/jQuery/jquery-3.3.1.min.js"></script> | |
| <script src="../assets/bootstrap/js/bootstrap.bundle.min.js"></script> | |
| </body> | |
| </html> |
I did define the class of the <body> element which is bg-dark to make the entire background dark in color.
Inside the <body> tag.paste this code.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="container mt-5 pt-0 pt-sm-3 pt-md-5"> | |
| <div class="row"> | |
| <div class="col-lg-10 col-md-10 col-sm-12 col-12 mx-auto"> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
Create a card to hold a two column grid. one for form and the other one for brand. Place them like this.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="card-body p-0"> | |
| <div class="row p-0 m-0"> | |
| <div class="col-lg-8 p-5"> | |
| <h2>Login</h2> | |
| <form method="post"> | |
| <div class="form-group"> | |
| <label for="username">Username:</label> | |
| <input type="text" class="form-control" name="username" placeholder="Username"> | |
| </div> | |
| <div class="form-group"> | |
| <label for="pwd">Password:</label> | |
| <input type="password" class="form-control" name="pwd" placeholder="Password"> | |
| </div> | |
| <button type="submit" class="btn btn-primary" name="btn-login"><i class="fas fa-sign-in-alt"></i> Login</button> | |
| <a href="#" class="btn btn-success"><i class="fas fa-user"></i> Sign up</a> | |
| <a href="#" class="float-right">Forgot Password?</a> | |
| </form> | |
| <div class="mt-2"> | |
| <small class="clearfix"> | |
| <span class="font-weight-light float-left"> | |
| ksolutionsph@gmail.com | <a href="https://ksolutions-ph.blogspot.com" target="_blank">ksolutions-ph.blogspot.com</a> | |
| </span> | |
| | |
| <span class="font-weight-light float-left float-sm-right"> | |
| KSolutions PH © 2019 | |
| </span> | |
| </small> | |
| </div> | |
| </div> | |
| <div class="bg-primary p-5 col-lg-4"> | |
| <div class="text-center mb-3"> | |
| <img src="../assets/images/ksolutionsph-logo.png" class="h-100 w-100"> | |
| <h3 class="text-white">KSolutions PH</h6> | |
| </div> | |
| </div> | |
| </div> | |
| </div> |
Now test your index.html to your web browser and the final project should look like this.
You can download the full source code below.
SOURCE CODE
DOWNLOAD IT HERE -> DOWNLOAD
Enjoy !
Please share this if you find it helpful. Thank you.
No comments:
Post a Comment