1
00:00:00,610 --> 00:00:09,310
OK, so let me provide some hover properties or hold styling to this particular button, little button

2
00:00:09,970 --> 00:00:17,350
for that, I have to write them Glasby the third button and then I have to provide a colon and we'll

3
00:00:17,350 --> 00:00:18,370
right over.

4
00:00:18,670 --> 00:00:19,000
OK.

5
00:00:19,540 --> 00:00:24,850
So what it does is apply the styling, which which is which you'll write inside, so that styling will

6
00:00:24,850 --> 00:00:29,810
be applied whenever we like, bring out a console to it and we hover over it.

7
00:00:29,810 --> 00:00:30,100
So.

8
00:00:31,140 --> 00:00:32,610
The background will be.

9
00:00:33,640 --> 00:00:35,380
This to see and on.

10
00:00:37,010 --> 00:00:40,040
This is called exactly this one.

11
00:00:40,920 --> 00:00:46,020
And the color would be white as simple as that, like the color would be interchanged.

12
00:00:46,320 --> 00:00:49,590
To be more precise, the color would be interchanged.

13
00:00:49,880 --> 00:00:51,430
And I hope the server is running.

14
00:00:51,450 --> 00:00:52,680
Yeah, so it was running.

15
00:00:53,250 --> 00:00:56,160
So let me just show you how this will look.

16
00:00:58,310 --> 00:01:03,560
See, whenever I hover over it, so the colors are entertaining, basically right now, the text color

17
00:01:03,560 --> 00:01:07,520
is this purple type of text color and the background is white.

18
00:01:07,880 --> 00:01:12,780
But when I bring my closer towards it, the color becomes white and the background becomes this lilac

19
00:01:13,160 --> 00:01:13,360
red.

20
00:01:14,660 --> 00:01:15,370
That looks cool.

21
00:01:16,230 --> 00:01:20,620
OK, so now we'll do the rest of the work, then we are done with the other components.

22
00:01:21,250 --> 00:01:28,360
So now what we'll do is we'll create another component which is going to contain all ofyour like the

23
00:01:28,360 --> 00:01:36,970
dishes and photos, images and title and the price and the description and everything that we're going

24
00:01:36,970 --> 00:01:37,600
to create now.

25
00:01:38,080 --> 00:01:42,970
So for that, first of all, we'll have to create a component and that component would be managed or

26
00:01:42,970 --> 00:01:43,450
this.

27
00:01:45,020 --> 00:01:51,290
My new door and here what we do is we use our trick to get the boilerplate code, so the boilerplate

28
00:01:51,290 --> 00:01:56,000
code comes here, so that boilerplate code is Odyssey.

29
00:01:56,000 --> 00:01:57,230
See, not this.

30
00:01:58,360 --> 00:01:59,320
Order, see?

31
00:02:00,370 --> 00:02:00,660
Yeah.

32
00:02:01,180 --> 00:02:01,480
So.

33
00:02:02,880 --> 00:02:10,830
Now inside this, we'll have our live and that they will have a last name and insert that there will

34
00:02:10,840 --> 00:02:12,660
be some things to.

35
00:02:13,710 --> 00:02:17,880
First of all, let me just give this to a class name of.

36
00:02:20,140 --> 00:02:21,970
Class name of.

37
00:02:24,030 --> 00:02:26,040
S. and.

38
00:02:27,070 --> 00:02:28,090
Election Center.

39
00:02:29,780 --> 00:02:30,140
OK.

40
00:02:30,530 --> 00:02:39,590
And inside this cave, that would be the 10th and third day we'll have article article.

41
00:02:40,580 --> 00:02:51,140
And the article that would be an image and that it would be the information about the dish regarding

42
00:02:51,140 --> 00:02:57,770
the title, the prize and everything else will just right that right now will just create a structure,

43
00:02:57,770 --> 00:03:01,010
the styling in the data and everything that will do later on.

44
00:03:01,280 --> 00:03:01,550
Right.

45
00:03:02,150 --> 00:03:02,570
So.

46
00:03:03,890 --> 00:03:05,240
That that will do in a minute.

47
00:03:05,270 --> 00:03:14,210
OK, so let us know in the article, what we'll do is we'll create an image tag image and the source

48
00:03:14,210 --> 00:03:15,920
will be there and I will be there.

49
00:03:15,920 --> 00:03:21,140
But first of all, there does grab the little, then we'll do all of this stuff.

50
00:03:21,140 --> 00:03:23,510
OK, so here will ride the class name.

51
00:03:25,800 --> 00:03:28,950
And the class name for this is I came up with photo.

52
00:03:30,080 --> 00:03:37,220
And inside this, there will be a day of class name as.

