Welcome back.
Now, what I'm going to do is that I'm going to work on the login page, so I'm going to create a new
here page called Log In.
Attached email.
And then in this log, in that email first I'm going to copy the the header and the body from the index.
From the index here.
I'm going to first copy this part.
And then I'm going to place it in the log in.
And then I'm going to again copy the footer part, which is this part, the three lines.
And then I'm going to basically place them in the log in and then in between we need to display the
navigation as well as the footer.
So I'm going to get I'm going to get the navigation from the index here.
I'm going to get this navigation and then I'm going to be sitting in the log in.
And then I'm going to close it because we don't want to work on it.
And I'm going to get also the footer.
So I'm going to.
Copy the filter and paste it in the index as well.
And then I'm going to close it because I'm not going to work on it.
Now we need to work on the log in form.
So in order to to work on the logging forum, I'm going to create a logging section.
I'm going to say here, log in.
And then.
I'm going to give the section.
I'm going to say in your section and for the section, first of all, I'm going to give it a class.
I'm going to say your class and I'm going to give it the margin Y margin top and bottom five and padding
Y padding top and bottom, bottom five.
Then inside that, I'm going to get a Dave.
And for this Dave, I'm going to also give it a class.
And then the class is going to be the container container.
And I'm going to also give it a text center because I want the text to be centered and I also need margin
top and more and padding.
I'm going to name my top three.
And barring top five.
Now inside this cave I'm going to display here, I'm going to use H2 to display it text and I'm going
to give this H2 class and that class is going to be the form weight.
Both.
And I'm going to say here looking.
Before this log in, I'm going to display h r.
And I'm going to give it to class again.
And that class is going to be an X or a margin.
Right and left auto.
And then I'm going to keep it below this.
I'm going to create a there.
But before I do so let's this first I'm going to save all Laney here there over to the browser and let
me go to the log in.
So if I go to the log in, you'll find that we have you log in.
Let's now work on the form itself.
So below this, Dave, I'm going to need another day.
So for this Dave, I'm going to say here class and then I'm going to say a mixed auto because I want
to center the this form and I'm going to add a container class to it because they want to add margins
like and right to it.
Now it's own this.
I'm going to have the form itself.
I'm going to say here form.
And then I'm going to give this forum and it really would be a plug in for.
And so therefore, we need a --.
And this aid is going to be for the first time, but I'm going to say class form group.
And then inside this for I say this, I'm going to use the enable to display the first info about the
first label about the first input.
So the first input is going to be email.
Therefore, I'm going to say your email and the input itself that's going to allow the user to type
their email is going to be the input.
I'm going to be using the input itself and I'm going to give it a type.
And the type is text or email, let's say text.
And I'm going to give it also a class, a bootstrap class called Form Control.
And I'm going to give it.
The I.D. is important, is very important.
I'm going to give you an idea on log in email.
And also the name.
The name is going to be name is going to be email.
And also, let's say placeholder.
I'm going to say placeholder.
Email.
And finally, I'm going to say required.
So this is for the email.
Lainey safe and Lainey heading over to the browser and test.
So the email here as you can see, this is the input for email.
Let's see it another one.
So to get another one, I'm just going to copy this, Dave, and then I'm going to be me a lot.
And we just need to change a few things.
So for instead of saying email, we need password.
So the user would be able to log in using the email or the password, the type is going to be password.
The class form control.
The ID is login pass or.
And we need also an aide.
So the name is passports.
And the leaseholder.
All there is is for.
Lastly, we need to display laissez faire, save and show you this.
So here, as you can see, we have email and password.
Lastly, we need to add a button.
So to add a button, I'm going to copy again this then and then I'm going to be said by law, by the
button is going to be different than the button does not doesn't need to have a label.
I'm going to remove the label and the.
The button type is going to be submit through, it should be submit and the request for the input is
just going to be and we don't need the form control.
We need to say APTN and it is going to be in log in.
Beattie and loving Beattie in.
The class.
We already said that the class is median.
Finally, with the valley, we don't need any of this.
And we remove all of these.
Instead, we just need here.
We just need value.
So the value is looking.
Let me save a lady.
Hit it over to the browser and test.
So we should have hit a button here, it says.
But we need to work on the design.
But before I work on it or on the design, let's continue on the finish of this form.
So the last thing that we need on the form is the registration.
We need a link that takes the user to the to the registration page.
Therefore, I'm going to get another.
There've been a lot of this one.
And this one is going to be a tag.
So I'm going to remove this input completely and then I'm going to attack.
And for this attack, I'm going to give this an ID.
I'm going to say ID.
Regis, sir.
You are ill.
And the class.
I'm going to give it as a class thing, as a class.
And lastly, I'm going to display here.
Don't.
Have.
Count.
And then in your predecessor.
Let me let me now say but let me hit that over to the browser and refresh.
And as you can see, we have now this button.
It says, don't have an account register.
Let's now start working on that.
So I'm going to open up the is the assets we have.
This says in the style that says, let's start working on the log in.
So I'm going to add here a comment first.
I'm going to say here.
Log in, log in.
And first we need to work on remember we have in the log in we we have the log in.
I believe we have the log in the log in form.
So I'm going to start with the log in for I'm going to say here.
Hash tag log in form.
So far, they're looking for itself.
The first thing that I'm going to do is that I'm going to change the width.
I'm going to say width.
50%, because I want I want the reform to take only this area.
I want it to be centered, and I want the longing for it to be small.
And I don't want it to take the complete screen width.
Therefore, I'm going to stay here with 50%.
Next, I'm going to say margin margin five X or this is going to center the key for our next I'm going
to say tax alliance inter.
Takes the land center.
But I think we already I think we already have given the entire we didn't.
So this explainer was for the looking.
So it's not.
So this we need to address takes alliance into our next we need to separate we need to add padding padding
is going to give it a in good spaces from the from all sides.
I'm going to say 20.
Lastly, I'm going to say in border.
I'm going to add border top to it of one.
Be X solid want the solid orange.
So the orange color that they have been using was this one link I save and let's see how this looks
like.
So as you can see now, it's much smaller and it's being displayed in the middle.
Now let's work on the rest of the form.
So in the in the form itself, we have the inputs.
So for the inputs I'm going to see here, I'm going to say log in, log in form, and then I'm going
to access the inputs for the inputs for the inputs.
I want also the size to be 50%.
I'm going to say 50% because as you can see, the the the inputs are extraordinary, but they are extraordinary.
And we don't want that.
I just want them to be extremely small.
There is no need to display an email or password field with this huge width.
It must be small.
So this is for for the input.
And also we need to add some margins.
So I'm going to add to your margin five X top and bottom and order left and right.
The next thing that I'm going to do is that I'm going to work on the log in button.
I'm going to say log in form and then log in button, log in between.
So for the long button, I want the log in to have the orange color.
I'm going to say background color, background color.
Background color is going to be the orange color and the color itself is going to be white.
The color of the text is going to be white.
I'm going to say color.
And then this color.
Similarly for the register.
For the register, we want the reverse.
For the register.
I'm going to say here, log in form and then I want the register.
Register toward L for the for the register u r l I just want it to be orange.
So I'm going to need color or color, this color which is the orange color.
Let's now save and let me show you how this would look like.
So as you can see now, it looks outstanding.
Now, reform is not extraordinary, Mick.
It's much smaller.
And it it looks amazing.
They use it doesn't have to feel a huge input.
It's just enough for the email or the password.
Also, the button fits perfectly with the with the with the width of the inputs.
Also, we have we don't have a current button which is which looks amazing.
It shouldn't be displayed as abhorrent.
It should be a link like this where the colour is different, what the background is nothing.
The background is just white, like white like the background color of the website itself.
And we also have a log in which is being displayed at the top, which is also important to let the user
know that this is the log in page.
So now we have the login page complete.