1
00:00:09,520 --> 00:00:10,480
In this video.

2
00:00:10,480 --> 00:00:14,620
Let's see how we are going to implement these kinds of services.

3
00:00:14,620 --> 00:00:17,860
So we are going to create a component core services.

4
00:00:17,860 --> 00:00:20,120
So back to our folder here.

5
00:00:20,380 --> 00:00:29,650
Inside the SLC components, let's create one for the core services and I'm going to create one file

6
00:00:29,650 --> 00:00:40,690
for services dot JS and it corresponded CSS as services dot CC.

7
00:00:40,690 --> 00:00:43,390
So let's start with the component.

8
00:00:43,420 --> 00:00:49,390
So let's go forward by making our AFC E and you are good to go.

9
00:00:49,390 --> 00:00:56,260
So for this one, we are going to have a first day that's going to be our services container.

10
00:00:56,260 --> 00:01:03,820
So dart services dash container and here we go.

11
00:01:03,820 --> 00:01:09,550
And inside we are going to have the list of these services, which is this one.

12
00:01:09,550 --> 00:01:14,470
So we have a parent container as that so that we can add some margin.

13
00:01:14,470 --> 00:01:17,800
And then for services list this what we have.

14
00:01:17,800 --> 00:01:20,230
So let's add that one quickly here.

15
00:01:20,350 --> 00:01:23,230
So the first one going to be our services.

16
00:01:26,580 --> 00:01:31,950
Dash lists, dash container rate.

17
00:01:31,950 --> 00:01:36,180
So the services list container is going to drop this once.

18
00:01:36,180 --> 00:01:41,900
That is the service's list description and then the service's list items.

19
00:01:41,910 --> 00:01:49,590
So inside the list container, we are going to add to Dave's one, going to be the description and then

20
00:01:49,590 --> 00:01:52,470
that's going to be the items.

21
00:01:52,500 --> 00:01:52,790
Great.

22
00:01:52,830 --> 00:01:54,360
So let's start with the description.

23
00:01:54,360 --> 00:01:56,040
So here we go.

24
00:01:56,040 --> 00:02:05,580
I'm going to add services description, container two dot services description dash container hit enter.

25
00:02:05,580 --> 00:02:10,070
And I think the container is something like this is dash here.

26
00:02:10,350 --> 00:02:10,800
Great.

27
00:02:10,800 --> 00:02:14,010
So services description container.

28
00:02:14,190 --> 00:02:21,540
And after that for the items two is going to be service item container going to be our service dash

29
00:02:21,540 --> 00:02:24,300
item dash container.

30
00:02:24,810 --> 00:02:25,410
Great.

31
00:02:25,650 --> 00:02:27,960
So let's start with this one first.

32
00:02:27,960 --> 00:02:32,790
So let's collapse this one and let's work on the description.

33
00:02:32,790 --> 00:02:35,040
So here we go.

34
00:02:35,310 --> 00:02:41,250
So here, let's give it h one and says that my awesome.

35
00:02:43,160 --> 00:02:46,070
And I want to style a specific text.

36
00:02:46,070 --> 00:02:50,510
So I'm going to wrap inside span and going to be our services.

37
00:02:52,400 --> 00:02:55,160
Great because you can see that for the final one.

38
00:02:55,190 --> 00:03:01,250
We have services with different color, so that's why I'm adding span between them.

39
00:03:01,550 --> 00:03:08,070
And after that I want to add the description copy here and then we add some dummy text here.

40
00:03:08,240 --> 00:03:11,000
I can add more gray disk cocaine.

41
00:03:11,000 --> 00:03:15,320
And lastly, I'm going to be a button for hide me.

42
00:03:15,860 --> 00:03:18,380
All right, let's see.

43
00:03:19,760 --> 00:03:25,700
So to be able to render it, we are going to call this component inside the app.

44
00:03:25,700 --> 00:03:31,880
So let's go to app and let's bring in the services component, which is this one.

45
00:03:31,880 --> 00:03:36,680
And now after the header, I want to add the component here.

46
00:03:36,710 --> 00:03:38,720
So save it and let's have a look.

47
00:03:38,720 --> 00:03:40,910
And this is what we have.

48
00:03:41,120 --> 00:03:48,920
The next step is that let's add the services item so we are done with this one so I can collapse it.

49
00:03:48,920 --> 00:03:51,860
I'll start and let's work with this one.

50
00:03:51,860 --> 00:03:59,150
So inside here, let's add one day of course, services item is going to be our services dash.

51
00:04:00,180 --> 00:04:01,050
Adam.

52
00:04:01,350 --> 00:04:02,910
And here we go.

53
00:04:03,120 --> 00:04:10,520
And inside, I want to add an icon with a class called f x solid f e code.

54
00:04:10,530 --> 00:04:18,470
When it be as class name, f a dash solid, and then f a dash code.

55
00:04:18,480 --> 00:04:21,470
So save it and let's see.

56
00:04:21,480 --> 00:04:24,360
And we have something like this.

57
00:04:24,750 --> 00:04:27,750
The next step is about the description.

58
00:04:27,750 --> 00:04:37,050
So after the icon, I'm going to add a date called description, going to be as a description, as a

59
00:04:37,050 --> 00:04:38,760
dash description.

60
00:04:39,210 --> 00:04:44,880
And inside let's add a three and call it as web development.

61
00:04:46,890 --> 00:04:53,760
And after the eighth three, let's add the P top four description as that.

62
00:04:54,240 --> 00:04:59,940
So we can see that we have this course for web development, desktop, tablet with different icons.

63
00:04:59,940 --> 00:05:08,310
So here we are going to copy the item and paste it and change the icons and then the title.

64
00:05:08,340 --> 00:05:13,920
So here I will select all and press shift option and down arrow key as that.

65
00:05:13,920 --> 00:05:17,340
Now I have two of them making three.

66
00:05:17,370 --> 00:05:18,300
So let's see.

67
00:05:18,300 --> 00:05:20,130
Indeed we have three.

68
00:05:20,160 --> 00:05:20,850
The final one.

69
00:05:20,850 --> 00:05:23,550
Two, we have three services.

70
00:05:23,580 --> 00:05:23,900
Great.

71
00:05:23,910 --> 00:05:27,930
So let's go ahead and change these icons and then the title.

72
00:05:28,080 --> 00:05:29,640
The first one is this one.

73
00:05:29,640 --> 00:05:40,020
The second one is going to be as F a desktop, we're going to be as F a desktop and then going to be

74
00:05:40,020 --> 00:05:42,120
as desktop development.

75
00:05:43,440 --> 00:05:51,690
And next one going to be the F a tablet art, which is this 1fa tablet.

76
00:05:51,900 --> 00:05:53,250
That's art.

77
00:05:53,550 --> 00:05:58,590
And this I'm going to be as tablet development or tablet.

78
00:05:59,520 --> 00:06:03,810
So let's make it as FU stock or u x design.

79
00:06:05,580 --> 00:06:08,670
I got so you x design.

80
00:06:09,570 --> 00:06:10,170
Great.

81
00:06:10,170 --> 00:06:14,910
So let's see what we have a something like this.