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.
Dont' forget to include the bootstrap required source files. i also included the font awesome icons. You can get it here. https://fontawesome.com/
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.
I define the top margins and also padding of the .container for the space using the bootstrap 4 classes. mt-1 to mt-5 for margin, and pt-1 to pt-5 for padding(see here). Inside the container, I create a row with different class using bootstrap grid system to manage display in different screen size devices.
Create a card to hold a two column grid. one for form and the other one for brand. Place them like this.
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