1 00:00:00,840 --> 00:00:01,560 ‫Welcome back. 2 00:00:01,740 --> 00:00:05,130 ‫Now let us continue our task with our current high school website. 3 00:00:06,750 --> 00:00:12,390 ‫So here I am currently with my unordered list, and I simply need to update a few settings. 4 00:00:12,810 --> 00:00:15,690 ‫The first one is going to be about my one size. 5 00:00:16,050 --> 00:00:17,730 ‫Definitely, I need to change it. 6 00:00:17,760 --> 00:00:23,490 ‫The second one will be to add some padding between them and then add some margin at the top. 7 00:00:24,160 --> 00:00:28,110 ‫So the first thing I'm going to do is here, I'm going to change the font size. 8 00:00:30,520 --> 00:00:35,050 ‫And head on with the war already on sales of one point six Saddam. 9 00:00:35,380 --> 00:00:40,110 ‫Now remember, I haven't utilized this whole thing as an excel. 10 00:00:40,120 --> 00:00:41,480 ‫I haven't utilized them. 11 00:00:41,530 --> 00:00:46,210 ‫I'm using 16 pixels by default currently, and this is going to be big. 12 00:00:46,510 --> 00:00:53,760 ‫So let me change the font size 210 pixels and let me go in and go with font size. 13 00:00:54,310 --> 00:00:54,780 ‫That's it. 14 00:00:54,850 --> 00:00:56,580 ‫And Pixel C on this one. 15 00:00:56,590 --> 00:00:58,520 ‫Get back here, OK? 16 00:00:58,540 --> 00:01:07,150 ‫And I also need to add something related to font, which so that can be voted on and I'm going to go 17 00:01:07,150 --> 00:01:08,200 ‫in 500. 18 00:01:10,350 --> 00:01:16,650 ‫Much work out great, you can go with 600 also if you want, but this looks fine to me for now, or 19 00:01:16,650 --> 00:01:18,600 ‫I can just drive at $600 to. 20 00:01:22,690 --> 00:01:23,350 ‫Looks good. 21 00:01:24,220 --> 00:01:27,130 ‫The other thing is we need to change the color if we want. 22 00:01:27,160 --> 00:01:32,560 ‫So what I'm going to do is I'm going to have a color and I'm going to go with. 23 00:01:35,430 --> 00:01:36,360 ‫Save this one. 24 00:01:36,390 --> 00:01:37,260 ‫Get back here. 25 00:01:39,170 --> 00:01:42,320 ‫For now, that's OK now I need to add some padding. 26 00:01:42,530 --> 00:01:49,310 ‫So what I'm going to do is I got I'm going to add this padding with my dog or with my airbag, depending 27 00:01:49,310 --> 00:01:52,790 ‫on me, so I can go with there later on, I can go with it. 28 00:01:53,900 --> 00:01:59,450 ‫What I can do is I can jump here and I just need to select the menu you want. 29 00:01:59,450 --> 00:02:07,550 ‫And then I lay down and have a kind of hiding and I'm moved to go with them on top and bottom and then 30 00:02:07,550 --> 00:02:09,230 ‫pull them on left and right. 31 00:02:09,440 --> 00:02:15,080 ‫So if I see if we can get back here looks good, I remember this one is going to be converted into a 32 00:02:15,080 --> 00:02:18,440 ‫button, so I haven't added any type of padding yet. 33 00:02:19,160 --> 00:02:22,760 ‫For now, this looks great, but I need to add space from the top. 34 00:02:23,300 --> 00:02:28,700 ‫So what I can do is I can add some padding on this whole headset itself on the top and bottom. 35 00:02:29,180 --> 00:02:31,370 ‫So what I need to do is just jump there. 36 00:02:32,790 --> 00:02:39,150 ‫I can I graduated with my novel by accident, so I continue fighting and I'm going to give it to them 37 00:02:39,150 --> 00:02:41,670 ‫and then zero, save this one, get back here. 38 00:02:41,910 --> 00:02:42,750 ‫This looks great. 39 00:02:43,230 --> 00:02:43,860 ‫Yup, yup. 40 00:02:43,860 --> 00:02:45,390 ‫Yup, we need to fix this one. 41 00:02:45,510 --> 00:02:46,180 ‫Don't worry. 42 00:02:46,680 --> 00:02:48,570 ‫But for the base level, this is great. 43 00:02:48,990 --> 00:02:51,360 ‫I think this color is not the exact one. 44 00:02:53,550 --> 00:02:57,720 ‫OK, so this color, I think, is not the exact one which we have selected. 45 00:02:58,260 --> 00:02:58,590 ‫OK. 46 00:02:58,620 --> 00:02:59,570 ‫This is or what again. 47 00:02:59,580 --> 00:03:03,870 ‫So what I need to do is this color in this from here? 48 00:03:05,180 --> 00:03:08,750 ‫And I need to add it with my help, save this one. 49 00:03:08,780 --> 00:03:09,530 ‫Get back here. 50 00:03:10,070 --> 00:03:15,380 ‫Now this is working great and I need to update this one, which was my contact us. 51 00:03:15,890 --> 00:03:19,470 ‫Let me convert that into a button acts of this whole contacting. 52 00:03:19,760 --> 00:03:26,930 ‫So if I jump in, I can IRA Glass here who my contact and I can say VPN or something else. 53 00:03:27,110 --> 00:03:28,190 ‫I can give it a name. 54 00:03:28,760 --> 00:03:34,040 ‫So what I'm going to do is I'm going to say a class and then I'm going to have a common property as 55 00:03:34,040 --> 00:03:40,940 ‫being so if I need to create a button again, maybe here, maybe here I can just directly jump onto 56 00:03:40,940 --> 00:03:42,290 ‫this VPN class. 57 00:03:42,890 --> 00:03:43,310 ‫OK. 58 00:03:43,730 --> 00:03:46,580 ‫So what I'm going to do is I'm going to create a VPN here. 59 00:03:47,640 --> 00:03:53,610 ‫Now, remember later we are going to move this into some components, something related to utility, 60 00:03:53,610 --> 00:03:59,430 ‫if you remember, we can do this, if you remember the bootstrap lectures, what we can do is we can 61 00:03:59,430 --> 00:04:00,690 ‫create dot m2. 62 00:04:00,930 --> 00:04:04,650 ‫That will be margin to not be true, that will be padding, too. 63 00:04:04,980 --> 00:04:10,470 ‫Similarly, this will be a button, which is our component now for the specific Bartlett me. 64 00:04:10,470 --> 00:04:13,260 ‫Like some stylings, I'm going to go with a color first. 65 00:04:13,590 --> 00:04:16,560 ‫That means the font that you are going to follow. 66 00:04:19,120 --> 00:04:22,660 ‫There should be wide and there will be something as background color. 67 00:04:23,720 --> 00:04:29,650 ‫Like me and my background color, so this is going to be the background color, then we need some padding 68 00:04:29,800 --> 00:04:32,770 ‫on the top and bottom so we can have a proper button. 69 00:04:32,860 --> 00:04:39,160 ‫I'm going for that one room as well as put them on the x axis, and then I'm going to have a border 70 00:04:39,160 --> 00:04:41,410 ‫radius, which is going to be protected. 71 00:04:41,620 --> 00:04:42,470 ‫Save this one. 72 00:04:42,490 --> 00:04:43,240 ‫Get back here. 73 00:04:45,360 --> 00:04:49,800 ‫Now you can see this whole button is stretched, so if I right click here. 74 00:04:51,110 --> 00:04:54,740 ‫And if you observe this is this useless flex. 75 00:04:55,040 --> 00:04:59,000 ‫And then each item is stretched to the top and bottom. 76 00:04:59,390 --> 00:05:01,910 ‫That means that it is taking complete space. 77 00:05:02,750 --> 00:05:05,630 ‫And if you observe, if I just uncheck this flex. 78 00:05:06,800 --> 00:05:08,660 ‫This pattern is working fine now. 79 00:05:09,500 --> 00:05:14,600 ‫So what is happening is this is taking complete SpaceX, complete SpaceX, which is provided to it, 80 00:05:14,930 --> 00:05:16,830 ‫and we somehow need to fix this. 81 00:05:16,880 --> 00:05:19,490 ‫What we can do is on a bulldog. 82 00:05:19,520 --> 00:05:22,130 ‫We cannot allow an item center. 83 00:05:22,310 --> 00:05:28,160 ‫So this will aid only the required space and will be aligned to the center and it will not be stretched. 84 00:05:28,670 --> 00:05:35,360 ‫That means if I jump out of it, my you will find a property has a line items center. 85 00:05:35,540 --> 00:05:36,410 ‫Save this one. 86 00:05:37,690 --> 00:05:39,160 ‫You can see it's working fine. 87 00:05:39,430 --> 00:05:42,100 ‫So I it was taking the complete space. 88 00:05:42,130 --> 00:05:47,200 ‫Now this is a line at this center with the required space of the content. 89 00:05:48,520 --> 00:05:53,170 ‫OK, I hope you got the idea, but if I remove this line, I'm saying that you can see this is strange. 90 00:05:53,620 --> 00:05:54,580 ‫Click on Inspect. 91 00:05:54,730 --> 00:05:59,110 ‫Scroll down to the content you can see there's no stretch to cover everything. 92 00:06:00,180 --> 00:06:07,440 ‫Now you can do one more important thing, for example, if my jumper and my a lighter. 93 00:06:07,650 --> 00:06:15,630 ‫And if I try to increase departing from top to bottom, maybe 20, you can see this button is now trying 94 00:06:15,630 --> 00:06:19,530 ‫to stretch from top to bottom, which is the required space. 95 00:06:20,680 --> 00:06:22,240 ‫I hope you got the idea. 96 00:06:23,430 --> 00:06:23,820 ‫OK. 97 00:06:24,300 --> 00:06:27,000 ‫So make sure to add this line items have required. 98 00:06:28,470 --> 00:06:34,410 ‫OK, that's done for the top navigation bar and the next one, we are going to play with this on how 99 00:06:34,410 --> 00:06:37,530 ‫you will see some animation and sometimes you can add also. 100 00:06:37,950 --> 00:06:42,930 ‫So if you haven't started this, how what effect transition that will be continuing as we move forward 101 00:06:42,930 --> 00:06:43,930 ‫with adult fiction? 102 00:06:45,030 --> 00:06:45,880 ‫Thank you for calling. 103 00:06:45,900 --> 00:06:47,730 ‫I hope you got the idea what we just heard. 104 00:06:47,940 --> 00:06:49,860 ‫And I see you guys in the next one.