1 00:00:00,800 --> 00:00:05,740 Okay, so in this video, we're going to take care of our service section, so let's actually create 2 00:00:05,740 --> 00:00:07,110 or save a section on the e-mail. 3 00:00:07,120 --> 00:00:12,130 First of all, now, right down here where we had our sections, Tagg's. 4 00:00:14,480 --> 00:00:21,050 And also, I didn't give this a name, so services know each to so well. 5 00:00:26,240 --> 00:00:34,040 On the need for H2O, we're going to create now, well, all of them will have actually two items each 6 00:00:34,040 --> 00:00:34,520 service. 7 00:00:34,520 --> 00:00:41,990 One will be a image tag and one will be a digital container, a div, which will contain the title and 8 00:00:41,990 --> 00:00:42,530 the paragraph. 9 00:00:42,560 --> 00:00:45,050 So let's start by creating. 10 00:00:47,110 --> 00:00:59,410 Our image tag and as we head to to do up here, close this as we head up here to the source, we need 11 00:00:59,410 --> 00:01:00,190 our source again. 12 00:01:01,940 --> 00:01:07,550 And I'm also going to copy in the I.D. of our images, so first image will be. 13 00:01:08,730 --> 00:01:11,680 I see are two. 14 00:01:13,500 --> 00:01:14,940 This idea right here. 15 00:01:17,270 --> 00:01:20,370 OK, and we should only appear down here. 16 00:01:20,660 --> 00:01:21,200 There it is. 17 00:01:22,270 --> 00:01:29,860 So let me just do a quick stihler right here that we're finished with our that third been coming in 18 00:01:29,860 --> 00:01:31,420 all sorts of services. 19 00:01:35,350 --> 00:01:41,680 And after our comment, I'm going to set all of the image tags to be displayed as block 20 00:01:45,220 --> 00:01:48,830 and to have a width of one hundred percent. 21 00:01:49,960 --> 00:01:50,430 OK. 22 00:01:52,460 --> 00:02:00,140 Now, this will stall all of our images, so each image tag will have this will have the suffix. 23 00:02:03,610 --> 00:02:09,040 So let's go back to our e-mail and create our services so we have our first image and on the 29th of 24 00:02:09,040 --> 00:02:11,470 it we're going to create the service containers. 25 00:02:11,490 --> 00:02:15,820 So we're going to just create a class with the name of service. 26 00:02:18,210 --> 00:02:21,630 Within this class, this debate continues. 27 00:02:21,660 --> 00:02:27,990 Now, this include a tree, this tree will have a class of service title. 28 00:02:33,300 --> 00:02:37,500 And after that, we are going to have plus a paragraph that. 29 00:02:38,720 --> 00:02:46,970 OK, so let's hit enter, and there we go, so we need to copy this, including the image right here 30 00:02:47,120 --> 00:02:51,170 for you more times, I believe, or four more times the one to. 31 00:02:53,160 --> 00:02:53,860 Wait a second. 32 00:02:53,880 --> 00:02:58,710 One, two, three, four, five, so far, four more times. 33 00:03:00,260 --> 00:03:04,760 Just take this and start copying it in one, two, three, four. 34 00:03:05,990 --> 00:03:07,070 OK, there you go. 35 00:03:07,900 --> 00:03:09,030 So let's start from the top. 36 00:03:09,200 --> 00:03:10,670 We have our first image. 37 00:03:11,680 --> 00:03:19,410 This will be it has an a treat and the service, this class of service container has free within IT 38 00:03:19,810 --> 00:03:23,940 service title, the first service will be social in school within a year. 39 00:03:24,260 --> 00:03:24,910 That's nice. 40 00:03:25,360 --> 00:03:27,940 Social, not social. 41 00:03:29,540 --> 00:03:30,470 It's actually video. 42 00:03:31,720 --> 00:03:35,470 So for services, video space, dash, dash. 43 00:03:37,210 --> 00:03:42,850 Then on the Nayaf within our paragraph, thug's actually let's now hold down alt. 44 00:03:44,020 --> 00:03:50,560 And click through all of our paragraph tags, because I'm going to create a Lauren Ipsum stuff and Lauren. 45 00:03:51,940 --> 00:03:57,460 Hit enter, and this will populate our paragraph deck, so we take a look now, page, now they're all 46 00:03:57,460 --> 00:03:58,120 populated. 47 00:03:59,260 --> 00:04:07,180 Now let's go to our titles, our next title, which will be Audio, a dash dash, audio space, dash, 48 00:04:07,180 --> 00:04:07,570 dash. 49 00:04:08,410 --> 00:04:10,660 Then of her title would be photo. 50 00:04:15,430 --> 00:04:20,350 Photo, dash, dash and then social. 51 00:04:25,160 --> 00:04:28,430 So show the stash. 52 00:04:30,430 --> 00:04:31,240 And use. 53 00:04:35,580 --> 00:04:38,670 OK, so we have our titles right here, perfect. 54 00:04:39,810 --> 00:04:41,900 Now, we also have all over the place the same image. 55 00:04:41,910 --> 00:04:43,320 So let's start changing this. 56 00:04:43,740 --> 00:04:47,670 So I'm just going to change their ideas so we can just copy them in. 57 00:04:47,980 --> 00:04:50,250 So the study will be. 58 00:04:51,680 --> 00:04:59,900 This one, Q7, W.D., Capitally Small, the M.G. and so forth and so on, but you could all have them 59 00:04:59,900 --> 00:05:01,900 in a Sourcefire, so don't worry about that. 60 00:05:02,690 --> 00:05:06,410 Then we'll have the next one, which would be this one. 61 00:05:08,110 --> 00:05:12,610 I just got them these are exactly the same images from our splash, but just don't want to waste your 62 00:05:12,610 --> 00:05:13,580 time by searching them. 63 00:05:13,580 --> 00:05:15,010 So I'm just going to give you the IDs. 64 00:05:17,330 --> 00:05:18,950 Then we have this one. 65 00:05:21,100 --> 00:05:26,800 So this on and know of what's with the photo, then we have audio. 66 00:05:31,120 --> 00:05:35,590 OK, and the last one is video and. 67 00:05:37,100 --> 00:05:38,180 It's actually this one. 68 00:05:38,210 --> 00:05:45,100 OK, so we have all our images set up, we have this title and text, so let's Thorstein again. 69 00:05:45,110 --> 00:05:47,900 So let's go back to access to this here. 70 00:05:47,900 --> 00:05:48,440 Save. 71 00:05:50,070 --> 00:05:52,410 And for someone to take the class of service. 72 00:05:56,160 --> 00:06:00,900 Now, I want to have I think this pleaders flex and it should flex in a column, so we're going to display 73 00:06:00,900 --> 00:06:04,960 it as Flex and Flex Direction column. 74 00:06:06,270 --> 00:06:08,040 Now, we could justify the content. 75 00:06:14,560 --> 00:06:15,400 Senator. 76 00:06:19,210 --> 00:06:26,560 And also align the items to the center and so this thing is now pushing the center. 77 00:06:27,550 --> 00:06:31,330 Now, this will also help us with with our desktop format. 78 00:06:32,230 --> 00:06:34,830 So we don't need to do this again in our desktop format. 79 00:06:34,840 --> 00:06:40,800 As soon as we leave, this format is going to stay flexed and is going to remain in a column. 80 00:06:42,170 --> 00:06:43,700 OK, a couple of things here. 81 00:06:44,350 --> 00:06:50,630 Let's give it a bit of a padding all around panel two point five, Brehm all around. 82 00:06:52,610 --> 00:06:55,130 And let's also align the tax to the center. 83 00:06:59,810 --> 00:07:00,350 OK. 84 00:07:02,790 --> 00:07:08,430 Now for a service title, that's a bit of a standing here, so let's take the class of service. 85 00:07:12,030 --> 00:07:13,170 And their title. 86 00:07:17,430 --> 00:07:20,940 Now I want to limit its width to 35 percent. 87 00:07:25,760 --> 00:07:30,750 And I'm going to change his background, color and his color, so back on color, go with a free, free, 88 00:07:30,750 --> 00:07:35,460 free hash color and for the color, obviously the change, not a white collar. 89 00:07:36,280 --> 00:07:38,970 So I should let me see so you can see what just happened. 90 00:07:38,990 --> 00:07:41,110 And now let's change it to Ash. 91 00:07:41,790 --> 00:07:42,130 OK. 92 00:07:44,190 --> 00:07:48,370 I want to have just a bit of a distance between the title and the paragraph there. 93 00:07:48,390 --> 00:07:52,320 So let's use a margin to the bottom button of the. 94 00:07:54,950 --> 00:07:58,700 Our title right there, so let's say bought bottom and to rent. 95 00:08:01,170 --> 00:08:03,740 OK, so I think that's pretty good. 96 00:08:03,750 --> 00:08:06,920 Oh, yeah, send it to give it a bit of a padding within it. 97 00:08:07,460 --> 00:08:15,590 So that's the padding and top and bottom as go with zero point five ram and left and right, one point 98 00:08:15,920 --> 00:08:16,790 five ram. 99 00:08:17,600 --> 00:08:18,290 OK, that's it. 100 00:08:18,290 --> 00:08:18,620 Safe. 101 00:08:18,620 --> 00:08:19,240 And there we go. 102 00:08:19,250 --> 00:08:22,840 There are all titles now. 103 00:08:22,850 --> 00:08:25,490 We still have to change this one. 104 00:08:25,610 --> 00:08:30,010 OK, so the service ID and the section title right here. 105 00:08:30,050 --> 00:08:30,890 So let's target. 106 00:08:30,890 --> 00:08:34,100 This should have started with this but whatever. 107 00:08:34,670 --> 00:08:35,840 So services 108 00:08:38,750 --> 00:08:40,460 and let's give it a padding. 109 00:08:40,460 --> 00:08:42,230 First of all, one point five ram. 110 00:08:47,250 --> 00:08:53,550 OK, and now we could also change his background, color, color and align the text to the center. 111 00:08:53,550 --> 00:09:03,760 So to start with the light center, background, color, dark color and color, white collar. 112 00:09:05,260 --> 00:09:09,120 OK, and I didn't target it correctly. 113 00:09:09,120 --> 00:09:12,320 So let's go back to my e-mail and let's see what I messed up. 114 00:09:13,820 --> 00:09:14,630 S.. 115 00:09:16,430 --> 00:09:19,410 To give this ideal service. 116 00:09:20,510 --> 00:09:22,580 Well, this is strange. 117 00:09:23,910 --> 00:09:27,210 OK, so let's change this to two services. 118 00:09:28,310 --> 00:09:30,650 So it was titled Service Title. 119 00:09:33,640 --> 00:09:35,460 Yeah, this is where I miss up. 120 00:09:36,510 --> 00:09:37,950 This would be actually a service title. 121 00:09:39,140 --> 00:09:40,600 OK, there we go. 122 00:09:43,050 --> 00:09:50,850 OK, so what we still need to do is the context section, and this is a thing for the next week or so 123 00:09:50,850 --> 00:09:52,070 soon, the next one by.