1 00:00:01,200 --> 00:00:03,330 All righty, welcome back. 2 00:00:03,360 --> 00:00:10,920 So the goal of this video is going to be to add our image assets that we have and figure into our own 3 00:00:10,920 --> 00:00:11,670 project. 4 00:00:12,630 --> 00:00:19,050 There is a principle of layout and design when it comes to print for newspapers and magazines, and 5 00:00:19,050 --> 00:00:26,460 that is that you always want the image to be larger than what it will be on the page in order to make 6 00:00:26,460 --> 00:00:28,370 sure that it remains sharp. 7 00:00:29,040 --> 00:00:34,530 If you've ever had a really small image that has been made bigger, you can see that it pixilate and 8 00:00:34,530 --> 00:00:35,590 loses quality. 9 00:00:36,120 --> 00:00:42,520 We want the opposite to happen in this case, to have a bigger image become smaller on the page. 10 00:00:42,930 --> 00:00:46,590 So we need to export the elements. 11 00:00:47,220 --> 00:00:49,380 We can do this in different formats. 12 00:00:49,380 --> 00:00:52,640 So let's say that we click on one of the layers here. 13 00:00:53,010 --> 00:00:58,830 So if we were to click down on the arrow, we can see that it's made up of an icon as well as the text 14 00:00:58,830 --> 00:00:59,130 here. 15 00:00:59,550 --> 00:01:06,060 If you wanted to, you could actually explore each of these letters individually and apply the styling 16 00:01:06,060 --> 00:01:06,770 individually. 17 00:01:07,320 --> 00:01:09,940 But for me, that's a little too in-depth. 18 00:01:10,440 --> 00:01:13,320 I want to just actually export the entire layer. 19 00:01:13,530 --> 00:01:16,200 So the logo plus the branding itself. 20 00:01:16,500 --> 00:01:23,520 Once I have this layer selected, we're going to start with the branding and go over to the export option 21 00:01:23,520 --> 00:01:23,850 here. 22 00:01:23,880 --> 00:01:29,790 I'm going to click on it and you can see that there's multiple formats that you could export in for 23 00:01:29,790 --> 00:01:30,000 me. 24 00:01:30,000 --> 00:01:37,380 I'm going to stick with PMG because it allows us to maintain quality by exporting at a bigger size, 25 00:01:37,800 --> 00:01:44,460 as well as maintaining transparency, which is especially important for these images that have box shadow 26 00:01:44,730 --> 00:01:45,870 with them as well. 27 00:01:46,900 --> 00:01:51,820 So we're going to switch this to two times, you can see if you want to preview it, you can see that 28 00:01:51,820 --> 00:01:56,710 the checkered background is showing that the background is transparent, which is also going to be super 29 00:01:56,710 --> 00:02:00,910 important because we are going to be changing the background colour later on in the project. 30 00:02:01,630 --> 00:02:06,430 So we just click on this button export and you can see we have our PMG here. 31 00:02:06,980 --> 00:02:10,090 We're going to do the same thing for our main image. 32 00:02:10,090 --> 00:02:14,340 But once we click on this, we can see that there's actually a whole other image here. 33 00:02:14,860 --> 00:02:20,830 So we have the iPhone that's made up of the swipe indicator, the screen, the device and the frame. 34 00:02:21,490 --> 00:02:26,350 You can see that as I hover over it, the blue changes to show which one is selected. 35 00:02:26,770 --> 00:02:32,260 In this case, we're going to just take the iPhone itself, which has everything together, including 36 00:02:32,260 --> 00:02:33,250 the box shadow. 37 00:02:33,880 --> 00:02:36,220 So we'll now click and export that. 38 00:02:36,730 --> 00:02:38,230 You can see we have a preview here. 39 00:02:38,230 --> 00:02:42,060 We have the box shadow and the rest of it is transparent. 40 00:02:42,820 --> 00:02:45,460 And again, I'm going to export it at two times. 41 00:02:46,030 --> 00:02:46,960 Export that. 42 00:02:47,920 --> 00:02:54,280 And we can minimize that I'm going to do the same thing for the rest of these, so each of these images. 43 00:02:56,570 --> 00:03:00,210 So we have exported each of our image assets here. 44 00:03:00,860 --> 00:03:06,140 Now we're going to jump into where we've downloaded them, so we're going to show them in our folder 45 00:03:06,140 --> 00:03:13,370 here and we're going to copy all of these into our splash page project inside a folder we're going to 46 00:03:13,370 --> 00:03:15,920 create called IMG. 47 00:03:16,970 --> 00:03:22,850 And I'll put this here, open it up, and we're going to drag all of these inside, so there should 48 00:03:22,850 --> 00:03:31,220 be two, four, six, eight, nine imagist total going to drag them and we're going to clean these up, 49 00:03:31,790 --> 00:03:32,180 OK? 50 00:03:32,210 --> 00:03:34,430 Let's just view them like this and we'll switch that. 51 00:03:34,970 --> 00:03:43,010 OK, so I am going to change all the file names to be more simplified in order to remove the spaces 52 00:03:43,010 --> 00:03:45,440 and just be easier within our project. 53 00:03:46,070 --> 00:03:48,680 So again, I will kind of fast forward through this. 54 00:03:49,920 --> 00:03:57,210 OK, so for all the one word filenames, I just made them lowercase just to match everything, the iPhone 55 00:03:57,210 --> 00:04:04,020 15 image I renamed to be Main Dasch image, I added the dashes to habitual branning, made it lowercase, 56 00:04:04,290 --> 00:04:09,930 and then I simplified these two to be app dash store dash button and Google Dash played button. 57 00:04:10,140 --> 00:04:10,640 All right. 58 00:04:10,680 --> 00:04:15,300 So we have all of our images sorted out there now in our project. 59 00:04:15,450 --> 00:04:20,730 It's time to actually add them to our code into our index HTML. 60 00:04:21,180 --> 00:04:27,120 And we're going to start with the branding, which is actually going to go above our title and text 61 00:04:27,120 --> 00:04:28,530 as it is on the page. 62 00:04:29,310 --> 00:04:36,870 So first we're going to comment a title for our brand logo, and I'm just going to add this as a straight 63 00:04:36,870 --> 00:04:44,790 up image so you just can type IMG and press enter and the source I'm going to do dot slash and then 64 00:04:44,790 --> 00:04:46,760 it'll automatically come up with image. 65 00:04:46,780 --> 00:04:52,950 I'm going to enter and now you can see that it automatically shows all the possible options here. 66 00:04:53,310 --> 00:04:55,680 And I actually want habitual branding. 67 00:04:55,680 --> 00:05:01,350 So I'm going to highlight that and press enter and I'm going to give it an alt description as well, 68 00:05:01,840 --> 00:05:02,970 habitual logo. 69 00:05:03,390 --> 00:05:06,780 And I'm also going to give it a class of brand IMG. 70 00:05:07,530 --> 00:05:08,010 All right. 71 00:05:08,070 --> 00:05:13,770 Next, within our text container, we want to add our app icons below this. 72 00:05:14,580 --> 00:05:24,660 OK, I'm going to create a parent div just with period app dash store, dash BTN and press enter and 73 00:05:24,660 --> 00:05:30,270 you see it creates the div for me inside of this I'm going to have an anchor element so I'll just type 74 00:05:30,270 --> 00:05:31,560 A and enter. 75 00:05:32,220 --> 00:05:35,820 This would link to the App Store for the splash page that we have. 76 00:05:35,820 --> 00:05:40,140 But because we don't really have an app to link to, I'm just going to put in A. 77 00:05:40,740 --> 00:05:46,890 S colon slash slash and then apple dot com. 78 00:05:47,580 --> 00:05:55,800 And we're also going to give this a target attribute of underscore blank so that it opens in a new page. 79 00:05:56,340 --> 00:05:59,430 And then we're going to press enter here again. 80 00:05:59,670 --> 00:06:03,450 And then inside of this anchor is going to be our image. 81 00:06:04,080 --> 00:06:05,730 So you can have my image here. 82 00:06:06,360 --> 00:06:13,980 And the source I'm going to do dot slash again into our image folder and then I want the App Store button. 83 00:06:15,130 --> 00:06:22,560 PMG and then the AWALT, I'm just going to have Appstore and I can actually copy this now. 84 00:06:24,260 --> 00:06:25,730 And we'll piece it again. 85 00:06:27,210 --> 00:06:37,410 And this time I'm going to change this class of the parent here to be Google Dash Play Dash BTN and 86 00:06:37,410 --> 00:06:42,660 the link is going to go to play Dot, Google Dotcom instead. 87 00:06:43,380 --> 00:06:45,700 And we still on our target blank. 88 00:06:46,020 --> 00:06:47,730 We need to change the source. 89 00:06:48,870 --> 00:06:55,830 So this time it's going to be our Google Play button that PMG and I'm to change the alt attribute as 90 00:06:55,830 --> 00:06:58,180 well to be Google Play. 91 00:06:58,620 --> 00:07:02,200 OK, so we can save that and check that out so far. 92 00:07:02,970 --> 00:07:09,270 OK, so we have our branding here and we have our App Store icon and if we click on it can see that 93 00:07:09,270 --> 00:07:10,950 we go to the Apple website. 94 00:07:11,310 --> 00:07:14,020 And if we click on this, we see that we go to Google Play. 95 00:07:14,550 --> 00:07:15,020 All right. 96 00:07:15,030 --> 00:07:17,070 So that's working how we want it to work. 97 00:07:17,070 --> 00:07:21,870 So far, you can see that they're also way too big, especially compared to the text. 98 00:07:22,140 --> 00:07:26,630 But we will get to that in the next video when we focus on our styling. 99 00:07:26,880 --> 00:07:29,670 Let's keep adding our assets, though, for now. 100 00:07:30,480 --> 00:07:32,820 So next, we have our main image. 101 00:07:32,820 --> 00:07:35,520 So we want this to be below our text container. 102 00:07:36,240 --> 00:07:40,950 So we'll go below that and we're going to comment on a title for Main Image. 103 00:07:41,820 --> 00:07:45,020 And we're going to use a parent div for this as well. 104 00:07:45,960 --> 00:07:53,300 So we'll just do dot main dash image, dash container and then press enter to create our div. 105 00:07:53,700 --> 00:08:01,980 And then inside of this we're going to have our image and then IMG press enter to create our image and 106 00:08:01,980 --> 00:08:06,330 our source dot slash and then enter for our image. 107 00:08:06,330 --> 00:08:08,040 And we want our main image. 108 00:08:08,430 --> 00:08:15,150 PMG and the ALZ will be our landing page mockup. 109 00:08:16,570 --> 00:08:17,210 OK. 110 00:08:17,260 --> 00:08:22,900 And then below that will comment on another title, and this is just going to be four images and then 111 00:08:22,900 --> 00:08:25,440 we're going to just add in the rest of the images. 112 00:08:25,450 --> 00:08:27,340 I'm going to fast forward through this part. 113 00:08:27,970 --> 00:08:31,240 You can see that each of these will also have their own unique class. 114 00:08:31,250 --> 00:08:33,460 So this first one is profile dash image. 115 00:08:33,640 --> 00:08:36,280 It'll follow that same format for the rest of them. 116 00:08:36,430 --> 00:08:37,960 I can actually copy these. 117 00:08:39,630 --> 00:08:44,100 So five in total and now fast forward through renaming them. 118 00:08:45,240 --> 00:08:52,920 OK, so we're done here, we have a class corresponding to each we have the correct images in here and 119 00:08:52,920 --> 00:08:55,850 we have an all description for all of our images. 120 00:08:56,250 --> 00:08:58,620 Let's save that now and check it out. 121 00:09:00,320 --> 00:09:07,490 OK, so we have our main image here, it's definitely too big and we have all of our other images here, 122 00:09:07,800 --> 00:09:11,030 they are also definitely bigger than they need to be. 123 00:09:11,510 --> 00:09:19,040 OK, so in the next video, we will get to actually styling everything to make everything fit and positioned 124 00:09:19,310 --> 00:09:20,940 the way that it should be. 125 00:09:21,470 --> 00:09:23,750 I'll see in that one by four now.