So now what I'm going to do is that I'm going to first work on the design further, and then I'm going
to display the product information on the right side.
First of all, in the single product, I'm going to give this section, I'm going to give this section.
This section, I'm going to give it the bootstrap class, the container.
I'm going to say each container.
Why?
Because if I give it the container, you'll find that if I refresh, you'll find that it will fit the
screen perfectly.
As you can see, there will be there will be even more space.
And the the slider was removed.
Now, let's work on this area.
Let's say you display information about this product, such as the product.
And for me, product, the details, the quantity, the add to cart button, all of these things.
And to do this, remember below for this there an inside inside of the raw inside this raw which is
this.
Then we need to create another dev.
We need to say there and this dev is going to have glass and that glass will have column large, six
or four large screens or medium screens.
I'm going to give it 12 columns for four small screens.
You can give it 12.
Let's give it 12.
By the way, you can say here column called.
Well, without saying esim, which means that by default it's going to be by default it's going to take
12 columns in case in case the screen is doesn't fit, is not considered large and it is not considered
medium either.
It will take 12 cops.
So here is this the first I'm going to display six.
And then I'm going to say here, for example, or main, let's say man.
Shoes and then I'm going to spray three.
And in this thing, I'm going to display the some text, let's say the category, for example, men's
fashion.
And I'm going to give this a glass.
Class B y for batting.
Top and bottom for next I'm going to work on the price, so meet me lor this H3.
We need to display the price.
I'm going to say here.
It's true.
And then I'm going to display the price.
I'm going to say a price, any price you want.
And then let me be law this price.
I'm going to display the input and that input will display the number of products.
I'm going to say input.
And and inside this input we need to give it first time that I will be in number because this is a number.
And value.
Their value is one because by default a user, we would expect the user to buy only one item and therefore
we need to say here one.
And below this, I'm going to speak about it.
I'm going to say your button button.
And then for this button, I'm going to say Add to cart.
Add to cart.
And I'm going to give it a class.
Class.
Math classes are going to be bye bye bye bye.
In which every parent that we already have.
And.
And we can use another class if we want or we can edit this, this, this class.
I'm going to show you the I'm going to show you another method of editing the redesign of this bottom.
But first, let me show you how this looks like.
Now, if I refresh, as you can see, we have here it says main section, main juice and then main function.
And then in year 155, which is the price and then here the.
One one, which is the quantity, and you can increase the quantity on the add to cart button.
But of course, we need to work on the design and also we need to display the details.
So first, let's display the details below of this button.
Below this button I'm going to hear.
See, it's for.
Below the button.
And they're going to say here, project
details.
Let's meet this itch for glass.
Margin top five.
And margin margin bottom line and below it, I'm going to display that next.
So I'm going to sit here, span and be inside that span.
I'm going to display the details.
I'm going to say here, see the tables.
So this is just that this mistakes are just for the sake of this thing.
And later we can edit this text.
Lainey here, click on file and Save All Illini show you how this would look like.
So if I refresh, as you can see, this is how it's going to look like.
However we to fix the design of this.
Of course the design is not that good.
Let's work on the design.
So I'm going to hand it over to the style the team says.
I think the style that says what we want to do is that we want to work on the button and we want also
to work on the the input we need to fix the input.
So I'm going to start by fixing the input.
So the input here has a outline here are colored in blue and I want to remove this.
To remove this I'm going to say here.
Single project.
Remember the the.
The big section class is single product.
So I'm going to say here that single.
Project.
I'm going I'm going to access the input.
I'm going to say input.
And then I'm going to say, you focus, focus, and then I'm going to remove the outline.
I'm going to say outline, outline.
None.
Now, if I.
If I refresh and here if I click, you're inside the borders or the the outline was removed.
Let's work on the design of that input.
So I'm going to say here that single.
Product and then input the input itself.
And now let's let's fix the width.
So the width, as you can see, the width is too big.
We don't want this.
We want it to be much smaller.
So I'm going to change the width.
I'm going to say here width.
So the width would be only, let's say 50 pixels.
And then I'm going to change also the height to 40%, 40, and they're going to change.
Also the padding and the font.
So for the padding list, we want and we want to add padding left because because as you can see, the
number is very close to the left side and we want to shift that number a little.
Next, I'm going to change the font size so the font size would be 16 X.
And finally, I'm going to add margin write margin right in the X because they want hear some space
and want to hear some space.
Let me refresh and show you how this is going to look like.
And you can see now the this this input looks perfect.
Now the number is very clear and big enough for the user to see.
And the the the box itself is very, very good in terms of its dimensions.
This is for the input.
Let's work on the button.
So for the button, remember this button.
The man, and I'm going to change the color of this balance.
And instead of his playing this button in black.
I'm going to split an orange.
So I'm going to say, yea, that single product and then that my button and then I'm going to work on
this.
Remember that we already have a class called the bio button.
But if I, if I just access the buy button one more time without saying a single product, this is going
to ruin the original design of the buying button.
Therefore, we need to say a single product and then buy a button, or we can create a new class.
So you have two options.
You can create a new class called Add to Cart, for example, or you can use a single product and then
by button so you can hear if you don't want to be confused.
If you're going to if you don't want to get confused, you can't.
You're saying add to cart button.
But but add to cart button is going to be a very long award.
Therefore, I'm just going to say my opponent.
So I'm going to say here Bible.
But what you need to know that this my button since I say a single product, it's inside the single
product page.
Let's change now the background color.
I'm going to say background color.
So the background color is going to be the orange color, the thing you have already used earlier.
And again, I'm going to change the opacity to one, I want the opacity to be one.
And they want transition.
Transition of point.
4 seconds all.
Let's save and refresh.
And as you can see, it's going to be orange.
It's going to be orange.
Let's also change the.
The Hover said, I'm going to add a hover effect to it.
I'm going to say single product that my button and then hover.
And I'm going to change this to the background going as a background.
So the background color, if I hover over it, let's use this color.
So as you can see, if I hover over it, it's going to be like this.
So this is how it's going to look like.
I think it looks amazing.
And that you might be you might think that this area is too big.
It's not actually too big because we we don't have your text, but we we have a lot of text.
It's not going to be that big.
So here, let me show you what I mean.
So here we need to add this text many times.
So let me add this text four or five times.
I'm going to say I'm going to put it here.
One, two, three, four.
So if we have a lot of text here and we will we should have a lot of text that describes this product.
As you can see, the area is not it's not large because we now we have a lot of things.
So this is how it's going to look like.
Now what we want to do is that we we want to display the related products below this below this.
So in order to do this, we need to get the products, the the the codes that we already have created.
So if you if we go back, you will find that if you can go back to the you remember if you go back to
the index, let go to the index.
So if you go to the index, which is the homepage, you'll find that we already have this, this, this
feature section.
We can use this feature section in the single product to display the related products.
So I'm going to head over to the index and the index.
Remember, we have.
We have here the feature.
I'm going to copy this.
I'm going to close it first and then I'm going to copy it and I'm going to paste it in this single project
that will Belal.
Below this section.
Below the section, below this single.
I'm going to sit here.
Single.
Product.
So we launched a single project.
I'm going to basically this feature.
I'm saying I'm going to change first here.
And so the feature and I'm going to say related products.
Related products.
And I'm going to hear you say it.
Related.
Products.
Related products.
And here I'm going to say.
Related.
Products.
And I'm going to remove this paragraph.
I don't need this paragraph here.
And let me close this section and let's save the browser and refresh.
And as you can see, we will have this related products displayed, which looks amazing by law.
It's going to be below this, me and the single product area here.