Now what I'm going to do is that I'm going to work on the cart page.
So in order to work on the cart page, we need to create a new page called CART.
So I'm going to here in my project, I'm going to create a new file here called Cart that Female.
And then since this cart will have the we'll have also the navigation bar as well as the footer.
We need to get to the navigation bar and the footer from one of these pages.
So I'm going to open up the index and then from the top I'm going to copy the body.
First, I'm going to copy the body.
I'm going to copy from starting from the first line of the page all the way to the body.
And then I'm going to base it in the car strategy HTML and then in the index, I'm going to go back
to the index and then I'm going to copy also the last three lines, the script, the closing tank of
the body and the closing tag of the HTML.
And then I'm going to place it in the again in the cart that is female.
But you need to leave here a big space.
Now, we need to give you a navigation bar as well as before.
So from the index, I'm going to get the navigation bar.
We have this nav bar.
I'm going to copy it and then I'm going to put it here in the cart and then I'm going to close it first.
So this is the navigation bar, and then I'm going to go back to the index and get the footer.
So we have this splitter.
I'm going to copy the footer and then I'm going to base it in the car so that it should email again
here.
And then you need to close it in order to see where it is.
So here we as you can see, we have the navigation bar and then we have space and then we have the footer.
So now let me check that in the browser.
So I'm going to go back to the browser and then I'm going to go to the cart that it's G-mail.
And as you can see, we have a navigation bar and we have the footer.
Now we need to work on the content of the navigation of the cart.
So the cart will contain obviously the products that the user added to the cart and also their information
such as the price, the name of their product, the quantity, the the total price, all these things.
So in order to work on the cart, I'm going to this time, I'm going to be using a table.
At table is the easiest and best way to to use in order to create a well-designed cart.
So here I'm going to add a comment and then I'm going to say cart.
And as usual, I'm going to start with the session with the section.
And then in this section, I'm going to give it as usual class.
And then I'm going to say carte.
The collapsing is going to be hard.
And also I'm going to give it as usual, a container.
Container and margin.
Top and bottom five and padding.
Top and bottom five.
And then inside that section, I'm going to give it a name first and I'm going to give it a glass.
I'm going to say glass and the class is going to be again, container.
I'm going to give it a container to add some margin margins from the right and left.
And also, I'm going to give it margin top five inside the there.
I'm going to display a a text that says your cart.
And I'm going to give this this H2 also a class.
I'm going to say font.
Wait.
Well.
And you can also add H.R. below this.
And finally, I'm going to save this.
So I'm going to able and then I'm going to head on over back to the browser and refresh.
And as you can see, we have this your card.
So this is the title of your card page.
Let's now work on the card itself.
So be lobbyists there.
What I'm going to do is that I'm going to create a table.
I'm going to say here table, and then I'm going to give this table first.
I'm going to give it class.
And the class that I'm going to give this table is the margin top five and also padding top five.
Then inside that table, I'm going to add the here.
TR And for this.
TR We want.
To display three columns.
So I'm going to say, here's the edge.
And the first first one is going to say product.
And the second the edge.
The second column will display the quantity.
Quantity, and then the last column will display the subtotal.
Let me save a lady here, then over to the browser and show you how this is going to look like.
So as you can see, we have here product, quantity and subtotal, but we need to stretch of this so
that the table takes we complete complete screen width.
So we need to work on this.
But before I do so, let's continue with this table.
So be like this hand or below these columns.
We need to display the first product.
So I'm going to say t r and it's not that the R now I'm going to display T d, d d and the first d d
I'm going to display a there that contains information about the product.
So I'm going to take your class, I'm going to give it the class, and then I'm going to see product
info.
And inside that product info, I'm going to first display an image, the image of the product.
Let's use the one of the images that we already have in here.
I'm going to say assets, images and let's let's use the first image featured one and then I'm going
to display below this image.
I'm going to create another div that displays the product mean here.
I'm going to say B and then I'm going to say white shoes.
And below this I'm going to display the price.
I'm going to say here small.
And it's kind that small.
I'm going to first add a span and that span will contain the dollar sign.
And besides the dollar sign, I'm going to display the product price.
And then below this, I'm going to break.
Here I'm going to say B, R, and then I'm going to display the A button that will allow the user to
remove the product from the car.
So I'm going to say here are a tank and then I'm going to give it a class.
I'm going to say class, remove button.
And I'm going to say remove.
Here.
I'm going to say rebels.
So this is for this part.
Let me say first and then let me hit an over the back of the browser and refresh.
And as you can see, we have here the product image and then we have here the name of the product and
the price and removal.
But before we continue working on on other things, let's fix this table.
So to fix this table, I'm going to open up the access.
Here in the assets, he says.
The style.
I'm going to work on the card.
So here I'm going to add a comment.
And then I'm going to say our.
So first of all, we need to work on the table itself.
So I'm going to say that correct table.
So far the table itself.
First the car.
Remember the car?
Is this the car?
Is this glass?
His car?
And inside it, we have the table.
Therefore, I say the car to the table.
So for the car table, I'm going to first give it a width of 100% in order for it to take the complete
screen width.
And then I'm going to say border collapse.
Collapse.
Border collapse.
Collapse.
And then I'm going to say cards, products, product info.
Protect and fall.
And for the product and for first, I'm going to change the display to be flex, display, flex and
the flex is going to be flex wrap is going to be wrap legs wrap, wrap.
And for the heavy columns of the table, I'm going to you about the cart and then teach.
And for these columns, we're going to change the text to align, to be on the left side and the padding.
I'm going to give it a padding.
The padding is going to be five x top and bottom and then the left and right for the color.
The color is going to be white.
The color of the text and the background color.
Background color.
Background color would be the orange color.
Let me save now and let me check this in the browser.
So as you can see, this is the head of the table here, product and then quantity and then subtotal.
So this is the head.
So we also need to work on the T, remember in the table we have t d the t d represents this TV represents
the the image and the name of the product and the price and also the button.
So we need to fix that.
We need to fix the image and the product information.
So I'm going to say that car.
Teeny and then I'm going to give it first about I'm going to say batting and then batting from top and
bottom would be to and from right and left would be 20 beatniks and the the.
We also have the the the the.
Dee Dee.
Here we have.
The image to this image of this image doesn't have a class.
So we can access this image by saying that the cards.
Car t.
Image.
And we can change the image width to be only a step because the image must be small.
And the height also must be small.
Must be something around 80 or 90 or maximum 100.
I'm going to also give it a margin.
Right.
Margin.
Right.
Ten b x.
Let me sleep and let me address this in the browser.
So as you can see, the image now is much smaller and we have these we have the wrong information on
the right side.
Let's continue working on the design.
So.
What else we want to work on is the is that we need to we are done actually we are done with this part.
We are done with this park, but here we are, the quantity as well as the subtotal.
So in order to do this, I'm going to hand over my credit card.
So in the cart, we need to work on the quantity.
We need to display an input that displays the quantity.
So below.
Below this remove button.
What I'm going to do is that I'm going to create another TDI.
So below this TDI, but inside this TR because we are still inside the same, the same row, we need
to create another TDI.
I'm going to say TDI.
And for this TV, I'm going to first get an input.
I'm going to say input.
And this input I'm going to say type.
Number.
And then I'm going to say value want.
The default value is going to be one.
And then I'm going to add here a tag and this tag lasts.
I'm going to give it a class called edit edit button and it.
A red button.
And here I'm going to say edit.
And then below this edit I'm going to display the price.
So below this TV, below this CD, I'm going to display the price.
It's not going to be below it.
It's going to be on the right side.
So this CD will be displayed underneath the quantity, whereas the price is going to be displayed underneath
the subtotal.
So below this TV, we need to get another TV to this to display the price.
So for this CD, I'm going to say TV and then Spain.
And Spain.
This pan will contain the dollar sign.
And then.
Here.
I'm going to create another paragraph that will display the actually I'm going to create another span
span that will display the price.
And then I'm going to give it to a class.
Class is.
And then I'm going to say price.
Product.
Rice, Laney.
Slaven, Laney.
Here refresh.
And as you can see, we will have here the the quantity here, the input and the edit.
And we have that price on the right side.
But we need we still need to work on the design.
So I'm going to hit the number to see if this.
And then in thesis, I'm going to add the following design.
First, what we need to do is that we need to fix the inputs.