1 00:00:01,290 --> 00:00:04,890 Now what we need to do is that we need to work on the rest of the images. 2 00:00:05,310 --> 00:00:08,670 So we need first to work on the logo and also we need to work on the banner. 3 00:00:08,970 --> 00:00:10,350 So we need to add another image. 4 00:00:10,860 --> 00:00:12,330 So let me add this. 5 00:00:12,330 --> 00:00:16,170 And also in the footer, we need to add the logo and a few images here. 6 00:00:16,740 --> 00:00:20,100 So I have I have here a folder for these images. 7 00:00:20,100 --> 00:00:22,860 I have these images first I have this banner. 8 00:00:22,860 --> 00:00:25,080 I'm going to drag this banner and drop it here. 9 00:00:26,510 --> 00:00:27,410 Onto the images. 10 00:00:27,830 --> 00:00:29,230 And I also have the logo. 11 00:00:29,240 --> 00:00:30,260 I have this logo. 12 00:00:31,790 --> 00:00:38,750 Let me try this logo and drop it onto the images and let's add this. 13 00:00:39,470 --> 00:00:41,240 So this is the way that I'm going to be using. 14 00:00:41,690 --> 00:00:46,520 So now what I'm going to do is that here in the style, let's see this first of all, for the banner, 15 00:00:47,060 --> 00:00:50,300 I'm going to change the banner from back to banner. 16 00:00:50,330 --> 00:00:51,650 I'm going to be displaying this image. 17 00:00:52,280 --> 00:00:55,480 I'm going to be displaying this image instead of the back image. 18 00:00:55,490 --> 00:00:58,970 I'm going to say here, banner that jpeg. 19 00:00:59,630 --> 00:01:01,010 Now, let me refresh. 20 00:01:02,050 --> 00:01:03,610 And show you how it's going to look like. 21 00:01:05,190 --> 00:01:10,220 So first of all, because they have added to the logo, the logo has been displayed. 22 00:01:10,230 --> 00:01:14,240 But I'm going to work on on the logo shortly for the banner. 23 00:01:14,250 --> 00:01:16,440 As you can see, this is the banner will be displayed here. 24 00:01:16,860 --> 00:01:22,770 But we need to change the the color here because it's not I don't think the color looks good with this 25 00:01:22,770 --> 00:01:23,130 banner. 26 00:01:23,460 --> 00:01:27,180 So I'm going to change the banner here, the banner text to White. 27 00:01:28,020 --> 00:01:34,040 So instead of saying color, remember we have this banner color coral. 28 00:01:34,050 --> 00:01:36,030 I'm going to change it to white. 29 00:01:38,450 --> 00:01:40,460 So I think White would look much better. 30 00:01:41,480 --> 00:01:43,340 So if I say white, it's going to look better. 31 00:01:43,850 --> 00:01:44,870 Also, the. 32 00:01:46,570 --> 00:01:47,110 Above. 33 00:01:47,530 --> 00:01:48,400 Above the. 34 00:01:50,550 --> 00:01:53,130 This actually exists. 35 00:01:54,360 --> 00:01:55,580 We need to change this text. 36 00:01:55,830 --> 00:02:00,340 If I go back to the index, we have the banner. 37 00:02:00,360 --> 00:02:01,530 Let me show you this. 38 00:02:02,560 --> 00:02:04,340 We have this banner. 39 00:02:06,060 --> 00:02:06,660 This power. 40 00:02:06,900 --> 00:02:11,930 So we have this mid-season mid-season sale, so we need to change the H4. 41 00:02:12,360 --> 00:02:21,720 Therefore, I'm going to say here banner and then H4 and then I'm going to say colour and the colour 42 00:02:21,720 --> 00:02:23,640 is going to be white. 43 00:02:26,040 --> 00:02:27,330 Let me now show you this. 44 00:02:28,320 --> 00:02:30,930 So the color is going to be white and now it looks better. 45 00:02:31,530 --> 00:02:32,970 Now let's work on logo. 46 00:02:33,300 --> 00:02:37,470 The logo now is being displayed here and also in the future we need to display it here. 47 00:02:37,800 --> 00:02:38,850 But it's too big. 48 00:02:39,000 --> 00:02:45,450 Therefore, we need to add a class to resize this this logo. 49 00:02:45,840 --> 00:02:49,500 So I'm going to hand it over to see this and then see this. 50 00:02:50,250 --> 00:02:52,800 I'm going to create a class here. 51 00:02:54,370 --> 00:02:55,330 I'm going to give you the glass. 52 00:02:55,330 --> 00:03:01,600 But before I create the glass, let's add that glass to the index in the index here in the navigation 53 00:03:01,600 --> 00:03:01,990 bar. 54 00:03:02,860 --> 00:03:04,760 I'm going to say image. 55 00:03:04,780 --> 00:03:05,550 I'm going to say. 56 00:03:07,300 --> 00:03:07,960 Glass. 57 00:03:08,530 --> 00:03:10,960 And I'm going to give this image a glass called Logo. 58 00:03:12,800 --> 00:03:14,420 And also in the future. 59 00:03:15,230 --> 00:03:20,030 In the future, if you scroll through the footer, you will find that we have this image. 60 00:03:23,540 --> 00:03:27,320 We have the image right here. 61 00:03:28,620 --> 00:03:31,680 This image so far, actually, not this image. 62 00:03:31,690 --> 00:03:32,880 This is for the payment. 63 00:03:33,420 --> 00:03:35,430 So it must be this one. 64 00:03:36,600 --> 00:03:37,470 It must be this one. 65 00:03:37,470 --> 00:03:38,520 So this one longer. 66 00:03:38,910 --> 00:03:42,480 We need also to give this image to the same class, which is the logo. 67 00:03:43,140 --> 00:03:44,130 I'm going to see a logo. 68 00:03:45,690 --> 00:03:48,450 So let's work on this logo class here in the style. 69 00:03:49,080 --> 00:03:51,660 I'm going to create a I'm going to say a logo. 70 00:03:53,100 --> 00:03:58,020 Can I say here that logo and for the logo. 71 00:03:59,460 --> 00:04:01,200 We need to resize the image. 72 00:04:01,200 --> 00:04:05,940 So I'm going to give it a width of 40 x. 73 00:04:07,520 --> 00:04:08,390 And I. 74 00:04:10,170 --> 00:04:10,890 Also 40. 75 00:04:14,450 --> 00:04:17,600 Let me save a lady heading over to the browser and refresh. 76 00:04:18,290 --> 00:04:24,920 And now, as you can see, the, the, the logo is going to be much smaller. 77 00:04:25,550 --> 00:04:27,260 Also the foot in the future. 78 00:04:27,800 --> 00:04:34,730 We have a problem in the photo we have here to say assets, images, images not just image images, 79 00:04:35,420 --> 00:04:37,400 assets, images, logo that jpg. 80 00:04:37,460 --> 00:04:41,300 Now if I refresh, the logo will be displayed here as well. 81 00:04:42,500 --> 00:04:43,190 Now. 82 00:04:44,800 --> 00:04:47,590 Here, here, this navigation bar. 83 00:04:48,250 --> 00:04:54,940 If you find that this nav bar is is shifted to the do there it is to do much shift to the right, you 84 00:04:54,940 --> 00:04:58,870 can decrease the margin. 85 00:04:58,870 --> 00:05:02,490 So at the top remember I have you said margin left 60. 86 00:05:02,800 --> 00:05:08,760 You can decrease this if you want to shift this navigation buttons to the middle. 87 00:05:08,770 --> 00:05:12,460 So if you say here, for example, if you say 40%. 88 00:05:13,240 --> 00:05:17,110 The navigation buttons, these buttons will be shifted to the middle. 89 00:05:17,590 --> 00:05:21,730 So you can control this for some reason if you want the your design to be like this. 90 00:05:22,210 --> 00:05:25,540 But I like I like the buttons to be displayed on the right side. 91 00:05:27,520 --> 00:05:30,670 Another thing that I'm going to do is that I'm going to display the brand name here. 92 00:05:31,150 --> 00:05:37,870 So if you want to display a brand name, you can have your say below the image, below the image, and 93 00:05:37,870 --> 00:05:45,640 then in the navigation bar, below the image, you can here say etch two, for example, and then you 94 00:05:45,640 --> 00:05:48,820 can say you can give it to first class. 95 00:05:50,750 --> 00:05:51,320 Brand. 96 00:05:54,490 --> 00:05:57,670 And then here, let's type the branding. 97 00:05:57,670 --> 00:06:01,070 So for example, I'm going to see here Orange. 98 00:06:03,300 --> 00:06:06,210 And then let's work on the glass. 99 00:06:06,210 --> 00:06:07,700 On the glass, I'm going to say. 100 00:06:09,780 --> 00:06:15,170 Hear that now bar and then that brand. 101 00:06:16,350 --> 00:06:18,660 And then I'm going to change the color first. 102 00:06:19,320 --> 00:06:21,810 I'm going to say color coral. 103 00:06:22,740 --> 00:06:24,510 And next, I'm going to name margin. 104 00:06:24,540 --> 00:06:25,500 I'm going to give it to a margin. 105 00:06:26,100 --> 00:06:32,850 So the margin is going to be three X top and bottom and five X right and left. 106 00:06:33,490 --> 00:06:34,050 Finally. 107 00:06:35,580 --> 00:06:36,870 I'm going to change the font size. 108 00:06:37,650 --> 00:06:41,940 So the font size would be 1.5 REM. 109 00:06:44,500 --> 00:06:48,370 Lamy safe and Lamy have been able to deposit and show you the difference now. 110 00:06:48,760 --> 00:06:50,670 So this is the brand name, as you can see here. 111 00:06:50,680 --> 00:06:51,940 It says Orange, of course. 112 00:06:52,510 --> 00:06:56,740 This is just a a brand name that they came up with right now. 113 00:06:57,070 --> 00:07:01,440 But you need to type a brand name your brand name, as I told you here. 114 00:07:01,450 --> 00:07:08,620 The problem is that the navigation bar now, because we have here the brand name and the logo, the 115 00:07:08,620 --> 00:07:14,140 navigation buttons has been shifted to the right and we don't want that. 116 00:07:14,710 --> 00:07:16,340 Therefore, I'm going to decrease here. 117 00:07:16,360 --> 00:07:20,230 I'm going to decrease the margin left to, say, 50%. 118 00:07:21,160 --> 00:07:26,560 So if I decrease this now, it will be shifted slightly to the right. 119 00:07:26,560 --> 00:07:31,370 So I want it to be like this, or at least or I can increase it a little. 120 00:07:31,390 --> 00:07:35,350 So for example, 55, 55 I think would be perfect. 121 00:07:36,130 --> 00:07:37,690 So 55 is perfect now. 122 00:07:37,690 --> 00:07:38,530 It's perfect. 123 00:07:39,670 --> 00:07:44,750 Finally, we need to work on the images at the bottom here we have five images. 124 00:07:45,430 --> 00:07:51,220 So for these images, you can add the new images or you can use one. 125 00:07:51,580 --> 00:07:53,320 Some of the images that we already have. 126 00:07:53,320 --> 00:07:56,080 So I'm going to be using some of the images that we already have. 127 00:07:56,710 --> 00:08:05,380 For example, I'm going to see here featured one, featured two and featured three. 128 00:08:06,480 --> 00:08:09,330 And featured for. 129 00:08:10,500 --> 00:08:12,520 And finally here, let's say. 130 00:08:15,040 --> 00:08:21,510 Uh, we we have I think was one lady save and Laney. 131 00:08:21,970 --> 00:08:27,580 Refreshments for you now that the images these images will be displayed here as you can see these are 132 00:08:27,580 --> 00:08:29,350 the images that will be displayed here. 133 00:08:30,160 --> 00:08:37,220 So now our website, our main page is complete in terms of the images and also in terms of the design.