1 00:00:08,180 --> 00:00:09,230 In this video. 2 00:00:09,230 --> 00:00:11,990 Let's go ahead and work on the photo. 3 00:00:12,410 --> 00:00:18,850 But before we continue, guys, I have added my custom content to the page as we see on the screen. 4 00:00:18,860 --> 00:00:21,560 So let's work on the footer. 5 00:00:21,650 --> 00:00:25,710 So let's get to the HTML and let's work on the footer. 6 00:00:25,730 --> 00:00:31,370 So inside the HTML, let's collapse all the elements that we are done with it. 7 00:00:31,400 --> 00:00:32,630 That is the main. 8 00:00:32,630 --> 00:00:36,940 And then the aside, the next step going to be the footer. 9 00:00:36,950 --> 00:00:46,120 So let's have the structure and it goes like this footer and inside we have a Dave with a class core 10 00:00:46,130 --> 00:00:47,000 about. 11 00:00:47,300 --> 00:00:56,000 And inside I added h one with pan and I added as Nova Tick. 12 00:00:56,300 --> 00:01:03,170 And then for that span, I gave it a class of logo dash text. 13 00:01:03,350 --> 00:01:11,130 So inside the H one, I'm going to add another span element to style, this specific text core block. 14 00:01:12,630 --> 00:01:13,150 Great. 15 00:01:13,160 --> 00:01:17,240 The next element is going to be a P tag with some dummy text. 16 00:01:17,390 --> 00:01:20,570 Let me reduce the number of text for this one. 17 00:01:20,840 --> 00:01:23,120 Let's save it and let's check it out. 18 00:01:23,120 --> 00:01:25,550 And this is what we have. 19 00:01:25,580 --> 00:01:32,810 The next step is let's halve the contact content and then the social media icons channel. 20 00:01:33,080 --> 00:01:38,780 So here, let's have a comment and call this one as contact. 21 00:01:38,810 --> 00:01:42,740 So here you're going to put them inside it on div. 22 00:01:42,740 --> 00:01:45,710 So here we go for the contacts. 23 00:01:45,710 --> 00:01:50,450 I'm going to give it a class called Contact Inside the Day. 24 00:01:50,480 --> 00:02:02,240 Let's add one span and then I want to add an icon with a class of F as from going to be as f e, a space 25 00:02:02,240 --> 00:02:03,710 f, a dash font. 26 00:02:03,800 --> 00:02:07,370 And these classes are from font or some icons. 27 00:02:07,550 --> 00:02:12,050 After that, I want to add a text that is a phone number. 28 00:02:12,320 --> 00:02:20,120 It's going to be plus one, one, two, three, four, five, six, and then seven, eight, nine. 29 00:02:20,130 --> 00:02:21,650 This a fake phone number. 30 00:02:21,830 --> 00:02:27,800 And then after this one, I'm going to add email also the same thing. 31 00:02:27,800 --> 00:02:34,070 I'm going to put them inside a span so I can copy this one and then paste it down here. 32 00:02:34,070 --> 00:02:35,060 I'll start. 33 00:02:35,180 --> 00:02:37,400 The next step is I want to change. 34 00:02:37,400 --> 00:02:43,190 The icon is no more font, but instead it's going to be as envelope. 35 00:02:44,240 --> 00:02:48,230 The next one going to be the email text for this one. 36 00:02:48,230 --> 00:02:54,500 I'm going to put it inside a link and for the real value I'm going to make use of mail to. 37 00:02:54,530 --> 00:03:01,370 For this one, if a user click on the email, it's going to open an application where the user can send 38 00:03:01,370 --> 00:03:03,460 email for the final one. 39 00:03:03,470 --> 00:03:09,800 If I click on the email, you can see that it has opened my default email sender application. 40 00:03:10,040 --> 00:03:17,390 And to achieve that, you are passing in the mail to that and the email that you want to send to I want 41 00:03:17,390 --> 00:03:27,770 to send to support at I novatek dot com this fake email and then the value inside that one is going 42 00:03:27,770 --> 00:03:29,900 to be the email. 43 00:03:29,930 --> 00:03:32,380 This is the email the user will see. 44 00:03:32,390 --> 00:03:39,170 So let me pass down here and now let's see what we have done and this is what we have done so far. 45 00:03:39,290 --> 00:03:43,790 I think I need to remove the code around this one. 46 00:03:44,090 --> 00:03:44,830 Yes. 47 00:03:44,870 --> 00:03:45,450 Great. 48 00:03:45,470 --> 00:03:48,980 The next step is about the social media icon. 49 00:03:48,980 --> 00:03:56,360 So after the contact here, I can collapse it and down here is going to be at socials. 50 00:03:56,540 --> 00:04:03,770 So I'm going to have a class called socials and inside I'm going to have h ref. 51 00:04:03,770 --> 00:04:08,390 And then for the x ref I'm going to use my YouTube channel link. 52 00:04:08,390 --> 00:04:11,000 So I'm going to make use of this one. 53 00:04:11,000 --> 00:04:18,410 And coming back to the HTML for the value for the H ref, I'll put it inside and for the icon I'm going 54 00:04:18,410 --> 00:04:26,360 to use I with a class called F, a, b and then f a dash you tube. 55 00:04:26,810 --> 00:04:27,290 Great. 56 00:04:27,290 --> 00:04:32,540 So save it and let's see if we're going to have the icon which is down here. 57 00:04:32,570 --> 00:04:33,560 We have it. 58 00:04:33,560 --> 00:04:39,470 So I'm going to copy this one and paste based on the number of social media channels that you have or 59 00:04:39,470 --> 00:04:40,190 I have. 60 00:04:40,190 --> 00:04:46,340 So shift option and then paste it four times and now I'm going to change the icons. 61 00:04:46,370 --> 00:04:50,900 The first one is the YouTube, the second one is going to be Instagram. 62 00:04:52,940 --> 00:04:57,110 The next one is going to be as Twitter next. 63 00:04:57,110 --> 00:04:59,090 So I'm going to be Facebook. 64 00:05:01,460 --> 00:05:01,760 Great. 65 00:05:01,760 --> 00:05:02,990 You can change the link. 66 00:05:03,020 --> 00:05:04,040 The choice is yours. 67 00:05:04,040 --> 00:05:05,630 So let me remove this one. 68 00:05:06,080 --> 00:05:07,760 And now let's save it. 69 00:05:07,760 --> 00:05:09,620 And let's see what we have done. 70 00:05:09,620 --> 00:05:11,910 And this is what we have. 71 00:05:11,930 --> 00:05:13,070 Let me check the final one. 72 00:05:13,070 --> 00:05:17,750 I think I have four channels here, so let me add one more in the mess. 73 00:05:17,750 --> 00:05:19,280 That is an Instagram. 74 00:05:19,280 --> 00:05:21,260 So I think YouTube. 75 00:05:21,260 --> 00:05:22,220 Instagram. 76 00:05:22,220 --> 00:05:24,680 Oh, I missed some typing mistake. 77 00:05:24,680 --> 00:05:26,780 Here is Instagram. 78 00:05:27,080 --> 00:05:29,870 Yes, that's what we have the next video. 79 00:05:29,870 --> 00:05:32,000 Let's go ahead and then start this one.