1 00:00:00,840 --> 00:00:01,440 Hello, guys. 2 00:00:01,800 --> 00:00:02,640 Welcome back. 3 00:00:03,270 --> 00:00:08,360 In today's world, you created a Web page that I gave as an assignment in the previous video. 4 00:00:10,180 --> 00:00:12,020 This is the wreckage that we had to design. 5 00:00:12,130 --> 00:00:19,650 So we had this Google lookalike, someone who was here to choose the News app, dropped them on someone 6 00:00:19,650 --> 00:00:20,340 who was online. 7 00:00:20,530 --> 00:00:21,070 The box. 8 00:00:21,260 --> 00:00:22,120 It's a shadow. 9 00:00:22,760 --> 00:00:25,930 When someone who is on the button gets this border. 10 00:00:28,160 --> 00:00:28,430 All right. 11 00:00:28,470 --> 00:00:29,580 So let's begin. 12 00:00:29,970 --> 00:00:33,050 Let's bring a boy, put it into place. 13 00:00:33,360 --> 00:00:34,380 Let's create this structure. 14 00:00:34,760 --> 00:00:35,550 What beach? 15 00:00:35,880 --> 00:00:39,290 So we need these stop menus, GMU images. 16 00:00:39,900 --> 00:00:42,570 This menu, I plan on the profile. 17 00:00:43,110 --> 00:00:44,700 So let's start with those. 18 00:00:46,840 --> 00:00:55,380 So according to Channel five, we do all of these things head on for the specific menus. 19 00:00:55,410 --> 00:00:57,070 We can wrap them in nuff bar. 20 00:00:57,260 --> 00:00:57,970 So now. 21 00:01:01,400 --> 00:01:05,510 So if these two are supposed to be made, so let's drop them and I'm good, dad. 22 00:01:06,500 --> 00:01:07,370 Let's bring this here. 23 00:01:10,220 --> 00:01:13,330 Let's give you a tour of the same beach. 24 00:01:14,610 --> 00:01:15,240 General. 25 00:01:18,330 --> 00:01:21,140 Similarly, images. 26 00:01:22,590 --> 00:01:23,360 Let's save it. 27 00:01:24,090 --> 00:01:26,150 Let's open our lifeso. 28 00:01:29,220 --> 00:01:31,750 And as you can see, they've got these two images. 29 00:01:32,860 --> 00:01:34,400 Now, let's other styles for these. 30 00:01:35,550 --> 00:01:40,090 So I see here the entire beach has a fun family of idiots on Saturday. 31 00:01:40,740 --> 00:01:42,510 So that's where we can give it to the body. 32 00:01:43,200 --> 00:01:48,690 So let's just compare this to going to our season's final. 33 00:01:51,510 --> 00:01:54,020 So, buddy, fun family. 34 00:01:54,550 --> 00:01:55,510 Herald Sun Surf. 35 00:01:56,140 --> 00:02:02,440 So we don't have to in all areas the way we did with Google that funds because this is by default. 36 00:02:02,710 --> 00:02:06,190 We've both ditched the annual suit and simply use it without importing. 37 00:02:07,250 --> 00:02:07,520 All right. 38 00:02:08,420 --> 00:02:14,060 So coming back here now to can see the point on this a bit different. 39 00:02:14,450 --> 00:02:20,880 So far, trading, moving this font style changes when I put it back. 40 00:02:21,260 --> 00:02:23,080 The fun side changes again. 41 00:02:24,970 --> 00:02:30,750 All right, so coming back, so many items on the front page of two Olympic sports background collaterals, 42 00:02:31,150 --> 00:02:33,640 black with obesity point eight seven. 43 00:02:34,420 --> 00:02:38,260 So that's given that that's out across here. 44 00:02:39,820 --> 00:02:41,340 So many do. 45 00:02:44,980 --> 00:02:46,050 That's wasted here. 46 00:02:48,280 --> 00:02:49,470 Let's copy this me. 47 00:02:53,240 --> 00:03:01,200 So what we need is the font size of 13 pixels on a color of GBH like. 48 00:03:08,080 --> 00:03:14,060 And obesity is an obesity off point eighty seven point eighty seven. 49 00:03:14,440 --> 00:03:18,820 Let's say you're coming back to the table. 50 00:03:19,270 --> 00:03:20,050 As you can see. 51 00:03:22,460 --> 00:03:24,490 Are these menu items? 52 00:03:25,800 --> 00:03:33,360 How a similar font size and color, but how this underlined by default so we can do that. 53 00:03:33,890 --> 00:03:35,540 So text decoration. 54 00:03:39,150 --> 00:03:39,880 Let's a none. 55 00:03:41,990 --> 00:03:43,990 But on who would help us underline. 56 00:03:44,600 --> 00:03:55,010 So let's add that to the documenting item on Hova dates decoration. 57 00:03:55,640 --> 00:03:57,010 Underline that save. 58 00:03:57,830 --> 00:04:00,430 And now when I heard about this underline. 59 00:04:01,540 --> 00:04:01,860 All right. 60 00:04:02,930 --> 00:04:03,770 So moving on. 61 00:04:04,370 --> 00:04:05,830 Let's try it out in this item. 62 00:04:05,950 --> 00:04:09,690 So for this, you can use an image or else of a specified. 63 00:04:09,770 --> 00:04:12,700 Another way of using icons to display. 64 00:04:12,860 --> 00:04:13,580 We had formed. 65 00:04:13,670 --> 00:04:14,210 Awesome. 66 00:04:15,020 --> 00:04:17,460 We also have these Google material icons. 67 00:04:17,870 --> 00:04:22,850 So to import them, you can just place this link in the head element of HDMI. 68 00:04:23,510 --> 00:04:24,440 So let's do that. 69 00:04:26,380 --> 00:04:31,180 Something pasted here and now I can access all the Google Makita undesignated. 70 00:04:31,350 --> 00:04:37,680 So if I search you, Lou McKew opens and I was at the sewer. 71 00:04:44,530 --> 00:04:46,480 I have access to all these icons. 72 00:04:48,080 --> 00:04:48,880 All of these. 73 00:04:51,640 --> 00:04:55,610 All right, on to select, I again, just click on that. 74 00:04:58,210 --> 00:05:04,770 So choose your view for modern brothers, describe it as a dad. 75 00:05:06,460 --> 00:05:10,240 So that's what we've done here for that manual. 76 00:05:10,270 --> 00:05:12,000 I think you've got me this idea. 77 00:05:12,820 --> 00:05:13,930 So let's use it here. 78 00:05:14,200 --> 00:05:18,440 So after the so often these menu items, we can have this image. 79 00:05:19,070 --> 00:05:24,220 So coming back here and now, as you can see, we've got the icon as well. 80 00:05:24,700 --> 00:05:28,180 Then after that, we have this profile pics. 81 00:05:28,330 --> 00:05:30,010 So I've got mine over here. 82 00:05:30,250 --> 00:05:34,420 So it's just copying your an adult image after this. 83 00:05:34,930 --> 00:05:37,840 So I n g Sourcefire. 84 00:05:38,110 --> 00:05:38,350 So. 85 00:05:39,050 --> 00:05:40,950 So image you are in the source. 86 00:05:41,280 --> 00:05:42,310 That's pasted here. 87 00:05:42,850 --> 00:05:44,050 And an old text. 88 00:05:44,230 --> 00:05:44,890 So let's see. 89 00:05:45,500 --> 00:05:46,540 Define big. 90 00:05:47,260 --> 00:05:47,900 Let's say that. 91 00:05:48,520 --> 00:05:49,360 Coming back. 92 00:05:51,010 --> 00:05:56,050 And now as you can see, you've got all these top four menu items which are designed here. 93 00:05:56,170 --> 00:05:57,080 Just not this time. 94 00:05:57,090 --> 00:05:57,890 It's a bit off. 95 00:05:58,860 --> 00:06:01,190 So let's just glue these two. 96 00:06:02,850 --> 00:06:05,360 Let's add some statements coming back to. 97 00:06:08,030 --> 00:06:10,600 So if you can see here the profile, because a little protected. 98 00:06:10,820 --> 00:06:11,060 Excellent. 99 00:06:11,240 --> 00:06:12,310 I totally get it. 100 00:06:13,110 --> 00:06:14,030 So let's add that. 101 00:06:16,480 --> 00:06:19,900 So let's give it an I.D. see or find a big. 102 00:06:22,970 --> 00:06:23,570 Let's compare. 103 00:06:24,150 --> 00:06:28,730 So, you know, this is an idea so harsh. 104 00:06:29,750 --> 00:06:38,590 So let's give it the weather behind and see what the eight big storms by 14 pixels, let's say, look, 105 00:06:39,950 --> 00:06:41,330 looks pretty much the same. 106 00:06:42,450 --> 00:06:42,670 All right. 107 00:06:42,680 --> 00:06:45,200 Now it's time to play news items. 108 00:06:46,330 --> 00:06:52,750 So let's not blur it represents our menu so we can add states to distinguish between on the right hand 109 00:06:52,750 --> 00:06:53,050 side. 110 00:06:54,870 --> 00:06:58,060 So not the text alone. 111 00:06:58,600 --> 00:06:59,100 Right. 112 00:06:59,500 --> 00:07:00,120 Let's save it. 113 00:07:00,930 --> 00:07:04,620 And as you can see, all our items are now on the right hand side. 114 00:07:06,890 --> 00:07:14,510 Similarly, that's like them in the center vertically, so we can use the we're looking for that position 115 00:07:14,510 --> 00:07:15,280 rather there. 116 00:07:16,370 --> 00:07:18,270 That's a top zero. 117 00:07:18,950 --> 00:07:23,750 So it stays in the position so we can even negative values to move it up. 118 00:07:23,840 --> 00:07:25,610 So that's a minus eight pixels. 119 00:07:27,690 --> 00:07:28,530 That's much better. 120 00:07:29,610 --> 00:07:35,220 Similarly, we need to move or this menu that I can as well. 121 00:07:35,610 --> 00:07:40,470 So we will we got an I.D. you saw so drop down menu. 122 00:07:40,890 --> 00:07:42,110 So let's add some states. 123 00:07:42,930 --> 00:07:47,770 So hash, let's say dog minus eight pixels. 124 00:07:49,170 --> 00:07:51,730 It wouldn't work because we have them a position relative. 125 00:07:52,320 --> 00:07:52,910 Let's say look. 126 00:07:55,830 --> 00:07:57,490 Let's increase it to Dana. 127 00:07:59,640 --> 00:08:00,920 Yeah, that's much better. 128 00:08:02,030 --> 00:08:09,430 Similarly, for a menu item, let's increase the C minus drug, which is still not enough. 129 00:08:09,430 --> 00:08:10,550 Let's say sixteen. 130 00:08:12,460 --> 00:08:13,560 And that's much better. 131 00:08:15,730 --> 00:08:20,920 Also, if you notice, there's a margin on the right hand side for all these menu items. 132 00:08:21,130 --> 00:08:22,480 So that's your diet. 133 00:08:24,520 --> 00:08:27,550 So let's see margin, right, 16 pixels. 134 00:08:28,180 --> 00:08:32,500 Similarly, let's give the margin like this up as well. 135 00:08:32,890 --> 00:08:35,770 So margin right on 16, which is. 136 00:08:41,070 --> 00:08:41,400 All right. 137 00:08:41,670 --> 00:08:43,110 So that looks much better. 138 00:08:43,800 --> 00:08:48,060 Now, moving on now, what do we need is this group image. 139 00:08:48,120 --> 00:08:49,110 So that's on that. 140 00:08:51,260 --> 00:08:59,900 So given the logo here, so let's copy it coming back, Hugh, let's add it into its general filing. 141 00:09:00,830 --> 00:09:02,510 Let's create the mini section. 142 00:09:03,820 --> 00:09:08,810 That's a section inside this and unsigned outlets of this image. 143 00:09:10,440 --> 00:09:13,170 Let's say a Sarsae and imagine you are. 144 00:09:14,430 --> 00:09:15,350 Let's give it a 90. 145 00:09:15,460 --> 00:09:17,350 See you little logo. 146 00:09:19,140 --> 00:09:19,770 Let's save it. 147 00:09:20,920 --> 00:09:24,250 And as you can see, the good does the Google logo on the screen. 148 00:09:25,290 --> 00:09:28,440 Let's move the hotel to the center so we could do. 149 00:09:30,660 --> 00:09:32,040 So they've got a section here. 150 00:09:32,070 --> 00:09:35,690 So let's move everything in the section in the same job, the screen. 151 00:09:36,690 --> 00:09:38,300 So section. 152 00:09:40,200 --> 00:09:42,430 Text by center. 153 00:09:43,580 --> 00:09:44,370 Let's save it. 154 00:09:45,510 --> 00:09:50,340 As you can see, you've got this Google in the center of the screen horizontally. 155 00:09:53,340 --> 00:09:56,240 So, Maloney, what we need is this input box. 156 00:09:56,340 --> 00:09:56,900 So that's great. 157 00:09:56,960 --> 00:09:58,920 That is my cue. 158 00:10:01,280 --> 00:10:03,060 Let's find an input box. 159 00:10:04,660 --> 00:10:09,900 Let's say that, as you can see, we've got our inbox right next to the image. 160 00:10:09,950 --> 00:10:13,810 But what we want is the image box to be the loaded image. 161 00:10:13,930 --> 00:10:14,950 So let's do that. 162 00:10:16,240 --> 00:10:17,790 So let's just drop it in a do. 163 00:10:18,960 --> 00:10:20,830 Or we could simply do great line. 164 00:10:20,860 --> 00:10:26,950 You tailored, as you can see in the boxes on the next line. 165 00:10:28,060 --> 00:10:30,670 Let's add some states to this and put box. 166 00:10:30,760 --> 00:10:35,650 So we've got a wood colored border fun site starting in a radius. 167 00:10:37,300 --> 00:10:38,720 So you're coming by to that's. 168 00:10:39,350 --> 00:10:42,720 And I need this I need it's a search box. 169 00:10:46,530 --> 00:10:47,120 It's Aybar. 170 00:10:48,570 --> 00:10:49,950 Let's use that idea here. 171 00:10:50,490 --> 00:10:52,470 So surge was. 172 00:10:56,680 --> 00:11:00,490 So after every time we have to Arthus, some golden. 173 00:11:15,200 --> 00:11:19,020 All right, let's say you're so cute. 174 00:11:20,350 --> 00:11:24,020 Now, as you can see on the box, looks pretty much like this. 175 00:11:24,370 --> 00:11:26,080 What we need is this audio search. 176 00:11:26,810 --> 00:11:27,970 So that's on that. 177 00:11:30,370 --> 00:11:32,400 So let's go the voice search I can show you. 178 00:11:33,070 --> 00:11:33,840 Let's compare. 179 00:11:35,980 --> 00:11:43,930 Let's bring it down to you know, what we need to do is we need to adopt this input in a div so that 180 00:11:44,440 --> 00:11:47,360 we can give a different position relative on this. 181 00:11:48,950 --> 00:11:55,350 Voice search, I'm in a position absolutely we can move it on top of the box, so let's add that. 182 00:11:55,820 --> 00:11:58,580 So we've got a dev here. 183 00:12:06,270 --> 00:12:09,110 Let's give this an IDC input dropper. 184 00:12:13,490 --> 00:12:14,820 That's on the issue. 185 00:12:16,490 --> 00:12:17,860 Let's give it the source you are. 186 00:12:18,810 --> 00:12:20,470 Let's give it an all text. 187 00:12:20,830 --> 00:12:23,710 That's a voice search. 188 00:12:24,150 --> 00:12:27,630 I can see it coming back here. 189 00:12:27,980 --> 00:12:28,430 That's odd. 190 00:12:28,430 --> 00:12:36,540 Some statements to this and Petropoulos so harsh because that was and I'd be so into trouble. 191 00:12:37,670 --> 00:12:39,600 Position relative, Xaver. 192 00:12:40,400 --> 00:12:44,000 Now, let's give some science to this search item so we could do. 193 00:12:45,320 --> 00:12:45,800 Hush. 194 00:12:47,350 --> 00:12:48,180 Good gridlock, good. 195 00:12:50,950 --> 00:12:53,020 That image like inside. 196 00:12:56,040 --> 00:12:58,640 Let's give it position, absolute light saber. 197 00:13:02,030 --> 00:13:03,560 If I do right. 198 00:13:03,720 --> 00:13:04,290 Zero. 199 00:13:05,430 --> 00:13:06,550 It goes to the far end. 200 00:13:06,570 --> 00:13:07,600 Which we don't want. 201 00:13:08,400 --> 00:13:13,590 So what's happening here is because there's a Petropoulos, a dev, and there is a block elements that 202 00:13:13,590 --> 00:13:14,650 digs them diamond. 203 00:13:15,300 --> 00:13:18,990 And that's why our images at the far end of the screen. 204 00:13:19,980 --> 00:13:25,320 So what we can do is instead of giving a fixed with this, we can we will fix that, do help people 205 00:13:25,320 --> 00:13:25,750 drop it. 206 00:13:27,030 --> 00:13:33,270 And we can make this right under Boesen so that I don't put box sticks the full weight of the output 207 00:13:33,350 --> 00:13:35,740 on the rhythm that operates just fine. 208 00:13:35,800 --> 00:13:37,910 Eighty two pixels let's say, but. 209 00:13:39,680 --> 00:13:43,250 And as you can see, you've got this image over here. 210 00:13:43,910 --> 00:13:47,000 Similarly, if I do a zero 211 00:13:50,050 --> 00:13:54,460 that moves to the top, which is inside our input box. 212 00:13:54,770 --> 00:13:55,220 All right. 213 00:13:56,210 --> 00:13:58,240 On that image, size looks a bit bigger. 214 00:13:58,250 --> 00:13:59,470 So let's make it small. 215 00:13:59,990 --> 00:14:03,140 So let's say with 28 pixels. 216 00:14:03,800 --> 00:14:04,550 That's much better. 217 00:14:05,210 --> 00:14:08,000 So let's bring it in the center vertically. 218 00:14:08,020 --> 00:14:10,460 It's part of the deal right to the top. 219 00:14:10,710 --> 00:14:13,940 Let's say it pixels on. 220 00:14:14,000 --> 00:14:14,590 That's it then. 221 00:14:14,590 --> 00:14:15,200 Pixels. 222 00:14:15,830 --> 00:14:16,370 That's better. 223 00:14:16,860 --> 00:14:20,910 Also knowing how to bring this print box to the center of the screen. 224 00:14:21,470 --> 00:14:26,690 So we could just seems that this may do in line block the table. 225 00:14:27,860 --> 00:14:30,380 And as you can see, it's coming to the center of the screen. 226 00:14:30,860 --> 00:14:36,570 Now, what we want is when someone who works or focuses on the search box, it should have a box, shadow 227 00:14:36,590 --> 00:14:37,170 and water. 228 00:14:38,870 --> 00:14:41,480 So right now, when you do, nothing happens. 229 00:14:41,660 --> 00:14:47,450 You get this outline into that screen that so we could simply do an outline. 230 00:14:47,650 --> 00:14:47,990 Nunna. 231 00:14:49,300 --> 00:14:52,500 No, we don't get this outline, but we don't get the shadow. 232 00:14:53,200 --> 00:14:54,250 So that's all that. 233 00:14:59,270 --> 00:15:01,310 So she was so uncool. 234 00:15:05,600 --> 00:15:07,780 I'm on this block shadowing this, but I'm going to. 235 00:15:09,310 --> 00:15:10,580 And now when I Hoover. 236 00:15:13,470 --> 00:15:15,350 Disconfirm box as a shadow. 237 00:15:15,650 --> 00:15:17,660 But when I focus, it doesn't. 238 00:15:17,930 --> 00:15:19,820 So let's hotted for focus his work. 239 00:15:21,510 --> 00:15:21,840 Let's go. 240 00:15:21,910 --> 00:15:25,020 It is so harsh. 241 00:15:26,370 --> 00:15:29,300 Search box and focus. 242 00:15:32,200 --> 00:15:38,910 Let's face the children and say what I know and focus, and then I've got this shadow. 243 00:15:39,880 --> 00:15:44,800 Also, I feel this year at some speeds would mean the logo on the input box so we can add some margin. 244 00:15:45,150 --> 00:15:47,950 So coming by QVC, let's say margin. 245 00:15:48,670 --> 00:15:49,150 Sorry. 246 00:15:49,800 --> 00:15:52,090 So we have to do a search box. 247 00:15:52,540 --> 00:15:56,760 So that's a mountain dog on my flummoxes. 248 00:15:57,090 --> 00:15:57,670 It's even. 249 00:15:59,220 --> 00:16:00,340 And that looks much better. 250 00:16:01,210 --> 00:16:03,220 Now, that's right out of these buckets. 251 00:16:03,850 --> 00:16:06,610 So over here, they've got some status for the buckets. 252 00:16:07,810 --> 00:16:11,680 So let's capito's out some buttons here first. 253 00:16:13,860 --> 00:16:16,210 So now we need to do buttons. 254 00:16:16,510 --> 00:16:17,280 So do. 255 00:16:19,050 --> 00:16:22,770 First button, which is Google search. 256 00:16:22,830 --> 00:16:24,570 I'm sick and I'm feeling lucky. 257 00:16:25,410 --> 00:16:27,180 So that's all those who. 258 00:16:30,530 --> 00:16:31,470 So, again, is. 259 00:16:34,620 --> 00:16:38,360 Which we've been lucky, Let's say, about. 260 00:16:39,970 --> 00:16:41,290 Let's give them a glass. 261 00:16:41,410 --> 00:16:43,540 That's a custom buttons. 262 00:16:49,630 --> 00:16:52,030 Similar elements of the same class here as well. 263 00:16:52,750 --> 00:16:55,700 So Guston BGN, let's hear it. 264 00:16:56,610 --> 00:16:58,780 Let's add the states to those bottoms over here. 265 00:16:59,140 --> 00:17:02,710 So don't Guston median. 266 00:17:03,040 --> 00:17:03,720 Let's face. 267 00:17:05,460 --> 00:17:06,570 All the signs here. 268 00:17:10,950 --> 00:17:15,330 So the back the line needs to have this hyphen uncool in which you. 269 00:17:20,540 --> 00:17:22,340 All right, so coming back here. 270 00:17:24,290 --> 00:17:25,240 Let's see this. 271 00:17:26,460 --> 00:17:29,890 And as you can see, these buttons have got the status, but they're all in the same lines. 272 00:17:30,010 --> 00:17:36,110 Let's bring them in the next line so we could simply just drop them in one day of. 273 00:17:42,610 --> 00:17:43,220 Let's save it. 274 00:17:44,180 --> 00:17:48,140 And now, as you can see with these buttons are on the next line. 275 00:17:50,190 --> 00:17:55,350 Also, if you notice, there's some space between these buttons on the bottles that are that as well. 276 00:17:56,370 --> 00:17:57,350 So coming here. 277 00:18:00,110 --> 00:18:02,570 So let's give it a margin bottom as well. 278 00:18:03,070 --> 00:18:04,340 You 24 pixels. 279 00:18:06,620 --> 00:18:09,200 And there's a space with, you know, big box and these buttons. 280 00:18:09,790 --> 00:18:13,410 Other items seems to have gone a bit out of the box. 281 00:18:13,420 --> 00:18:15,200 So it's Monistat. 282 00:18:18,020 --> 00:18:21,520 So instead of double dating skills, let's just bring it to zero. 283 00:18:23,140 --> 00:18:25,090 So it's going outside the box. 284 00:18:25,600 --> 00:18:28,730 Let's give it a big Aubameyang, say, two phobics since. 285 00:18:32,740 --> 00:18:35,510 So to do pixels and that looks much better. 286 00:18:39,570 --> 00:18:44,620 Also, men who were on these buttons should get this border and some shadow. 287 00:18:45,380 --> 00:18:46,280 So that's about. 288 00:18:49,540 --> 00:18:51,070 So I mean, back here, 289 00:18:57,010 --> 00:19:01,410 so that class was custom button, so on Google Arts and styles. 290 00:19:08,890 --> 00:19:09,660 Let's saved us. 291 00:19:10,450 --> 00:19:16,920 Now, when I go over my mountains, look at these border and some shadows. 292 00:19:18,830 --> 00:19:21,210 Also, these buttons have some spacing in the between. 293 00:19:21,250 --> 00:19:23,620 So that's are those as well. 294 00:19:26,190 --> 00:19:27,160 So coming here. 295 00:19:28,420 --> 00:19:35,230 So what we can do is custom button, first of type, we can give the margin. 296 00:19:35,350 --> 00:19:35,830 Right. 297 00:19:35,890 --> 00:19:39,060 Say 16 pixels, let's say. 298 00:19:40,710 --> 00:19:44,470 On as you can see, a button buttons have some space in the middle. 299 00:19:45,880 --> 00:19:46,150 All right. 300 00:19:46,180 --> 00:19:49,160 So now let's bring it to the center of the screen. 301 00:19:50,920 --> 00:19:57,910 So coming here, as you can see, the section wraps all the content that we've got here. 302 00:19:59,170 --> 00:20:03,550 So if you give some body to the section, you can bring the content to the center of the screen. 303 00:20:04,720 --> 00:20:09,290 So let's say Bohning top 10 loosened the table. 304 00:20:11,990 --> 00:20:12,920 Let's increase the volume. 305 00:20:16,290 --> 00:20:17,440 See a little Lucy. 306 00:20:21,850 --> 00:20:22,580 Archconservatives. 307 00:20:24,900 --> 00:20:25,830 Pretty much the same. 308 00:20:28,160 --> 00:20:31,450 Just that our main and how some budding. 309 00:20:34,640 --> 00:20:36,550 When he left on his way through. 310 00:20:37,000 --> 00:20:38,090 That's on that as well. 311 00:20:39,370 --> 00:20:40,500 So coming back here. 312 00:20:46,480 --> 00:20:51,260 So, you know, somebody in here, it's important, Brooke, that say. 313 00:20:56,010 --> 00:21:01,370 On the left and right, so as you answer, Freemason's looks much better off. 314 00:21:02,220 --> 00:21:02,490 All right. 315 00:21:02,490 --> 00:21:03,240 So moving on. 316 00:21:03,630 --> 00:21:05,080 So many who were undecided. 317 00:21:05,430 --> 00:21:08,850 It should show up, drop down like this. 318 00:21:10,440 --> 00:21:12,430 So first next, blame this on top down. 319 00:21:12,600 --> 00:21:17,180 So if you can see here, these are the styles for the top job done. 320 00:21:19,230 --> 00:21:20,140 So come in here. 321 00:21:30,260 --> 00:21:36,190 That's our discussion, so do let's give it an I.D., see? 322 00:21:36,870 --> 00:21:37,560 John Danimal. 323 00:21:43,110 --> 00:21:43,440 Let's see. 324 00:21:44,400 --> 00:21:47,120 Let's add some science to this division. 325 00:21:50,580 --> 00:21:51,610 So harsh. 326 00:21:54,650 --> 00:21:55,900 Let's copy styles. 327 00:21:57,670 --> 00:21:58,300 Them here. 328 00:22:04,680 --> 00:22:05,290 Let's save that. 329 00:22:06,590 --> 00:22:12,030 And I can see you've got a card with some shadow on a bottle. 330 00:22:12,840 --> 00:22:18,000 Now, with this card needs is it needs these items. 331 00:22:18,090 --> 00:22:19,240 So let's add those as well. 332 00:22:24,240 --> 00:22:26,100 So the first one is Google search. 333 00:22:26,340 --> 00:22:27,570 So let's go through this image. 334 00:22:27,570 --> 00:22:30,030 Your coming here. 335 00:22:30,390 --> 00:22:31,790 Let's ask the first. 336 00:22:33,610 --> 00:22:34,450 And then say not. 337 00:22:34,460 --> 00:22:36,060 You need an image. 338 00:22:36,990 --> 00:22:38,450 Let's give it a source. 339 00:22:38,470 --> 00:22:40,510 You are all dog. 340 00:22:40,590 --> 00:22:41,250 Let's see. 341 00:22:41,610 --> 00:22:42,800 Google search. 342 00:22:44,770 --> 00:22:46,210 It also means a label. 343 00:22:46,480 --> 00:22:49,020 So let's see. 344 00:22:49,390 --> 00:22:53,110 Be on, let's give it some label. 345 00:22:53,320 --> 00:22:56,740 So in our case, it has got just search. 346 00:22:59,070 --> 00:23:00,100 So let's on that hill. 347 00:23:01,300 --> 00:23:02,800 The town, some gloss to this. 348 00:23:03,580 --> 00:23:05,440 So we can say I've done. 349 00:23:08,920 --> 00:23:11,060 In total, we need six other items. 350 00:23:11,090 --> 00:23:12,740 So let's just copy paste these. 351 00:23:18,090 --> 00:23:20,610 So two, three, four, five, six. 352 00:23:20,830 --> 00:23:27,010 The table coming here on, as you can see, the stylings are way off. 353 00:23:30,970 --> 00:23:32,700 So let's add some statements. 354 00:23:38,670 --> 00:23:48,740 So we've got the item so harsh, this is a plus or a dog item it doesn't display in my blog. 355 00:23:50,100 --> 00:23:52,670 And it has a width of eighty four, six. 356 00:23:53,850 --> 00:23:54,550 Let's say that. 357 00:23:56,280 --> 00:23:59,500 Then let's add some styles for and slide. 358 00:23:59,980 --> 00:24:02,610 So we've got Image Dargo here. 359 00:24:04,080 --> 00:24:08,440 So I do selecting that image inside. 360 00:24:09,630 --> 00:24:12,370 It has a wealth of 50 pixels on height. 361 00:24:12,600 --> 00:24:13,840 Just didn't Soules. 362 00:24:17,180 --> 00:24:17,870 Let's say with. 363 00:24:20,300 --> 00:24:22,560 So going into your knowledge, you can see the bottom. 364 00:24:23,240 --> 00:24:24,770 I can score a few. 365 00:24:26,500 --> 00:24:31,700 Also, the label has a different color so that our daughters will suit up. 366 00:24:31,940 --> 00:24:32,680 I do. 367 00:24:32,930 --> 00:24:33,670 Paragraph. 368 00:24:36,070 --> 00:24:37,220 Let's just go here. 369 00:24:38,010 --> 00:24:39,860 Let's remove the margins. 370 00:24:42,220 --> 00:24:43,650 And that's awesome, some body. 371 00:24:46,590 --> 00:24:49,120 And on top, say, eight big suits. 372 00:24:49,320 --> 00:24:49,950 That's a lot. 373 00:24:52,660 --> 00:24:52,900 All right. 374 00:24:53,050 --> 00:24:55,350 So moving on now works out. 375 00:24:56,120 --> 00:24:57,520 I can see this label on. 376 00:24:57,550 --> 00:24:59,760 The next item is very much close to each other. 377 00:24:59,860 --> 00:25:01,660 So you could get some marginal bottom. 378 00:25:03,010 --> 00:25:05,560 So let's say, Martin, bottom 60 pixels. 379 00:25:07,030 --> 00:25:09,500 Let's increase it a bit more pixels. 380 00:25:12,190 --> 00:25:12,990 Looks much better. 381 00:25:15,750 --> 00:25:18,160 All right, so let's use these images now. 382 00:25:21,430 --> 00:25:22,700 So for the second one. 383 00:25:24,850 --> 00:25:25,690 Laughs. 384 00:25:30,010 --> 00:25:31,890 Sets it a witness, this would be. 385 00:25:33,760 --> 00:25:39,070 Google Maps and will be maps that say, look. 386 00:25:40,370 --> 00:25:41,950 And as you can see, it changed. 387 00:25:47,610 --> 00:25:49,240 Similarly, let's go out for a drive. 388 00:25:53,410 --> 00:25:59,040 So it's a little certain as you drive over here this week, be driving. 389 00:26:02,040 --> 00:26:03,320 Let's order for governor. 390 00:26:21,850 --> 00:26:23,980 Similarly, that's added for photos. 391 00:26:37,550 --> 00:26:38,830 Similar that ordered for. 392 00:26:50,780 --> 00:26:51,410 Let's save it. 393 00:26:51,650 --> 00:26:52,720 I'm coming back to you. 394 00:26:53,480 --> 00:26:56,820 And as you can see, we've got our application items here. 395 00:26:58,400 --> 00:27:00,370 Although we want to do this on hold. 396 00:27:01,420 --> 00:27:02,440 This should have a border. 397 00:27:04,580 --> 00:27:05,720 So that's about. 398 00:27:08,080 --> 00:27:08,950 Come coming here. 399 00:27:10,040 --> 00:27:11,970 So not item on homework. 400 00:27:17,430 --> 00:27:18,540 We can have this now. 401 00:27:19,430 --> 00:27:24,250 So when the whole Kartheiser border, let's go to border radius. 402 00:27:28,680 --> 00:27:30,840 So as you can see, it has some border radius here. 403 00:27:31,590 --> 00:27:32,430 So let's add that. 404 00:27:37,340 --> 00:27:42,180 Say, a big sales segment that looks much better. 405 00:27:42,830 --> 00:27:43,020 All right. 406 00:27:43,130 --> 00:27:46,250 So, as you can see, these migrants are very close to each other. 407 00:27:46,320 --> 00:27:48,390 So let's add some body. 408 00:27:49,530 --> 00:27:49,870 Let's say. 409 00:27:49,880 --> 00:27:52,190 But I don't bottom a picture. 410 00:27:52,380 --> 00:27:58,050 I'm let's try to do because to you, it looks much better. 411 00:28:01,060 --> 00:28:05,340 Now, what we want is we need this to people right here, right below this menu item. 412 00:28:06,890 --> 00:28:13,880 So find out what we can do is select this entire dropdown. 413 00:28:14,540 --> 00:28:19,060 So this AAB job done, let's contact. 414 00:28:26,030 --> 00:28:31,700 Drop this menu item in the dead of UNbased it incited. 415 00:28:43,750 --> 00:28:51,120 Coming back to as you can see, the entire states are gone off because this is turning into a daylight 416 00:28:51,120 --> 00:28:52,570 saving time dark space. 417 00:28:53,020 --> 00:28:56,090 So let's just change it to the line there. 418 00:28:56,370 --> 00:29:00,900 So let's say I'll be dropped on the. 419 00:29:08,820 --> 00:29:14,400 Let's face it here, let's say display in landlock that saber. 420 00:29:17,400 --> 00:29:24,780 Also, let's do our job done as displayed as position absolute. 421 00:29:27,690 --> 00:29:28,390 Let's say that. 422 00:29:31,240 --> 00:29:38,920 Okay, so we've got this job done right below it, just on it's going out. 423 00:29:41,980 --> 00:29:42,890 So let's change that. 424 00:29:44,700 --> 00:29:49,060 So what we can do is we can give it right off. 425 00:29:49,140 --> 00:29:49,670 Zero. 426 00:29:51,300 --> 00:29:52,380 Let's include the volume. 427 00:29:52,660 --> 00:29:54,770 Mark, say 24. 428 00:29:57,270 --> 00:30:05,390 Let us in, please look at most a hundred pixels on top looks better, although these items are going 429 00:30:05,390 --> 00:30:06,330 to the right hand side. 430 00:30:06,350 --> 00:30:11,810 So let's bring them into the center so we could do text align center. 431 00:30:14,900 --> 00:30:15,790 That looks much better. 432 00:30:16,900 --> 00:30:23,070 All right, so as you can see of it brought this up, dropped down here, but it's visible by default. 433 00:30:23,320 --> 00:30:25,150 And what we want is it to be visible. 434 00:30:25,180 --> 00:30:27,870 Only met someone who was on this many like. 435 00:30:28,350 --> 00:30:29,790 So let's do that. 436 00:30:32,180 --> 00:30:34,330 So this entire thing is dropping, drop down, drop. 437 00:30:34,720 --> 00:30:35,640 So that selected. 438 00:30:39,040 --> 00:30:46,680 But before we do anything, let's hide this by default so we could do our job down display. 439 00:30:47,030 --> 00:30:50,230 Now, let's say you're on the top dumbest gun. 440 00:30:52,640 --> 00:30:57,710 All right, so now what you want is when someone who works on this dropdown droplet. 441 00:31:02,060 --> 00:31:10,920 We need to show our dog down, so let's in a catch up drug down 442 00:31:13,760 --> 00:31:16,450 so underground rapper Hoopoe. 443 00:31:19,060 --> 00:31:25,320 All right, so now what we're doing here is so when someone who was on this job done Rappler, we've 444 00:31:25,420 --> 00:31:31,800 selected it, our job done and we get to be do this next block the road to come in here. 445 00:31:32,320 --> 00:31:37,840 Now, when I hope we're on this many making, it shows us this job done. 446 00:31:40,380 --> 00:31:41,340 That's all for today, guys. 447 00:31:41,440 --> 00:31:46,080 If there is something that you did not understand through the rubble comment and we will discuss it. 448 00:31:46,830 --> 00:31:47,850 See you in the next video. 449 00:31:48,030 --> 00:31:48,310 Bye. 450 00:31:48,560 --> 00:31:48,960 Take care.