1
00:00:00,060 --> 00:00:07,140
OK, so now let's give the styling to our component, which is showing us the recipe name and the recipe

2
00:00:07,140 --> 00:00:07,500
image.

3
00:00:08,220 --> 00:00:14,970
So for that, first of all, I'll need to give the class names to the respective antennas, for example,

4
00:00:14,970 --> 00:00:16,030
the speed tag right now.

5
00:00:16,680 --> 00:00:19,890
So for that, I'll be giving a class name.

6
00:00:21,280 --> 00:00:22,660
The class name would be.

7
00:00:27,370 --> 00:00:34,540
God's name would be baby recipe name, because they're showing the name, so it will be a recipe for

8
00:00:34,540 --> 00:00:36,160
underscoring the school name.

9
00:00:37,360 --> 00:00:44,590
And maybe we can be precipitated because we are men, men convention is being followed, so recipe time

10
00:00:45,610 --> 00:00:48,430
in the school or in the school name on it, right?

11
00:00:49,690 --> 00:00:50,440
Just copy this.

12
00:00:51,490 --> 00:00:53,650
And for the image also, we can give up last name.

13
00:00:55,140 --> 00:01:03,090
That would be class name is equal to the title and misquoting a scornful image.

14
00:01:09,440 --> 00:01:10,100
I mean it.

15
00:01:11,670 --> 00:01:18,000
And we'll go back to the coast where we go back, we've not Little Caesars Palace or first of all,

16
00:01:18,000 --> 00:01:25,800
we have to create the style of CIUSSS inside the city, people who will create the dialogue to see us.

17
00:01:26,950 --> 00:01:30,670
And how do we first of all, we imported this.

18
00:01:32,390 --> 00:01:34,490
Will import import.

19
00:01:37,240 --> 00:01:38,570
Style, see us.

20
00:01:43,430 --> 00:01:49,850
Yeah, it's it's it, and we'll go to the state to assess and we'll start off our styling.

21
00:01:50,300 --> 00:01:53,600
First of all, we'll style the recipe diet.

22
00:01:56,050 --> 00:02:06,800
And the recipe title will give the disclosure to Flex play would be flex and the Flex deduction should

23
00:02:06,800 --> 00:02:07,680
be column right.

24
00:02:08,260 --> 00:02:13,210
Should we call them so flex direction should be column.

25
00:02:14,170 --> 00:02:15,100
Sounds fair enough.

26
00:02:15,850 --> 00:02:18,340
Next, we'll just divide the content to center.

27
00:02:19,250 --> 00:02:21,640
Center should be in the center for the left.

28
00:02:21,640 --> 00:02:21,970
Right.

29
00:02:23,140 --> 00:02:23,950
Bottom top.

30
00:02:23,950 --> 00:02:25,980
Whatever it should be in the center.

31
00:02:26,560 --> 00:02:28,870
Next, a line items should be the center.

32
00:02:30,580 --> 00:02:34,300
And this is the basic thesis of property that you should know.

33
00:02:34,810 --> 00:02:42,860
And whenever I hover over the tile, so it should change from point up from like the pointer to closer,

34
00:02:43,090 --> 00:02:44,880
like the cause of the pointer to whatever it is.

35
00:02:44,890 --> 00:02:46,750
But I'll show you how that works.

36
00:02:47,260 --> 00:02:48,550
I'm confused with the name.

37
00:02:49,240 --> 00:02:49,790
OK.

38
00:02:49,900 --> 00:02:52,870
Pointer and x, David.

39
00:02:54,830 --> 00:02:57,710
And let's go back to where are.

40
00:02:59,280 --> 00:02:59,850
OK.

41
00:03:00,640 --> 00:03:05,490
Who do we have anything we have got to change anything and not?

42
00:03:07,850 --> 00:03:08,870
Recipe dough.

43
00:03:11,020 --> 00:03:12,130
Speed dial.

44
00:03:13,120 --> 00:03:14,710
All right, same thing.

45
00:03:16,250 --> 00:03:16,760
All right.

46
00:03:18,150 --> 00:03:21,870
Let me just go ahead and check if it's working properly.

47
00:03:22,500 --> 00:03:28,020
So now I'll give the class to the image retired.

48
00:03:28,680 --> 00:03:34,560
That's going on the school image and here I'll give it an hide.

49
00:03:35,690 --> 00:03:37,970
Off 200 pixels.

50
00:03:39,720 --> 00:03:42,750
And with off.

51
00:03:43,760 --> 00:03:49,010
Also, 200 pixels to be a perfect square, then object would cover.

52
00:03:50,920 --> 00:03:53,140
Object it be covered.

53
00:03:53,260 --> 00:03:58,270
Now why this we are using object to go, for example, an images big or small.

