1
00:00:01,940 --> 00:00:08,200
Next up, we're going to take on our main section, so let's go in here and start creating.

2
00:00:08,600 --> 00:00:12,020
Well, we'll have a main section.

3
00:00:15,710 --> 00:00:20,720
And then within this, I'm going to read another section, Ted, that this section tag will have an

4
00:00:20,720 --> 00:00:22,700
idea of news.

5
00:00:25,140 --> 00:00:31,350
And basically why I'm doing this is you could go right here and type in news and you you would have

6
00:00:31,530 --> 00:00:34,200
multiple pages, the article production and so forth and so on.

7
00:00:34,620 --> 00:00:41,340
You when you will click on this news, it'll send you to the start to this part of the page.

8
00:00:42,660 --> 00:00:46,770
So are navigations now linked up to this news section?

9
00:00:47,840 --> 00:00:54,380
Now at the intersection, going to create a few containers, so a startup with a class dot card and

10
00:00:54,680 --> 00:00:55,490
container.

11
00:00:56,760 --> 00:01:03,000
After the court continued, we will have an age free with a class of court title.

12
00:01:04,480 --> 00:01:14,830
Kodesh title within it are going to create, if you it just for stone and space, the town going to

13
00:01:14,830 --> 00:01:15,940
create a strong tag.

14
00:01:17,170 --> 00:01:27,520
And typing in my name, Norbert Manhart, this would be the Sayda the creator of this news and then

15
00:01:27,520 --> 00:01:30,580
a law I think I used Lorem 10.

16
00:01:31,630 --> 00:01:32,380
Yep, that's it.

17
00:01:33,430 --> 00:01:37,480
Now we're going to go outside the fray, so this would be basically the title.

18
00:01:39,010 --> 00:01:44,920
And if you're wondering where everything is still bottled, it will take care of this would seriously

19
00:01:44,920 --> 00:01:45,140
wrong.

20
00:01:45,190 --> 00:01:53,590
But I still wanted to have the name, as in the ED or to the one that posted this this news article

21
00:01:53,980 --> 00:01:55,240
to have it with Boult.

22
00:01:55,840 --> 00:02:03,790
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.

23
00:02:08,510 --> 00:02:15,890
With the subtitle is Where we're going to nurse this free you work, you profile post date.

24
00:02:16,310 --> 00:02:17,150
Here's this.

25
00:02:17,150 --> 00:02:21,350
Actually, this post date could be a date, but I'm just going to type in post dates.

26
00:02:21,350 --> 00:02:25,370
So this free will be actually between anchor text.

27
00:02:25,370 --> 00:02:29,210
So we'll create one Oncotype, which will go nowhere.

28
00:02:30,190 --> 00:02:36,760
And I'm going to I could just copy this one, two, three, and the first one would be you.

29
00:02:37,770 --> 00:02:38,280
Work.

30
00:02:41,310 --> 00:02:44,820
Then the second one you profiled

31
00:02:48,000 --> 00:02:56,190
and the last one post date now after our called subtitles will come the post itself.

32
00:02:56,220 --> 00:02:57,390
So actually just an image.

33
00:02:58,430 --> 00:02:59,740
So let's go down here.

34
00:02:59,790 --> 00:03:01,070
Let's get the image tag.

35
00:03:02,280 --> 00:03:11,880
Now, the image tag, which would necessarily also have a class for security class, class of card.

36
00:03:13,600 --> 00:03:19,720
Image, Angie Alter text called Image.

37
00:03:23,020 --> 00:03:26,680
And for the source now, not for the source, we need to go to a website.

38
00:03:27,160 --> 00:03:32,130
This Web site is on splashed actually source dot on Splash.

39
00:03:32,140 --> 00:03:36,730
And from here, we're going to grab on this, just some basic API.

40
00:03:37,190 --> 00:03:39,430
We're going to grab onto a collection, so.

