Hello, friend will come back in a previous video, we successfully display our home, that means in
our home base area we successfully display our everything.
That means our product name.
We display our product a price and the all price and the product image.
And also here, a defense of the class.
Right.
So now we have to do we have to create our this all that C as this class.
So if you want to create it, I already define of our business email that is our stylesheet before that
head.
So here I want to do want to create every class in particular that area for doing this.
First of all, I define the class as a card, OK, just simply define the class as a card so far.
And as I told you, if you already knew about that Xerces, then it should be very much clear to you.
So here I define the height, OK, just simply the height as a 350 pixel.
And also after that.
After that, I want to do want to create another class for this card, OK?
For this card we have to do we have to define another class.
So I just simply the card so that the card and here I define what the card and the regular card and
also I have defined that card for that.
Right.
So now we have to do we have to create it.
So after that I define as a card product and for the card product, what exactly should we do after
that?
So here I define as after that means after.
So the card product after I'm done with the class.
OK, so here that will be one.
So here we have to define all the content.
Content will be as empty and then I define the display and display.
It will be as a table and then our clear look at clear will be as a board.
So as I told you, everything is cassus class.
So now I also define the visibility.
Visibility, OK?
Visibility will be as a hidden.
So visibility will be as a hidden perfect.
So that is our class.
And after that I want to undertake another one.
It will be as a card, that card and then product and then product and card product and then within
price, new price new.
And also I want to take another one as a card and then product and then our price.
So in particular, that area here I defined as a margin, I just simply defined as the margin.
Right, as a five pixel.
OK, so just simply defined as a five pixel.
And after that we have to also define our old price.
So for the old price, I have defined the card God and the product.
So here I define as a product and then our price, old price all for this one I want to do under a different
color.
I just said on the color as a C.C.C., ok are better able to defend as a nine nine then it will be better
actually.
And after that also I want to undertake another one.
I take another one at the card and the product of a card product with the images in the images here
I have defined as image on.
OK, so I just simply defined as the image Zamp and with this and here I want to define the image borders
also just simply defined the border.
Don't look at border areas.
Border radius will be as a three pixel and then the three pixel and then also make that as a zero zero.
OK, so this will be a zero zero.
That means there will be the round and also of our flow will be needed.
So this is our workflow hidden.
Sorry.
So I will be as a hidden and then the position.
So I define the position as the relative and also high definition of the height.
OK, I just have to wonder how it will be the two two zero four right now and two to two big Zol and
so friend, I don't I'm actually defining everything so little.
If we want to change it, then we can actually change it.
So here I want to defend on the tax line like a tax line and for the tax alone would still be at the
center tax.
And also after this, I want to do a look at some of the middle class so here after this and really
find out that class has a card with this card product.
With this card product.
I refund for the emails.
May Zamp.
OK, Masab Mays.
And here, maximum maximum white I define as 100 percent say there's no difference 100 percent and also
under defined as the maximum height.
So maximum height will be also as a hundred percent.
OK, and then also here I want to do under the front of the object feet.
So object feet will be as a cover conversive friend I will share total projects.
Hausfeld with you.
So if you don't want to write this code then you can ignore it.
So right now I'm actually doing the most common things.
What exactly they need it for, in particular our this project.
So I just simply give another on the card and then product like cardboard that will be in our info maybe.
Yeah, that is information I want to do.
I also want to defining it.
So here I want to define another one which will be as a workflow, as a hidden and then the painting.
I define some of the padding for this one and padding I define as a 15 pixel and then the border, OK,
defines the border top, the border top and for the border top, which will be the one pixel and then
solid look for one pixel solid.
And also I make that as easy type of one of the color I want to put.
And then also I the front that actions that we say in our competition.
So here I just simply defined the card and the card product and the product area.
Sorry, dot action.
Dot action here at the front of the Walmart.
So with this here, I want to do want define another another building top side in front of the building,
top building top will be as a four pixel, defined as a four piece right now and also at the front of
the margin.
So here at the front of the magazine top so marzin top will be as a four pixel and also to the end to
create another class card, product scarred product.
And then this one for our bottom whomped.
And here I want to do under the front of the building building will be as a 15 pixel.
OK, and also here, I defend that border.
So that is a border border.
Torpy defined as one big zone.
OK, one pixel solid.
And also here it puts on the color so better defined easy.
OK, so this color and also our last one, I want to define how to define another one as a card and
then card with our Product Support Act.
And then also here I have defined.
I have to find that product that is a name that is a title of it I want to do and define the title so
that your product title here defines the magazine.
Top and top will be as originally defined as zero.
So little if you need, we will update it.
So here, that's also here.
Right now I'm actually adding some old Cyesis class, which I have already tasted so far this very much.
Come on, actually.
Come on.
All the cases I have used on here.
So if you have already some idea about the success, then everything is very much going on.
OK, so here I am not focusing to create some specific Gorgias design.
So the simple design, I want to actually define that part.
OK, so that's all avant garde.
Now let's check this out here.
I just click to save all and here I have already defined all the titles, so now we will actually match
it.
Now if you refresh it.
Yeah, you can see a little bit good, so here I have defined some of the border for this product and
also showing our title, our prize and our all prize.
So here I want to do want to make that our TESOL price is full.
Price will be like here.
But I want to add one of this strike.
So if you want to use that strike that is in our home.
Jemal So that is our price.
So here at the front of this table, gold as a stake.
So I just simply defended this strike.
And also we have to do we have to finish it.
So after this, after this, I just simply finish our stack.
OK, so here I just simply finish it.
Now, let's check this out.
If we now get to save all.
And now if you refresh it, yeah, because it's now become cross that busy state.
So that was our previous price and that is our recent price, right.
So here we successfully display our every product.
And not only if you also want to lose it.
Yeah.
You can see it's not showing like that way was very interactive, very much responsive, actually.
OK, so you can see that is actually very much responsive.
So right now, 100 percent is OK with me.
So no friend here.
I'm going to do want to create one of the neighbor.
OK, then that means this our phone, our home base.
So there should be some of the are better able to do and to care of the neighbor in our header pushing
earlier Sulkin created in our next video, I will show that things with the live example.
So thanks for watching and I'll see you in the next video.