1 00:00:00,760 --> 00:00:01,350 ‫Hey, there. 2 00:00:01,420 --> 00:00:02,140 ‫Welcome back. 3 00:00:02,410 --> 00:00:08,340 ‫Now let us talk working with the next section, so that means we currently have this country parked 4 00:00:08,350 --> 00:00:10,060 ‫as well as the section. 5 00:00:11,360 --> 00:00:12,050 ‫Pretty easy. 6 00:00:12,200 --> 00:00:17,780 ‫All I have to do is jump head on Commander Spock first, let me uncomment all of them. 7 00:00:19,150 --> 00:00:20,260 ‫And save this one. 8 00:00:20,290 --> 00:00:21,100 ‫Get back here. 9 00:00:21,730 --> 00:00:28,420 ‫Now the problem currently you see, is we have this section, which is our icon plus country and the 10 00:00:28,420 --> 00:00:33,850 ‫other section head itself because we are following flex directions, it's pretty obvious. 11 00:00:35,260 --> 00:00:41,190 ‫Now, I heard if I want to move this to next section, basically head, I'm taking the complete part, 12 00:00:41,200 --> 00:00:43,030 ‫complete part of this section. 13 00:00:43,570 --> 00:00:49,870 ‫What I can do is I can change the 200 percent because I'm taking complete part if I right click here 14 00:00:50,440 --> 00:00:53,680 ‫and click on Flex here. 15 00:00:54,010 --> 00:01:00,100 ‫You can see I'm taking complete part here, so that means this horizontal is 100 percent. 16 00:01:00,520 --> 00:01:03,100 ‫What I can do is I can select this location. 17 00:01:04,210 --> 00:01:11,830 ‫This is going to be after social folder and then I'm going to select my location and head. 18 00:01:11,830 --> 00:01:13,930 ‫I can set it 100 percent. 19 00:01:14,890 --> 00:01:20,530 ‫Remember, 100 percent will depend on the parent or the parent for now is contained. 20 00:01:21,250 --> 00:01:25,960 ‫So this is going to take hundred percent of this container grid. 21 00:01:26,890 --> 00:01:33,640 ‫And if I jump here, get back here, you can see this is going to be 100 percent this whole line. 22 00:01:35,730 --> 00:01:37,110 ‫I hope you got the idea. 23 00:01:37,590 --> 00:01:42,840 ‫Now I can change it to flex and or any any direction that I want. 24 00:01:43,140 --> 00:01:45,090 ‫Now this is under my control. 25 00:01:45,270 --> 00:01:49,750 ‫So my main motive was to give you an idea how we can do that at simple now. 26 00:01:49,770 --> 00:01:54,930 ‫So since we have this location, I can change not opting. 27 00:01:55,170 --> 00:02:03,600 ‫I can add margin because if you observe we have some gap this gap here, we can add this margin to. 28 00:02:03,690 --> 00:02:04,920 ‫All I could do is. 29 00:02:05,940 --> 00:02:07,860 ‫Use margin drop in. 30 00:02:09,210 --> 00:02:11,190 ‫I can give maybe 10. 31 00:02:13,150 --> 00:02:19,090 ‫Then the second thing is, I'm going to convert this into this Netflix, and that really will have option 32 00:02:19,090 --> 00:02:21,100 ‫with the justified content. 33 00:02:21,310 --> 00:02:24,550 ‫And I can suplex and save this one. 34 00:02:24,580 --> 00:02:28,410 ‫Get back here and you can see now we have this content here. 35 00:02:28,960 --> 00:02:33,130 ‫But the issue is if you observe, the issue is the pacing. 36 00:02:33,640 --> 00:02:36,130 ‫So I need to change the size. 37 00:02:36,130 --> 00:02:38,300 ‫I also need to add some spacing. 38 00:02:38,320 --> 00:02:39,790 ‫So let me jump here. 39 00:02:40,690 --> 00:02:46,060 ‫First, let me increase the acorn size and I'm going to go with one point to them. 40 00:02:46,750 --> 00:02:50,320 ‫And the other thing I need to change is the color also. 41 00:02:50,800 --> 00:02:52,030 ‫Yup, it's not white. 42 00:02:52,030 --> 00:02:53,170 ‫It's somewhat gray. 43 00:02:53,560 --> 00:02:55,330 ‫So I also need to update the color. 44 00:02:57,360 --> 00:03:00,980 ‫And I'm going to utilize someone great. 45 00:03:03,870 --> 00:03:10,250 ‫So this is done, but remember, I need to add some spacing spacing between these two, and if you observe 46 00:03:10,250 --> 00:03:18,030 ‫it, let me try to zoom in and if you observe this, this is not equal, so this is lying on the top. 47 00:03:20,150 --> 00:03:27,620 ‫Pops up and this is in center, the globe is touching the top and the country name is in the center 48 00:03:27,620 --> 00:03:28,700 ‫of this whole thing. 49 00:03:29,330 --> 00:03:30,770 ‫OK, we can control this. 50 00:03:30,770 --> 00:03:33,550 ‫Since we are using Flexbox, we can do a lot of thing. 51 00:03:34,070 --> 00:03:38,170 ‫But let me jump here first and see my dogs. 52 00:03:38,170 --> 00:03:41,420 ‫So we have this eye dog and then we have this pen. 53 00:03:41,810 --> 00:03:44,930 ‫OK, so first, we need to control this van. 54 00:03:44,930 --> 00:03:48,860 ‫Add some padding so we can have some space on left and right side. 55 00:03:49,670 --> 00:03:52,220 ‫Select decoder, then I have my location. 56 00:03:53,380 --> 00:03:57,190 ‫And then I have my Spanta and let me add finding. 57 00:03:59,000 --> 00:04:02,240 ‫I zero on the top and one room on the left and right. 58 00:04:02,480 --> 00:04:04,820 ‫So this is going to have some space. 59 00:04:05,030 --> 00:04:06,020 ‫This looks better. 60 00:04:06,350 --> 00:04:10,040 ‫The other thing I need to change is remember the global icon. 61 00:04:10,040 --> 00:04:13,130 ‫So all I have to do is again, select the item. 62 00:04:13,550 --> 00:04:17,420 ‫So this is going to be shorter than my dog and head. 63 00:04:17,420 --> 00:04:20,360 ‫I just need to align self center. 64 00:04:20,570 --> 00:04:21,110 ‫Why? 65 00:04:21,500 --> 00:04:23,690 ‫Because up period is flex. 66 00:04:23,690 --> 00:04:26,150 ‫Currently the parent of this is Flex. 67 00:04:27,510 --> 00:04:30,030 ‫This whole location is following the Flex. 68 00:04:30,360 --> 00:04:36,660 ‫So this is going to be an item on I can utilize all the properties that I'm following and we can do 69 00:04:36,660 --> 00:04:38,600 ‫this and I'll save this one. 70 00:04:38,610 --> 00:04:39,420 ‫Get back in. 71 00:04:40,320 --> 00:04:42,120 ‫OK, now this looks fine. 72 00:04:42,150 --> 00:04:45,480 ‫Exactly like this, and I need to add our effect. 73 00:04:46,230 --> 00:04:46,780 ‫OK. 74 00:04:46,800 --> 00:04:47,790 ‫This should be simple. 75 00:04:47,820 --> 00:04:54,270 ‫All I have to do is just select the location, complete location itself and what effect? 76 00:04:56,760 --> 00:04:58,440 ‫What a dark location. 77 00:04:59,750 --> 00:05:02,330 ‫And remember, this is going to be ours. 78 00:05:02,360 --> 00:05:04,100 ‫I just need large property. 79 00:05:05,120 --> 00:05:09,610 ‫And there are going to be two changes the cursor as well as the color. 80 00:05:10,010 --> 00:05:13,250 ‫So just add it to save this one getting back. 81 00:05:14,410 --> 00:05:16,000 ‫This looks fine. 82 00:05:16,660 --> 00:05:17,090 ‫OK. 83 00:05:17,110 --> 00:05:18,110 ‫This was great. 84 00:05:18,130 --> 00:05:22,600 ‫Now we have to just follow the last part, which is going to be this. 85 00:05:23,610 --> 00:05:26,670 ‫And there are a few common changes that we need to do. 86 00:05:27,000 --> 00:05:32,670 ‫We need to change to flex our a direction that is going to be flex direction and then we are going to 87 00:05:32,670 --> 00:05:33,870 ‫control both of them. 88 00:05:34,380 --> 00:05:40,380 ‫Also, I need to change to flex so I can have all of them horizontally together. 89 00:05:41,160 --> 00:05:42,660 ‫So this is going to work fine. 90 00:05:42,750 --> 00:05:44,820 ‫I need I can do this quickly. 91 00:05:45,210 --> 00:05:47,100 ‫I just need to select the porter. 92 00:05:48,300 --> 00:05:49,440 ‫Select the extras. 93 00:05:50,710 --> 00:05:51,980 ‫This is next, right? 94 00:05:52,030 --> 00:05:53,220 ‫Oh, OK, yeah. 95 00:05:53,920 --> 00:05:57,400 ‫So I just need to select that and also where it is going to be a hundred percent. 96 00:05:57,730 --> 00:05:59,110 ‫So I just need to. 97 00:05:59,120 --> 00:06:05,940 ‫I read 200 percent and then I just need to display this is going to be flags. 98 00:06:06,250 --> 00:06:09,340 ‫Then I just need to utilize the justified content. 99 00:06:09,430 --> 00:06:13,450 ‫I need to add space between them so I can save space between. 100 00:06:13,960 --> 00:06:23,080 ‫And I also need to follow data property so they can be up and down when we are trying to go responsive. 101 00:06:23,080 --> 00:06:25,990 ‫So right click and inspect. 102 00:06:26,380 --> 00:06:27,220 ‫Try this one. 103 00:06:27,760 --> 00:06:29,850 ‫You can see this is the first part. 104 00:06:29,860 --> 00:06:31,030 ‫This is the second part. 105 00:06:35,570 --> 00:06:42,200 ‫This is the first part, this is the second part that looks fine, so I'm going to add Rob saved this 106 00:06:42,200 --> 00:06:42,530 ‫one. 107 00:06:42,830 --> 00:06:45,830 ‫So this should be the basic property for our. 108 00:06:46,960 --> 00:06:49,090 ‫Do S. know this and this? 109 00:06:50,710 --> 00:06:52,150 ‫OK, this looks fine to me. 110 00:06:53,550 --> 00:06:59,100 ‫Comparing to this year, there should be some margin at the top, we will add it later. 111 00:06:59,940 --> 00:07:03,270 ‫I need to change the font size, I need to change the color. 112 00:07:03,630 --> 00:07:07,320 ‫And I also need to make them follow the rule pattern. 113 00:07:07,770 --> 00:07:12,670 ‫I'll get back here and simply, I just need to select the world first. 114 00:07:12,670 --> 00:07:17,220 ‫So when you select the photo, I'm going to select the extras you will Barton. 115 00:07:18,390 --> 00:07:23,910 ‫Now had the first property, I'm going to apply this displaced legs so you can have the full property 116 00:07:23,910 --> 00:07:24,480 ‫of road. 117 00:07:25,700 --> 00:07:31,520 ‫The other thing I'm going to apply is flex it up, so if we try to decrease screen size, things will 118 00:07:31,520 --> 00:07:32,120 ‫work fine. 119 00:07:32,720 --> 00:07:38,270 ‫The next thing I'm going to take some margin, so I want to earn margin on the right side so we can 120 00:07:38,270 --> 00:07:44,390 ‫maintain the space between the last company indexed as well as our current extra length. 121 00:07:45,260 --> 00:07:48,200 ‫Let me discuss about this in a minute, so let me jump in. 122 00:07:49,800 --> 00:07:53,970 ‫Scroll down, you can see this is how our current extra links are. 123 00:07:54,270 --> 00:07:56,760 ‫And this is the current company name. 124 00:07:57,750 --> 00:08:03,870 ‫I right click here, click on Inspect and go to you, and now you can see the Orange. 125 00:08:04,080 --> 00:08:11,190 ‫This is the margin, so if I try to decrease the size by any time we have this pretty close, we will 126 00:08:11,190 --> 00:08:12,420 ‫have some margin here. 127 00:08:13,200 --> 00:08:17,310 ‫You can see this extra space and that is the reason I have it. 128 00:08:19,000 --> 00:08:21,680 ‫So this extra margin is going to help us a lot. 129 00:08:21,780 --> 00:08:23,560 ‫Why did time not resizing? 130 00:08:24,250 --> 00:08:25,580 ‫OK, this looks fine. 131 00:08:25,600 --> 00:08:31,660 ‫Now there are certain changes that we need to do like I need to change font size, so I definitely need 132 00:08:31,660 --> 00:08:33,340 ‫to jump on to my lighter. 133 00:08:34,030 --> 00:08:35,970 ‫I also need to change the color. 134 00:08:35,980 --> 00:08:41,380 ‫I also need to change the padding since we need to add some space between them. 135 00:08:42,070 --> 00:08:50,230 ‫So what we can do is we can utilize this U.N. and we can just add and light and had I need to add font 136 00:08:50,230 --> 00:08:54,610 ‫size first, so I'm going to go with 1.1m. 137 00:08:55,420 --> 00:09:00,130 ‫The second thing I'm going to change is my color, and this is pretty common now. 138 00:09:00,220 --> 00:09:06,280 ‫And the third thing is, I'm going to add some padding and I'm going to go with one room, save this 139 00:09:06,280 --> 00:09:07,600 ‫one and get back here. 140 00:09:08,170 --> 00:09:09,700 ‫OK, much better. 141 00:09:09,850 --> 00:09:11,830 ‫You can see that's how we are walking. 142 00:09:13,040 --> 00:09:14,690 ‫We also need to update for this. 143 00:09:14,870 --> 00:09:20,900 ‫That means the company name, all I have to do is call or something similar, but this time span. 144 00:09:21,440 --> 00:09:22,880 ‫So let me copy this one. 145 00:09:24,930 --> 00:09:31,950 ‫And had instead you well, I'm going to go respond and I need to ask somewhat similar setting, but 146 00:09:31,950 --> 00:09:33,390 ‫there will be few changes. 147 00:09:34,380 --> 00:09:39,090 ‫The first thing is it's going to be 1.2m calories going to remain same. 148 00:09:39,360 --> 00:09:41,180 ‫Then I need to add padding. 149 00:09:41,190 --> 00:09:47,310 ‫But on the right side, you see there is some gap between U.S. and had this space. 150 00:09:48,910 --> 00:09:54,610 ‫So let me add padding to the right, save this one, get back here. 151 00:09:55,720 --> 00:09:59,170 ‫Now this is working better, right click here. 152 00:10:02,920 --> 00:10:03,600 ‫OK. 153 00:10:03,760 --> 00:10:04,660 ‫There is some issue. 154 00:10:04,720 --> 00:10:07,240 ‫This is not at this center. 155 00:10:07,840 --> 00:10:14,260 ‫So we have a property since this is a child of this man is a child of flex class. 156 00:10:14,650 --> 00:10:20,950 ‫So what we can do is we can add online self assets and save this one. 157 00:10:21,160 --> 00:10:22,030 ‫Get back here. 158 00:10:23,900 --> 00:10:29,210 ‫OK, so now this is art center itself, and we have some extra space, if you see the purple part. 159 00:10:29,630 --> 00:10:35,560 ‫This is the extra space and we can do costume changes if we want, we can see a flex crew. 160 00:10:35,580 --> 00:10:40,100 ‫This is going to take extra space now, but we need some extra space. 161 00:10:40,100 --> 00:10:41,750 ‫So this is working fine. 162 00:10:42,200 --> 00:10:46,730 ‫And if you observe there is some margin here and we can change that. 163 00:10:47,150 --> 00:10:54,260 ‫So let me jump on to my solution lynx and had I should add some margin at the top. 164 00:10:54,770 --> 00:11:00,590 ‫So if you jump here, I can add some margin, either with my fuel or with my social. 165 00:11:01,000 --> 00:11:03,950 ‫So let me try again, go with my margin. 166 00:11:06,670 --> 00:11:11,750 ‫I need to hard with top and bottom and then left and right will be zero, save this one. 167 00:11:13,140 --> 00:11:14,490 ‫Looks better. 168 00:11:15,000 --> 00:11:20,580 ‫Yeah, the background is changing because in our clone website, this is our clone. 169 00:11:21,000 --> 00:11:24,770 ‫We have respond to background, depend on this screen size. 170 00:11:24,780 --> 00:11:28,320 ‫We haven't applied that, but check this for the part only. 171 00:11:28,830 --> 00:11:30,610 ‫And this is great. 172 00:11:30,630 --> 00:11:34,230 ‫We have cloned it, and I hope you got the idea how we did it. 173 00:11:35,010 --> 00:11:40,830 ‫So if I try to minimize this, there are a lot of settings that we need to do, but we are doing well. 174 00:11:41,910 --> 00:11:45,180 ‫There are settings, there are settings that we need to fix. 175 00:11:45,180 --> 00:11:46,770 ‫But we are doing what? 176 00:11:49,930 --> 00:11:56,470 ‫So if I go with the Ford 50 that is approx the mobile size, we need to fix this, OK? 177 00:11:56,950 --> 00:11:59,320 ‫And if I go with this website, Benzie. 178 00:12:00,680 --> 00:12:06,950 ‫This change that soon as we go around or something, even on 600 cell. 179 00:12:08,290 --> 00:12:14,330 ‫So that's done that's done for the clone part, and this looks fine on our deck stock guarantee. 180 00:12:14,350 --> 00:12:21,370 ‫I should say on monitor or laptop next to you basically means, oh, screen size greater than 900 and 181 00:12:21,370 --> 00:12:22,540 ‫this looks great. 182 00:12:24,200 --> 00:12:31,190 ‫One thing I can change right now is maybe I'd flex here, but I don't think we need now because as soon 183 00:12:31,190 --> 00:12:35,060 ‫as I go with this size, I need to add a hamburger icon. 184 00:12:35,060 --> 00:12:39,050 ‫So if you see here, we need to change the height. 185 00:12:39,200 --> 00:12:41,300 ‫So let's add some hamburger icon. 186 00:12:42,590 --> 00:12:45,650 ‫So we will do these changes in the next part. 187 00:12:47,010 --> 00:12:49,200 ‫I hope you got the idea of what we did. 188 00:12:49,530 --> 00:12:51,900 ‫Make sure you try to do some practice. 189 00:12:52,380 --> 00:12:57,870 ‫This point with the Flexbox so you can have ideas about all the changes that we did. 190 00:12:58,560 --> 00:13:04,630 ‫Thank you for calling and I see you guys in the next one where we are going to discuss about responsiveness. 191 00:13:04,650 --> 00:13:07,550 ‫We are going to discuss about resizing on end. 192 00:13:08,310 --> 00:13:10,860 ‫Thank you for following and I see you in the next one.