1 00:00:07,010 --> 00:00:11,460 This video, let's add the photo component to our project. 2 00:00:11,480 --> 00:00:18,910 So now let's close these open tabs and this one to an insider component. 3 00:00:19,040 --> 00:00:29,780 Let's create one for the photo and let's create one file photo dot JS for the CSS two is going to be 4 00:00:29,780 --> 00:00:31,940 as photo CSS. 5 00:00:31,940 --> 00:00:36,710 So for the photo component are EFC and we are good to go. 6 00:00:36,710 --> 00:00:38,530 So let's look at the structure here. 7 00:00:38,960 --> 00:00:42,530 Let's bring in the photo element here. 8 00:00:44,240 --> 00:00:51,350 Inside this, we have three sections that is the logo and then the copyright and then the social media 9 00:00:51,350 --> 00:00:52,340 links here. 10 00:00:52,340 --> 00:00:53,960 So let's add them here. 11 00:00:53,960 --> 00:00:56,930 The first one going to be the logo for the logo. 12 00:00:56,960 --> 00:00:58,730 I want to put it inside a date. 13 00:00:58,970 --> 00:01:05,180 So it's going to be as Dirk's footer Dash logo. 14 00:01:05,690 --> 00:01:09,860 And then here let's add the image and the source of the image. 15 00:01:09,860 --> 00:01:12,050 Let's import the image here. 16 00:01:14,840 --> 00:01:19,970 So let's inject the logo to the source as that. 17 00:01:20,210 --> 00:01:22,820 And for the art, let's add logo. 18 00:01:23,060 --> 00:01:25,670 And next step is about the copyright. 19 00:01:25,670 --> 00:01:26,810 So here we go. 20 00:01:29,050 --> 00:01:29,620 Great. 21 00:01:29,870 --> 00:01:31,390 And here we go. 22 00:01:31,570 --> 00:01:36,250 We are going to give it a class four four to dash copy. 23 00:01:36,850 --> 00:01:37,720 Right. 24 00:01:38,170 --> 00:01:42,130 And inside, let's add the text insert P. 25 00:01:42,250 --> 00:01:50,770 So for the copyright symbol, you can use a HTML emoji or HTML entity or you can go online and then 26 00:01:50,770 --> 00:01:52,990 look for copyright. 27 00:01:52,990 --> 00:01:54,250 And let's see. 28 00:01:54,250 --> 00:01:55,840 And this is what we have. 29 00:02:04,180 --> 00:02:07,570 The next step is going to be the social media links. 30 00:02:07,570 --> 00:02:10,389 So they're going to be social. 31 00:02:11,800 --> 00:02:15,870 And for the social too, I'm going to put them inside you arrow. 32 00:02:16,090 --> 00:02:26,980 And for the other, let's give it a class for photos, social media, photos, social media. 33 00:02:27,280 --> 00:02:30,760 And inside let's add the individual eyes. 34 00:02:30,760 --> 00:02:38,500 And in that let's inject the link and that and for a link let's add the icons. 35 00:02:38,500 --> 00:02:42,730 So here the first icons are going to be Facebook icon, right? 36 00:02:42,730 --> 00:02:43,840 So here we go. 37 00:02:43,870 --> 00:02:48,760 So the class name for this one is going to be a bronze. 38 00:02:50,910 --> 00:02:53,170 And then space f a dash. 39 00:02:53,240 --> 00:02:56,760 Facebook and then dash F. 40 00:02:57,060 --> 00:02:57,480 Great. 41 00:02:57,480 --> 00:02:59,410 So to continue. 42 00:02:59,460 --> 00:03:03,330 Let's make sure that is being rendered so back to the components. 43 00:03:03,360 --> 00:03:07,300 Let's bring in the future here and down here. 44 00:03:07,320 --> 00:03:13,150 Let's add that one and let's visualize it in the browser and see that everything is fine. 45 00:03:13,170 --> 00:03:14,490 Yes, it is here. 46 00:03:14,520 --> 00:03:18,510 The logo is too big, but don't worry, you're going to control it very soon. 47 00:03:18,690 --> 00:03:23,670 So next step is that let's go ahead and then duplicate these links here for the social. 48 00:03:23,700 --> 00:03:25,890 Before that, let's add the links here. 49 00:03:25,890 --> 00:03:31,710 So I'm going to use my YouTube social media link here and I'll copy that and back here. 50 00:03:34,830 --> 00:03:35,980 And that is it. 51 00:03:36,000 --> 00:03:40,200 So I need this one four times, so I'm going to copy it four times. 52 00:03:40,200 --> 00:03:41,400 And here we go. 53 00:03:41,610 --> 00:03:42,050 Great. 54 00:03:42,060 --> 00:03:47,780 So for the icons, I'm going to change the first one to use what is called Twitter. 55 00:03:47,790 --> 00:03:51,630 So here it's going to be f a Twitter here. 56 00:03:51,930 --> 00:03:52,470 Yeah. 57 00:03:53,790 --> 00:03:58,020 And then the next icon is going to be the Instagram. 58 00:04:01,870 --> 00:04:04,300 And next week I'm going to be the YouTube. 59 00:04:08,330 --> 00:04:11,240 And lastly, we're going to be linked in. 60 00:04:16,240 --> 00:04:16,790 Great. 61 00:04:16,810 --> 00:04:19,149 Save it and let's see what we have. 62 00:04:19,660 --> 00:04:20,110 Right. 63 00:04:20,110 --> 00:04:24,070 And you have all the social media icons here in the next video. 64 00:04:24,070 --> 00:04:28,210 Let's go ahead and then start a to have something like this.