Next up, we're going to take on our main section, so let's go in here and start creating.
Well, we'll have a main section.
And then within this, I'm going to read another section, Ted, that this section tag will have an
idea of news.
And basically why I'm doing this is you could go right here and type in news and you you would have
multiple pages, the article production and so forth and so on.
You when you will click on this news, it'll send you to the start to this part of the page.
So are navigations now linked up to this news section?
Now at the intersection, going to create a few containers, so a startup with a class dot card and
container.
After the court continued, we will have an age free with a class of court title.
Kodesh title within it are going to create, if you it just for stone and space, the town going to
create a strong tag.
And typing in my name, Norbert Manhart, this would be the Sayda the creator of this news and then
a law I think I used Lorem 10.
Yep, that's it.
Now we're going to go outside the fray, so this would be basically the title.
And if you're wondering where everything is still bottled, it will take care of this would seriously
wrong.
But I still wanted to have the name, as in the ED or to the one that posted this this news article
to have it with Boult.
I guess let's go back into court and I'm going to create an H5 and this will have a class of card subtitle.
With the subtitle is Where we're going to nurse this free you work, you profile post date.
Here's this.
Actually, this post date could be a date, but I'm just going to type in post dates.
So this free will be actually between anchor text.
So we'll create one Oncotype, which will go nowhere.
And I'm going to I could just copy this one, two, three, and the first one would be you.
Work.
Then the second one you profiled
and the last one post date now after our called subtitles will come the post itself.
So actually just an image.
So let's go down here.
Let's get the image tag.
Now, the image tag, which would necessarily also have a class for security class, class of card.
Image, Angie Alter text called Image.
And for the source now, not for the source, we need to go to a website.
This Web site is on splashed actually source dot on Splash.
And from here, we're going to grab on this, just some basic API.
We're going to grab onto a collection, so.
Which one did I use and saw to try to user who was up here because I needed the entire collection?
Collection collection there could just take this and then replace it basically with an I.D., so you
would take this HTP.
OK.
That's carpet as go into our image source, paste it in.
And basically what we're going to do is replace that.
And first of all, I'm going to change the direction so I don't want and not all of them, a couple
of them, I'm going to change direction later on.
But if they use them to type in collection.
And at the collection, I'm going to have another slash and going to type in some numbers, so let's
say six seven seven zero eight zero one.
OK, now as soon as I hit Save and go back actually to our website, hey, there's our first image.
Now, let's keep it this container ship, if you go here to the left, you can close up with the tag.
The opening tag opens and a closed door closes.
So this one time.
So we need to copy it for us.
One, two, three, four.
And we should have now five cards.
You have it five times now do need to change a couple of them.
So what I'm going to do is I'm going to go back up here.
Open it up.
And the first one, I'm going to push it horizontally.
And this just means I'm going to change.
Here is the width and height of the image, so I'm going to change them and to change this to 900 and
this to 1600 is as soon as I did save.
I was at the loading dock and also these images will constantly reload.
They are actually random images.
Okay, let's go down to the next one, going to change this one two eight eight.
Eight zero two seven one and I'm going to leave it as it is, 1600 to 900.
Then let's go down to the first image, and this will have a code of one, two, five.
Then eight zero seven two and the direction will be the same.
Let's go down to the next one.
This was the fourth one.
Now, this will have a code of one free seven, hey, not you, it's one free seven.
Five, six, one, nine, and I'm going to change the direction of this one.
Nine hundred and one thousand six hundred.
And I think that's basically it.
So let me just check it out.
There's a first image, second image now before I get confused, let us actually start these images.
So let's go into our styling, our success finally step in here, main comment, then down here, I'm
going to target a class of card container and we're going to give this a Menwith of three hundred pixels.
And basically what this means is no matter what happens, it will not be smaller than 300 pixels, not
just change the height.
To 100 percent and let's display as flags and the reason I'm going to do this is it was certainly see,
I'm going to be basically having let's go back to normal.
We are having the take this container.
This container has one, two, three items.
So if I want these free items to be one underneath each other, I could use grid and then column.
I'm basically going to use only one column, then sort of see what the difference would be.
So instead of displaying it as flags, which will result and I don't need you anymore, you can actually
close this one.
This flexes in the road, but I'm going to use now, for example, grid and create a template column
of one F.R. only one fraction.
Okay, so this will actually put everything into one column, and I also need to use position relative
because I want to have that rule where you.
So we had this when I'm hovering and I'm actually hovering over a Thai container, then this read more
appears and only when I'm hovering over the read more, the blur effect disappears.
OK, so let us go back to our success and let's continue on by targeting our card container.
Now, I want when I hover over it, to create these are pseudo selecta of before
and as I said, we'll have the cursor effect will position it.
Position they'll go.
Position with absolute the from the content this time, as I said, you can also type in here or this
awaits a string will type in here.
Read more
dot, dot, dot.
They're going to align the text to the centre, so text align line center, so all I need is read more
to Central to see this.
No, not here.
Well, we can see this because it's extremely large, so before I'm going to do this, let me actually
resize the image and let me also finish styling and push this down, finish styling, alcalde itself
and actually going to go up here.
So car title is the first thing I want to start Kadesh title.
And we inserted here font family.
OK, now let's actually use it, so I'm going to go back into Fontana's, into Google funds, and from
here I'm going to select the fund family.
So the title will have the fund family of 50 cents now.
So if and go back to a page, can see the car title change you hate and hover over it.
Those are read more right here.
That's not where we want to position it, but we're going to take care of this very shortly.
So let's start let's finish our car title.
And as I said, the rest of it.
So except the name, the rest of it should have a different font weight.
So let's type in font weight of 100.
And as soon as we do this, you'll see the rest actually only this one shape.
For now, everything will have the 100 font weight and now we can go back in here and give it a bit
of a padding to top and bottom zero point for RAM.
And left and right, Zyra.
OK, next up, we're going to take our current title.
And the stronger tag within it, I'm going to change this font back, so font weight to 600, let's
say, and we're also going to increase the font size to one point seven ram from its initial size.
So let's hit save and let's go back in here and could see our name now has a stronger font.
Size is also larger than the rest of the text.
Nonetheless, we don't want to do the title.
Actually, two things is, first of all, I'm going to take this strong.
So this one again and I want to have a decoration text decoration effect when I hover over it.
So let's see.
Let's say hover when we have a strong element.
The cursor should be pointer and the text declaration should be on the line.
OK, so as soon as we do this, when we have our titles and our editor right here will see the name
has now a text declaration of underlined.
Wickedness.
Let's take care of our subtitles.
So called class of code.
The subtitles.
And within here, going to give it a patty.
Of point, free ram top and bottom and zero left and right, and we're also going to change now the
the text, the text transform to uppercase as soon as we do this.
Let's sit down here, the subtitles.
So all of this would have now a upper case.
I think I forgot something.
I forgot those backslash.
So who knows?
No problem going to fix this.
What is the simplest way to fix this?
I could just go one after another and do this, but I don't want to do that.
So let's go up here where we have our very, very first.
Court.
Going to select this ending tag that I'm going to hold down control or on the Mac command and then press
the then press it, the the the going to jump down to the next one here we have 12 selected.
You still need this to the head.
And I go to press one times.
Right.
Then putting my backslash here, so as soon as I do, this will have this backlash at the end of our
posts, at the end of our subtitles.
So this is taking care of not just go back to our subtitles and our success and let's say let me copy
this again.
Want to take care of my anchor tags within here.
The anchor tags to delete this will have a color of hash.
Seven, seven, seven.
A font wait.
All four hundred, so we're going to increase the fine print and the letter spacing of one pixel again.
So as we see this, the font rate increased.
The also the.
The letter spacing increased and our caller is now great.
Now want also when we hover over them, to have the same effect that we have up here for navigation,
so let's just go and take this and take again so called subtitles and anchor tag.
Let's step in here, Hova.
There at the end of the Hank and Tag hover, and then they hover over it.
We want to change our color to a dark color.
OK, and it's also taking effect now let's take care of the court image.
So down here and the need for court subtitles, we're going to say card and dash image.
And we're going to give it a width of one hundred percent of its container.
And then position it.
Absolutely, and that's, I think, basically for card image.
Oh, course, of course, called I'm wondering why it didn't take effect and we still have something
missing case and how we can go back to our main court container.
And I'm going to leave this in a display grid, but comment about not lets this plate as Fleck's.
Again, to justify the content.
To the center and also align the items to the center and the flex direction should be in a column direction
because Flex Flex is automatically in a row.
And as soon as we do this, this and now that we took care of our images, we can take care of a section.
So the last thing I need to do after we take our section is complete this one.
But I'm still need to to display our images correctly.
So as you can see, these cards are now one to one on the top of each other.
And this is where we're going to take our section and start signing it as a grid section.
So let's take the section tag.
And that's, first of all, displayed as grid.
Now we're going to choose a great time to come as a repeat and we're going to repeat three times one
F r.
And basically what this means, we're going to create three columns now, because you can always see
that your images are starting to take shape now in order to have a bit of a separation, going to also
give them a gap.
So for the roles and columns on one point three, as soon as I do, this will have a separation between
the well, between the columns and between the rows.
We will have it a bit later on.
You will see why.
Now let's start taking our sections, children's section and to select our children, some MS child
going to select the he and child and the first one.
And we're going to place the first one with great column.
From one to three and then row from one to two, I'm going to align the alliance cell to stretch.
OK, as soon as we do this, we'll see our first item is aligned correctly.
So we need to do now is repeat this for each and every child.
We have five children.
Let's take the second one second child.
For child, for child.
And I don't need the fifth child, so the second one.
We're going to stretch it with the first one ended, so on the third column referred search and is going
to spend in the rose from the first to the third and now the third one going to leave it at Callon,
one, two, three.
But we're going to change the rules to two and two.
And the fourth one would be also from one to three, but it's going to span from the rules free to free.
OK, let's save and let's see what happened.
OK, so after that this hour, images should be, well, I correctly now the last thing I want to do
is have are this actually.
Heavy, heavy effect on our current image and what I'm going to do here is have to copy the image itself
so the class and then they have the effect of it.
So we follow it.
I want it to have a crucial appointer.
Just to be thinking, oh, la, la, la, la, OK.
So when I hear it, I want to have it curser appointer.
And then a filter on the field filter.
Of blur, of blur.
And we're going to suggest it to Pixel.
So let's check this out.
Every holiday image, see these two pixel blue?
And now the last thing I want to do is actually I would paste this in.
Yes, that's basically it for our section.
Now, the last thing we need to do is start our Futer and then we're done also make it responsive.
But that would that would be a single video.
So that's it for this one.