54
00:03:58,960 --> 00:04:01,960
I don't want it to be like, look different.

55
00:04:02,230 --> 00:04:04,750
They should be all of the same size and same orientation.

56
00:04:05,440 --> 00:04:08,800
That's why I'm doing this and we gave a border radius of.

57
00:04:11,540 --> 00:04:17,840
Already, we saw five pixels, and now let's go ahead and check how this is looking.

58
00:04:18,690 --> 00:04:25,310
So of course, the size has changed and there is also border areas, so that means a CSIS file is properly

59
00:04:25,310 --> 00:04:28,070
aligned and it's working properly.

60
00:04:29,560 --> 00:04:31,510
Let's go back to the we escort.

61
00:04:33,700 --> 00:04:39,000
Now what we'll do is we'll give the last two styling that is for the name.

62
00:04:40,150 --> 00:04:48,310
So but a separate island, a squadron, the school named so for this will give a max width of 200 pixels.

63
00:04:49,940 --> 00:04:50,590
Thanks, Fidel.

64
00:04:51,620 --> 00:04:59,690
Wondered Pixels and can we give text a line of center?

65
00:05:00,770 --> 00:05:02,330
Because we want it to be in center.

66
00:05:02,540 --> 00:05:05,270
And let me save it and see.

67
00:05:09,310 --> 00:05:11,200
Where is my OK?

68
00:05:12,770 --> 00:05:17,870
OK, but I want to give you a little bit of margin to it because it's getting too much closer to the

69
00:05:17,870 --> 00:05:21,260
image, so that's why I want to give a little margin here.

70
00:05:22,100 --> 00:05:25,160
So let's go ahead and give it a margin.

71
00:05:28,780 --> 00:05:29,800
The margin would be.

72
00:05:31,130 --> 00:05:40,190
Margin, soap and water control pixels left and right because we want we don't care about the left and

73
00:05:40,190 --> 00:05:40,490
right.

74
00:05:41,470 --> 00:05:41,980
So.

75
00:05:44,570 --> 00:05:45,800
That's what it is.

76
00:05:45,860 --> 00:05:53,120
Let's go back to the browser and see you can see now it's not like like sitting on them in a letter

77
00:05:53,180 --> 00:05:54,230
to us sitting on them.

78
00:05:54,710 --> 00:05:57,650
But that is a little bit off, Martin now in between.

79
00:05:57,680 --> 00:05:59,320
So it looks insane.

80
00:05:59,330 --> 00:06:01,580
But now let me just close this.

81
00:06:03,070 --> 00:06:08,290
We don't want to like one go along, we want at least two columns, so all that will be done.

82
00:06:09,580 --> 00:06:10,360
So.

83
00:06:11,420 --> 00:06:16,370
It's coming right now in just one column I want to call on, so for that, we need to give styling to

84
00:06:16,370 --> 00:06:20,720
the live in which this entire array is being rendered.

85
00:06:21,200 --> 00:06:23,180
So that isn't in the app just fine.

86
00:06:23,210 --> 00:06:25,940
So for that, I need to go to the app drawer just finally.

87
00:06:27,400 --> 00:06:29,590
So let's go to the gorgeous file.

88
00:06:32,100 --> 00:06:39,420
But we need to go to the airport this where they were situated, so that move in and be part of my hope

89
00:06:39,420 --> 00:06:39,660
so.

90
00:06:41,420 --> 00:06:45,980
OK, there's this stupid idea for that, we'll give it a class name.

91
00:06:47,700 --> 00:06:49,860
Last name and will be.

92
00:06:52,660 --> 00:06:57,040
Something guarded as, of course, because it's in the app component.

93
00:06:58,140 --> 00:06:59,190
Recipes.

94
00:07:00,940 --> 00:07:01,930
Let me save it.

95
00:07:03,350 --> 00:07:14,540
And go to the other side and at the bottom, I'll create the styling for this, so that would start

96
00:07:14,900 --> 00:07:18,060
with the class name of app.

97
00:07:19,410 --> 00:07:24,540
Some make up and then the recipes.

98
00:07:25,920 --> 00:07:31,410
So now we want to give, first of all, we want to give it a margin because it's getting there.

99
00:07:31,590 --> 00:07:33,030
Let me show you where it's getting.

100
00:07:34,170 --> 00:07:41,700
Getting a little closer to that means we need to give and we want to displayed in a grid so that we

101
00:07:41,700 --> 00:07:42,720
need to give and.

102
00:07:44,240 --> 00:07:45,470
That's what we call OK.

103
00:07:45,500 --> 00:07:49,990
There should be columns and a line, and then the item should be and the basement.

104
00:07:50,710 --> 00:07:55,250
So I just told, you know, let me assure you and execute.

