Now what I'm going to do is that I'm going to create here a banner below this section.
So here in the index that each email below this.
Let me close this because it's here.
This takes a lot of space.
So I'm going to close it and then I'm going to do it here.
And you I'm going to add the comment and then I'm going to say Banner.
And then here I'm going to be at the U.S. and I'm going to give this section.
It would be banner.
And then inside that section, we, as usual, we need a again.
And for this I'm going to give it a glass.
We container, glass, glass, container.
And I'm going to here and inside it, I'm going to add some text.
I'm going to hear say a trois.
Let me see.
It's a made.
Season.
Sale.
And below this, I'm going to display some texts.
I'm going to say each one.
And then I'm going to say Autumn.
Some collection.
All action and I'm going to add a break because they want the vortex that we displayed below the the
the remaining of the fixed.
They want it to be displayed below, I'm going to say up to.
30.
Percent off.
And below, I'm going to display a button here.
I'm going to say button.
And for this money, I'm going to give it a class.
And that last one would be text uppercase, uppercase.
And here I'm just going to this.
I'm going to display on the bottom shop now.
Shop now and for.
For the banner.
I'm going to give it a a margin and I'm going to take less aim y five and by5.
So this is going to give it margin.
Top and bottom five.
And padding.
Padding.
Top and bottom five.
And these are bootstrap classes.
And Laney now save and Laney hit it over to the browser and refresh.
And as you can see, this is the banner.
And of course, this is not a banner because we we don't have an image.
So we need to display an image in the background similar to this.
We have already done this, but this is going to be different.
The difference is that this is going to be smaller and also it's going to look it's going to be kind
of scrollable where the image will be scrollable.
So the the image will will remain inside the the section.
It's not it's not going to go away if you scroll in.
Let me show you what I mean.
After I finish this design, you will you will see what I mean.
So remember here I have given it I have given this section and it's called the banner.
So in the style, we need to clear this up, this idea, and work on the design.
So in the in this case.
Here.
I'm going to need to say I.D..
Hashtag banner.
And since we already have a redesign of the home, we can copy the design from the home section, from
the home elements.
Remember this home?
Listen, we can't copy this card.
Let me copy this card and then let me paste it here.
Limit pace the code here in the banner and we need to change the image.
But I don't have an image now.
I'm going to change the image later.
Therefore I'm going to keep the same exact image and later I'm going to change the image.
And we don't need to change much.
The only thing that we want to change is that we need to change the X and Y positions.
So for for the X position, for the X position, I'm going to say center, because I want the image
to be centered horizontally from for the background position y I want, I want this to be 80% AP X So
there is no problem with this.
Another thing that they want to do is that they want to remove the repeat because you don't want the
image to be repeated.
Therefore, I'm going to say here background, repeat, no, repeat and the attachment.
This is what's what's important here.
Laney, you say back ground attachment and showing you what this is going to do.
This is going to if I say here fixed, this is going to make the image attached to the to the element.
You will see this shortly.
Let me now save Laney.
Laney, before I save and test, let me work on the on the designs of latex.
But let me first test because I don't want to work on other things and I forget showing you this look.
So let me refresh and show you how it's going to look like.
So as you can see, this is how it's going to look like.
It's going to be that.
It's going to the image is not going to go away.
It will always be inside.
That section, as you can see.
Looks amazing.
But we need to change.
As I told you, the difference between this and this is that, first of all, the height is too large
here.
The height is too large.
And here it's it's attached to the elements.
So we need to decrease the height here.
I'm going to say height instead of 100.
I'm going to say only 66.
So only 60, you.
Now let me refresh and show you the difference.
So as you can see now, it's going to only take 60 the end from the from the screen height, which looks
amazing.
Let's also work on.
On these texts.
So in order to work on these texts, we need to say here, banner.
Banner and then h for we we have the war.
I'm going to change the color.
I think the itch for color looks good.
So we don't need to change this.
Actually, let's change the color of the itch one.
So for the itch, each one.
Let me check one more time.
We have this, each one and we have this.
Let's change the color of the each one here.
I'm going to stay here.
Color.
I'm not going to use the, quote, coral scholar.
And here this is the color.
Let's also work on the button for this button.
For this button, I'm going to say your banner and this button, then button.
So four things about it.
I'm going to change only the background color I'm going to name by color.
Back ground color.
And the background color is going to be the orange color that they used the earlier which is this color.
So now.
As you can see, it looks amazing.
It looks now amazing.
Now, let's also add a an effect to it, I'm going to say here.
Banner and then button and then hover.
And if I hover over it, I want to be back down to color, to go black.
Race color.
So let me now show you how it's going to look like.
So as you can see, if I hover over, it's going to look like this.