Now what I'm going to do is that I'm going to work on the single product page.
So if you if you click on one of these products, nothing is going to happen.
And of course, we don't want that.
We want to display.
If a user clicks on a product.
We want to display a product, the product in a single page and display information about that product
and how to add that product to that card.
And so many different things about that specific product that the user is interested in.
So what I'm going to do is that I'm going to open my project and then I'm going to create a new file.
Here, I'm going to create a new file.
I'm going to click on this icon, and then I'm going to create a new file called Single.
Product.
Single underscore product that hitched email and sends the single product.
That email will have the footer and heather it will have the nav bar and and the future.
We need to copy the future and the nav bar from from the index or from the shop.
Let's copy, copy them from the index.
So I'm going to open up the index and in the index here I'm going to copy, I'm going to start copying
from the beginning here all the way to to the body first to read by and then I'm going to paste it in
the single product that it will.
Then we need to copy the, the lower part, which is, which is these three lines.
I'm going to copy these three lines and then paste them here.
I'm going to paste them here.
You need to give yourself some space here and then peace that go with you.
Now we need to display the navigation bar.
So I'm going to again head on over back to the index and then I'm going to scroll.
So I'm going to scroll up and then I'm going to close this navigation bar and then I'm going to copy
this navigation bar.
I'm going to copy it, and then I'm going to place it in the single product, that email, I'm going
to base it here and then I'm going to close it one more time because we don't want to confuse ourselves.
And then I'm going to copy the footer as well.
So from the index, if you scroll down, you should find that we have the footer.
So I'm going to copy the folder as well and then I'm going to place the footer below the the navigation
bar.
But you need to leave the space because we need to add code here.
So I'm going to give myself some space and then I'm going to base the footer and then I'm going to close
the filter as well.
I'm going to glossier here, this footer.
So now we have the navigation bar and we have the future.
Let me click on file and then Sable, let's test that in the browser.
So now in the browser I'm going to go to the single underscore product.
That's G.M. And then I'm going to hit enter.
And as you can see, we have the navigation bar as well as the footer.
Now we need to work on the content so the content will contain a single image with all with all its
information.
So the design is going to be like this on the left side.
I'm going to display the product image and on the right side, I'm going to display information about
the products as well as a button to add to the to the to cart and the quantity and also the price,
all of these things on the right side.
So images will be on the left side, whereas information will be on the right side.
So let's work on the design.
So here in the single product that this HTML, what I'm going to do is that I'm going to click it and
U.S. here, I'm going to say.
Your section.
Section.
And then I'm going to give this section a class.
I'm going to say here class.
And that class is going to be.
Single.
Products.
And I'm going to also give it margin Y margin top and bottom five and also margin.
Also batting top five.
And inside that section, we want to divide the page into two columns.
Therefore, I'm going to say here then and then for this, Dave, I'm going to give it the raw class
because we want to divide the page into two columns.
And I'm going to also give this this Dave a margin top five.
And inside this inside this, Dave, what I'm going to do is that I'm going to create another Dave I'm
going to say here, Dave and this Dave will contain the image on the left side.
So I'm going to at first give this Dave a class and that class is going to be column large five because
we want it to take five out of 12 columns for large screens, for medium screens.
I'm going to let this take six out of 12 for large for small screens.
I'm going to give it 12 columns.
That's it.
Now, inside is where we want to display the image.
So I'm going to say image.
And then for this image, I'm going to say source and let's use one of the images that we already have.
I'm going to say assets.
Images.
Let's use the feature one.
And then I'm going to give this image a glass.
I'm going to say here, glass first I'm going to give you the image fluid, which is going to make the
image responsive.
I'm going to also give it a width, 100%, 100 with 100%, so that it takes the complete parent size.
Also, I'm going to give it padding bottom.
I'm going to say.
Bebe one.
Panic button one.
And lay me here, save and lay me here, then over to the browser and test.
So now if I refresh, as you can see, we have this image, but we of course we need to work on it further
because they want to display the image.
I want to make this image smaller.
But before we work on this, let's work on these small images because I'm going to be displaying the
varieties of that product.
So below this image, I'm going to display small images that represent the different varieties of that
product.
So below this level.
What I'm going to do is that I'm going to create another another depth.
But it must be inside this thing, so it must be here.
B I am actually below the image not, not below that then because, because we want the images to be
to be displayed below this image, not to be low of itself.
So below the image I'm going to say Divs, and then I'm going to give this dev a class.
And that class is going to be I'm going to name it Small Image Group.
And for this small image group, I'm going to also get yet another dev inside it.
And I'm going to give this image also another class called Small Image Quality, and I'm going to display
inside it's one image I'm going to say here image and I'm going to give it to a source.
And let's use one of the images that we already have.
I'm going to see assets images feature to that.
And I'm going to also give it a with I'm going to say width.
100%.
And I'm going to give it a glass.
Glass walled, small.
Image Lainey Slave Alamy heading over to the browser and test.
So in the browser now as you can see, we will have one image.
Now let's, let's now display other images.
So what I'm going to do is that I'm going to copy the section of this there.
I'm going to copy this there and I'm going to paste it four times.
So I'm going to copy this.
And inside the same the same there.
We're below this.
I'm going to base it.
One, two, three.
So we should have one, two, three, four.
We should have four there like this.
Now, let me change the images.
So I'm going to say here featured one and they featured two and they feature three and they featured
four.
And then here featured, let's say let's use another image.
Let me use the cloths.
One.
Lamy now save and.
Lamy handed over to the adviser, Andy Fresh.
And we should have now are there images?
So we have one, two, three and four.
So we have all of these images.
Of course, we need to display these images below.
In our project, we see the product that we that we want to display as as varieties of that product.
So they must be displayed here in small containers.
So let's work on this.
So in order to work on this, what I'm going to do is that I'm going to create six glasses.
Therefore, I'm going to head on over to the thesis here.
She says.
Style.
Let's use something in the style.
Let's work on this.
So I'm going to scroll to the bottom and then let's walk on this.
So here I'm going to say a small.
Small Image group.
And for this small image group, I'm going to remember this small image group is this one.
It represents.
It represents this small image group.
It represents.
It represents the device that contains all of these small images.
So for this, we need to give it a display flex.
Display flex and we need also to give it justify content space.
Space between let me see even let me show you what it's going to do.
So if I refresh now, as you can see, these images will be small, but they don't have the same sizes,
so we need to fix their sizes.
Therefore, I'm going to work on the other class, which is the small column, small image column,
small image call.
Remember here and the single product for each image.
I have given each image a class called Small Image column.
So here, in order to make all images have the same exact width and height, we need to say links.
Alex basis.
Licks basis 24% or 25.
And let's also give it the cursor.
Cursor.
It means that the image is going to be clickable.
Lamy Now save on refresh.
And as you can see, all of the images will have the same exact width and height.
You might find some images a little bigger than others.
And the reason is because some images are originally gray, bigger in terms of the size than others.
This is why I always I have always been telling you that you need to make sure that you are all of your
images, all of your product images have the same exact size.
Otherwise, you will, even if you try to resize them using sizes.
So many images because they are or because they are originally small.
They will not.
They will not look.
They will not fill the complete the complete container.
This is this is the only problem that we will have.