105
00:07:55,340 --> 00:08:00,010
So you'll have a clear picture of what I'm trying to see right now, which.

106
00:08:00,580 --> 00:08:05,000
So now what do you want to give is that we can provide a space here.

107
00:08:05,250 --> 00:08:05,630
OK.

108
00:08:06,080 --> 00:08:06,800
Looks cleaner.

109
00:08:07,400 --> 00:08:09,170
OK, so what do you want to do?

110
00:08:09,170 --> 00:08:10,640
Is we want to give a modern top.

111
00:08:11,830 --> 00:08:16,450
Margin top of 20 or evil pixels, maybe that'll work.

112
00:08:17,260 --> 00:08:19,570
OK, let me see then just go back.

113
00:08:20,470 --> 00:08:23,920
Now you can see it's a little like there's a room, there's room.

114
00:08:24,430 --> 00:08:26,950
OK, OK, OK, now let's go back.

115
00:08:29,250 --> 00:08:32,510
And let me provide display grade.

116
00:08:32,970 --> 00:08:40,500
This is the most important part because we wanted to in the form of it, so let me say it and let me

117
00:08:40,500 --> 00:08:41,160
just check.

118
00:08:44,070 --> 00:08:45,060
Nothing happened.

119
00:08:45,390 --> 00:08:45,910
OK.

120
00:08:45,930 --> 00:08:49,020
I don't know why, but we'll take a look.

121
00:08:49,260 --> 00:08:54,660
Now we want to take the grid and we want to provide it into the columns.

122
00:08:54,690 --> 00:08:56,430
Now I got why nothing happened.

123
00:08:57,840 --> 00:08:59,850
Grid template pylons.

124
00:09:00,430 --> 00:09:04,500
And that would be, I guess, 20 2020 pixels.

125
00:09:04,500 --> 00:09:06,130
20 pixels each.

126
00:09:07,290 --> 00:09:09,450
When are you going to expose each?

127
00:09:10,260 --> 00:09:14,370
Let me just save it, and now I hope that works.

128
00:09:14,640 --> 00:09:20,790
Yeah, we got two columns and then the images are in that columns.

129
00:09:21,210 --> 00:09:22,170
That's pretty cool.

130
00:09:23,460 --> 00:09:23,910
And.

131
00:09:25,520 --> 00:09:33,440
One more thing I notice here is that, like, this image is bigger than this, so there is a little

132
00:09:34,070 --> 00:09:38,150
misalignment there should be, they should be aligned in like in a line.

133
00:09:38,790 --> 00:09:44,570
So for that, we can provide us the best class of theses attribute that would be.

134
00:09:46,550 --> 00:09:51,050
Line items in the baseline, so a line items base line.

135
00:09:51,920 --> 00:09:58,490
Now when we go to the browser and check that same image, the still that is little.

136
00:09:58,580 --> 00:10:04,310
I think this is because of the name, because its name is a little big, little bigger than that.

137
00:10:04,840 --> 00:10:06,380
So that's why this is happening.

138
00:10:09,790 --> 00:10:11,350
Now we'll provide this.

139
00:10:15,690 --> 00:10:19,620
We provide the name at the bottom of the image, it does not look good at the top.

140
00:10:21,170 --> 00:10:22,820
Let me bring it down.

141
00:10:24,030 --> 00:10:25,050
And let me save it.

142
00:10:26,430 --> 00:10:32,900
And go back to the browser, and now it looks cold now.

143
00:10:33,570 --> 00:10:39,780
The baseline problem is also solved now that in like one alignment, there is no this alignment.

144
00:10:44,350 --> 00:10:47,660
Now you can see that some images are not being loaded, loaded.

145
00:10:47,720 --> 00:10:49,820
So what is the reason for it?

146
00:10:51,670 --> 00:10:58,750
So the images are in a different format, like the images, which can be loaded, maybe JPG, JPEG and

147
00:10:58,750 --> 00:11:02,870
GIF and PNG, but these images are hard enough.

148
00:11:03,460 --> 00:11:06,600
And as you probably saw.

149
00:11:06,700 --> 00:11:07,120
Yeah.

150
00:11:07,800 --> 00:11:09,400
Yeah, exactly.

151
00:11:09,730 --> 00:11:16,000
So what we need to do is we need to provide a filter which will just show us the images which are in

152
00:11:16,000 --> 00:11:18,700
the jpg format or unexpected formats.

153
00:11:19,060 --> 00:11:20,920
We don't want as we or something like that.

154
00:11:21,790 --> 00:11:24,910
So for that, we'll use a click so and a concept.

155
00:11:25,210 --> 00:11:28,570
You will learn a new concept so that the concept will see in the next video.