1 00:00:00,330 --> 00:00:01,560 ‫You're welcome back. 2 00:00:01,830 --> 00:00:08,070 ‫Now let us start our task with this whole new section about our info and then all of this. 3 00:00:08,910 --> 00:00:10,770 ‫So recently we created our deal. 4 00:00:10,950 --> 00:00:12,210 ‫Now we need to work on it. 5 00:00:12,870 --> 00:00:16,540 ‫So we have added all we can do, which was required for this whole. 6 00:00:17,370 --> 00:00:25,140 ‫Now what I'm going to do is I'm going to replicate it four times and this should look something like 7 00:00:25,140 --> 00:00:25,500 ‫this. 8 00:00:25,530 --> 00:00:29,430 ‫These are the four boxes actually for the boxes. 9 00:00:29,910 --> 00:00:32,130 ‫Now this is how I develop. 10 00:00:32,490 --> 00:00:33,990 ‫That means our whole section. 11 00:00:34,440 --> 00:00:40,620 ‫So what I'm going to do is I'm going to utilize deflects so we can have everything on a horizontal direction. 12 00:00:41,550 --> 00:00:43,410 ‫That means these four device. 13 00:00:46,220 --> 00:00:50,930 ‫Then I'm going to utilize Flex again to keep them in sequence of column. 14 00:00:52,500 --> 00:00:53,700 ‫So this should be simple. 15 00:00:53,880 --> 00:00:56,880 ‫The first thing I need to do is just select my qualities. 16 00:00:58,080 --> 00:01:01,620 ‫Remember, I'm going to call this house has quality, if you remember. 17 00:01:01,950 --> 00:01:03,720 ‫I just need to select my qualities. 18 00:01:06,430 --> 00:01:12,250 ‫And had I'm going to go over display as flags, the second thing I'm going to do is justify our content. 19 00:01:12,610 --> 00:01:14,790 ‫So this is going to be spaced evenly. 20 00:01:16,450 --> 00:01:21,910 ‫And then I just need to utilize my flex it out properly, so whenever we are going to squeeze this, 21 00:01:21,910 --> 00:01:23,200 ‫it should be inoperable. 22 00:01:23,590 --> 00:01:25,570 ‫And then I'm going to add some margin. 23 00:01:26,170 --> 00:01:28,780 ‫So there will be a top margin, which has seven. 24 00:01:29,260 --> 00:01:34,060 ‫Then on the left hand side that has horizontal side, things should be auto. 25 00:01:35,250 --> 00:01:39,720 ‫And what will with and see if I save this one and go back here? 26 00:01:41,140 --> 00:01:49,720 ‫It's not walking, the problem here is we need some work at this point of time to work for this whole 27 00:01:49,720 --> 00:01:54,880 ‫team is 100 percent because of this description and all the other content. 28 00:01:55,330 --> 00:01:59,920 ‫What I'm going to do is I'm going to set up fit for this qualities. 29 00:02:00,850 --> 00:02:02,150 ‫That means that director. 30 00:02:02,570 --> 00:02:06,490 ‫So let's say the word is maybe let's take 250 Mixon. 31 00:02:07,510 --> 00:02:09,100 ‫Save this one and get back here. 32 00:02:09,520 --> 00:02:11,230 ‫Now you can see a talking point. 33 00:02:11,800 --> 00:02:13,820 ‫So we need to set some paperwork. 34 00:02:14,230 --> 00:02:16,300 ‫You can see 25 percent, maybe. 35 00:02:16,900 --> 00:02:18,540 ‫But this is not working fine. 36 00:02:19,270 --> 00:02:23,980 ‫Now let me add some background color and a few other properties so we can differentiate this. 37 00:02:24,410 --> 00:02:27,730 ‫So the first thing I'm going to do is add a background color. 38 00:02:28,730 --> 00:02:31,120 ‫Right now, this would be easily visible. 39 00:02:31,510 --> 00:02:32,110 ‫You can see. 40 00:02:34,250 --> 00:02:39,620 ‫Next door, I stopped the changes, so there will be margin that has won them on all these I. 41 00:02:39,770 --> 00:02:48,020 ‫Then I'm a big party and I need prodding of them on the top and bottom zero on the left and right. 42 00:02:48,320 --> 00:02:51,020 ‫And then I need a big border radius. 43 00:02:52,820 --> 00:02:58,400 ‫So I'm going to go over it going the extra save this one and get back. 44 00:03:00,030 --> 00:03:03,510 ‫I mean, looks good if you see this looks fine. 45 00:03:04,620 --> 00:03:10,110 ‫Now, if you want to visualize things better, right click here, let me take this down. 46 00:03:10,620 --> 00:03:16,200 ‫And the other thing is this now you can observe each and everything. 47 00:03:16,530 --> 00:03:18,600 ‫So the orange one is on margin. 48 00:03:18,930 --> 00:03:23,340 ‫Then this green one is our painting and then blue one is our content. 49 00:03:23,970 --> 00:03:25,770 ‫So I hope you got the idea. 50 00:03:27,000 --> 00:03:27,810 ‫This looks great. 51 00:03:27,930 --> 00:03:29,760 ‫Let me close this one now. 52 00:03:29,760 --> 00:03:32,880 ‫The other thing I need to do is I'm going to dig this inflects. 53 00:03:33,030 --> 00:03:35,130 ‫So that means this day also. 54 00:03:36,030 --> 00:03:40,440 ‫So what I'm going to do is I'm going to add our display as flex here. 55 00:03:40,950 --> 00:03:47,160 ‫And then remember, this time my flex direction will be column, so flex addiction should be called. 56 00:03:48,060 --> 00:03:56,430 ‫And then I can keep everything on center with the help of I line items so I can see a line items center. 57 00:03:56,820 --> 00:03:59,550 ‫Now this will help us to control horizontal. 58 00:04:00,680 --> 00:04:05,270 ‫Because we are using column, save this one and get back here looks good. 59 00:04:05,750 --> 00:04:10,130 ‫Now this is not going to bring any change, even if you remove this right now. 60 00:04:10,160 --> 00:04:12,740 ‫Things would be fine, exactly the same. 61 00:04:12,770 --> 00:04:13,250 ‫Why? 62 00:04:13,730 --> 00:04:16,880 ‫Because we are already utilizing next Alina's center. 63 00:04:17,570 --> 00:04:23,600 ‫The other thing that other property that I'm going to add is my walk shadow, which you remember we 64 00:04:23,600 --> 00:04:25,790 ‫discussed in the previous section itself. 65 00:04:26,180 --> 00:04:30,020 ‫So this bulkhead overhead must differentiate things much better. 66 00:04:30,020 --> 00:04:32,440 ‫Bruno looks good to me. 67 00:04:32,540 --> 00:04:38,060 ‫The other thing we need to do is just change this icon and heading, and then we need to add, transform, 68 00:04:38,060 --> 00:04:40,700 ‫add some spacing and don't stop attacking. 69 00:04:41,570 --> 00:04:43,820 ‫But let's quickly change the easiest stuff. 70 00:04:46,690 --> 00:04:49,000 ‫Selecting the icon and heading first. 71 00:04:49,840 --> 00:04:55,600 ‫So that question is about camera, then there is glow, then there is. 72 00:04:56,110 --> 00:04:57,250 ‫I wanted something. 73 00:04:59,510 --> 00:05:01,490 ‫And then there is a checklist. 74 00:05:05,020 --> 00:05:06,130 ‫This looks good. 75 00:05:06,290 --> 00:05:10,000 ‫Now let me quickly change the guidance. 76 00:05:19,170 --> 00:05:20,040 ‫Save this one. 77 00:05:20,070 --> 00:05:20,790 ‫Get back here. 78 00:05:21,080 --> 00:05:21,990 ‫Yeah, we did it. 79 00:05:22,620 --> 00:05:28,860 ‫Now we need to select each individual element that means these dogs and create the change. 80 00:05:30,420 --> 00:05:36,540 ‫So what I'm going to do is jump onto my standard cases now here, the first thing I'm going to do is 81 00:05:36,540 --> 00:05:41,070 ‫select my qualities and I'm going to select my Peter. 82 00:05:42,310 --> 00:05:46,180 ‫Now, what is this be done if you observe these are might be dogs? 83 00:05:47,430 --> 00:05:54,720 ‫So here I am, adding a simple property of margin top, actually some margin, top story. 84 00:05:55,500 --> 00:06:04,200 ‫That means there will be gap with top dog and top for each individual that looks better. 85 00:06:05,320 --> 00:06:07,240 ‫I hope you got the idea, what I just did. 86 00:06:07,660 --> 00:06:10,480 ‫Now I have option to walk with this icon. 87 00:06:10,720 --> 00:06:13,550 ‫This is going to me and my title and then description. 88 00:06:14,020 --> 00:06:22,660 ‫So let's let them so select this quality and then I have option to walk where I'm going because I have 89 00:06:22,660 --> 00:06:24,370 ‫already provided names here. 90 00:06:27,060 --> 00:06:28,800 ‫I'm going to walk with my icon. 91 00:06:29,400 --> 00:06:34,830 ‫So that first property that I want to include is background color so we can differentiate everything. 92 00:06:35,020 --> 00:06:39,030 ‫So if I go with background color, you can see this is the current position. 93 00:06:39,790 --> 00:06:41,520 ‫And let's change everything. 94 00:06:42,030 --> 00:06:44,660 ‫So here let me define our weight as well as height. 95 00:06:44,670 --> 00:06:51,480 ‫So let's take it as so intermix and height as well, which is going to be 70 pixel. 96 00:06:51,810 --> 00:06:56,310 ‫The other thing I'm going to take is one size so I can change the size of our icon. 97 00:06:56,640 --> 00:06:57,690 ‫Let's orient. 98 00:06:59,220 --> 00:07:02,790 ‫And then if you observe we got our icons with our background. 99 00:07:03,570 --> 00:07:05,580 ‫Let me quickly add border radius here. 100 00:07:05,700 --> 00:07:10,140 ‫So let's say border radius as 50 percent to make it soccer. 101 00:07:12,240 --> 00:07:17,340 ‫Looks good to me, but I need to make this icon at the center of this whole. 102 00:07:17,550 --> 00:07:18,930 ‫That means center of this, I'll. 103 00:07:19,740 --> 00:07:22,570 ‫What I can do is I can utilize property of Flexbox. 104 00:07:22,570 --> 00:07:27,660 ‫Will this place flags and then I can align it according to justify content. 105 00:07:28,810 --> 00:07:32,860 ‫So this will be center horizontally and then a line items. 106 00:07:33,250 --> 00:07:35,170 ‫So this will be center vertically. 107 00:07:35,560 --> 00:07:41,890 ‫If I jump back here, you can see now this is a center in the form of vertical as well as horizontal. 108 00:07:42,340 --> 00:07:44,770 ‫Oh, I need to move this whole item. 109 00:07:44,770 --> 00:07:47,800 ‫That means this icon at the center. 110 00:07:48,840 --> 00:07:57,780 ‫So the first thing we can do is we can change this do and have our display of Flex has recommended previously, 111 00:07:58,080 --> 00:08:03,570 ‫so we can say this is display as Flex and how we can set the direction as column. 112 00:08:03,570 --> 00:08:06,960 ‫Because this is deep, we need all item from top to bottom. 113 00:08:07,380 --> 00:08:13,620 ‫And now we will have a property of online items as saying, Don't save this one and get back here. 114 00:08:17,370 --> 00:08:21,630 ‫Now we will have a property of line self as anchor. 115 00:08:22,580 --> 00:08:26,590 ‫If I save this one and get back here, you can see this is working fine. 116 00:08:27,020 --> 00:08:31,660 ‫Remember this Alan Self is walking as a child property for this of. 117 00:08:32,860 --> 00:08:34,450 ‫So that's how we are going to work. 118 00:08:34,480 --> 00:08:38,520 ‫And we got this, we got this, everything looks good. 119 00:08:38,830 --> 00:08:41,620 ‫But I need to change background color for all of them. 120 00:08:41,890 --> 00:08:47,740 ‫So what I'm going to do is I'm going to add a class and I'm going to work on this as I go on one. 121 00:08:48,640 --> 00:08:53,050 ‫Similarly, I need to add an icon to icon three an icon for. 122 00:08:57,290 --> 00:09:00,860 ‫All I could do is change the color of what each individual icon. 123 00:09:03,130 --> 00:09:05,410 ‫So that means I just need to update it. 124 00:09:05,800 --> 00:09:12,340 ‫So here I need to include the background color that had save this one and get back here. 125 00:09:12,790 --> 00:09:14,290 ‫You can see it's working fine. 126 00:09:17,870 --> 00:09:20,450 ‫Offer this one on quickly based on her. 127 00:09:29,640 --> 00:09:33,990 ‫And if I jump back here now, if you observe things are working fine. 128 00:09:34,530 --> 00:09:38,190 ‫Yep, we definitely need to change the size of this description next. 129 00:09:38,490 --> 00:09:41,790 ‫Also, we need to add this transform property. 130 00:09:42,610 --> 00:09:44,700 ‫OK, let me do that quickly. 131 00:09:44,910 --> 00:09:47,970 ‫So the first thing is, let's update the description text. 132 00:09:48,480 --> 00:09:54,300 ‫So I just need to select this quantity and had I need to select the description part. 133 00:09:55,930 --> 00:09:58,480 ‫And all I have to do is add up one size. 134 00:09:59,690 --> 00:10:01,070 ‫1.6 rim. 135 00:10:03,310 --> 00:10:11,380 ‫And I need to change the color if I'm not using the teen color, if you observe, we need to copy this 136 00:10:11,380 --> 00:10:11,620 ‫one. 137 00:10:17,140 --> 00:10:20,260 ‫OK, everything is working fine, looks good to me. 138 00:10:21,960 --> 00:10:24,520 ‫We just need to transform that should be easy. 139 00:10:24,540 --> 00:10:30,000 ‫So I just need to jump on like one here and I just need to add our property. 140 00:10:30,390 --> 00:10:35,740 ‫So this is my corner and I need to ask how I affect. 141 00:10:37,650 --> 00:10:43,140 ‫Now on Howard, I need to transform and I need to scale it, so that means. 142 00:10:44,260 --> 00:10:53,440 ‫TRANSCOM had I'm going to scale it one point one from all directions, so if I jump there, okay, this 143 00:10:53,440 --> 00:10:57,010 ‫is working great, but if you see the transition is different. 144 00:10:57,550 --> 00:11:00,130 ‫Here we are, just directly scaling. 145 00:11:00,460 --> 00:11:03,970 ‫We need to add a transition because our snow covered transition. 146 00:11:04,570 --> 00:11:11,020 ‫Now we know these things, we can do this select all because we just have one property in the direction 147 00:11:11,020 --> 00:11:12,820 ‫of 0.5 second. 148 00:11:13,240 --> 00:11:15,660 ‫And then you can take that ease and ease out. 149 00:11:15,670 --> 00:11:20,160 ‫And if you remember about cubic business, you can utilize that. 150 00:11:20,160 --> 00:11:21,490 ‫So save this one. 151 00:11:24,000 --> 00:11:25,260 ‫Or this is too slow. 152 00:11:26,850 --> 00:11:29,490 ‫Let me take a property from CB. 153 00:11:32,550 --> 00:11:35,310 ‫Send this on to visualize this again. 154 00:11:35,610 --> 00:11:36,000 ‫OK. 155 00:11:36,250 --> 00:11:37,020 ‫Walking Point. 156 00:11:38,800 --> 00:11:43,240 ‫Looks good to me, I just need to change the font weight for this next. 157 00:11:44,890 --> 00:11:50,080 ‫Get back here and here I need to select the main line on I should sit tight and. 158 00:11:54,380 --> 00:11:55,270 ‫Spider, right? 159 00:11:55,700 --> 00:11:56,480 ‫I hope so. 160 00:11:56,660 --> 00:11:57,420 ‫Yeah, I do. 161 00:11:57,440 --> 00:12:01,130 ‫So now had I just need to change the font, we. 162 00:12:04,100 --> 00:12:06,650 ‫Let's call it 400 or 500. 163 00:12:09,230 --> 00:12:12,710 ‫Often walking fine, everything looks good to me. 164 00:12:16,170 --> 00:12:22,020 ‫So that's all for this whole section, I hope you got the idea what we just did, and now we need to 165 00:12:22,020 --> 00:12:25,500 ‫move on to this whole section, which is following theses grid. 166 00:12:26,010 --> 00:12:27,750 ‫And this is going to be interesting. 167 00:12:28,020 --> 00:12:32,010 ‫One of my favorite section because you are going to face a lot of problem. 168 00:12:32,670 --> 00:12:33,770 ‫So that's all for now. 169 00:12:33,780 --> 00:12:37,740 ‫Let's jump on to the next section, basically in the next lecture. 170 00:12:38,250 --> 00:12:41,040 ‫Thank you for calling, and I see you guys in the next one.