Welcome back.
Now, what I'm going to do is that I'm going to work on the check out page.
So I'm going to create here a new page.
I'm going to get it here.
Here in this area.
I'm going to give you a page called check out that email.
And then we need as usual, we need the header and the future and the basic goods from the index.
So I'm going to copy the code from here.
Then I've got basically the check out and then I'm going to copy again the footer part, which is this,
and then I'm going to base this here.
And then we need the navigation bar as well as the footer.
So I'm going to copy the navigation bar first, which is this.
Then I'm going to put it in the checkout.
Then I'm going to close it.
And then I'm going to get again the.
The footage.
I'm going to get it with her and then I'm going to use it in this regard.
Now let's work on the chick outreach.
So the chick outreach should contain a forum that will let the user chick out, fill out the information
in order to place the order.
So to do this, we need to create a form.
So here I'm going to say chick out.
Shake.
Out.
And then we need to create a form.
So instead of you think the form from scratch, we already have many forms.
I'm going to get a form from the registration page.
So from the registration page, remember we have this section, I'm going to close it and then I'm going
to copy it.
I'm going to just copy it and then I'm going to paste it into check out here below this check out.
But we need to fix many things.
First, we need to change here.
This register to check out.
And we need also to
gear to change the ID from register to check out form and we need to change also the inputs.
So the inputs that we need are the name, the city email, the phone number.
So I'm going to start with the name.
The name is going to be the same, but the idea is going to be here is going to be check out me trick
out name and the name is name and here name.
The second input that we need is the email I'm going to say email and then here, check out email.
The third input that we need is the phone number.
So I'm going to say phone.
And the type is going to be.
He's going to be number.
Or we can see the actually and the idea is going to be check out.
Check out check out fun.
The name is foreign and the place holder is foreign.
So this is for the for the phone number.
They are the fourth input that we need is the city.
So for the city, I'm going to say.
City.
And then type is text.
It is Siri.
Check out Siri.
Name a city.
Leaseholder, a city.
Lastly, we need to see.
Address.
So I'm going to copy this lady and then I'm going to basically be law.
And then instead of saying, I'm going to say address.
Address.
And the type is text.
The the ID is check out the address.
The name is address.
That leaseholder is also at.
Lastly, we need the button.
So the button is going to be.
Submit glass, be an I.D. check out the button, checkout button and the value checkout or placeholder
place or order or check.
Out, and we don't need the last link.
I'm going to remove this last link.
So what I'm going to do is that we're going to hit the number two CCS.
And in CCS, I'm going to do something amazing.
I'm going to create.
Do classes.
I'm going to say you're.
Check out first.
And then I'm going to get two classes.
The first class is going to be is going to name it, check out small element and the before I gave the
classes let me add these classes to the check out for.
I'm going to give the.
The name here.
This name.
I'm going to give it and I'm going to give you the the the day itself, not the not the input, but
the level that contains the the input.
I'm going to give it a class called check out Small.
Elements.
Eliminate the battery be the same thing for the for the email check out.
Small elements similarly for the fine.
For the city.
I'm going to do the same.
I'm going to say here, check out small element.
Lastly, the the the address.
I'm going to give it another classic old shake out large element large.
A limit for the Baron.
I'm going to give the Baron.
I'm going to give the death.
That contains the Baron.
A classical check out.
Beauty and container.
And these are ideas.
Therefore, let's work on them.
And remember, the the big I.D. that contains all of these is is called check out war.
So we need to start with the idea with this check out form.
So I'm going to say here, check out form.
Check out for.
And then I'm going to start with the check out chick.
Our small element class.
Small element.
Class.
This class.
And be careful here.
The check out form is an ID.
Whereas this small element, this small the check out small element is a class.
So for the small element for reaching out small element, first I'm going to change the display to be
in line block and the width, the width is going to be only 48%.
And below I'm going to say here margin, I'm going to give this I'm going to give them margins.
The margin is going to be ten be X or let me now say let me show you how this would do what this would
do to the do the form.
So as you can see, the name of the email will be will be displayed on the same row, whereas in the
phone number and this will be displayed in the same row.
Now the address will be alone here, but we still need to work on the B class for the address, which
is the last check out form.
Check out form that check out check out small check out large, large element.
So for the for the address and I'm going to give it a with only 95%, a little less than 100%.
Lastly, I'm going to work on the check out button and the button container.
So let's start with the container.
I'm going to say check out form and then dot check out button container, check out by the end container.
So for the for the check out the button container, I'm going to first give it a margin of ten b x.
Ole, ole, ole dimensions and ticks align, right.
Because they want to display they want to display the button and instead of on the left side, on the
right side.
And they also want to give to give the board an imagine.
Right.
40 weeks to push the button a little to the left side and for the button itself, I'm going to say check
out.
Form and then check out where.
By the way, this this is an IED.
So the color as you will, I'm going to be using the brand colors.
The color is white and the background color is orange.
Let me see and let me test this in the browser.
So we should have now a complete design.
So as you can see now, it looks much, much better.
So it looks amazing.
The last thing that they want to do is that they want to cut this extra area from here.
So here we have the check out form.
So here I have a problem, I should say.
Here, check out check out form.
This is going to fix it.
So if I refresh, the extra area should be removed.
As you can see, it has been removed or you can increase this a little.
So you can you can say 97% and this is going to make it equal to other inputs.
So the the address is going to be equal to other almost equal to other other inputs.
And the design is responsive.