1 00:00:00,590 --> 00:00:01,130 ‫Hey, there. 2 00:00:01,190 --> 00:00:01,880 ‫Welcome back. 3 00:00:02,030 --> 00:00:04,610 ‫So now we have completed our part with Heather. 4 00:00:04,910 --> 00:00:09,080 ‫There will be more differences in future, but for now it's completed. 5 00:00:09,680 --> 00:00:15,500 ‫The next thing we are going to work is the Sadr is done, so we are going to work with this main section. 6 00:00:16,040 --> 00:00:20,810 ‫That means basically this far in a lot of things that we are going to do. 7 00:00:20,870 --> 00:00:22,880 ‫Now, first thing is, you can see the height. 8 00:00:23,000 --> 00:00:23,780 ‫It's different. 9 00:00:24,350 --> 00:00:25,520 ‫Different is different. 10 00:00:25,940 --> 00:00:27,170 ‫There is some background. 11 00:00:27,200 --> 00:00:28,010 ‫Definitely. 12 00:00:28,040 --> 00:00:29,390 ‫So we are going to play with that. 13 00:00:29,840 --> 00:00:31,280 ‫And then you can see this button. 14 00:00:31,790 --> 00:00:32,930 ‫You are going to play with it. 15 00:00:33,410 --> 00:00:38,090 ‫So there are a lot of things with this whole section or the first thing is the background color. 16 00:00:38,630 --> 00:00:42,970 ‫So what I'm going to do is I'm going to jump here and this is the main. 17 00:00:42,980 --> 00:00:46,460 ‫And since we only have one section, then it's fine. 18 00:00:46,730 --> 00:00:51,900 ‫Otherwise, give our last name to the section also, and everything looks fine. 19 00:00:51,920 --> 00:00:53,000 ‫So let me jump here. 20 00:00:54,170 --> 00:00:55,910 ‫And select my section. 21 00:00:56,840 --> 00:00:58,430 ‫So I can apply all the genius. 22 00:00:58,820 --> 00:01:01,760 ‫I still want to either the name. 23 00:01:03,730 --> 00:01:10,300 ‫So even if I did this project again in future art and the U.S. had, I'm not going to get into trouble 24 00:01:10,300 --> 00:01:11,440 ‫because of CSIS. 25 00:01:11,830 --> 00:01:13,900 ‫So let me call this section as banner. 26 00:01:16,640 --> 00:01:22,940 ‫Now, Howard, I'm going to use section not banner, remember, I'm you, I'm not writing a space here. 27 00:01:24,070 --> 00:01:25,420 ‫S. Not by no means. 28 00:01:25,760 --> 00:01:29,140 ‫I'm targeting a section with class banner. 29 00:01:29,290 --> 00:01:35,340 ‫Remember, if you just it over this, you will see when I add a space that means I'm going to inherit, 30 00:01:35,350 --> 00:01:37,270 ‫I'm going to check it's child. 31 00:01:38,400 --> 00:01:41,640 ‫So ahead, I'm trying to select the section, not banner. 32 00:01:41,940 --> 00:01:46,650 ‫The first thing I'm going to do is add a background color, so that should be simple. 33 00:01:47,040 --> 00:01:52,020 ‫I actually have this background color copy, so I'm going to add new territory directly. 34 00:01:52,290 --> 00:01:53,130 ‫Save this one. 35 00:01:53,400 --> 00:01:54,210 ‫Get back here. 36 00:01:56,600 --> 00:01:57,410 ‫Let's look fine. 37 00:01:58,190 --> 00:02:00,050 ‫So I also need to add a height. 38 00:02:01,440 --> 00:02:08,910 ‫If you try to maybe even go on to the mobile organ market, it might try to see the height is always 39 00:02:08,910 --> 00:02:09,540 ‫pretty big. 40 00:02:12,790 --> 00:02:18,810 ‫This height is big, and why this height, this big, because this high dose dependent on viewport. 41 00:02:19,240 --> 00:02:24,460 ‫So basically we are having our height 120 view or. 42 00:02:27,110 --> 00:02:31,010 ‫If I save this one and get back here again, this is the height. 43 00:02:33,550 --> 00:02:38,980 ‫And we are this continent desanto, then there will be certain background images and then there will 44 00:02:38,980 --> 00:02:40,050 ‫be photos section. 45 00:02:40,060 --> 00:02:46,240 ‫So that's why this site is pretty big and there are several websites that try to utilize this concept. 46 00:02:46,660 --> 00:02:51,160 ‫So they have some content up to this call and they usually have hi guys. 47 00:02:51,530 --> 00:02:57,580 ‫VIDEO 120V going reach this high dose dependent on the screen size screen height, actually. 48 00:02:58,580 --> 00:03:05,330 ‫Now, I wanted this container to center, what I can do is I can simply apply flex and then there will 49 00:03:05,330 --> 00:03:09,290 ‫be a horizontal center and then there will be vertical center. 50 00:03:09,710 --> 00:03:10,670 ‫That should be easy. 51 00:03:11,090 --> 00:03:14,930 ‫What I'm going to do is I'm going to add our display or flex. 52 00:03:16,450 --> 00:03:17,260 ‫Save this one. 53 00:03:19,340 --> 00:03:19,700 ‫OK. 54 00:03:19,730 --> 00:03:23,300 ‫This is already a stretch, but what we can do is we can apply the changes. 55 00:03:23,540 --> 00:03:29,390 ‫This is all in the back on off flex directional rule, so fast items like an item thought item. 56 00:03:29,990 --> 00:03:35,240 ‫What I'm going to do is I'm going to change it and I'm going to add a flex directional column. 57 00:03:36,340 --> 00:03:38,980 ‫So Lake's direction column saved this one. 58 00:03:39,910 --> 00:03:41,380 ‫Now I have the sequence. 59 00:03:42,040 --> 00:03:44,730 ‫So the first thing I need to do is I need to change it. 60 00:03:44,740 --> 00:03:52,030 ‫I need to add the justified content, which will help me to saying that horizontally, as well as the 61 00:03:52,180 --> 00:03:56,100 ‫line items which will help me to center vertically. 62 00:03:56,110 --> 00:03:57,040 ‫Save this one. 63 00:03:57,070 --> 00:03:57,880 ‫Get back here. 64 00:03:59,160 --> 00:04:00,120 ‫This is good. 65 00:04:00,510 --> 00:04:04,660 ‫Now we are at the center are screen, that means our. 66 00:04:05,670 --> 00:04:11,040 ‫So what I am going to do is I'm going to change their size and do a lot of stuff. 67 00:04:11,310 --> 00:04:14,130 ‫So the first simple thing we can do is update the color. 68 00:04:14,400 --> 00:04:16,020 ‫So we have this color. 69 00:04:17,430 --> 00:04:21,650 ‫Updated, I'm going to jump here and add a Canadian. 70 00:04:23,860 --> 00:04:25,120 ‫Yep, this is the one. 71 00:04:26,330 --> 00:04:27,260 ‫Save this one. 72 00:04:27,620 --> 00:04:28,560 ‫This should be fine. 73 00:04:28,580 --> 00:04:29,360 ‫Get back here. 74 00:04:29,690 --> 00:04:36,340 ‫OK, now we are warning the caller the next thing is update all the one as well as feedback and button. 75 00:04:36,740 --> 00:04:41,770 ‫So Barton is going to have its own lecture, but let's update VH one as well as B. 76 00:04:42,440 --> 00:04:47,630 ‫What I'm going to do is select this section and then our panel and head. 77 00:04:47,630 --> 00:04:49,310 ‫I'm going to follow each one, Doug. 78 00:04:50,340 --> 00:04:56,970 ‫So I I I read a space that means I need a section with glass banner and then inside a child H1. 79 00:04:57,270 --> 00:04:57,900 ‫You can see. 80 00:04:59,640 --> 00:05:01,850 ‫S. Glass banner and then H1. 81 00:05:02,290 --> 00:05:07,170 ‫OK, so the first thing I'm going to do is I'm going to update the font size. 82 00:05:07,350 --> 00:05:10,110 ‫Let me try a five frame save this on. 83 00:05:12,320 --> 00:05:13,340 ‫OK, I think I should. 84 00:05:14,210 --> 00:05:16,880 ‫Let me try and save this one. 85 00:05:18,120 --> 00:05:19,170 ‫OK, much better. 86 00:05:20,760 --> 00:05:23,040 ‫And also, this is pretty big. 87 00:05:23,100 --> 00:05:24,960 ‫What I can do is I can update it. 88 00:05:25,440 --> 00:05:30,630 ‫So let me jump here, use line height and let me try a 1.2. 89 00:05:30,660 --> 00:05:34,830 ‫Now, whenever we are walking with line height, we don't need to provide any type of unit. 90 00:05:35,250 --> 00:05:38,250 ‫This is your let's save this one. 91 00:05:38,280 --> 00:05:39,120 ‫Get back here. 92 00:05:41,260 --> 00:05:42,130 ‫Much better. 93 00:05:44,520 --> 00:05:50,220 ‫The next thing I need to do is I need to add some margin with all these items. 94 00:05:50,290 --> 00:05:56,430 ‫So what I can do is I can also create another part which is going to be section large banner. 95 00:05:57,120 --> 00:05:59,760 ‫And I'm going to select the view that I'm here. 96 00:05:59,760 --> 00:06:04,170 ‫I'm going to start up one size, which is going to be 1.6 RAM. 97 00:06:05,330 --> 00:06:06,230 ‫Save this one. 98 00:06:06,260 --> 00:06:06,980 ‫Get back here. 99 00:06:08,930 --> 00:06:14,840 ‫Much better now, what I can do is I can add space at the top, at the bottom with the help of margin 100 00:06:14,840 --> 00:06:20,780 ‫on this view dagat self, so that could work for both the top and bottom item. 101 00:06:21,440 --> 00:06:24,080 ‫Select the margin and I'm going to add to them. 102 00:06:24,650 --> 00:06:25,610 ‫Zero Save. 103 00:06:28,260 --> 00:06:30,210 ‫OK, so we have some space now. 104 00:06:34,050 --> 00:06:36,240 ‫This one is still looking pretty small. 105 00:06:36,420 --> 00:06:42,780 ‫What I'm going to do is later on, add this want in our response have got so we can update it every 106 00:06:42,780 --> 00:06:43,440 ‫now and then. 107 00:06:44,220 --> 00:06:45,750 ‫Let me try to use this second. 108 00:06:45,780 --> 00:06:47,260 ‫Best them for now. 109 00:06:47,280 --> 00:06:48,120 ‫Get back here. 110 00:06:49,080 --> 00:06:50,430 ‫OK, much better. 111 00:06:50,640 --> 00:06:51,000 ‫Yeah. 112 00:06:52,180 --> 00:06:54,520 ‫Now, let's work on this partner. 113 00:06:54,670 --> 00:06:59,650 ‫So what we can do is we can either continue in this lecture itself or I think I should divide this. 114 00:06:59,980 --> 00:07:05,390 ‫So in the next lecture, let us continue the button part and also understand about the other remaining 115 00:07:05,390 --> 00:07:05,680 ‫time. 116 00:07:06,550 --> 00:07:08,030 ‫I hope this lecture was helpful. 117 00:07:08,080 --> 00:07:10,900 ‫Thank you for calling, and I see you guys in the next one.