53
00:03:38,330 --> 00:03:39,170
Item in full.

54
00:03:42,430 --> 00:03:46,330
Item info and inside the item in full.

55
00:03:47,490 --> 00:03:51,660
We have to raise the title and everything else.

56
00:03:52,290 --> 00:03:53,730
Go ahead, we'll have our hair done.

57
00:03:55,670 --> 00:04:02,270
I don't OK, inside the hotel will have an edge forward and that each food will have the title, for

58
00:04:02,270 --> 00:04:08,810
example, any dish right now, I'm just I think this is a title.

59
00:04:09,320 --> 00:04:13,760
And after the food, we'll have the.

60
00:04:14,940 --> 00:04:21,300
Rise, so that will also be in the report only, so there could be a truth and that will be price.

61
00:04:21,300 --> 00:04:26,220
So if we paste the rupee symbol here and.

62
00:04:28,080 --> 00:04:29,430
For example, 180.

63
00:04:31,400 --> 00:04:37,830
And after that, we'll have the description go after the head-to-toe, we'll have a beat egg so that

64
00:04:37,830 --> 00:04:41,150
Peter will have the description and it will be.

65
00:04:41,160 --> 00:04:43,160
This is.

66
00:04:44,330 --> 00:04:49,610
This is a very good dish.

67
00:04:49,790 --> 00:04:50,090
OK.

68
00:04:50,780 --> 00:04:56,570
And we can provide the class name for this as well, but that will be.

69
00:04:58,460 --> 00:04:59,900
Broken Glass name.

70
00:05:01,020 --> 00:05:02,970
As item text.

71
00:05:09,360 --> 00:05:09,730
All right.

72
00:05:10,260 --> 00:05:10,860
So.

73
00:05:12,070 --> 00:05:13,860
I think that's enough for now.

74
00:05:14,300 --> 00:05:17,080
But now we have to provide some CSIS for it.

75
00:05:17,710 --> 00:05:24,370
And before that, let me just imported inside on that component and see that spending properly or not.

76
00:05:24,370 --> 00:05:26,470
So below the category will import this.

77
00:05:27,160 --> 00:05:28,240
William Porter.

78
00:05:30,650 --> 00:05:31,220
Menu.

79
00:05:33,520 --> 00:05:35,320
It should give an option to our transport.

80
00:05:36,950 --> 00:05:37,920
I don't see that.

81
00:05:37,940 --> 00:05:39,080
Oh, yeah, I see that.

82
00:05:39,950 --> 00:05:44,420
You see that autumn portrait for now, and then we see it.

83
00:05:45,290 --> 00:05:49,670
And once we save it, the first thing we do is we go back to the browser and check.

84
00:05:50,750 --> 00:05:56,210
There this title that is, it'll be symbol in the amount, and that is that description.

85
00:05:56,540 --> 00:06:01,920
The only thing which is missing here is the image, but that also will get there.

86
00:06:02,180 --> 00:06:06,680
We'll get when we like better data on like the no need to worry about that.

87
00:06:08,020 --> 00:06:11,500
OK, so now let's provide some CSIS to that menu component.

88
00:06:12,290 --> 00:06:19,750
Before that, we need to go to the next door to CSIS, and here we need to provide the CSIS to the specified

89
00:06:20,890 --> 00:06:22,720
last names which we have provided.

90
00:06:22,940 --> 00:06:26,980
So first of all, we will select the section center.

91
00:06:28,840 --> 00:06:30,070
Targets for the.

92
00:06:31,800 --> 00:06:32,510
And the.

93
00:06:34,440 --> 00:06:40,080
And I like inside the sections, and what we'll do is we'll provide a with.

94
00:06:41,890 --> 00:06:43,330
With of 90.

95
00:06:44,610 --> 00:06:55,950
Be it or we know what is VW, VW is basically this is not a static with that will adapt.

96
00:06:55,950 --> 00:06:58,360
It sells according to the resolution of the screen.

97
00:06:58,360 --> 00:07:05,150
990 VW leave it at means view with VW means we will with.

98
00:07:05,880 --> 00:07:12,000
So whatever the resolution of the screen is, whatever the width of the screen is to retake the 90 percent

99
00:07:12,000 --> 00:07:12,570
of the screen.

100
00:07:12,570 --> 00:07:17,130
As simple as that, if you put Pixel here, the Pixel is a static thing.

101
00:07:17,130 --> 00:07:20,670
It will be the same on the mobile, on the laptop, on the next top everywhere.

102
00:07:20,880 --> 00:07:29,130
But VW or the view with an ITV in view with that is that 90 percent of the total weight, so that is

