1 00:00:00,660 --> 00:00:02,850 OK, next up, we're going to start our service section. 2 00:00:05,510 --> 00:00:11,200 And first, we need to create our e-mail for our service section, so let's go back and our index thought 3 00:00:11,210 --> 00:00:19,370 e-mail file and let's create in our comment a service section. 4 00:00:22,430 --> 00:00:27,350 Let's keep it cool underneath, it puts it in and also a section. 5 00:00:29,600 --> 00:00:33,140 And as always, let's also Kopit enthusiasts file. 6 00:00:36,110 --> 00:00:41,570 Now, let's create a section tag again and let's give it the idea of services. 7 00:00:45,500 --> 00:00:50,690 But then here again, we're going to give it a title, so a H to services. 8 00:00:58,080 --> 00:00:59,430 After each two. 9 00:01:01,240 --> 00:01:07,840 Again, I'm going to create a general container which will create free, which will contain again, 10 00:01:07,840 --> 00:01:12,610 I'm going to create a general container which will create container services. 11 00:01:12,610 --> 00:01:14,440 So service. 12 00:01:18,300 --> 00:01:19,020 Container. 13 00:01:25,430 --> 00:01:31,610 Look within here, we'll have free services, but each one of them, I'm going to name service. 14 00:01:31,630 --> 00:01:42,670 So let's create a class of services or service and I'm going to multiply it by three, and this would 15 00:01:42,670 --> 00:01:44,410 create free containers. 16 00:01:45,020 --> 00:01:47,110 Now, let's go in the first of them. 17 00:01:52,990 --> 00:01:57,870 Actually, I'm going to do it anyway, so it in here, I'm going to hold down now. 18 00:02:03,490 --> 00:02:09,010 Option on the Mac or all on a PC going to create the age free tag. 19 00:02:10,430 --> 00:02:17,450 After each free tag, I'm going to create the icon tag and after the icon tag, I'm going to create 20 00:02:17,450 --> 00:02:25,520 a paragraph tag with a Lauren Tam I believe law Lauren 10. 21 00:02:26,480 --> 00:02:29,030 OK, now each with tags. 22 00:02:29,450 --> 00:02:30,140 First one. 23 00:02:31,770 --> 00:02:32,820 Would be webdesign. 24 00:02:38,090 --> 00:02:42,140 The second one, really Web development. 25 00:02:45,620 --> 00:02:49,010 And the first service will be Web hosting. 26 00:03:01,310 --> 00:03:06,410 Now for the anchor tags, we need font awesome, so let's go to font awesome. 27 00:03:07,720 --> 00:03:16,060 And he actually one of them we already have, because we show you it's a screen on our services. 28 00:03:17,880 --> 00:03:19,620 And then to use that, hmm. 29 00:03:20,510 --> 00:03:24,510 OK, so I need this one, this one and this one. 30 00:03:26,990 --> 00:03:34,190 Now, I already know them, I know I already know what kind of classes I need to use, so within our 31 00:03:34,190 --> 00:03:49,780 anchor tag, I will now type in a class of F is then F a dash and dash nip and also F a dash three X. 32 00:03:49,830 --> 00:03:51,560 And I said save and I see what happened. 33 00:03:52,460 --> 00:03:55,890 I actually I need to go here and go out of service section. 34 00:03:55,910 --> 00:03:56,690 Hey there we go. 35 00:03:57,500 --> 00:04:00,290 First of all, the service section is stuck. 36 00:04:00,500 --> 00:04:01,160 Why is that. 37 00:04:01,160 --> 00:04:04,910 Because it's the second section and it's a oord section. 38 00:04:04,920 --> 00:04:12,650 So I just go in here into styling and the first thing I need to do is to change the color of the text 39 00:04:12,650 --> 00:04:15,530 because we can see you can see anything. 40 00:04:17,910 --> 00:04:21,540 So within our service section, going to target the idea of services 41 00:04:24,180 --> 00:04:27,150 and within this I'm going to target our age to. 42 00:04:29,850 --> 00:04:33,560 And changed the color to hash ever. 43 00:04:38,400 --> 00:04:39,030 Also. 44 00:04:40,770 --> 00:04:47,010 We need to go into service and all kinds of services. 45 00:04:50,460 --> 00:04:58,070 She was just ServiceSource saw this and also here, I'm going to give this a color of epithet. 46 00:04:58,830 --> 00:05:01,890 And they should fix our problem to save. 47 00:05:03,890 --> 00:05:06,120 Services for. 48 00:05:07,720 --> 00:05:09,120 OK, so this. 49 00:05:11,780 --> 00:05:12,280 There we go. 50 00:05:16,070 --> 00:05:18,650 Now, we're not finished with our stuff, with our e-mail. 51 00:05:18,680 --> 00:05:22,030 We still need we have this one. 52 00:05:22,040 --> 00:05:28,620 I'm just going to copy this class, going to our next icon down here pasted in. 53 00:05:29,030 --> 00:05:31,370 Well, what just happened? 54 00:05:32,000 --> 00:05:33,230 So let's try it again. 55 00:05:33,800 --> 00:05:35,430 Copied a class going to. 56 00:05:35,450 --> 00:05:37,730 I can tag it. 57 00:05:39,010 --> 00:05:40,050 This shouldn't happen. 58 00:05:45,020 --> 00:05:48,920 Why is this copying the class right click? 59 00:05:50,360 --> 00:05:53,150 Copy, right click. 60 00:05:56,090 --> 00:05:58,570 At least that's much better. 61 00:06:10,500 --> 00:06:12,210 And I'm just going to change the class. 62 00:06:13,650 --> 00:06:17,300 Instead of pen, we have a pencil. 63 00:06:20,240 --> 00:06:21,440 And their ruler. 64 00:06:23,450 --> 00:06:27,900 OK, that's it, safe and let's see what we get, we got our best man ruler. 65 00:06:27,970 --> 00:06:29,750 Yeah, okay. 66 00:06:29,760 --> 00:06:32,100 So the last thing was the database. 67 00:06:32,100 --> 00:06:40,700 So let me paste in here again the clip, the class, and let's change this one to database. 68 00:06:43,450 --> 00:06:51,040 I it's safe and there we go, we have our service sections in our e-mail. 69 00:06:51,620 --> 00:06:53,620 OK, so now let's get into styling. 70 00:07:04,420 --> 00:07:08,620 First, the service section section is Social Services. 71 00:07:10,970 --> 00:07:12,570 You to displayed as flex. 72 00:07:15,220 --> 00:07:19,360 We're going to change the flex direction to call them again. 73 00:07:21,950 --> 00:07:27,980 You have to justify the content center and allow the items to the center. 74 00:07:30,790 --> 00:07:40,840 And also want to give this a bit of a margin from the top, not the bottom, the top of the room, so 75 00:07:40,840 --> 00:07:42,160 let's see what we just did. 76 00:07:43,060 --> 00:07:43,580 There we go. 77 00:07:44,020 --> 00:07:47,860 There's also a section now let's take care of our services. 78 00:07:50,670 --> 00:07:55,230 So first of all, the service container so has services. 79 00:07:58,320 --> 00:08:01,140 And within this, the class of service container. 80 00:08:06,570 --> 00:08:07,920 Dash cam, Dana. 81 00:08:17,440 --> 00:08:19,780 And we also need to display this as flex. 82 00:08:26,500 --> 00:08:32,770 And then we're going to use the flex wrap property because we want when we shrink anything together. 83 00:08:36,210 --> 00:08:41,160 Deflects items to rap, so let's use flaks rap. 84 00:08:42,890 --> 00:08:48,450 OK, I'm going to also give them margin from the top of forum. 85 00:08:54,670 --> 00:09:02,920 Now, let's see how they look, I say slowly forgetting to say, OK, now I also want to give them a 86 00:09:02,920 --> 00:09:04,530 bit of space around them. 87 00:09:04,540 --> 00:09:07,360 So let's go back in here. 88 00:09:07,960 --> 00:09:18,120 And I say space justify content with space around, OK, let's say. 89 00:09:18,160 --> 00:09:19,090 And there we go. 90 00:09:29,720 --> 00:09:38,330 Nassib, let's start each and every service, so first of all, on the change, the background color, 91 00:09:39,230 --> 00:09:39,770 the white. 92 00:09:46,570 --> 00:09:48,020 OK, that's much better. 93 00:09:51,530 --> 00:09:57,050 Now, let's give them also a max width of 300 pixels. 94 00:09:59,520 --> 00:10:02,430 Each and every service will have only 300 pixels for the width. 95 00:10:04,460 --> 00:10:12,080 And let's give them also a shadow of zero zero 15 pixels spread and find pixel. 96 00:10:14,290 --> 00:10:15,600 OK, they have a box. 97 00:10:15,640 --> 00:10:16,090 I don't know. 98 00:10:18,190 --> 00:10:24,360 I was given a margin of error, margin of one gram and also a padding. 99 00:10:27,640 --> 00:10:28,540 Off to Rome 100 00:10:31,540 --> 00:10:37,660 now, we're going to display them as flags again, so within the within a service, we have free items 101 00:10:37,660 --> 00:10:45,580 and now we can display each and every one of them as flags unless change reflects direction to a column. 102 00:10:47,620 --> 00:10:53,860 OK, so there we go now, because we display them as facts, we can now play around with them by aligning 103 00:10:53,860 --> 00:10:57,220 the items to the center and also. 104 00:10:59,610 --> 00:11:02,580 That's the apex, the line to the center. 105 00:11:13,100 --> 00:11:14,390 OK, so let's take a look. 106 00:11:15,110 --> 00:11:15,830 Excellent. 107 00:11:17,020 --> 00:11:18,760 I fear that they will. 108 00:11:22,880 --> 00:11:30,470 No, because I want later on to have a homosexual actually let me do this right now, so I need our 109 00:11:30,470 --> 00:11:31,400 services. 110 00:11:32,810 --> 00:11:35,940 I copied this go down here. 111 00:11:39,230 --> 00:11:43,070 When I hover over them so as to a hover effect. 112 00:11:48,480 --> 00:11:55,470 To change my curse at the pointer, so in order to indicate that I am over a service like. 113 00:12:00,140 --> 00:12:07,790 Then let's do a transform of scale of let's increase then, so one point zero one. 114 00:12:09,210 --> 00:12:14,640 This just means I'm going to increase them by 10 percent and then we're going to adjust to a transition 115 00:12:15,960 --> 00:12:19,200 of point five seconds and ease. 116 00:12:21,070 --> 00:12:28,120 And I'm also going to copy this transition up here, so not only what I'm hauling in, but also as I'm 117 00:12:28,130 --> 00:12:28,900 holding out. 118 00:12:30,880 --> 00:12:38,980 Now, the change, also the background color to ash five by five and the color of the text. 119 00:12:40,060 --> 00:12:42,590 Itself to harsh epithet. 120 00:12:43,460 --> 00:12:50,080 OK, so let's see how this looks promising and after that, when we hover over them, call the background 121 00:12:50,230 --> 00:12:51,550 changes and also the color of the text. 122 00:12:51,550 --> 00:12:52,990 And we have that nice Porchetto. 123 00:12:54,170 --> 00:13:01,490 Okay, so I think basically that's it for a service section so soon, the next one by.