41
00:03:40,370 --> 00:03:48,680
Which one did I use and saw to try to user who was up here because I needed the entire collection?

42
00:03:51,110 --> 00:04:00,050
Collection collection there could just take this and then replace it basically with an I.D., so you

43
00:04:00,050 --> 00:04:02,090
would take this HTP.

44
00:04:03,370 --> 00:04:03,940
OK.

45
00:04:05,940 --> 00:04:09,930
That's carpet as go into our image source, paste it in.

46
00:04:11,520 --> 00:04:14,370
And basically what we're going to do is replace that.

47
00:04:15,940 --> 00:04:22,090
And first of all, I'm going to change the direction so I don't want and not all of them, a couple

48
00:04:22,090 --> 00:04:23,610
of them, I'm going to change direction later on.

49
00:04:23,920 --> 00:04:28,000
But if they use them to type in collection.

50
00:04:31,820 --> 00:04:37,610
And at the collection, I'm going to have another slash and going to type in some numbers, so let's

51
00:04:37,610 --> 00:04:41,390
say six seven seven zero eight zero one.

52
00:04:41,570 --> 00:04:48,500
OK, now as soon as I hit Save and go back actually to our website, hey, there's our first image.

53
00:04:51,380 --> 00:04:59,210
Now, let's keep it this container ship, if you go here to the left, you can close up with the tag.

54
00:04:59,540 --> 00:05:02,620
The opening tag opens and a closed door closes.

55
00:05:02,630 --> 00:05:04,660
So this one time.

56
00:05:04,670 --> 00:05:06,260
So we need to copy it for us.

57
00:05:06,270 --> 00:05:08,990
One, two, three, four.

58
00:05:09,380 --> 00:05:11,360
And we should have now five cards.

59
00:05:13,590 --> 00:05:17,990
You have it five times now do need to change a couple of them.

60
00:05:18,560 --> 00:05:22,620
So what I'm going to do is I'm going to go back up here.

61
00:05:22,640 --> 00:05:23,480
Open it up.

62
00:05:24,080 --> 00:05:27,650
And the first one, I'm going to push it horizontally.

63
00:05:28,680 --> 00:05:30,660
And this just means I'm going to change.

64
00:05:30,780 --> 00:05:36,480
Here is the width and height of the image, so I'm going to change them and to change this to 900 and

65
00:05:36,480 --> 00:05:41,550
this to 1600 is as soon as I did save.

66
00:05:43,080 --> 00:05:49,720
I was at the loading dock and also these images will constantly reload.

67
00:05:49,770 --> 00:05:51,270
They are actually random images.

68
00:05:55,010 --> 00:06:02,120
Okay, let's go down to the next one, going to change this one two eight eight.

69
00:06:03,060 --> 00:06:12,630
Eight zero two seven one and I'm going to leave it as it is, 1600 to 900.

70
00:06:15,190 --> 00:06:21,340
Then let's go down to the first image, and this will have a code of one, two, five.

71
00:06:22,600 --> 00:06:27,830
Then eight zero seven two and the direction will be the same.

72
00:06:27,850 --> 00:06:29,920
Let's go down to the next one.

73
00:06:30,040 --> 00:06:31,690
This was the fourth one.

74
00:06:32,840 --> 00:06:40,460
Now, this will have a code of one free seven, hey, not you, it's one free seven.

75
00:06:42,500 --> 00:06:47,660
Five, six, one, nine, and I'm going to change the direction of this one.

76
00:06:48,410 --> 00:06:50,990
Nine hundred and one thousand six hundred.

77
00:06:52,230 --> 00:06:54,240
And I think that's basically it.

78
00:06:55,770 --> 00:06:57,410
So let me just check it out.

79
00:06:58,330 --> 00:07:04,810
There's a first image, second image now before I get confused, let us actually start these images.

80
00:07:05,870 --> 00:07:13,730
So let's go into our styling, our success finally step in here, main comment, then down here, I'm