103
00:07:29,130 --> 00:07:30,360
more convenient to use.

104
00:07:30,660 --> 00:07:31,010
All right.

105
00:07:31,020 --> 00:07:32,910
So that's why I'm writing VW.

106
00:07:33,000 --> 00:07:33,330
All right.

107
00:07:33,840 --> 00:07:37,740
So that the view with next, I'll be giving our margin.

108
00:07:37,980 --> 00:07:42,060
So that margin for top and bottom, that will be zero and four left and right.

109
00:07:42,060 --> 00:07:42,900
That will be part of.

110
00:07:44,450 --> 00:07:45,230
Autoimmune sequel.

111
00:07:46,190 --> 00:07:52,580
And next, we'll see it and see if the changes are being rendered or not.

112
00:07:53,610 --> 00:07:58,170
So right now, I don't see anything as off for the South.

113
00:07:58,200 --> 00:08:02,490
There's no difference, but we'll make a difference.

114
00:08:03,420 --> 00:08:10,470
So after the margin, what we'll do is we'll provide a maximum bid for the bid.

115
00:08:14,730 --> 00:08:16,100
OK, why this not?

116
00:08:17,720 --> 00:08:18,560
Max with.

117
00:08:20,770 --> 00:08:21,970
Next with of.

118
00:08:24,000 --> 00:08:30,480
I don't know, but I came up with this and this was working, so that is one one seven zero pixels and.

119
00:08:32,140 --> 00:08:33,280
The display will be great.

120
00:08:33,460 --> 00:08:39,460
Now we are not using Flexbox here because that is generally used in the narrowbodies and all there we

121
00:08:39,460 --> 00:08:45,610
are giving kind of tables and we want to order the data in the grid form.

122
00:08:45,940 --> 00:08:51,370
That's why we are using don't display grid property here and not the Flexbox that are difference.

123
00:08:51,790 --> 00:09:00,340
And if you want to, I can even show you because if you use the grid so things will go in the in the

124
00:09:00,340 --> 00:09:01,830
real fashion, in the room.

125
00:09:01,840 --> 00:09:04,090
And if you use Flexbox.

126
00:09:04,240 --> 00:09:05,650
No, sorry, I was wrong.

127
00:09:06,080 --> 00:09:09,820
If you use, the great things will go in the column fashion, you know?

128
00:09:10,120 --> 00:09:14,710
And if you use the Flexbox, things will go in the narrow fashion.

129
00:09:15,310 --> 00:09:17,780
So it's hard to understand by the theory.

130
00:09:17,800 --> 00:09:20,920
Let me just explain the example.

131
00:09:20,980 --> 00:09:23,110
OK, so I'll write Greg.

132
00:09:24,430 --> 00:09:24,970
And.

133
00:09:26,220 --> 00:09:28,110
I'll see I'll just.

134
00:09:29,640 --> 00:09:30,720
See to the browser.

135
00:09:33,440 --> 00:09:35,630
Nothing is assumed because there is only one.

136
00:09:38,390 --> 00:09:40,730
Florida, as of now, one base as of now.

137
00:09:41,090 --> 00:09:46,220
OK, now the gap now what is this gap in the grid format?

138
00:09:46,490 --> 00:09:54,260
There is a lot that a lot of like cards to walk through the gap between those cards that is specified

139
00:09:54,260 --> 00:09:54,740
with that.

140
00:09:54,870 --> 00:09:58,910
So for top and bottom, that would be three RDM.

141
00:09:59,780 --> 00:10:02,090
Again, I already explained what this idea.

142
00:10:03,880 --> 00:10:06,340
And for left and right, that would be tourism.

143
00:10:08,200 --> 00:10:08,590
All right.

144
00:10:09,160 --> 00:10:19,600
And the last thing which we do is just justify items justified, not content, not content to justify.

145
00:10:21,220 --> 00:10:29,140
Items and that would be said, look good now is seaweed and fecal back.

146
00:10:30,100 --> 00:10:36,820
You can see this has come in the center, and that is some styling, but there is no photo on that image

147
00:10:36,910 --> 00:10:37,430
right now.

148
00:10:37,570 --> 00:10:41,590
That's why you are not able to see properly like what is the thing here?

149
00:10:42,250 --> 00:10:49,810
But once we render that once you've tested the data from us toward energy and once we like it, then

150
00:10:49,810 --> 00:10:51,370
that would be quite good.

151
00:10:52,350 --> 00:10:53,790
OK, so.

152
00:10:54,980 --> 00:10:57,140
Let's now do something more.

153
00:10:57,200 --> 00:11:03,620
So let's go to the menu item and it will provide the class name of.

