1 00:00:00,780 --> 00:00:01,440 ‫Welcome back. 2 00:00:01,710 --> 00:00:04,020 ‫Now let us start our journey with the next section. 3 00:00:04,470 --> 00:00:12,360 ‫And I think I would call this action as maybe statistics, stats or something else because this content 4 00:00:12,360 --> 00:00:18,690 ‫information about this of us as well as these stats so we can utilize a common name. 5 00:00:19,850 --> 00:00:21,850 ‫Okay, so this is the Korean section. 6 00:00:21,870 --> 00:00:23,900 ‫Let me squeeze this here. 7 00:00:23,910 --> 00:00:25,590 ‫I'm going to create a new section. 8 00:00:27,860 --> 00:00:34,760 ‫And I'm going to call this as maybe growth, because growth to define both stops as well as everything 9 00:00:34,760 --> 00:00:35,030 ‫else. 10 00:00:35,450 --> 00:00:42,530 ‫And I'm also going to add container headed said I don't need to create this new level every time I can 11 00:00:42,530 --> 00:00:49,010 ‫see a container set off because I know I'm not going to utilize any type of 100 percent background. 12 00:00:49,970 --> 00:00:52,640 ‫So that's done here is my container. 13 00:00:53,890 --> 00:00:57,460 ‫And now everything will be inside this whole section. 14 00:00:59,130 --> 00:01:03,010 ‫The first thing I think I'm going to do is I'm going to divide them into two part. 15 00:01:03,460 --> 00:01:03,940 ‫Why? 16 00:01:04,240 --> 00:01:10,060 ‫Because if I right click here and change the margin one way just to explain you. 17 00:01:10,090 --> 00:01:11,410 ‫Let's imagine zero. 18 00:01:12,950 --> 00:01:18,980 ‫Now behind the scene, what is happening is this is one section which is going to have statistics and 19 00:01:18,980 --> 00:01:22,850 ‫this is another section which is going to have all this information. 20 00:01:23,630 --> 00:01:29,750 ‫So what I'm going to do is I'm going to have this, which is going to have all the information and then 21 00:01:29,750 --> 00:01:30,110 ‫this. 22 00:01:30,950 --> 00:01:35,420 ‫So this will be start and this will be maybe in for anything else. 23 00:01:36,200 --> 00:01:42,230 ‫So let's say here I'm going to have I do that, take all these stops. 24 00:01:43,040 --> 00:01:48,550 ‫That is going to have everything about the numbers and then inform what I should say. 25 00:01:48,560 --> 00:01:54,080 ‫So is anything that defines the whole section, so I can say and for. 26 00:01:55,820 --> 00:01:56,290 ‫Dr. 27 00:01:56,410 --> 00:02:00,570 ‫So these are the two sections on which we are going to work way you finish this one. 28 00:02:00,590 --> 00:02:04,190 ‫This is the original back by using margin as negative. 29 00:02:04,220 --> 00:02:05,060 ‫We are moving up. 30 00:02:05,330 --> 00:02:08,090 ‫If I'm using margin as positive, I'm moving down. 31 00:02:08,840 --> 00:02:14,870 ‫Looks good to me, but let's jump here and start walking with the content part. 32 00:02:15,940 --> 00:02:19,690 ‫So this growth is going to have a background color, which is this one. 33 00:02:19,720 --> 00:02:23,560 ‫And we have already defined this background color and our global. 34 00:02:24,830 --> 00:02:26,060 ‫And we can use it now. 35 00:02:26,180 --> 00:02:32,630 ‫So let's jump on to my style or ceasefire, get air, select the group and head. 36 00:02:32,630 --> 00:02:39,290 ‫I'm going to use this background color utilized, utilize my function bar and provide this. 37 00:02:41,590 --> 00:02:42,280 ‫Looks good. 38 00:02:42,490 --> 00:02:46,810 ‫The other thing is there will be something as border radius. 39 00:02:48,300 --> 00:02:52,290 ‫Because these things are clearly visible and I can walk with them. 40 00:02:55,660 --> 00:02:58,590 ‫Let's take moderate going to earthquakes. 41 00:02:59,830 --> 00:03:03,760 ‫The next thing will be the top and bottom margin with this action itself. 42 00:03:04,030 --> 00:03:07,420 ‫Let's imagine it would be 15m auto. 43 00:03:09,600 --> 00:03:10,800 ‫Quite remarkable. 44 00:03:11,370 --> 00:03:14,340 ‫That will be top and bottom margin for this section. 45 00:03:14,760 --> 00:03:22,050 ‫And that said, one size for this whole section up pretty big, but just do them and that's it. 46 00:03:22,050 --> 00:03:23,100 ‫That's it for now. 47 00:03:25,340 --> 00:03:28,760 ‫So this whole thing will have this space property. 48 00:03:30,040 --> 00:03:34,980 ‫It looks great inside my starts, I'm going to walk with this whole content. 49 00:03:35,640 --> 00:03:37,380 ‫I'm going to utilize Flexbox. 50 00:03:37,380 --> 00:03:40,110 ‫I can have a broad action as horizontal. 51 00:03:40,560 --> 00:03:45,330 ‫Also, using Flexbox will help me to give the property off Rob. 52 00:03:45,690 --> 00:03:50,550 ‫And then even at the time of responsiveness, things will be easy. 53 00:03:51,900 --> 00:03:54,540 ‫You can see this is much greater. 54 00:03:56,810 --> 00:04:02,680 ‫That's Corbett Flexbox now, so this is the start, and I'm going to play with Dick. 55 00:04:05,410 --> 00:04:13,080 ‫So I'm tired, my group, to select this dark spot display is going to be legs. 56 00:04:14,110 --> 00:04:20,170 ‫Then there will be several common properties that doctors like stop on a loop of over drop and a few 57 00:04:20,170 --> 00:04:23,920 ‫other things like background color because we know this is going to be white. 58 00:04:25,030 --> 00:04:26,860 ‫Let's say vibrant colors. 59 00:04:26,860 --> 00:04:27,250 ‫White. 60 00:04:28,850 --> 00:04:33,560 ‫Then there will be certain other properties that we need to apply, but first, I knew quite content 61 00:04:33,560 --> 00:04:33,890 ‫cat. 62 00:04:34,370 --> 00:04:37,580 ‫So what I'm going to do is I'm going to have multiple lives. 63 00:04:38,060 --> 00:04:40,610 ‫Why does wide content so hard? 64 00:04:40,610 --> 00:04:47,450 ‫I have content as 850 end user, so this will be inside our David self that did nothing. 65 00:04:47,450 --> 00:04:48,020 ‫No name. 66 00:04:48,380 --> 00:04:52,430 ‫I can just have one dog or the numbers, let's say eight 50. 67 00:04:53,000 --> 00:04:57,380 ‫And then there will be another time would just be dog, which is going to be have users. 68 00:04:58,190 --> 00:05:02,060 ‫So we need to follow something similar for each one of them. 69 00:05:07,140 --> 00:05:17,100 ‫Similarly, this will be doing double zero and this is going to be downloads, and then there will be 70 00:05:17,490 --> 00:05:18,310 ‫250. 71 00:05:18,330 --> 00:05:20,010 ‫This will be free to box. 72 00:05:22,550 --> 00:05:27,350 ‫And then this will be 50, and this is going to be a frustrating. 73 00:05:30,610 --> 00:05:32,930 ‫All right, get back to my original website. 74 00:05:33,940 --> 00:05:37,090 ‫You can see that's how this is going to look at this point of time. 75 00:05:37,100 --> 00:05:44,680 ‫The background is white and since the background is white, we are not able to visualize deep S. background. 76 00:05:45,550 --> 00:05:51,490 ‫So if you observe this is blue, the background is blue. 77 00:05:52,510 --> 00:05:55,330 ‫But this background for stocks is white. 78 00:05:55,360 --> 00:05:58,570 ‫Let me add some space fighting between growth and stocks. 79 00:05:58,990 --> 00:06:03,610 ‫So what I'm going to do is I'm going to add padding and tape batting. 80 00:06:05,190 --> 00:06:13,080 ‫Mexico to them and them on a horizontal side, that means hot, vertical and horizontal. 81 00:06:13,260 --> 00:06:18,030 ‫Get back here now you can see this fighting here on all these side. 82 00:06:19,570 --> 00:06:20,860 ‫Looks good to me. 83 00:06:25,020 --> 00:06:29,580 ‫Now we need to add space between them, so if I right click click on Inspect. 84 00:06:30,210 --> 00:06:33,030 ‫You see, this is these stocks, this is the crude. 85 00:06:33,390 --> 00:06:37,680 ‫We are the top margin and what one margin because we need to move this act of. 86 00:06:38,910 --> 00:06:40,710 ‫This is my start. 87 00:06:41,520 --> 00:06:47,610 ‫OK, so what I'm going to do is I'm going to apply the property of first, which is going to be justified 88 00:06:47,610 --> 00:06:48,180 ‫content. 89 00:06:48,540 --> 00:06:51,030 ‫I need to move them evenly. 90 00:06:51,390 --> 00:06:55,920 ‫So let's say justify a content on it and I'm going to go read space evenly. 91 00:06:56,280 --> 00:06:57,060 ‫Get back here. 92 00:06:57,420 --> 00:06:59,460 ‫You can see now it's much better. 93 00:07:00,210 --> 00:07:01,710 ‫I have proper spacing. 94 00:07:03,800 --> 00:07:10,100 ‫Also, I want content of this bill to be at center, that means these are should be aired center. 95 00:07:10,880 --> 00:07:16,820 ‫So what I can do is I can select this debate, which is inside my start and then utilize text Alina's 96 00:07:16,820 --> 00:07:17,420 ‫center. 97 00:07:18,080 --> 00:07:25,010 ‫So what I'm going to do is I'm going to select crude, then facts, then beam. 98 00:07:26,390 --> 00:07:30,080 ‫And had I can say text align center. 99 00:07:30,290 --> 00:07:31,670 ‫Same, get back here. 100 00:07:32,990 --> 00:07:33,260 ‫Good, Scott. 101 00:07:33,260 --> 00:07:35,060 ‫Everything is aligned at this center. 102 00:07:35,880 --> 00:07:41,150 ‫Now the only thing is I need to add several properties like colder than there will be something like 103 00:07:41,540 --> 00:07:43,070 ‫this next shadow. 104 00:07:43,550 --> 00:07:46,720 ‫Again, I need to move this up and then walk shadow. 105 00:07:47,360 --> 00:07:48,500 ‫Let's quickly do that. 106 00:07:48,650 --> 00:07:50,810 ‫So what I'm going to do is jump here. 107 00:07:51,710 --> 00:07:56,930 ‫So the first thing I'm going to press for is I'm going to increase the size of each one and then change 108 00:07:56,930 --> 00:07:58,370 ‫the size of this bag. 109 00:07:58,910 --> 00:08:04,760 ‫So all our players jump in and select my one. 110 00:08:07,910 --> 00:08:10,570 ‫And also, I need to select might be that. 111 00:08:13,160 --> 00:08:13,580 ‫Great. 112 00:08:13,760 --> 00:08:17,810 ‫So there will be certain changes with each one, which is going to be my -- site. 113 00:08:18,060 --> 00:08:18,800 ‫That's correct. 114 00:08:18,810 --> 00:08:19,580 ‫Five, 10. 115 00:08:20,120 --> 00:08:23,130 ‫And the other thing is I need to add big shadow. 116 00:08:23,150 --> 00:08:28,550 ‫So if you remember here, this is the correct size and I need fixed shadow. 117 00:08:28,810 --> 00:08:29,870 ‫That's your the background. 118 00:08:30,770 --> 00:08:32,000 ‫I need to do something. 119 00:08:32,210 --> 00:08:35,330 ‫So what I can do is I can utilize X Shadow. 120 00:08:37,520 --> 00:08:44,030 ‫Now ahead, I need to sponge off properties like my movement towards vertical side, horizontal side 121 00:08:44,420 --> 00:08:46,760 ‫and then will be blurring property. 122 00:08:47,000 --> 00:08:48,470 ‫And then there will be a color. 123 00:08:48,600 --> 00:08:53,150 ‫So I'm taking this in the form of TB for now if I get back here. 124 00:08:53,870 --> 00:08:54,700 ‫Look square. 125 00:08:54,830 --> 00:08:56,150 ‫Let me remove this flex. 126 00:08:57,350 --> 00:09:04,130 ‫Yeah, if you see the background is better now, I need to control the speed, that's all I have to 127 00:09:04,130 --> 00:09:06,080 ‫do is this one. 128 00:09:07,780 --> 00:09:12,910 ‫And here I can control the peanut, so all I could do is add some color. 129 00:09:13,120 --> 00:09:13,660 ‫That's it. 130 00:09:13,660 --> 00:09:16,060 ‫I think so that color. 131 00:09:17,400 --> 00:09:22,080 ‫And had I need to utilize my team coloured phone, so this is going to be the color? 132 00:09:25,720 --> 00:09:28,590 ‫Let's take water and provide my view color. 133 00:09:31,410 --> 00:09:32,370 ‫Looks good. 134 00:09:33,520 --> 00:09:37,510 ‫The other thing I need to add is some banging on the top and on the right side. 135 00:09:37,690 --> 00:09:40,630 ‫So this should be much better. 136 00:09:43,090 --> 00:09:44,470 ‫And then move it on the top. 137 00:09:44,920 --> 00:09:46,350 ‫So let me move here. 138 00:09:47,410 --> 00:09:51,190 ‫My addiction name is that I need to add all the properties here. 139 00:09:51,610 --> 00:09:54,880 ‫So the first property going to be firing on all directions. 140 00:09:56,510 --> 00:09:56,900 ‫Yup. 141 00:09:57,200 --> 00:09:58,340 ‫Much better. 142 00:09:58,700 --> 00:09:59,030 ‫Yup. 143 00:10:00,350 --> 00:10:06,560 ‫Once batting is done, I can respect the work, I'm currently taking all the available space. 144 00:10:06,680 --> 00:10:13,710 ‫What I can say is I can see Max Wood as 90 percent, so this will remain some space on all this side. 145 00:10:13,970 --> 00:10:19,840 ‫OK, this space is remaining, but I need this to be at center all section to be exact. 146 00:10:20,510 --> 00:10:28,790 ‫What I can do is I can utilize margin and sort of I can swing margin and then to zero in order. 147 00:10:29,940 --> 00:10:32,880 ‫Now this will be at the center, you can see. 148 00:10:33,520 --> 00:10:36,000 ‫And let me also add some border areas. 149 00:10:37,290 --> 00:10:39,660 ‫This one from my group section itself. 150 00:10:42,690 --> 00:10:43,770 ‫Dance is done. 151 00:10:43,980 --> 00:10:49,230 ‫Now I just need to move it on the door, so if I go with this margin five. 152 00:10:50,950 --> 00:10:54,340 ‫Minus five, actually, this is moving on the top. 153 00:10:54,790 --> 00:10:59,140 ‫And I can see margin it and this will completely move on the top. 154 00:10:59,530 --> 00:11:05,440 ‫But I will do that later once we have more content, that is once we have content at the bottom. 155 00:11:06,130 --> 00:11:06,650 ‫That's it. 156 00:11:06,670 --> 00:11:08,020 ‫This whole part is done. 157 00:11:08,470 --> 00:11:10,570 ‫Now we need to walk with this one. 158 00:11:10,900 --> 00:11:17,580 ‫So what I'm going to do is I'm just going to add some H1 tag for now, just for the demo purpose. 159 00:11:17,580 --> 00:11:19,960 ‫So let me squeeze this my status down. 160 00:11:20,440 --> 00:11:25,000 ‫Let me add each one, and let's say that autumn five. 161 00:11:29,220 --> 00:11:30,540 ‫Let me I'll maybe. 162 00:11:32,330 --> 00:11:34,200 ‫Copy paste, copy paste. 163 00:11:36,170 --> 00:11:42,420 ‫OK, so this is the content, and if I change the margin now, that would be much easier to visualize. 164 00:11:42,420 --> 00:11:46,280 ‫So if I get back here, that same margin is minus eight. 165 00:11:47,910 --> 00:11:49,590 ‫Now you can see this looks great. 166 00:11:50,490 --> 00:11:56,880 ‫But they had this white color is not matching, so what I can do is the first thing is I cannot walk 167 00:11:56,880 --> 00:11:57,420 ‫shadow. 168 00:11:57,510 --> 00:12:01,740 ‫The second thing is I cannot gap between this text and this whole section. 169 00:12:03,570 --> 00:12:05,670 ‫So I had I need to add bulk shadow. 170 00:12:07,190 --> 00:12:11,000 ‫We discussed multiple dark shadows, I just saved this one. 171 00:12:11,120 --> 00:12:13,310 ‫See, now we have watched Shadow. 172 00:12:13,610 --> 00:12:16,400 ‫One quick recommendation I will give you rest. 173 00:12:18,070 --> 00:12:24,050 ‫The search about Bourque shadow, you will get these multiple example of 91 beautiful ball shadow. 174 00:12:24,790 --> 00:12:31,350 ‫So if I need to utilize this one, just copy this, get here and remove this one for now. 175 00:12:31,360 --> 00:12:34,900 ‫And if I just paste this, you can see I got this one. 176 00:12:37,230 --> 00:12:42,960 ‫You can see this volcano is working fine now here I can select the next section, which is going to 177 00:12:42,960 --> 00:12:46,020 ‫be my info section, so if I jump in. 178 00:12:48,820 --> 00:12:54,580 ‫Crude stock info and had I can define some margin top, basically. 179 00:12:54,820 --> 00:12:59,230 ‫So if I go with margin of maybe 15 REM, save this one and get back here. 180 00:12:59,950 --> 00:13:01,090 ‫No, this looks fine. 181 00:13:01,360 --> 00:13:03,400 ‫I hope you got the idea what we just did. 182 00:13:04,000 --> 00:13:07,060 ‫There are two basic changes that we recently did. 183 00:13:07,510 --> 00:13:11,920 ‫The first thing is about nobawk shadow so we can differentiate the light. 184 00:13:12,670 --> 00:13:14,800 ‫The second thing is I added some gap here. 185 00:13:15,200 --> 00:13:21,610 ‫Now, remember, since the margin is negative, we are moving this dip out of this section on the top. 186 00:13:22,270 --> 00:13:25,000 ‫If margin is positive, we are creating this distance. 187 00:13:25,180 --> 00:13:28,480 ‫If margin is negative, we are just decreasing the distance. 188 00:13:29,320 --> 00:13:30,700 ‫That's it here. 189 00:13:30,700 --> 00:13:32,770 ‫The margin drop is negative. 190 00:13:32,770 --> 00:13:37,620 ‫So this was the line zero, but we are moving on to minus eight. 191 00:13:37,900 --> 00:13:38,250 ‫Then. 192 00:13:40,100 --> 00:13:41,450 ‫I hope you got the idea. 193 00:13:41,870 --> 00:13:48,380 ‫Now the rest goes through changes that we need to do to improve the gap on up and down and that we will 194 00:13:48,380 --> 00:13:49,190 ‫vote later. 195 00:13:49,580 --> 00:13:52,220 ‫But first, we need to complete this part. 196 00:13:52,520 --> 00:13:52,910 ‫OK. 197 00:13:53,390 --> 00:13:55,150 ‫You also need to define a fix. 198 00:13:55,160 --> 00:13:55,520 ‫Wait. 199 00:13:55,940 --> 00:13:56,400 ‫Why? 200 00:13:56,780 --> 00:14:01,580 ‫So at the time of rapping, we can understand when to rap. 201 00:14:01,970 --> 00:14:04,160 ‫Otherwise decent rapping is not going to work. 202 00:14:04,760 --> 00:14:06,950 ‫So we need to provide our fix with here. 203 00:14:07,610 --> 00:14:08,990 ‫Let me test this here. 204 00:14:11,930 --> 00:14:17,420 ‫If you see right now, the wrapping is working fine, but at the end moment. 205 00:14:17,960 --> 00:14:23,180 ‫So what we can do is we can either define some padding here itself with these elements. 206 00:14:23,930 --> 00:14:26,300 ‫So if I jump onto my style dodge cases. 207 00:14:27,630 --> 00:14:34,230 ‫And John won't to my dear and I can add some padding and I can say to them, save this one. 208 00:14:34,320 --> 00:14:35,160 ‫Get back here. 209 00:14:36,330 --> 00:14:41,700 ‫And if you squeeze, you can see this gap is touring. 210 00:14:42,210 --> 00:14:44,520 ‫At least we are maintaining to them. 211 00:14:45,970 --> 00:14:52,420 ‫Yep, looks good, we can right click here, inspect, select this, Deb, you can see this program 212 00:14:52,420 --> 00:14:52,720 ‫now. 213 00:14:54,440 --> 00:14:55,220 ‫This to them. 214 00:14:56,320 --> 00:14:59,530 ‫And this will be maintained at the time of Squeeze also. 215 00:15:03,560 --> 00:15:04,850 ‫You can see this. 216 00:15:06,590 --> 00:15:07,880 ‫I hope you got the idea. 217 00:15:08,330 --> 00:15:10,320 ‫Now everything is done with this part. 218 00:15:10,370 --> 00:15:13,130 ‫We just need to move towards that intersection. 219 00:15:14,260 --> 00:15:15,700 ‫That's all for this lecture. 220 00:15:15,850 --> 00:15:18,070 ‫Let's continue our journey in the next one. 221 00:15:18,310 --> 00:15:19,260 ‫Thank you for following. 222 00:15:19,270 --> 00:15:24,820 ‫I hope you got the idea how we are going to maintain the margin, Paddington everything and I see a 223 00:15:24,820 --> 00:15:25,810 ‫rise in the next one.