81
00:07:13,730 --> 00:07:24,080
going to target a class of card container and we're going to give this a Menwith of three hundred pixels.

82
00:07:24,080 --> 00:07:32,180
And basically what this means is no matter what happens, it will not be smaller than 300 pixels, not

83
00:07:32,210 --> 00:07:33,290
just change the height.

84
00:07:35,360 --> 00:07:44,660
To 100 percent and let's display as flags and the reason I'm going to do this is it was certainly see,

85
00:07:44,690 --> 00:07:48,530
I'm going to be basically having let's go back to normal.

86
00:07:49,220 --> 00:07:50,840
We are having the take this container.

87
00:07:51,140 --> 00:07:55,490
This container has one, two, three items.

88
00:07:56,120 --> 00:08:04,700
So if I want these free items to be one underneath each other, I could use grid and then column.

89
00:08:05,120 --> 00:08:10,800
I'm basically going to use only one column, then sort of see what the difference would be.

90
00:08:11,300 --> 00:08:17,840
So instead of displaying it as flags, which will result and I don't need you anymore, you can actually

91
00:08:17,840 --> 00:08:18,640
close this one.

92
00:08:19,910 --> 00:08:28,640
This flexes in the road, but I'm going to use now, for example, grid and create a template column

93
00:08:29,390 --> 00:08:33,080
of one F.R. only one fraction.

94
00:08:34,990 --> 00:08:43,480
Okay, so this will actually put everything into one column, and I also need to use position relative

95
00:08:43,480 --> 00:08:47,710
because I want to have that rule where you.

96
00:08:48,560 --> 00:08:53,960
So we had this when I'm hovering and I'm actually hovering over a Thai container, then this read more

97
00:08:54,010 --> 00:08:58,490
appears and only when I'm hovering over the read more, the blur effect disappears.

98
00:08:59,550 --> 00:09:08,000
OK, so let us go back to our success and let's continue on by targeting our card container.

99
00:09:09,150 --> 00:09:16,350
Now, I want when I hover over it, to create these are pseudo selecta of before

100
00:09:18,900 --> 00:09:23,280
and as I said, we'll have the cursor effect will position it.

101
00:09:24,710 --> 00:09:28,250
Position they'll go.

102
00:09:29,870 --> 00:09:36,350
Position with absolute the from the content this time, as I said, you can also type in here or this

103
00:09:36,350 --> 00:09:38,550
awaits a string will type in here.

104
00:09:38,560 --> 00:09:39,230
Read more

105
00:09:41,960 --> 00:09:42,770
dot, dot, dot.

106
00:09:43,810 --> 00:09:51,130
They're going to align the text to the centre, so text align line center, so all I need is read more

107
00:09:51,130 --> 00:09:53,030
to Central to see this.

108
00:09:53,050 --> 00:09:53,890
No, not here.

109
00:09:55,250 --> 00:10:00,980
Well, we can see this because it's extremely large, so before I'm going to do this, let me actually

110
00:10:00,980 --> 00:10:09,530
resize the image and let me also finish styling and push this down, finish styling, alcalde itself

111
00:10:11,030 --> 00:10:13,330
and actually going to go up here.

112
00:10:13,340 --> 00:10:17,960
So car title is the first thing I want to start Kadesh title.

113
00:10:22,690 --> 00:10:25,190
And we inserted here font family.

114
00:10:25,660 --> 00:10:33,520
OK, now let's actually use it, so I'm going to go back into Fontana's, into Google funds, and from

115
00:10:33,520 --> 00:10:35,230
here I'm going to select the fund family.

116
00:10:36,100 --> 00:10:39,380
So the title will have the fund family of 50 cents now.

117
00:10:39,400 --> 00:10:46,130
So if and go back to a page, can see the car title change you hate and hover over it.

118
00:10:46,150 --> 00:10:47,980
Those are read more right here.

119
00:10:48,010 --> 00:10:51,620
That's not where we want to position it, but we're going to take care of this very shortly.

