Now what I'm going to do is that I'm going to work on a section called Featured, which is going to
display featured products.
So first of all, here, I'm going to create a new section.
I'm going to say here, I'm going to add a comment first.
And then I'm going to say featured.
And then t shirt.
And then I'm going to give you the section here.
I'm going to say section and I'm going to give you a section on it.
And then it is going to be featured features.
And then inside that feature, do we need a dev?
We need you to be at this.
And for this dev, I'm going to give its first class called container, which which is as normal as
usual.
This class is going to add the container is going to add a padding margin from the right and left.
And I'm going to also say your text center, because I want to center the text.
Text Center.
But Lainey, let me work on this later because they want to show you how these classes are going to
affect the design and inside that this.
First of all, I want to display here a I'm going to say inch three and then I'm going to say our.
Featured.
Right.
Or we just our future.
And then I'm going to display H.R., which is a separator and just as a producer and below this, I'm
going to display a paragraph here being like this, H.R., I'm going to say B and I'm going to add the
some text.
I'm going to say, here you can.
Check out our.
You.
Products or featured products.
Insurance fraud.
Laney, Steve and Laney.
Refresh.
So if I refresh, as you can see here, it's being displayed here.
But first of all, I want to display this in the middle.
Therefore, I'm going to say here for this container and I'm going to say text center.
Takes centre and I also want to add margins from the top and now from the top and bottom and from right
and left.
And that can be done using the margin top five, which is where we strap class and the padding Y, which
is going to have a padding from the top and bottom.
And also I'm going to add the I'm going to add the padding and margin to the section itself.
So for the section itself, I'm going to take a class I've been trying to see in Y five and P B PHI.
So this is a margin five through the top and bottom and this is for the bottom.
This is padding through the bottom.
bb5.
B b b I think twice.
Now, let me show you the difference.
As you can see, it's going to be displayed in the middle, which looks amazing.
Now what I'm going to do is that I'm going to work on the featured products.
So to do that, I'm going to create the the products and to create the products we need at them.
And we need to give this live a class called Raw in order to get the raw that will contain several products.
So I'm going to say you're all here and and it's and that's raw.
First, I'm going to create the first product by saying you think that and I'm going to give this.
There's a class called product product, which is going to be my class that I'm going to work on shortly.
And I am going to say column allergy three, which means that each product will take three columns out
of 12.
If the screen is large, if the screen is medium, I'm going to say column me and then four, which
means that the the product, each product will take four columns out of 12 if the screen is medium.
Medium screen sizes for medium screen sizes for small screens.
I would say you call esim dual, which means that for small screens, each product would take 1212 out
of 12, which means that if the small if the screen is small, only one product would be displayed.
So inside that inside the product, we need that image point for the product.
So I'm going to say image and I'm going to give it also a class.
The class is the is the image fluid, which is a bootstrap class again.
And the margin I'm going to give it also margin bottom three and I'm going to say here source and I'm
going to keep this empty now shortly I'm going to add an image below the image we want.
Below the image we want a text.
So I'm going to get a name for that text and I'm going to say I'm going to say, here, let me use instead
of the text, let me say instead of def, I'm going to say here it's five and for the price I'm going
to give it a class and that class is going to be P name.
And here I'm going to display the name of the product.
So let me see.
It's or it's.
And below this, I'm going to give you I'm going to use the edge for to display the price.
So I'm going to say it's four and I'm going to give it a class.
And that would be the would be named B price.
And then I'm going to say here, I'm going to target price.
Let me say here.
This price and below I'm going to display it by.
I'm going to see him so far this morning.
I'm going to I'm going to say bye now.
And I'm going to also give it a glass glass by now.
Let me save a lady and then over to the browser.
And leaving your name instead of buy.
Now let me say buy button, because otherwise they wouldn't know that this is about it.
Bye bye.
Let me now save and refresh.
And as you can see, the product will be displayed here, but we still need to work on a design.
So first of all, we need to add margin and bank.
So to add a margin and padding, what I'm going to do is that I'm going to add a margin comparing to
the here to the to this there to this draw itself.
There itself, I'm going to say m x auto.
So this is going to center center each product.
It's going to add the some space here from the left and right so that it will be centered.
However, it will be centered, but also the the there will be here space and this is going to be applied
to the raw itself.
It's not going to be applied to each product.
So it will look amazing shortly.
Shortly when I refresh, you will see what this is going to do to the are to the to there.
And I'm going to also give it a container.
I'm going to say you container fluid, which is going to also add some space container.
Look, this is a bootstrap plus.
Which is going to add some space from the right and left and make sure that the things will be displayed
perfectly.
And for for this for for for the techs, I want to center the techs.
And to center them, we need to say text center.
This is going to censor the text.
So this is for for for this part and for for here we want let me check this one here.
We need to expand.
We need to center this and we need to add margin.
We added margin.
Everything's perfectly safe.
And let me refresh now.
And as you can see, it's going to look amazing.
It's going to be displayed here.
Now, what we need to do is that we need to display the image.
So you have some images and let me show you the images that they have.
So you have this folder which contains some images.
I'm going to add these images to my project.
So here I'm going to.
Here.
I'm going to open this and then I'm going to open the images.
For the images for this section we have the feature.
So I have here for featured images.
I'm going to move each one here to this our images folder one and then two and then three.
And then four.
So we will have four images.
Now what I'm going to do is that let me close all of these.
Let me close down all of these steps here.
We need to say source.
And then for the source, I'm going to say assets for slash.
Images for slash featured one.
Featured one JP.
Let me now save.
Now let's head in over to the browser to test.
So as you can see, it's going to look amazing.
Now we have only one product, but we want to keep it here.
Three other products.
So to do this, we don't need to do anything, anything special.
All we need to do is that we need to copy this part and and paste it four times because basically three
times because we already have one.
However, I'm going to here before I do this, I'm going to display here some stars.
So stars for reviews.
So to do this.
I'm going to stay here.
I'm going to get here.
They've called that has a class called Star.
I'm going to say a class star.
And then I'm going to use a.
A font awesome star.
So I'm going to say here I am.
Then for this I am going to give it a glass.
And that glass is a not a bootstrap, it's a font.
Awesome glass called if a font awesome and then a font awesome star font awesome star.
And then I'm going to repeat this five times because I want to display five stars.
One, two, three, four, five.
Now, let me show you how this would look like.
As you can see, we have here one, two, three, four, five stars, which looks amazing.
So this is for this section.
Finally, I'm going to repeat this four times and then I'm going to work on the reasoning.
So in order to repeat this, we just need to copy this part.
We need to start copying from here.
So from here I'm going to copy from here.
I'm going I'm going to business.
One.
Two and three.
And I'm going to change the images.
So the first image is featured one.
The second image is featured two.
And the third image is featured three.
And the last image is featured for Leni.
Now save and Leni refresh.
And as you can see, we will have one, two, three, four, and they look amazing.
Now I'm going to work on the design, so I'm going to head on over to see this maybe open up thesis.
And now we need to start working on the design.
So remember, we have a glass called container.
We have a glass called product.
Remember, we have in your glass called product.
This product.
So we need to work on this.
This product is the device that contains the complete product.
So here at the bottom, I'm going to here at a comment and then I'm going to say.
Products so far.
The product section I'm going to give you, I'm going to senior dot product and then first, I'm going
to give this product a cursor.
I'm going to say cursor pointer, cursor pointer, which is going to make this pointer, which is going
to make the item clickable cursor pointer will make this icon clickable.
Whenever you hover over it, it's going to be clickable.
So this is for the project and I'm going to also give it margin bottom.
So I'm going to add here some margin.
Because they want this margin for the in order not to interfere with the next section.
So I'm going to say margin bottom.
To RIM.
And then I'm going to work on the image.
I'm going to say project.
Project image.
And the image.
I'm going to give this image a transition.
Transition of point, 3 seconds all.
And upon hovering on the image, I'm going to say your product and then hover.
If I hover over the product, I'm going to change the opacity of the image.
So I'm going to say image.
I'm going to see product hover, which means that if I hover over the product here, the image will
have a different opacity.
I'm going to see here opacity.
Opacity and the opacity is going to be point seven.
Let me see.
And let me now heading over to the browser and refresh.
And if I hover, as you can see, the opacity will be point to seven, which looks amazing.