1 00:00:08,770 --> 00:00:09,790 In this video. 2 00:00:09,790 --> 00:00:14,530 Let's go ahead and then style to have something like this. 3 00:00:14,620 --> 00:00:21,820 So let's get to the component that is the services and we have the CSS file inside that. 4 00:00:21,820 --> 00:00:25,900 So let's work on the services component. 5 00:00:25,930 --> 00:00:32,500 See as the first step is we want to give it a background color for the services container. 6 00:00:32,500 --> 00:00:44,050 So here we go, dart services does container and then let's give it a margin of 20 pixels and then background 7 00:00:44,050 --> 00:00:49,420 color to be hashtag F, that is triple FS. 8 00:00:49,540 --> 00:00:55,750 Well, we didn't see the effect because we are not using the CSS inside this component. 9 00:00:55,750 --> 00:00:57,880 So let's require it quickly. 10 00:00:57,880 --> 00:00:58,990 I start save it. 11 00:00:58,990 --> 00:01:04,090 And now you can see that we have a margin around the container. 12 00:01:04,239 --> 00:01:05,080 Did you see that? 13 00:01:05,080 --> 00:01:05,890 Yes. 14 00:01:05,920 --> 00:01:06,460 Good. 15 00:01:06,460 --> 00:01:10,750 So next step is let's start the services list container. 16 00:01:10,750 --> 00:01:17,980 So here we go, Dot's services dash list does container. 17 00:01:18,580 --> 00:01:28,210 And for this, let's give it a border radius as five pixels and this is padding of 20 POSIX save it. 18 00:01:28,210 --> 00:01:31,360 And now let's have a look a something like this. 19 00:01:31,360 --> 00:01:32,170 But I forgot. 20 00:01:32,170 --> 00:01:34,240 Let's design for mobile first. 21 00:01:34,240 --> 00:01:35,770 So here, here we go. 22 00:01:36,190 --> 00:01:36,640 Great. 23 00:01:36,640 --> 00:01:39,640 I think for this one too, we can have some margin around the image. 24 00:01:39,640 --> 00:01:40,060 Right. 25 00:01:40,060 --> 00:01:42,130 Is too close together here. 26 00:01:42,310 --> 00:01:48,940 So what we can do is that let's locate the header CSS. 27 00:01:48,940 --> 00:01:51,580 Well, let's switch just a little bit. 28 00:01:52,060 --> 00:02:01,540 So let's locate the image itself, which is the profile image container and we can give it margin as 29 00:02:01,540 --> 00:02:02,590 ten POSIX. 30 00:02:02,590 --> 00:02:03,880 So let's see. 31 00:02:03,880 --> 00:02:05,800 Yeah, something like this one. 32 00:02:05,800 --> 00:02:14,260 So the next step is that let's style the items, which is this once to have some card with some colorful 33 00:02:14,260 --> 00:02:15,010 icons. 34 00:02:15,010 --> 00:02:22,900 So back here after the services list container, let's select the services item going to be as service 35 00:02:22,900 --> 00:02:24,070 dash item. 36 00:02:24,130 --> 00:02:37,870 And here let's give margin of $20 and then border radios as $16 and box shadow is going to be zero. 37 00:02:37,870 --> 00:02:50,470 And then for P6 and $30 RG be in with red bin zero and then going zero blue zero and under there are 38 00:02:50,500 --> 00:02:51,670 0.1. 39 00:02:52,670 --> 00:02:58,860 So next step is let's give it part N of 20 parsecs and let's see. 40 00:02:58,880 --> 00:02:59,570 Yes. 41 00:02:59,570 --> 00:03:02,240 Now we have some padding around each. 42 00:03:02,900 --> 00:03:06,650 The next step is that let's increase these icons here. 43 00:03:06,740 --> 00:03:10,430 So we are going to target the services that are icons. 44 00:03:10,430 --> 00:03:16,480 And then the I so I can copy this one and down here change this one to I. 45 00:03:16,490 --> 00:03:27,080 And here let's remove everything and change to font size as to ram and then margin as ten parsecs. 46 00:03:27,080 --> 00:03:30,530 So let's have a look a something like this. 47 00:03:30,530 --> 00:03:34,490 So let's go ahead and add colour to individual icons here. 48 00:03:34,820 --> 00:03:42,140 Remember they have their specific name as F a desktop and then F a fonts. 49 00:03:42,290 --> 00:03:44,660 So let's select those classes. 50 00:03:44,660 --> 00:03:49,790 So don't f a dash code and here we go. 51 00:03:49,820 --> 00:04:01,220 The colour for this one is hashtag E nine for c89 and this one going to be the F eight desktop so I 52 00:04:01,220 --> 00:04:02,450 can copy this one. 53 00:04:02,450 --> 00:04:14,480 And then down here we're going to be as desktop for the icon and the colour is hashtag F, db4, four, 54 00:04:14,510 --> 00:04:15,230 eight. 55 00:04:15,410 --> 00:04:18,470 And lastly, it's about the tablets. 56 00:04:18,470 --> 00:04:24,830 So down here I'll change this one to tablet dash art. 57 00:04:25,190 --> 00:04:36,500 The colour is hashtag c31f0c, so save it and let's have a look a something like this. 58 00:04:36,500 --> 00:04:38,210 You can see that on mobile. 59 00:04:38,240 --> 00:04:39,770 It looks nice. 60 00:04:39,770 --> 00:04:43,790 So let's also work on this one services container. 61 00:04:44,300 --> 00:04:47,720 So let's select the services description container. 62 00:04:47,720 --> 00:04:49,490 So here we go. 63 00:04:49,540 --> 00:04:51,230 Going to be as DOT. 64 00:04:52,420 --> 00:04:53,620 Services. 65 00:04:55,180 --> 00:04:56,860 Dash description. 66 00:04:58,610 --> 00:04:59,980 Does container. 67 00:05:00,920 --> 00:05:12,740 So here you go, display flex and then flex direction to the column and then align items as black starts 68 00:05:12,740 --> 00:05:16,520 and then margin of 20 parsecs. 69 00:05:16,670 --> 00:05:18,680 So let's have a look. 70 00:05:20,000 --> 00:05:20,390 Great. 71 00:05:20,390 --> 00:05:22,400 Something like this. 72 00:05:22,430 --> 00:05:25,780 The next step is that I want to style this services. 73 00:05:25,790 --> 00:05:29,630 If I check the final one, we can see that this is what we have. 74 00:05:30,110 --> 00:05:33,470 Or on mobile, we can reduce the font size of this one. 75 00:05:33,470 --> 00:05:35,000 The choice is yours. 76 00:05:35,120 --> 00:05:39,680 So here, let me select the services container h one span. 77 00:05:39,680 --> 00:05:40,640 So here you go. 78 00:05:40,640 --> 00:05:43,220 Services container. 79 00:05:45,660 --> 00:05:47,910 So this is what I am selecting. 80 00:05:47,940 --> 00:05:52,020 I'm targeting the container and then the span or better. 81 00:05:52,020 --> 00:05:57,390 So you can give this one a class and then inside the case we can target that. 82 00:05:57,390 --> 00:06:08,550 So here I want to change the font size of this 1 to 2.5 RAM and then the color for that one going to 83 00:06:08,550 --> 00:06:14,160 be as hash hashtag fdb4 for eight. 84 00:06:14,250 --> 00:06:15,630 So let's save it. 85 00:06:15,630 --> 00:06:17,400 And now let's have a look. 86 00:06:17,400 --> 00:06:19,500 And indeed, this is what we have. 87 00:06:19,500 --> 00:06:21,030 And this the final one. 88 00:06:21,030 --> 00:06:22,580 We are almost there. 89 00:06:22,590 --> 00:06:23,220 Right. 90 00:06:23,250 --> 00:06:23,820 Great. 91 00:06:24,030 --> 00:06:26,940 So next step is let's tile the bottom. 92 00:06:26,970 --> 00:06:29,820 You can see that we have this button down here. 93 00:06:29,850 --> 00:06:32,760 So let's go ahead and then start that one. 94 00:06:33,180 --> 00:06:35,230 So here we go. 95 00:06:35,250 --> 00:06:40,500 So first of all, I targeted the services container and then the button. 96 00:06:40,890 --> 00:06:42,420 So here you go. 97 00:06:42,450 --> 00:06:44,580 I gave it background color. 98 00:06:44,760 --> 00:06:52,020 Background color as this one and border as none. 99 00:06:52,590 --> 00:06:54,150 Border none. 100 00:06:54,330 --> 00:07:07,260 And border radius is five, six and color of hashtag F, F, and then margin bottom to B, 30 P6 and 101 00:07:07,260 --> 00:07:14,790 then margin top to B $20 and the width of the button to be 120 P6. 102 00:07:14,790 --> 00:07:15,570 That is it. 103 00:07:15,570 --> 00:07:16,350 Save it. 104 00:07:16,350 --> 00:07:18,090 And now let's have a look. 105 00:07:18,090 --> 00:07:20,040 Oh, we have something like this. 106 00:07:20,040 --> 00:07:25,740 There is no padding, so let's add some padding of ten pieces on both sizes. 107 00:07:25,770 --> 00:07:27,840 A something like this. 108 00:07:27,840 --> 00:07:31,050 Now we are done with the description.