In all this free time thanks to the COVID-19 I have been able to practice: my illustrations and web design... Today I wanted to make a small login form, and I want to follow a series of three posts where I will link the form to a database and create another registration form. For this I will use the tool: "brackets", if you want to follow my steps you can use any other editor.
Personally, I use this one because it's easier to download and it also has an option to view the edition in real time without saving at every moment... This login is only to make my posts, if you think you need it I will leave the download link at the end.
I want to clarify that this is not a tutorial, I only show the step by step of how to do it, if you have any doubt and want to learn from 0, you can write me through discord and I will help you in what I can.
We build the bases of the form, they will ask for: user, community and password, then we will fix it through css
We are going to remove all the margins and padding from the page, for this we use the "style.css" folder and start modifying tag by tag. We add the background with our previously selected image and adjust it to cover everything and not repeat.
We start modifying the styles of the form with the container we named earlier, we center, organize the "margin" and "padding", and assign background color... We see a good advance.
We now modify the logo by adding a new class and adding the necessary attributes to make it centered and circular
Now we will modify the title and the fields of the forms, so that everything looks aesthetically good
Finish organizing the labels, input: distance, position, color, size, background...
and now, the button
Dowload
It needs to be associated to a database, which I will do in a future post
Requires finishing the interface using bootstrap and adding a hyperlink to a registration form
For information about developing a computer system/website/application; like my previous post contact me by discord: edmanuelwild#1095
Also with animations/illustrations/logos