120
00:10:52,360 --> 00:10:55,300
So let's start let's finish our car title.

121
00:10:55,540 --> 00:10:57,580
And as I said, the rest of it.

122
00:10:58,330 --> 00:11:02,860
So except the name, the rest of it should have a different font weight.

123
00:11:02,860 --> 00:11:06,640
So let's type in font weight of 100.

124
00:11:07,330 --> 00:11:12,900
And as soon as we do this, you'll see the rest actually only this one shape.

125
00:11:13,150 --> 00:11:19,660
For now, everything will have the 100 font weight and now we can go back in here and give it a bit

126
00:11:19,660 --> 00:11:24,160
of a padding to top and bottom zero point for RAM.

127
00:11:26,880 --> 00:11:28,350
And left and right, Zyra.

128
00:11:29,470 --> 00:11:32,710
OK, next up, we're going to take our current title.

129
00:11:33,940 --> 00:11:44,500
And the stronger tag within it, I'm going to change this font back, so font weight to 600, let's

130
00:11:44,500 --> 00:11:51,960
say, and we're also going to increase the font size to one point seven ram from its initial size.

131
00:11:52,180 --> 00:11:58,840
So let's hit save and let's go back in here and could see our name now has a stronger font.

132
00:11:58,840 --> 00:12:01,190
Size is also larger than the rest of the text.

133
00:12:01,990 --> 00:12:03,940
Nonetheless, we don't want to do the title.

134
00:12:03,970 --> 00:12:08,760
Actually, two things is, first of all, I'm going to take this strong.

135
00:12:09,550 --> 00:12:16,550
So this one again and I want to have a decoration text decoration effect when I hover over it.

136
00:12:16,550 --> 00:12:17,590
So let's see.

137
00:12:17,950 --> 00:12:20,920
Let's say hover when we have a strong element.

138
00:12:23,780 --> 00:12:30,150
The cursor should be pointer and the text declaration should be on the line.

139
00:12:30,960 --> 00:12:37,970
OK, so as soon as we do this, when we have our titles and our editor right here will see the name

140
00:12:38,150 --> 00:12:40,520
has now a text declaration of underlined.

141
00:12:42,070 --> 00:12:42,530
Wickedness.

142
00:12:42,610 --> 00:12:44,830
Let's take care of our subtitles.

143
00:12:46,090 --> 00:12:48,760
So called class of code.

144
00:12:50,840 --> 00:12:52,040
The subtitles.

145
00:12:56,060 --> 00:12:59,000
And within here, going to give it a patty.

146
00:13:00,360 --> 00:13:08,760
Of point, free ram top and bottom and zero left and right, and we're also going to change now the

147
00:13:09,360 --> 00:13:13,680
the text, the text transform to uppercase as soon as we do this.

148
00:13:14,130 --> 00:13:15,980
Let's sit down here, the subtitles.

149
00:13:15,980 --> 00:13:18,930
So all of this would have now a upper case.

150
00:13:19,370 --> 00:13:20,610
I think I forgot something.

151
00:13:20,610 --> 00:13:22,030
I forgot those backslash.

152
00:13:22,080 --> 00:13:24,560
So who knows?

153
00:13:25,530 --> 00:13:26,940
No problem going to fix this.

154
00:13:28,890 --> 00:13:30,790
What is the simplest way to fix this?

155
00:13:30,810 --> 00:13:34,920
I could just go one after another and do this, but I don't want to do that.

156
00:13:35,730 --> 00:13:39,900
So let's go up here where we have our very, very first.

157
00:13:41,160 --> 00:13:41,760
Court.

158
00:13:43,100 --> 00:13:51,040
Going to select this ending tag that I'm going to hold down control or on the Mac command and then press

159
00:13:51,050 --> 00:14:00,320
the then press it, the the the going to jump down to the next one here we have 12 selected.

160
00:14:01,280 --> 00:14:04,000
You still need this to the head.

