1 00:00:00,450 --> 00:00:03,450 Focusing on let's go ahead and give the styling to our image. 2 00:00:03,660 --> 00:00:06,030 So what is the class name for our image? 3 00:00:06,600 --> 00:00:09,360 And that is the photo. 4 00:00:10,120 --> 00:00:17,040 The class name for their image is so let's go ahead and style or image or that we need to write photo 5 00:00:17,040 --> 00:00:18,840 here and inside. 6 00:00:18,840 --> 00:00:21,390 The photo will give the CST to it. 7 00:00:22,020 --> 00:00:28,950 So we'll be adding, first of all, object fit to cover, object to cover. 8 00:00:29,250 --> 00:00:30,630 And let me save it. 9 00:00:31,020 --> 00:00:32,220 Let me see if the photo is running. 10 00:00:32,460 --> 00:00:33,130 No, it's not. 11 00:00:33,160 --> 00:00:35,430 So let me start and start. 12 00:00:37,800 --> 00:00:40,890 This will start off the server and then later we're starting. 13 00:00:40,890 --> 00:00:42,300 Let us write some more slices. 14 00:00:42,840 --> 00:00:50,130 So what we'll do is we'll give our height and weight to our image so that that will be a particular 15 00:00:50,130 --> 00:00:53,520 height and weight to add image. 16 00:00:54,090 --> 00:00:55,410 So that will be giving. 17 00:00:55,410 --> 00:00:56,520 So we'll give. 18 00:00:58,140 --> 00:00:59,670 Let's zoom in on this. 19 00:00:59,880 --> 00:01:00,720 OK, we'll give. 20 00:01:03,930 --> 00:01:08,790 Height and height will be of 200 pixels at a pixel. 21 00:01:09,060 --> 00:01:11,490 Then let's go to the bar browser and check. 22 00:01:13,220 --> 00:01:13,730 So. 23 00:01:15,370 --> 00:01:17,590 This is the browser, but let me rephrase this. 24 00:01:19,360 --> 00:01:24,220 And object the color we have given, but so far, nothing has happened. 25 00:01:24,790 --> 00:01:25,900 No problem with that. 26 00:01:26,320 --> 00:01:30,760 We will give a height of 200 pixels and will give a width of. 27 00:01:32,980 --> 00:01:34,150 100 percent. 28 00:01:37,200 --> 00:01:38,040 One hundred percent. 29 00:01:38,610 --> 00:01:44,960 And then we'll give a border, all four border of point --. 30 00:01:45,510 --> 00:01:47,190 And I will give the border. 31 00:01:48,630 --> 00:01:49,230 Of. 32 00:01:50,590 --> 00:01:58,210 Me first trade partner and the border would be a point two, five, eight a.m. to five. 33 00:01:59,320 --> 00:02:03,100 RDM, not 2.2, five, it's 0.2, five. 34 00:02:04,190 --> 00:02:16,070 And then it will be a doctored border, or you can live with the solid only solid border and the color 35 00:02:16,070 --> 00:02:16,490 will be. 36 00:02:18,030 --> 00:02:18,420 This. 37 00:02:19,970 --> 00:02:24,290 This tax code, so I guess it's not taking it. 38 00:02:25,460 --> 00:02:27,410 Out to sea to sea. 39 00:02:27,800 --> 00:02:28,790 No, not this one. 40 00:02:29,450 --> 00:02:31,080 This one two three two eight nine one. 41 00:02:31,120 --> 00:02:38,270 OK, so this will be the color of the border and the next will be having a border radius and border 42 00:02:38,270 --> 00:02:40,370 radius will be. 43 00:02:41,630 --> 00:02:45,980 Variable and that will be a finite of radius. 44 00:02:46,000 --> 00:02:46,300 OK. 45 00:02:47,410 --> 00:02:51,790 And you're going to display it in a blog display. 46 00:02:52,880 --> 00:02:55,550 Block and now let me just save it. 47 00:02:55,820 --> 00:02:58,970 And now if I go to the browser. 48 00:03:00,560 --> 00:03:05,420 Now you can see the images looking quite beautiful, I guess, compared to the previous one. 49 00:03:05,930 --> 00:03:06,860 It's looking quite good. 50 00:03:07,250 --> 00:03:09,370 OK, so this is how it's looking. 51 00:03:09,380 --> 00:03:15,350 And now let's give the styling to this like the in4 and. 52 00:03:17,230 --> 00:03:19,390 There's everything, all the water, whether text to a scene. 53 00:03:19,480 --> 00:03:24,190 So let me just give some styling to that too. 54 00:03:24,280 --> 00:03:37,630 After this and keep the styling and I'll take the class name of item item item and in full and. 55 00:03:38,790 --> 00:03:39,270 Ed? 56 00:03:40,180 --> 00:03:44,590 And then it would come inside this inside the heart of that will be display flags. 57 00:03:47,200 --> 00:03:54,070 Flex and Wheeler justified the content as the space between Justify. 58 00:03:55,660 --> 00:03:56,230 Content. 59 00:03:58,320 --> 00:04:01,890 Justified content and there will be space between. 60 00:04:03,300 --> 00:04:03,780 This one. 61 00:04:04,810 --> 00:04:05,350 And. 62 00:04:07,260 --> 00:04:17,610 Then when you give the board the bottom of the the bottom, that will be of 0.5 0.5 pixel and that would 63 00:04:17,610 --> 00:04:26,940 be a doctored border, and the color will be from the colors which we have declared already. 64 00:04:27,900 --> 00:04:31,620 The law and the gray five will not agree. 65 00:04:32,220 --> 00:04:33,510 So this will be the color for it. 66 00:04:34,170 --> 00:04:39,360 And let me just save it and let me go to the browser. 67 00:04:40,260 --> 00:04:40,680 See? 68 00:04:42,460 --> 00:04:44,890 OK, we can see that is this the dotted border? 69 00:04:45,760 --> 00:04:53,410 So that is from this only the headline on, OK, so next we'll give some styling to the. 70 00:04:54,830 --> 00:04:56,810 Info like the description, OK? 71 00:04:57,290 --> 00:05:01,190 A further description will give item info. 72 00:05:02,460 --> 00:05:03,060 And. 73 00:05:05,820 --> 00:05:15,030 But there's also the head there, OK, next, we'll give to the info item in full and that will with 74 00:05:15,030 --> 00:05:17,990 each forward and start. 75 00:05:18,000 --> 00:05:19,290 This will give margin. 76 00:05:21,050 --> 00:05:28,010 Margin, bottom margin, the margin bottom of four point five odium. 77 00:05:29,430 --> 00:05:34,920 Not five, zero point five RDM and. 78 00:05:37,000 --> 00:05:39,690 So the item we have given this. 79 00:05:39,960 --> 00:05:48,390 Now we'll also style the price or the price will be the price will be the color. 80 00:05:50,680 --> 00:05:52,000 Color off, see? 81 00:05:52,720 --> 00:06:03,040 We'll see you at nine one and then I save it, and when I go to the browser and isn't able to refresh. 82 00:06:04,150 --> 00:06:05,350 There are some changes now. 83 00:06:05,770 --> 00:06:11,050 The bright color, as we do in this color has been changed, so that is what we have done right now. 84 00:06:11,650 --> 00:06:13,720 Who will do that next to? 85 00:06:15,070 --> 00:06:25,210 Will tune the item taxed, and the item taxes is basically let's just see that glass and the menu item 86 00:06:25,210 --> 00:06:31,420 text is basically this the paragraph which is containing the description of the dish, OK, that will 87 00:06:31,420 --> 00:06:36,910 be installing the phone and now will give the item text. 88 00:06:37,660 --> 00:06:38,320 Item. 89 00:06:40,170 --> 00:06:40,800 Next. 90 00:06:43,210 --> 00:06:48,130 Inside item text will give the margin bottom. 91 00:06:49,400 --> 00:06:52,250 You know, and will give the Paddington. 92 00:06:54,530 --> 00:06:59,930 Batting top of one idea, and we'll save it. 93 00:07:01,240 --> 00:07:03,460 And then we'll go to the browser. 94 00:07:05,840 --> 00:07:09,200 And let me see that is being rendered. 95 00:07:11,550 --> 00:07:13,170 Now there is a border. 96 00:07:13,440 --> 00:07:16,200 What if I commend it and see? 97 00:07:17,910 --> 00:07:19,650 That is being rendered or not. 98 00:07:25,070 --> 00:07:30,260 So that is being rendered basically and sorry for the coughing and that's being rendered. 99 00:07:30,380 --> 00:07:35,900 And when I give the styling for, let me see it. 100 00:07:37,260 --> 00:07:38,910 You can see it now, and this has become known. 101 00:07:38,950 --> 00:07:41,690 OK, so that was it for this. 102 00:07:42,570 --> 00:07:45,180 It's going to sit in on for next. 103 00:07:45,190 --> 00:07:47,100 We can even give some styling to. 104 00:07:48,570 --> 00:07:51,440 Would like to make this responsive on other devices. 105 00:07:51,520 --> 00:08:00,670 OK, so menu item, we've already this, we've displayed it, but we'll make it a little like mobile 106 00:08:00,670 --> 00:08:04,390 friendly right now because when you go to this. 107 00:08:06,290 --> 00:08:06,950 Things are. 108 00:08:09,320 --> 00:08:16,920 Things are OK, but we want to, like, provide some more styling to it and when things come to the 109 00:08:16,940 --> 00:08:19,080 mobile view, because even if I. 110 00:08:19,490 --> 00:08:21,350 Let me just show you what I'm trying to say. 111 00:08:21,980 --> 00:08:22,940 The menu item? 112 00:08:24,410 --> 00:08:34,190 If I just copy this article and if I just make two copies of that, OK, now if I come here. 113 00:08:35,770 --> 00:08:36,490 You fresh? 114 00:08:38,750 --> 00:08:39,160 Rudy. 115 00:08:40,260 --> 00:08:41,070 So you can see. 116 00:08:42,540 --> 00:08:44,490 I know it's coming in one line, OK? 117 00:08:45,030 --> 00:08:50,850 When I do this, they're just coming online, but I want things to be like one, two, three and then 118 00:08:51,030 --> 00:08:52,830 another one and another one. 119 00:08:53,250 --> 00:08:59,250 So that I want to let me just first and do whatever I've done. 120 00:09:00,510 --> 00:09:02,040 Yeah, that was good. 121 00:09:02,820 --> 00:09:04,050 And, yeah. 122 00:09:04,930 --> 00:09:08,050 So that will add now, OK. 123 00:09:08,350 --> 00:09:08,830 So. 124 00:09:12,030 --> 00:09:20,310 And here we will do that, and we'll write media goodies for that, and because things are looking good 125 00:09:20,310 --> 00:09:22,500 on the mobile view, they are in great form. 126 00:09:23,010 --> 00:09:26,610 But we want them to be OK in the next job. 127 00:09:26,610 --> 00:09:27,060 You are right. 128 00:09:27,570 --> 00:09:28,680 So media screen. 129 00:09:29,850 --> 00:09:30,690 And. 130 00:09:32,720 --> 00:09:34,130 Media screen. 131 00:09:35,410 --> 00:09:38,620 And that decision will come in with. 132 00:09:41,880 --> 00:09:42,810 I mean, with. 133 00:09:43,970 --> 00:09:50,540 And that would be of 768 pixel, 768 pixels. 134 00:09:50,810 --> 00:09:51,170 All right. 135 00:09:51,710 --> 00:09:56,810 So media screen and I mean, with the 168 pixels left. 136 00:09:57,530 --> 00:10:07,190 So then in the menu item, we'll add some style to the menu item, we'll add the great template template. 137 00:10:10,420 --> 00:10:13,510 Great template columns. 138 00:10:14,260 --> 00:10:15,460 And then we'll give. 139 00:10:16,830 --> 00:10:19,950 The science here, so there will be 225 pixels. 140 00:10:21,110 --> 00:10:24,560 We're going to find pixels and one segment. 141 00:10:26,510 --> 00:10:27,600 They've done a fire fight. 142 00:10:28,310 --> 00:10:30,860 And that would be a gap, of course. 143 00:10:32,360 --> 00:10:38,180 And the gap would be of top and bottom that would be zero and left and right, that would be one point 144 00:10:39,140 --> 00:10:45,050 two five audience to five RDM, and next we'll be having a maximum of it. 145 00:10:45,680 --> 00:10:49,610 So this is like the maximum width of the card. 146 00:10:49,730 --> 00:10:53,410 The particular thing that radical element, the menu item. 147 00:10:53,420 --> 00:10:56,570 OK, so that will be the 40 RDM. 148 00:10:57,910 --> 00:10:58,750 And next. 149 00:11:00,140 --> 00:11:04,340 We'll style the fort also in this store for the affordable. 150 00:11:05,660 --> 00:11:08,030 That it will be the height for. 151 00:11:09,650 --> 00:11:18,350 The height will be 175 pixel, and next will be giving the styling to some other things. 152 00:11:20,660 --> 00:11:24,560 Next will be styling the section so that we'll do the next one, you.