Now I'm going to be working on the next section, which is going to be a section for displaying three
cards.
Each single card will display a product, a new product in our website.
So here I'm going to create a new section called New.
And then I'm going to say section.
And then for this section first, I'm going to give it as usual.
I'm going to give it an ID.
I'm going to say I.D. and it is going to be new.
And then I'm going to also give it that class and that class is going to be with.
With 100 and inside that section.
First, I'm going to divide that section.
I'm going to use the right to divide that section into three columns.
So I'm going to say them and then I'm going to give this David class, the raw class, to divide the
page into a area of a row that consists of three columns, and I'm going to remove the batting and the
margins.
So I'm going to say B0, M0, B0 means that I don't want any padding and M0 means that I don't want
any margins.
And these are both steady.
All of these are bootstrap classes.
Next, I'm going to display the first column so far.
The first column I'm going to say them plus.
And I'm going to give it first a class called one, which is my class, and then I'm going to give it
bootstrap glasses.
First column.
Elite Four and column.
Medium, medium 12 and column.
Small 12.
Which means that four large screens, three, three draw, three columns will be displayed, pair up
or medium screens.
Only one column will be displayed.
There are four small screens.
Only one column will be displayed.
Zero.
Finally, I'm going to remove the padding.
I'm going to say here p zero.
And then inside that, I'm going to display an image.
I'm going to say image and then I'm going to say source.
And then I'm going to give this I'm going to first give this image a class and bootstrap class called
image flow, which is going to make the image responsive.
And for the source, I'm going to say source, I'm going to say assets images for slash one JPEG and
I'm going to get that image later.
Below the image.
Below the image, I'm going to display a a section.
And I'm going to give it a class called Details.
And for for this details, I'm going to display two things.
I'm going to display a text that's going to be displayed in H2 and in title to me and let's say.
Dreamily.
Awesome.
Yes.
And then below, I'm going to play a button for the button and I'm just going to say shop now.
And I'm going to give it a bootstrap class.
Called.
Next.
Upper.
Case.
Laney, Save and Laney have been over to the browser and refresh.
And as you can see, we have one column.
Let's display two columns here on the V in the middle and on the right side.
So.
To do that.
We need to copy this part.
Let me hear.
Say.
One.
And this is the end of one.
So here I'm going to say two, and then I'm going to say here.
Very.
And I'm going to copy this and paste it here.
And pasted it here.
So for two, let's display a different text.
I'm going to say.
You're.
Awesome.
Anything you want to display.
You know, I'm going to say 50% of.
And for the images, I'm going to say too, and I'm going to say a year three.
So we have one, two or three.
And let me add the images.
So I have here three images.
I'm going to drag these images and drop them on to the.
Images folder.
So we have one, two and three.
So these are the images.
And let me now heading over to the browser and test.
So now in the browser, as you can see, we have one, two and three.
But the problem is with the images, they don't have the same sizes.
Let me work on this.
So, first of all, this image is too small.
We need to replace this with a bigger image.
Image.
So I have another image.
Let me add this image on test with this image limits this image.
And I think this image is bigger.
As you can see, it's bigger.
However, we still need to work on the size because some images might be greater than others.
Therefore, we need to we need to work on the design of these images.
So what I'm going to do is that I'm going to head on over to see this, and I'm going to work on the
design of these images.
First of all, I'm going to work on the new section.
Remember, we have a year this new section in the email, we have this new idea.
So in the thesis.
And this time the thesis.
I'm going to add here the new I'm going to say new.
And then for this new, I'm going to say that one.
And then image.
And remember, this one is for.
For this and this and this.
So.
The image is going to be.
This image is refers to all images or images that are inside this inside one glass.
So for the image, we need to change the width and height.
I'm going to say with the width 100% and the height.
100%.
Now the images should have the same size.
So the images should have the same size, and I think they look great now.
The next thing that I'm going to work on is the.
He's that I'm going to add some background because I'm going to change the background position.
So the background position, Magna position, is going to be center because they want to center the
images.
We're going to say the background position center and the background repeat is none.
Back ground, repeat, none, no, repeat.
And the background size.
Cover.
Now, let me refresh.
And as you can see, it's going to look great.
Next, we need to work on the deposition of this one.
Of this of the one they complete, they have suffered a complete death.
I'm going to give it.
I'm going to say you knew that one.
And I'm going to give it a position relative and I'm going to display this modern LeBaron and the text
inside or above the image to do this.
To do this, we have to change the details.
Section, position.
Remember the details.
This details is below the image.
And in order to display the details above of the image, we need to give the details here.
We need to say a new and then that one and then that details.
Details.
We need to change the position.
So I'm going to change the position to absolute.
Absolutely.
And.
Right up.
He's going to be zero.
And the left.
Left is also going to be zero.
Whereas the the the color I'm going to change the color.
The color is going to be barely would.
And the font weight.
I'm going to change the font weight.
To people.
Transition point for AIDS.
And I'm going to give it also opacity of point eight and background color.
Background color.
So the color is going to be a black color.
I'm going to say RGV one, one, one.
And that's it.
Let me see.
Let me show you what's going to happen now.
Now, what happens is that the the text and the button will be displayed above the image and they will
be displayed inside this section.
But we want this section to be extended and to take the complete size as the image.
And to do this, we need to increase the width and height.
Therefore, I'm going to say here, width 100%.
And the height, height is also 100%.
So this means that this black area will take the complete will take the same exact size and they will
take the same exact height and width as the image.
Now, let me refresh.
And as you can see, it's going to look like this.
But let's decrease the the opacity a little.
I'm going to say opacity 7.7.
So this is the opacity.
Opacity is a little you can decrease the opacity even 2.5.
So as you can see, you can decrease and increase the capacity.
And also we need to move the text and the button to be displayed in the in the middle.
So in order to do that, we have to we have to change the limit.
We are showing you what we can do.
We have to change the details.
The less we have to change the one.
The one glass.
This one glass.
Because this one glass contains the baton and the text.
Therefore, what I'm going to do here is that for the for this I'm going to say new.
And then one and then.
And.
Child.
One got details?
What does this mean?
This means that I'm accessing the first.
The first one.
The first child of the.
Of the one.
Which is this child.
Which is this.
Which is the details.
So I'm basically accessing the details.
The details of the first child.
So in other words, I'm accessing this.
I'm accessing the first details.
So for the first details, class, which is this which is this text.
What I'm going to do is that I'm going to change the display to explain is going to be flicks.
Display.
Flex and the justify content is going to be center.
This is going to center the text and the flex flex.
The -- reflects the -- you were going to be gone, whereas the line items is going to be
start line items.
A line item is going to be flexed sort.
Alex.
Start.
And finally, the text.
The text, the line is going to be start.
Now if I can refresh that X will be displayed on the left side, in the middle, vertically in the middle,
in terms of the of vertically, it's going to be in the middle.
But horizontally it's going to be on the left.
As you can see, it's going to be vertically.
It's going to be in the middle because they said the center, the drastic content center and the the
the aligned items, this is like start and the text line is START, which means that it's going to be
displayed on the left side.
And if this is not clear, you can increase the opacity here.
The opacity could be 8.8.
Now, if it's 8.8, it's going to be darker and the text will be displayed better.