161
00:14:04,370 --> 00:14:07,070
And I go to press one times.

162
00:14:07,070 --> 00:14:07,640
Right.

163
00:14:09,940 --> 00:14:17,020
Then putting my backslash here, so as soon as I do, this will have this backlash at the end of our

164
00:14:17,020 --> 00:14:19,750
posts, at the end of our subtitles.

165
00:14:22,170 --> 00:14:28,090
So this is taking care of not just go back to our subtitles and our success and let's say let me copy

166
00:14:28,090 --> 00:14:28,620
this again.

167
00:14:29,350 --> 00:14:32,140
Want to take care of my anchor tags within here.

168
00:14:32,140 --> 00:14:39,070
The anchor tags to delete this will have a color of hash.

169
00:14:39,070 --> 00:14:40,180
Seven, seven, seven.

170
00:14:41,250 --> 00:14:42,450
A font wait.

171
00:14:45,180 --> 00:14:53,370
All four hundred, so we're going to increase the fine print and the letter spacing of one pixel again.

172
00:14:53,460 --> 00:14:56,880
So as we see this, the font rate increased.

173
00:14:57,390 --> 00:14:59,250
The also the.

174
00:15:00,480 --> 00:15:05,490
The letter spacing increased and our caller is now great.

175
00:15:07,050 --> 00:15:14,510
Now want also when we hover over them, to have the same effect that we have up here for navigation,

176
00:15:14,520 --> 00:15:22,170
so let's just go and take this and take again so called subtitles and anchor tag.

177
00:15:22,770 --> 00:15:24,450
Let's step in here, Hova.

178
00:15:26,190 --> 00:15:31,900
There at the end of the Hank and Tag hover, and then they hover over it.

179
00:15:31,920 --> 00:15:35,820
We want to change our color to a dark color.

180
00:15:37,450 --> 00:15:42,670
OK, and it's also taking effect now let's take care of the court image.

181
00:15:44,460 --> 00:15:51,780
So down here and the need for court subtitles, we're going to say card and dash image.

182
00:15:54,450 --> 00:15:58,530
And we're going to give it a width of one hundred percent of its container.

183
00:16:00,380 --> 00:16:01,490
And then position it.

184
00:16:02,460 --> 00:16:06,960
Absolutely, and that's, I think, basically for card image.

185
00:16:15,170 --> 00:16:25,400
Oh, course, of course, called I'm wondering why it didn't take effect and we still have something

186
00:16:25,400 --> 00:16:29,860
missing case and how we can go back to our main court container.

187
00:16:30,620 --> 00:16:40,040
And I'm going to leave this in a display grid, but comment about not lets this plate as Fleck's.

188
00:16:41,900 --> 00:16:44,090
Again, to justify the content.

189
00:16:45,130 --> 00:16:54,650
To the center and also align the items to the center and the flex direction should be in a column direction

190
00:16:54,660 --> 00:16:57,100
because Flex Flex is automatically in a row.

191
00:16:57,550 --> 00:17:05,520
And as soon as we do this, this and now that we took care of our images, we can take care of a section.

192
00:17:07,030 --> 00:17:11,310
So the last thing I need to do after we take our section is complete this one.

193
00:17:12,220 --> 00:17:16,410
But I'm still need to to display our images correctly.

194
00:17:16,750 --> 00:17:21,840
So as you can see, these cards are now one to one on the top of each other.

195
00:17:22,180 --> 00:17:27,150
And this is where we're going to take our section and start signing it as a grid section.

196
00:17:27,760 --> 00:17:29,650
So let's take the section tag.

197
00:17:31,030 --> 00:17:32,920
And that's, first of all, displayed as grid.

198
00:17:35,530 --> 00:17:41,980
Now we're going to choose a great time to come as a repeat and we're going to repeat three times one

199
00:17:41,980 --> 00:17:42,670
F r.

