1 00:00:00,900 --> 00:00:01,530 ‫Hey, there. 2 00:00:01,560 --> 00:00:02,280 ‫Welcome back. 3 00:00:02,400 --> 00:00:04,830 ‫Now let us continue our task without our harder. 4 00:00:05,340 --> 00:00:08,510 ‫So in a previous lecture, we fix this part. 5 00:00:08,800 --> 00:00:12,750 ‫That means we now have both this item as flex item. 6 00:00:13,170 --> 00:00:17,670 ‫If you see this as a container, we have all of these item flex item. 7 00:00:18,390 --> 00:00:23,430 ‫Now, the next thing I'm going to do is I'm going to arrange them at this center first. 8 00:00:23,730 --> 00:00:30,030 ‫So that means first, let me get back here and change the size now and go back to trim. 9 00:00:30,930 --> 00:00:37,050 ‫OK, so this is the actual size that I want, and what I want is I want this image to be at the center 10 00:00:37,260 --> 00:00:39,990 ‫and I want these items to be at the center. 11 00:00:40,530 --> 00:00:42,150 ‫And remember, we have flex. 12 00:00:42,150 --> 00:00:43,920 ‫We can utilize online self. 13 00:00:44,950 --> 00:00:52,900 ‫So this image is inside this logo, then that means this division, what I can do is I can see this 14 00:00:52,900 --> 00:00:59,340 ‫division is legs and this is going to be an item, then I can apply the property of align self. 15 00:01:00,310 --> 00:01:04,090 ‫So let me jump back here and I'm going to select the. 16 00:01:05,230 --> 00:01:06,850 ‫Header, not logo. 17 00:01:08,910 --> 00:01:11,040 ‫And I'm going to say this as display. 18 00:01:12,080 --> 00:01:12,590 ‫Flex. 19 00:01:14,100 --> 00:01:20,760 ‫Now, once I applied this property, that means only child, all the items for this logo class will 20 00:01:20,760 --> 00:01:21,870 ‫be flex item. 21 00:01:25,950 --> 00:01:31,590 ‫And then we can control it, so let me add a line self-centered here, get back here. 22 00:01:32,310 --> 00:01:34,020 ‫Now this should be at center. 23 00:01:34,260 --> 00:01:37,290 ‫So this is local and this is going to be at the center. 24 00:01:38,620 --> 00:01:44,290 ‫Now, the other issue I currently see is this container is not taking the complete height, and that's 25 00:01:44,290 --> 00:01:45,910 ‫why this is not the center part. 26 00:01:46,420 --> 00:01:53,050 ‫So what I can do is I can change the height of container and say 200 percent to this height of container 27 00:01:53,200 --> 00:01:57,150 ‫will depend on its parent, which has had a seamless one. 28 00:01:57,160 --> 00:01:57,910 ‫Get back here. 29 00:01:57,940 --> 00:02:02,950 ‫Now you can see this is a dissenter because this container is taking the company tight. 30 00:02:03,700 --> 00:02:05,740 ‫Now the next thing is about this now. 31 00:02:05,950 --> 00:02:10,480 ‫So currently, you see, this is taking hundred percent, but not this ul. 32 00:02:10,930 --> 00:02:16,330 ‫So what we can do is we can utilize this part and arrange this well in the center of this now. 33 00:02:16,690 --> 00:02:18,010 ‫That means I want it here. 34 00:02:22,320 --> 00:02:27,800 ‫So the best idea is to change the height of a U.N. and say this haidar's a person. 35 00:02:28,500 --> 00:02:32,130 ‫That means this will depend on its fate and get back here. 36 00:02:33,220 --> 00:02:39,160 ‫Now, this useless 100 percent, so we can apply different Lexmark settings since this is a flex class. 37 00:02:39,670 --> 00:02:46,270 ‫So what we can do is we can trust our justify content and I need space between them, so I'm going to 38 00:02:46,270 --> 00:02:47,110 ‫use space. 39 00:02:47,920 --> 00:02:50,740 ‫If I do, space between that would be Knox. 40 00:02:50,740 --> 00:02:53,800 ‫If I use space around, that will have equal spaces. 41 00:02:54,400 --> 00:02:55,930 ‫So that would be horizontal. 42 00:02:56,320 --> 00:02:58,830 ‫The next thing will be about alien content. 43 00:02:58,840 --> 00:03:06,280 ‫So I'm going to use align items if I use align items and if I use enter, that would be vertical. 44 00:03:06,400 --> 00:03:07,330 ‫Save this one. 45 00:03:07,360 --> 00:03:08,140 ‫Get back here. 46 00:03:08,800 --> 00:03:09,610 ‫OK, great. 47 00:03:10,030 --> 00:03:11,770 ‫So now this is walking fine. 48 00:03:11,770 --> 00:03:13,750 ‫We are have this item at the center. 49 00:03:13,750 --> 00:03:15,340 ‫We have this item at the center. 50 00:03:15,730 --> 00:03:20,740 ‫But if you see we have applied this just to a content space around, it's not working. 51 00:03:21,280 --> 00:03:21,700 ‫Why? 52 00:03:22,030 --> 00:03:27,820 ‫Because of this piece, if I right click here again and dig this inspector at the bottom. 53 00:03:28,270 --> 00:03:29,590 ‫And if you jump here. 54 00:03:29,680 --> 00:03:32,640 ‫So this is to do this is now. 55 00:03:33,190 --> 00:03:36,010 ‫So we are not utilizing this whole space. 56 00:03:37,150 --> 00:03:42,640 ‫Now to fix this, the first thing I'm going to do is I'm going to add that a foreign size also, I'm 57 00:03:42,640 --> 00:03:43,900 ‫going to add padding. 58 00:03:44,410 --> 00:03:51,090 ‫So what I'm going to do is inside my head, I'm going to select my nerve, my jewel and then my airline. 59 00:03:51,880 --> 00:03:57,520 ‫Now inside this alive, all actors are fighting on the boat side, which has left and right. 60 00:03:57,760 --> 00:04:00,460 ‫So I'm going to zero and then do them. 61 00:04:03,240 --> 00:04:10,260 ‫The next thing is I'm going to upgrade their phone size, so I live crew uses on site is here and I'm 62 00:04:10,260 --> 00:04:13,040 ‫going to change them for 1.5 for them. 63 00:04:13,530 --> 00:04:14,490 ‫Save this one. 64 00:04:16,430 --> 00:04:17,780 ‫You can see it's much better. 65 00:04:21,460 --> 00:04:23,590 ‫I hope you got the idea, what we are trying to do. 66 00:04:24,250 --> 00:04:26,530 ‫So that's done, that's all for us. 67 00:04:26,800 --> 00:04:29,320 ‫Now there are several things that we need to upgrade. 68 00:04:29,440 --> 00:04:32,730 ‫The first thing is this looks a bit bulky. 69 00:04:32,770 --> 00:04:34,360 ‫That means a bit gold. 70 00:04:34,690 --> 00:04:37,780 ‫So what we can do is we can add 400 head. 71 00:04:40,210 --> 00:04:47,260 ‫And let me change country to 600 by default, that's around 300 400, so let's try 600. 72 00:04:48,340 --> 00:04:49,660 ‫OK, it's working fine. 73 00:04:50,020 --> 00:04:55,030 ‫We can also add our effect and change the culture and also change the color. 74 00:04:55,540 --> 00:04:59,110 ‫So what I'm going to do is I'm going to add 10. 75 00:05:00,460 --> 00:05:03,430 ‫It may copy this selector part, and here let me out. 76 00:05:04,790 --> 00:05:07,220 ‫Howard, and I'm going to change the color. 77 00:05:10,050 --> 00:05:13,440 ‫As usual, I have copied the colors, so you don't have to do anything. 78 00:05:14,640 --> 00:05:15,810 ‫That's done. 79 00:05:15,930 --> 00:05:19,240 ‫I also need to change the culture. 80 00:05:19,290 --> 00:05:25,560 ‫So what I'm going to do is I'm going to utilize calzone and then Janet 2.0, now head. 81 00:05:25,560 --> 00:05:29,460 ‫I'm not adding any type of a traveling and normal website. 82 00:05:29,460 --> 00:05:35,190 ‫Or I should say in our real website, you will add each rep and then there will be a link to a new page 83 00:05:35,460 --> 00:05:39,630 ‫that will be about premium or about the support page download page. 84 00:05:39,870 --> 00:05:42,870 ‫Martin, I'm not doing that because we don't need it. 85 00:05:42,900 --> 00:05:44,830 ‫We are just building different clone. 86 00:05:45,630 --> 00:05:49,800 ‫So I hope you got the idea what we are trying to do, and now it's look much better. 87 00:05:50,610 --> 00:05:51,270 ‫So that's it. 88 00:05:51,300 --> 00:05:56,820 ‫You can also change the color for sign up, as well as log in as most websites usually do. 89 00:05:57,480 --> 00:06:01,200 ‫The other thing that is remaining is about this particular white one. 90 00:06:01,200 --> 00:06:02,460 ‫So if I jump back here. 91 00:06:05,400 --> 00:06:08,490 ‫Now, how are we going to address addiction about the image size? 92 00:06:09,150 --> 00:06:13,440 ‫By default, the image sizes 100 percent of the original size. 93 00:06:13,680 --> 00:06:19,260 ‫That means if I am body image, which currently has a size of maybe a thousand pixels. 94 00:06:19,710 --> 00:06:27,360 ‫So when I imboden or added on my HD html page, it will be 2000 pixels, but we can what I did using 95 00:06:27,360 --> 00:06:27,510 ‫our. 96 00:06:28,500 --> 00:06:32,880 ‫Remember the default sizes 100 percent of the original size. 97 00:06:33,690 --> 00:06:38,800 ‫Now what we can do is we can set our image height as 100 percent off patent. 98 00:06:38,820 --> 00:06:40,230 ‫That means 100 percent. 99 00:06:40,500 --> 00:06:42,810 ‫Then it will depend on the logo size. 100 00:06:42,840 --> 00:06:44,880 ‫That means the size of this height. 101 00:06:45,540 --> 00:06:50,250 ‫So what we can do is we can try, OK, we can see here that image height is. 102 00:06:52,020 --> 00:06:58,920 ‫100 percent now on this, the size, the height of this particular element, which is our logo, which 103 00:06:58,920 --> 00:07:00,090 ‫is appear in court image. 104 00:07:00,510 --> 00:07:07,110 ‫Now if I change its height as currently we are following the height of our background, which is our 105 00:07:07,110 --> 00:07:07,530 ‫harder. 106 00:07:07,980 --> 00:07:10,980 ‫So if I say maybe height does. 107 00:07:12,120 --> 00:07:18,360 ‫50 pixels, suppose, and if I save it, if I get back here, you can see now the logo is changing its 108 00:07:18,360 --> 00:07:18,720 ‫size. 109 00:07:19,200 --> 00:07:25,500 ‫Maybe let me take it for the Pixel and if I save this, you can see nobody's changing its size. 110 00:07:26,640 --> 00:07:30,630 ‫So that means the height of our current child is dependent on its parent. 111 00:07:30,840 --> 00:07:32,310 ‫And we know about it. 112 00:07:32,640 --> 00:07:39,330 ‫So what we can do is we can add a height to our current logo or we can directly add to this and keep 113 00:07:39,330 --> 00:07:41,190 ‫updating the height every time. 114 00:07:41,340 --> 00:07:43,260 ‫We have some respond to content. 115 00:07:43,260 --> 00:07:47,490 ‫That means we are changing the size so we can't do any of it either. 116 00:07:47,490 --> 00:07:53,760 ‫We can depend on the parent height or we can just remove this and add a fixed height here with our current 117 00:07:53,760 --> 00:07:54,120 ‫image. 118 00:07:54,480 --> 00:07:59,040 ‫So maybe we can sit for eight pixels, something like this, for example. 119 00:07:59,330 --> 00:08:02,640 ‫And if I get my cat, you can see it's working fine. 120 00:08:04,420 --> 00:08:05,890 ‫I hope you got the idea. 121 00:08:07,270 --> 00:08:12,760 ‫So that's it that's done for our head out, there will be several changes, the question will be definitely 122 00:08:12,760 --> 00:08:15,760 ‫how you will see this as a scroll because it's a big page. 123 00:08:16,060 --> 00:08:19,330 ‫And that's why you are seeing difference when I'm switching my tabs. 124 00:08:19,900 --> 00:08:24,100 ‫So in the next lecture, what we are going to do is we are going to play with the main section. 125 00:08:24,430 --> 00:08:26,530 ‫Our header part is done for now. 126 00:08:26,980 --> 00:08:28,840 ‫I think only one changes remaining. 127 00:08:28,840 --> 00:08:33,910 ‫That is, when I visit this Spotify logo, we are going to get a pointer. 128 00:08:34,330 --> 00:08:37,270 ‫So what we can do is we can add a effect. 129 00:08:37,600 --> 00:08:39,640 ‫So let me select my selector. 130 00:08:40,830 --> 00:08:42,720 ‫And and our effect here. 131 00:08:44,510 --> 00:08:46,940 ‫And simply changed, the guard said here. 132 00:08:48,080 --> 00:08:51,080 ‫And see 2.0 saved us. 133 00:08:51,170 --> 00:08:52,190 ‫Get back here. 134 00:08:53,290 --> 00:08:53,800 ‫OK. 135 00:08:55,030 --> 00:08:57,070 ‫Everything is working fine for us now. 136 00:08:57,850 --> 00:08:58,730 ‫Thank you for calling. 137 00:08:58,750 --> 00:09:00,020 ‫I hope you got the idea. 138 00:09:00,070 --> 00:09:06,010 ‫Whatever we are trying to experiment on, not just with the Flexbox part, but we are also trying to 139 00:09:06,010 --> 00:09:11,160 ‫experiment with the other content like I and different type of work also. 140 00:09:11,530 --> 00:09:13,210 ‫So that's it for this lecture. 141 00:09:13,270 --> 00:09:16,030 ‫Let us continue the Spotify part in the next one. 142 00:09:16,480 --> 00:09:18,940 ‫Thank you for calling and I see you guys in the next one.