So now what I'm going to do is that I'm going to work on these buttons and I'm going to change a few
things about these buttons, and I'm going to add an awesome effect that you will see shortly.
So here what I'm going to do is that I'm going to say dot product.
And then by button we have remember we have a by PTEN, which is this we have this button by my now,
which has a class called the buying button.
So now for this buy button, I'm going to change the background color.
So I'm going to name background color instead of black.
I'm going to use this color.
It's be 77 four, which is an orange color, and I'm going to add a transform.
Transform y, transform y, translate y, translate y 50 b x, and then I'm going to also give it an
opacity of zero and I'm going to give it a transition transition.
So the transition is would be only 3 seconds all.
Now if I save and refresh, you will find that the button is gone.
These panels are gone.
So why did I do this?
The reason why I didn't do the reason why I did this is because I want this image.
I want these mountains to to be displayed only if I hover over the product.
Otherwise, I want these buttons to be to be hidden.
So to make these buttons appear, if I hover over the product, I can use a product and then hover,
hover.
If I hover over the product, what they want to happen is that I want the buy button to be displayed.
So to make this button, to make sure I'm going to say transform and then translate y
translate y zero.
If I say zero x now the button will go from 50 b, x, y, which is the y axis all the way to zero,
which is the which is its original location.
So it's going to go for it initially.
It's going to be at 50 and then it's going to go to the to its original location.
And I'm going to also change the opacity to one, because if you don't do this, the the button will
be hidden.
Opacity zero means that the button will not be there.
It's not it's not going to show up.
One, it means that it will have just the original opacity.
Let me show you now what's going to happen.
So if I hover over the product, the button will show up and if I have outside, the ribbon will not
be displayed, which is awesome.
So this is for Lebanon.
Another thing that they want to work on is the is this separator.
So for this separator, I'm going to use a H, R and then I'm going to give it first away.
I'm going to decrease the width to only 30 x because as you can see here, it takes the complete width
of the element of the parent.
And I only want it to take a small width and I'm going to also change the height to be three to x important.
Because I want to override the original design.
Also, I'm going to give it opacity, one important and I'm going to change its background color.
I'm going to use the the orange color that they used earlier, which is this color.
SB seven seven for me.
Let me now save and let me refresh.
And as you can see, it's going to look like this.
But we want to move this from the left side to the to the middle.
How can we do this?
To do this, it's super simple.
You can use the h.r.
You can use the here.
You can use a bootstrap class called an x or an x or.
This glass would center the edge.
And I mean, I'm showing you this.
As you can see, the line will be centered.
Finally, I'm going to work on these stars.
So instead of a black, I'm going to display them in gold color, in yellow color.
So I'm going to say here.
Star.
Because we already have a class called Star here.
Star.
This class.
Star.
So here I'm going to say star.
And then for the star, I'm going to give it first up, adding I'm going to say fanning.
Then top and top and bottom and zero.
Left and right.
And for the star.
I.
I want to change its color.
So first, I'm going to change the font size.
I'm going to change its font size to be point nine frame.
However, I'm going to give it a color.
That's called, I'm going to say in Golden.
Golden, right.
Which is a yellow kind of a yellow color leaning out, save and refresh.
And as you can see, it's going to look amazing.