200
00:17:45,890 --> 00:17:49,850
And basically what this means, we're going to create three columns now, because you can always see

201
00:17:49,850 --> 00:17:57,470
that your images are starting to take shape now in order to have a bit of a separation, going to also

202
00:17:57,470 --> 00:17:58,580
give them a gap.

203
00:17:58,610 --> 00:18:05,360
So for the roles and columns on one point three, as soon as I do, this will have a separation between

204
00:18:05,360 --> 00:18:08,870
the well, between the columns and between the rows.

205
00:18:08,870 --> 00:18:10,580
We will have it a bit later on.

206
00:18:10,580 --> 00:18:11,390
You will see why.

207
00:18:13,070 --> 00:18:19,970
Now let's start taking our sections, children's section and to select our children, some MS child

208
00:18:20,380 --> 00:18:24,500
going to select the he and child and the first one.

209
00:18:25,460 --> 00:18:28,040
And we're going to place the first one with great column.

210
00:18:30,420 --> 00:18:42,750
From one to three and then row from one to two, I'm going to align the alliance cell to stretch.

211
00:18:45,670 --> 00:18:49,960
OK, as soon as we do this, we'll see our first item is aligned correctly.

212
00:18:52,230 --> 00:18:56,040
So we need to do now is repeat this for each and every child.

213
00:18:56,670 --> 00:18:58,270
We have five children.

214
00:18:58,320 --> 00:19:01,440
Let's take the second one second child.

215
00:19:02,730 --> 00:19:05,010
For child, for child.

216
00:19:08,680 --> 00:19:12,790
And I don't need the fifth child, so the second one.

217
00:19:15,950 --> 00:19:22,940
We're going to stretch it with the first one ended, so on the third column referred search and is going

218
00:19:22,940 --> 00:19:32,240
to spend in the rose from the first to the third and now the third one going to leave it at Callon,

219
00:19:32,240 --> 00:19:33,160
one, two, three.

220
00:19:34,040 --> 00:19:36,710
But we're going to change the rules to two and two.

221
00:19:37,620 --> 00:19:45,480
And the fourth one would be also from one to three, but it's going to span from the rules free to free.

222
00:19:47,690 --> 00:19:50,290
OK, let's save and let's see what happened.

223
00:19:55,400 --> 00:20:04,160
OK, so after that this hour, images should be, well, I correctly now the last thing I want to do

224
00:20:04,160 --> 00:20:07,370
is have are this actually.

225
00:20:09,760 --> 00:20:19,550
Heavy, heavy effect on our current image and what I'm going to do here is have to copy the image itself

226
00:20:19,550 --> 00:20:22,780
so the class and then they have the effect of it.

227
00:20:23,660 --> 00:20:24,820
So we follow it.

228
00:20:24,830 --> 00:20:27,620
I want it to have a crucial appointer.

229
00:20:31,070 --> 00:20:34,850
Just to be thinking, oh, la, la, la, la, OK.

230
00:20:35,010 --> 00:20:38,010
So when I hear it, I want to have it curser appointer.

231
00:20:39,900 --> 00:20:47,100
And then a filter on the field filter.

232
00:20:48,710 --> 00:20:52,120
Of blur, of blur.

233
00:20:54,260 --> 00:20:56,810
And we're going to suggest it to Pixel.

234
00:20:57,250 --> 00:20:58,210
So let's check this out.

235
00:20:58,250 --> 00:21:01,250
Every holiday image, see these two pixel blue?

236
00:21:03,830 --> 00:21:08,810
And now the last thing I want to do is actually I would paste this in.

237
00:21:12,370 --> 00:21:14,140
Yes, that's basically it for our section.

238
00:21:14,320 --> 00:21:20,380
Now, the last thing we need to do is start our Futer and then we're done also make it responsive.

239
00:21:20,390 --> 00:21:22,950
But that would that would be a single video.

240
00:21:23,680 --> 00:21:26,050
So that's it for this one.