1 00:00:01,450 --> 00:00:01,990 ‫Hey, there. 2 00:00:02,140 --> 00:00:02,890 ‫Welcome back. 3 00:00:03,250 --> 00:00:05,740 ‫Now let us continue our task with the that part. 4 00:00:06,490 --> 00:00:12,610 ‫So if I get back here, there are few steps that I think you already have understanding about. 5 00:00:13,120 --> 00:00:19,840 ‫The first thing is we are going to give size to our container because currently it is going to spread 6 00:00:19,840 --> 00:00:21,280 ‫towards 100 percent. 7 00:00:21,610 --> 00:00:28,270 ‫So what I'm going to do is give us a two hour container and also give our displace flex so I can have 8 00:00:28,270 --> 00:00:33,220 ‫my water way than my legs than my social media and every other thing. 9 00:00:33,940 --> 00:00:40,510 ‫So we are going to work on this section was this particular part, which is going to be local links 10 00:00:40,510 --> 00:00:41,500 ‫and social media. 11 00:00:41,950 --> 00:00:44,470 ‫I'm going to comment the last two division parts. 12 00:00:46,120 --> 00:00:51,250 ‫That's done, and you can utilize our section hand or you can utilize that depend on you. 13 00:00:51,460 --> 00:00:53,830 ‫I'm going to replace this with section. 14 00:00:54,790 --> 00:00:58,000 ‫OK, this looks fine, so we have a section and we have the item. 15 00:00:58,900 --> 00:00:59,830 ‫Let me get back here. 16 00:01:00,070 --> 00:01:06,070 ‫And the first thing I'm going to do is I'm going to select my photo and then my section with a class 17 00:01:06,070 --> 00:01:06,910 ‫of container. 18 00:01:08,990 --> 00:01:14,600 ‫This looks fine, so we have start inserting the question is going to be about our work, so that could 19 00:01:14,600 --> 00:01:15,560 ‫be 90 percent. 20 00:01:16,130 --> 00:01:22,040 ‫The second one will be about our margin, so I need to give a margin as auto and then the third one 21 00:01:22,040 --> 00:01:24,860 ‫will be about our display, which is going to be flex. 22 00:01:25,970 --> 00:01:26,790 ‫Save this one. 23 00:01:26,810 --> 00:01:27,620 ‫Get back here. 24 00:01:30,860 --> 00:01:37,130 ‫OK, now this looks fine, so we have these three items that means these are no child for this flex 25 00:01:37,460 --> 00:01:39,170 ‫or this container, basically. 26 00:01:40,140 --> 00:01:42,200 ‫Now we can utilize different properties. 27 00:01:42,560 --> 00:01:49,340 ‫So the first property I'm going to utilize is definitely going to be justified content and I'm going 28 00:01:49,340 --> 00:01:51,380 ‫to add our space evenly. 29 00:01:54,090 --> 00:01:58,170 ‫So it will have gaps between all of the items you can see. 30 00:01:59,460 --> 00:02:05,520 ‫Now, I can also add different other parts, like banning that we will discuss later because you can 31 00:02:05,520 --> 00:02:12,690 ‫see there is some top space, I can add that also remember the property of Grab because if I click on 32 00:02:12,690 --> 00:02:18,630 ‫Inspect and if I try to minimize this, you can see all of these items are going down. 33 00:02:19,440 --> 00:02:23,130 ‫Or I should say Nicastro, because of their property. 34 00:02:23,640 --> 00:02:25,290 ‫So it's an important property. 35 00:02:25,500 --> 00:02:27,120 ‫Make sure you remember about it. 36 00:02:27,480 --> 00:02:35,640 ‫So here, let me add the wrap property all after the US just mention Flex Wrap as up and save this one. 37 00:02:36,030 --> 00:02:40,980 ‫There will be few changes that we can implement later, but that's good for now. 38 00:02:41,490 --> 00:02:43,020 ‫And this is looking fine. 39 00:02:43,920 --> 00:02:46,560 ‫OK, not fine, but OK, we are working on it. 40 00:02:47,220 --> 00:02:53,400 ‫The next thing is, I need to work on this because here you can see these are three different parts. 41 00:02:54,700 --> 00:03:02,980 ‫So what actually happened is if we jump here, we opened this link, and if I say this is flex now, 42 00:03:02,980 --> 00:03:04,750 ‫then all of them will be. 43 00:03:05,230 --> 00:03:09,640 ‫Item what I should say child, and then we can control them. 44 00:03:09,820 --> 00:03:14,680 ‫So what I'm going to do is I'm going to convert this link into Flex property. 45 00:03:17,290 --> 00:03:22,990 ‫So the basic thing I can do is I can utilize fodder and then I can directly select Link. 46 00:03:27,320 --> 00:03:31,670 ‫And had I just need to pass displays flags, and if I saved this one. 47 00:03:33,790 --> 00:03:38,170 ‫Now you can see I have this first, second as a as third column. 48 00:03:38,560 --> 00:03:42,910 ‫Now, at this point of time, we don't have much space on. 49 00:03:42,910 --> 00:03:46,660 ‫Also one important thing I recommend just click on Inspect. 50 00:03:47,790 --> 00:03:55,320 ‫Jump onto your hotel part and this section and then click on Flex, so you will see how they have distributed 51 00:03:55,320 --> 00:03:56,100 ‫all the items. 52 00:03:56,100 --> 00:04:00,450 ‫So there is some blank space, blank space, blank space and blank space. 53 00:04:01,020 --> 00:04:03,480 ‫Now remember the property of Flex Group. 54 00:04:04,290 --> 00:04:12,210 ‫We can utilize Flex Group for this particular section, so that means all the extra space can be distributed 55 00:04:12,210 --> 00:04:12,840 ‫among this. 56 00:04:13,020 --> 00:04:19,470 ‫So if I jump pad and if I use a property as the first property, I want to artist flex it up because 57 00:04:19,470 --> 00:04:21,420 ‫I want to have them responsive. 58 00:04:21,750 --> 00:04:25,380 ‫And the second property I want to artist Flex Grow. 59 00:04:28,700 --> 00:04:34,130 ‫Now, why I can apply this properly flex group, because we are a child of this country now, remember 60 00:04:34,460 --> 00:04:42,830 ‫this is an item for this container and I can say to save this one and get back here and you will see 61 00:04:42,830 --> 00:04:43,580 ‫the change now. 62 00:04:43,580 --> 00:04:46,520 ‫If I jump onto this section, click on this flex. 63 00:04:46,790 --> 00:04:49,620 ‫Now you don't see any type of extra space. 64 00:04:49,640 --> 00:04:50,060 ‫Why? 65 00:04:50,480 --> 00:04:55,370 ‫Because Flex Grow is distributing the extra space here later on. 66 00:04:55,370 --> 00:04:58,850 ‫I'm also going to utilize that space with our social icon. 67 00:04:59,360 --> 00:05:03,620 ‫We don't need space for our logo, but we need space for these two section. 68 00:05:04,430 --> 00:05:07,970 ‫OK, that said, I just need to arrange this properly now. 69 00:05:08,060 --> 00:05:09,170 ‫So let me get back. 70 00:05:10,840 --> 00:05:17,470 ‫And said I just need to first and justify content because I need to distribute all the columns, so 71 00:05:17,470 --> 00:05:21,070 ‫I'm going to utilize space evenly and save this one. 72 00:05:21,190 --> 00:05:22,030 ‫Get back here. 73 00:05:22,690 --> 00:05:25,900 ‫Hey, you can see now all three are distributed properly. 74 00:05:26,410 --> 00:05:31,720 ‫One change I need to do right now is about their phone size so we can visualize them better. 75 00:05:32,170 --> 00:05:38,020 ‫So all I have to do is just first jump here and I'm going to select the L.A.. 76 00:05:38,740 --> 00:05:40,090 ‫Which is going to be fodder. 77 00:05:40,420 --> 00:05:42,970 ‫And inside that, I have links. 78 00:05:42,970 --> 00:05:45,580 ‫I have the world tag L.A. done. 79 00:05:45,940 --> 00:05:51,640 ‫And then inside that I can change the font size and I'm going to go with five rim. 80 00:05:52,240 --> 00:05:53,650 ‫And if I try this one? 81 00:05:54,010 --> 00:05:55,060 ‫OK, much better. 82 00:05:55,060 --> 00:05:57,340 ‫Now you can see some similarity. 83 00:05:59,210 --> 00:06:01,520 ‫I need to change the size for this. 84 00:06:02,270 --> 00:06:02,900 ‫Oh, OK. 85 00:06:02,930 --> 00:06:03,890 ‫Let me select that. 86 00:06:03,890 --> 00:06:06,530 ‫So remember, we have attached hiding. 87 00:06:07,430 --> 00:06:10,460 ‫That means that class as hurting, you can see. 88 00:06:10,880 --> 00:06:13,430 ‫So what we can do is we can override law nothing. 89 00:06:13,670 --> 00:06:16,250 ‫So I have to do is just select this. 90 00:06:18,000 --> 00:06:25,110 ‫And interrupt and I can directly select the class which is heading and I can change the color. 91 00:06:29,370 --> 00:06:30,010 ‫OK. 92 00:06:30,100 --> 00:06:34,900 ‫This looks dark somewhat, and then I'm going to change the font weight. 93 00:06:37,060 --> 00:06:38,980 ‫This is going to be 700. 94 00:06:39,790 --> 00:06:46,420 ‫The third thing I'm going to change is font size, and if I go over the 1.8m, this should look fine. 95 00:06:47,050 --> 00:06:50,060 ‫Remember, this is one point five and this is one point three. 96 00:06:50,110 --> 00:06:50,990 ‫Get back here. 97 00:06:51,940 --> 00:06:53,500 ‫You see, this is much better now. 98 00:06:57,540 --> 00:07:02,010 ‫OK, this looks fine, so we have a basic said about that photo. 99 00:07:03,040 --> 00:07:07,480 ‫Let me also add some top margin and bottom margin, or I should say padding here. 100 00:07:07,840 --> 00:07:15,260 ‫So let me jump on to my for the part and let me get inside my container and add some padding so that 101 00:07:15,280 --> 00:07:18,060 ‫I'm going to our fighting towards it. 102 00:07:18,130 --> 00:07:21,880 ‫Always going to be six a.m. Then right is going to be zero. 103 00:07:22,270 --> 00:07:25,930 ‫Bottom is going to be for them and then left, there's going to be zero. 104 00:07:27,350 --> 00:07:33,530 ‫And if I see this one jump back here, OK, I have some space on the top and bottom. 105 00:07:34,250 --> 00:07:37,150 ‫Now let me jump here on this particular section. 106 00:07:37,160 --> 00:07:41,900 ‫Why if I right click here again, I'm going to jump onto this flex button. 107 00:07:43,110 --> 00:07:45,600 ‫What this section actually let me do this. 108 00:07:46,830 --> 00:07:50,190 ‫Get inside the photo, select the container, click on Flex. 109 00:07:52,000 --> 00:07:58,450 ‫Now, if you observe maximum spaces distributed for our second section, and that is obvious because 110 00:07:58,450 --> 00:08:05,770 ‫we have utilized the flex good option, if I try to give them proper space, I just need to add content 111 00:08:05,770 --> 00:08:09,430 ‫that I need to give them flex direction as law. 112 00:08:09,670 --> 00:08:12,660 ‫Also, I need to add some background like this. 113 00:08:13,940 --> 00:08:17,720 ‫There's a dark gray background, so I need to do certain changes. 114 00:08:18,470 --> 00:08:24,350 ‫So the first thing I'm going to do is I'm going to jump onto the section, I'm going to minimize this 115 00:08:24,350 --> 00:08:28,700 ‫link, getting to this solution and then we have these L.A. tags. 116 00:08:29,180 --> 00:08:31,070 ‫So all I have to do is just jump here. 117 00:08:33,900 --> 00:08:37,680 ‫And the first thing I'm going to do select the photo social. 118 00:08:38,750 --> 00:08:42,440 ‫And then I have you will house how I'm going to define this. 119 00:08:42,740 --> 00:08:48,010 ‫So if I said this is a display of flags, then all of them are going to be changed. 120 00:08:48,680 --> 00:08:50,180 ‫Now I can control them. 121 00:08:50,210 --> 00:08:56,780 ‫That means if this is flex, that means I can arrange their direction, flex direction, according to 122 00:08:56,780 --> 00:08:57,260 ‫the rule. 123 00:08:57,710 --> 00:09:01,400 ‫I can also arrange them horizontally as well as vertically. 124 00:09:02,820 --> 00:09:09,090 ‫So this is the first change that I'm going to apply, all I have to do is, yes, utilize display and 125 00:09:09,090 --> 00:09:10,840 ‫I'm going to go with legs. 126 00:09:11,730 --> 00:09:17,670 ‫And the other thing I can do is I can justify content and I'm going to justify them at center. 127 00:09:21,080 --> 00:09:21,900 ‫Save this one. 128 00:09:21,950 --> 00:09:22,790 ‫Get back here. 129 00:09:23,890 --> 00:09:26,350 ‫You can see now they are actually in our direction. 130 00:09:27,560 --> 00:09:33,890 ‫OK, this looks fine, but I need to improve their size, so remember, their size is dependent on deformed 131 00:09:33,890 --> 00:09:34,340 ‫size. 132 00:09:36,900 --> 00:09:43,440 ‫What we can do is we can change this size our own or ally or directly, I so ahead I'm going to select 133 00:09:43,440 --> 00:09:49,740 ‫the four and I'm like the light dog on inside that I can do anything. 134 00:09:49,740 --> 00:09:55,890 ‫The first thing I'm going to do is definitely change the font size, which is going to affect the entire 135 00:09:55,890 --> 00:09:56,520 ‫content. 136 00:09:57,600 --> 00:10:00,090 ‫Let me go with 2.6 2.6m. 137 00:10:00,450 --> 00:10:01,350 ‫Save this one. 138 00:10:01,500 --> 00:10:02,390 ‫Get back here. 139 00:10:03,840 --> 00:10:08,280 ‫Now we can see they are pretty big, but again, they don't have this background. 140 00:10:08,400 --> 00:10:15,120 ‫So since we have selected a lie, basically what I'm doing is I have this a lie dug and then inside 141 00:10:15,120 --> 00:10:16,170 ‫this, I have this. 142 00:10:17,460 --> 00:10:21,750 ‫What I can do is I can change the background controlling this a little. 143 00:10:21,780 --> 00:10:24,800 ‫Basically, what I can do is I can add a background colour. 144 00:10:25,230 --> 00:10:28,650 ‫I like to background colour something related to dark grey. 145 00:10:30,860 --> 00:10:36,470 ‫Once that is done, I can set our height as well as work, so maybe let's go with five point five rim 146 00:10:36,980 --> 00:10:38,060 ‫as well as width. 147 00:10:38,540 --> 00:10:40,550 ‫Let's go with five point five rim. 148 00:10:45,500 --> 00:10:48,740 ‫OK, now we have these different item, if I right click here. 149 00:10:50,700 --> 00:10:54,180 ‫You can see we have these three boxes. 150 00:10:55,250 --> 00:10:56,660 ‫Let me add some margin. 151 00:10:56,750 --> 00:11:02,870 ‫So what I'm going to do is I'm going to on margin top and bottom zero going now and left and right should 152 00:11:02,870 --> 00:11:04,040 ‫be 0.6. 153 00:11:04,040 --> 00:11:05,840 ‫Adam, get back here. 154 00:11:06,590 --> 00:11:08,720 ‫You can see now we have spaces. 155 00:11:09,290 --> 00:11:14,450 ‫Now here is one breakfast how I can center these icons here. 156 00:11:14,870 --> 00:11:20,510 ‫So we have a light bag and then in between that we have some content. 157 00:11:21,320 --> 00:11:28,220 ‫This will help you to understand we have laid dog and then we have this icon how you can center that. 158 00:11:28,450 --> 00:11:31,260 ‫Again, we are learning about flex walks. 159 00:11:31,280 --> 00:11:32,540 ‫You should know about this. 160 00:11:32,870 --> 00:11:39,440 ‫What we can do is we can say this dog as flex, and then we can utilize align line items as well as 161 00:11:39,440 --> 00:11:41,990 ‫justified content towards center. 162 00:11:42,140 --> 00:11:43,940 ‫So that's what we are going to do. 163 00:11:44,630 --> 00:11:47,540 ‫Let me utilize this as display flex. 164 00:11:47,540 --> 00:11:56,840 ‫I mean, and then I just need to add to property justified content center as well as align items at 165 00:11:56,850 --> 00:11:57,560 ‫center. 166 00:11:57,710 --> 00:11:58,640 ‫Save this one. 167 00:11:58,650 --> 00:11:59,540 ‫Get back here. 168 00:12:00,970 --> 00:12:02,440 ‫OK, we did it. 169 00:12:02,710 --> 00:12:05,140 ‫We did some pretty good tasks. 170 00:12:05,890 --> 00:12:08,650 ‫Now if you compare this ad, it's better. 171 00:12:08,740 --> 00:12:11,080 ‫We are moving forward with some better results. 172 00:12:11,410 --> 00:12:14,290 ‫But there is still one requirement the so-called. 173 00:12:15,320 --> 00:12:20,880 ‫What we can do is we can utilize the border radius, so had all I have to do is just add our border 174 00:12:20,880 --> 00:12:24,650 ‫radius, I can add it here, simply add border radius. 175 00:12:26,490 --> 00:12:28,620 ‫And I'm going to drive it 50 percent. 176 00:12:29,040 --> 00:12:29,880 ‫Get back here. 177 00:12:31,490 --> 00:12:32,780 ‫This is working well. 178 00:12:35,900 --> 00:12:37,010 ‫We are moving forward. 179 00:12:37,220 --> 00:12:43,820 ‫The other thing that you can notice is the spaces between them that is clearly visible. 180 00:12:44,270 --> 00:12:47,150 ‫Also the size of our current logo. 181 00:12:47,330 --> 00:12:48,690 ‫So I need to improve that. 182 00:12:49,130 --> 00:12:54,770 ‫So before moving forward to next lecture, let us quickly edit the Howard effect and add some spaces 183 00:12:55,580 --> 00:12:58,490 ‫that could ease our task for the next lecture. 184 00:12:58,730 --> 00:13:00,440 ‫So just add to what effect? 185 00:13:00,860 --> 00:13:01,910 ‫Let me get back here. 186 00:13:04,850 --> 00:13:08,740 ‫I just need to select the same item and then are our. 187 00:13:09,810 --> 00:13:14,370 ‫And had I just need to change the color, which is going to be the green. 188 00:13:14,850 --> 00:13:17,960 ‫And I just need to change the culture towards point. 189 00:13:18,540 --> 00:13:21,450 ‫So let me add it to get back. 190 00:13:24,470 --> 00:13:25,880 ‫Yup, talking. 191 00:13:28,750 --> 00:13:35,860 ‫I hope you got the idea, what we are trying to do, the other thing is horrific for them also as well 192 00:13:35,860 --> 00:13:37,560 ‫as these facing. 193 00:13:37,570 --> 00:13:44,560 ‫So first, let me fix the spacing here we have this L.A. So remember, currently we are only working 194 00:13:44,560 --> 00:13:47,200 ‫with the font size with, ah, L.A.. 195 00:13:48,040 --> 00:13:50,530 ‫And let me try to add some padding. 196 00:13:50,980 --> 00:13:53,770 ‫Let me try to add one rim here. 197 00:13:53,860 --> 00:13:54,820 ‫Saved this one. 198 00:13:55,030 --> 00:13:55,930 ‫Get back here. 199 00:13:59,420 --> 00:14:02,900 ‫OK, I think I should add some more spaces. 200 00:14:04,160 --> 00:14:11,630 ‫Remember, you can always right click here any Web site and you can get information, so if I right 201 00:14:11,630 --> 00:14:16,240 ‫click here, there is acting, which is 1.3m. 202 00:14:16,820 --> 00:14:21,080 ‫You can see just by visiting all these inspect levels. 203 00:14:21,560 --> 00:14:28,250 ‫So if I jump here currently I'm utilizing this one room I can utilize 1.3, then get back here. 204 00:14:29,360 --> 00:14:30,640 ‫Much better result. 205 00:14:30,650 --> 00:14:37,610 ‫And if you observe, OK, we are much closer, but we still have some differences with these spaces. 206 00:14:38,090 --> 00:14:43,820 ‫So in the next lecture, the first thing we are going to do is just fix this lugosi's again and then 207 00:14:43,820 --> 00:14:46,400 ‫start working with the product changes. 208 00:14:47,150 --> 00:14:48,950 ‫I hope this lecture was helpful. 209 00:14:49,100 --> 00:14:55,850 ‫Now you have basic understanding about all these flags that we are doing inside the flags and basically 210 00:14:55,850 --> 00:14:57,680 ‫we are just walking with bad intent. 211 00:14:58,430 --> 00:15:01,160 ‫So thank you for calling and I see you guys in the next one.