154
00:11:05,670 --> 00:11:06,270
Menu.

155
00:11:07,530 --> 00:11:12,210
Item, not item and inside this, there would be.

156
00:11:13,850 --> 00:11:15,410
Again, display of great.

157
00:11:18,730 --> 00:11:25,450
Display grid, and that would be a gap, and the gap would be of one out in.

158
00:11:26,980 --> 00:11:34,390
For the top and bottom and tourism for the left and right, as simple as that, I'm the max would would

159
00:11:34,390 --> 00:11:35,950
be really five a.m..

160
00:11:38,330 --> 00:11:39,500
And then when I save it.

161
00:11:40,400 --> 00:11:49,850
And I see here so the things are not changing because because of our auto, so.

162
00:11:51,000 --> 00:11:53,400
I think I need to grab one photo and see.

163
00:11:54,030 --> 00:11:58,410
OK, so let me go to the category, not the category, the menu, and let me grab one for two for the

164
00:11:58,410 --> 00:11:59,280
sake of testing.

165
00:11:59,820 --> 00:12:03,570
Import photo from.

166
00:12:06,340 --> 00:12:06,910
From.

167
00:12:08,130 --> 00:12:14,130
The public feel that we have created the images were so bad, they are, so I need to go out of this

168
00:12:14,130 --> 00:12:17,480
folder, then I need to go to the public folder.

169
00:12:17,490 --> 00:12:18,900
Oh my God, what I did.

170
00:12:20,910 --> 00:12:26,970
I need to go to the public folder and inside the public folder that is our images folder, inside the

171
00:12:26,970 --> 00:12:27,480
images.

172
00:12:28,410 --> 00:12:33,810
I'll go with the item one item, one Dart GP.

173
00:12:36,120 --> 00:12:40,700
JPEG when I see it and just render it inside.

174
00:12:41,950 --> 00:12:42,450
Boards.

175
00:12:44,670 --> 00:12:46,130
So that will be photo.

176
00:12:47,590 --> 00:12:48,850
And that is.

177
00:12:50,120 --> 00:12:55,010
Although and when I say it and when I go back to my browser.

178
00:12:56,550 --> 00:12:59,090
OK, so that is it.

179
00:12:59,250 --> 00:13:00,510
Let me just refresh.

180
00:13:04,870 --> 00:13:12,430
OK, OK, OK, OK, so the thing is, are folders out of the school, it seems.

181
00:13:13,270 --> 00:13:14,590
And why is that happening?

182
00:13:15,020 --> 00:13:23,380
Basically, it's saying that you cannot import anything from outside the for because that's the public

183
00:13:23,380 --> 00:13:31,720
policy and the imports from outside of the source are not supported, telling me that we can create

184
00:13:31,720 --> 00:13:35,140
any folder inside the SABC folder and we can do.

185
00:13:36,560 --> 00:13:38,900
So that's not the issue here.

186
00:13:39,470 --> 00:13:44,660
And eventually, when we when we create the detailed audio file, so there will be importing all of

187
00:13:44,660 --> 00:13:47,000
that so that it's not like, that's not a big issue, OK?

188
00:13:47,720 --> 00:13:48,200
So.

189
00:13:49,350 --> 00:13:52,790
Or I can just see it and the folder here.

190
00:13:54,480 --> 00:14:00,300
And all that can just to please this immediate right and then majors, if I can just copy it.

191
00:14:01,330 --> 00:14:03,550
And I can just paste it inside this.

192
00:14:05,150 --> 00:14:06,070
Can just be strip.

193
00:14:07,350 --> 00:14:14,340
So it gave me and now let me just grab that image, OK, I'm sorry that the screen was stuck.

194
00:14:14,340 --> 00:14:15,030
I'm really sorry.

195
00:14:15,420 --> 00:14:22,020
You can see now what I did is I copied the image from here and I started inside that article because

196
00:14:22,020 --> 00:14:23,940
it was telling us that it's not supported.

197
00:14:24,480 --> 00:14:26,950
OK, so I copied it inside the outside.

198
00:14:26,970 --> 00:14:30,330
See, and now let me just go hard.

199
00:14:33,480 --> 00:14:33,780
And.

200
00:14:35,240 --> 00:14:36,740
He starts working.

201
00:14:41,720 --> 00:14:45,440
And let me see if we see the image.

202
00:14:46,220 --> 00:14:52,010
But the thing is, we have not provided any styling to the image, so we do that in a moment.

203
00:14:52,950 --> 00:15:00,060
Well, for that, we need to work on this last name, which is the photo before the photo will give,

204
00:15:00,060 --> 00:15:04,980
the styling is styling and all who will do that in the next video.