1 00:00:01,120 --> 00:00:07,540 So here I'm going to remove the I'm going to add the into the margin instead of banning bottom, I'm 2 00:00:07,540 --> 00:00:08,680 going to say batting y. 3 00:00:09,250 --> 00:00:12,910 If I say you're batting y, this is going to fix this problem. 4 00:00:13,600 --> 00:00:14,350 Let me here. 5 00:00:16,020 --> 00:00:21,330 As you can see, if you scroll, you'll find that the navigation of the text will be displayed below 6 00:00:21,330 --> 00:00:22,080 the navigation bar. 7 00:00:22,740 --> 00:00:26,870 Another thing that they want to do is that they want to display this text on the left side instead of 8 00:00:26,890 --> 00:00:27,360 the middle. 9 00:00:27,900 --> 00:00:33,080 And to do this, we can here remove this mix auto. 10 00:00:33,120 --> 00:00:38,160 I'm going to remove this auto and I'm going to remove also the. 11 00:00:39,870 --> 00:00:41,150 Here we are. 12 00:00:41,160 --> 00:00:42,570 I think we are good here. 13 00:00:42,850 --> 00:00:43,650 There's no problem. 14 00:00:43,650 --> 00:00:44,520 Limit refresh. 15 00:00:45,940 --> 00:00:47,200 And this will be displayed on the left. 16 00:00:47,230 --> 00:00:53,230 But we need to add glasses to display these on the left side so we can. 17 00:00:55,110 --> 00:00:57,900 So here we can move this text center. 18 00:00:57,900 --> 00:01:01,980 If you remove this tax center, the text is going to be displayed on the left side. 19 00:01:02,700 --> 00:01:05,460 So the text is going to be displayed, as you can see, on the left side. 20 00:01:06,450 --> 00:01:12,330 Another thing that they want to do is that here what I'm going to do is that I'm going to change the 21 00:01:12,330 --> 00:01:12,660 images. 22 00:01:12,660 --> 00:01:17,840 So we have a feature one, feature two, feature three, and then picture four. 23 00:01:17,850 --> 00:01:19,440 Let's use other images. 24 00:01:19,440 --> 00:01:32,550 So we have so many images leaving here, say cloths one and then lots two, then cloths three and then 25 00:01:32,940 --> 00:01:33,630 last four. 26 00:01:34,680 --> 00:01:36,330 And they have other images as well. 27 00:01:36,330 --> 00:01:42,180 I'm going to add more images because I want our website to have so many different variety. 28 00:01:42,200 --> 00:01:50,310 So I'm going to here up in the assets and the images and then I'm going to drag and drop these images. 29 00:01:50,310 --> 00:01:55,200 So I have this image and I have this. 30 00:01:56,650 --> 00:02:00,570 And I have this and finally I have this. 31 00:02:00,580 --> 00:02:03,110 So we have four more images we have featured. 32 00:02:03,490 --> 00:02:04,570 Five, six, seven, eight. 33 00:02:05,290 --> 00:02:09,670 So I'm going to add these to I'm going to play these in the shop. 34 00:02:10,240 --> 00:02:10,930 So in the shop. 35 00:02:12,170 --> 00:02:13,970 What I'm going to do is that I'm going to say here. 36 00:02:16,000 --> 00:02:17,230 I'm going to say. 37 00:02:18,160 --> 00:02:19,270 Remember we have year. 38 00:02:20,360 --> 00:02:22,340 And is it a feature and one I'm going to say here. 39 00:02:22,910 --> 00:02:27,980 Featured five and featured six. 40 00:02:29,020 --> 00:02:33,910 And featured seven and then featured eight. 41 00:02:35,110 --> 00:02:39,550 And if you save and you don't know where, back to the browser and refresh you, you'll find that we 42 00:02:39,550 --> 00:02:40,690 will have different images. 43 00:02:40,690 --> 00:02:46,750 Now, as you can see, we have here four more images and we have a variety of images which now is better. 44 00:02:47,290 --> 00:02:49,630 We can also change the images in the third draw. 45 00:02:50,050 --> 00:02:50,920 Save the third draw. 46 00:02:50,920 --> 00:02:52,000 You can you see. 47 00:02:53,470 --> 00:02:53,920 Here. 48 00:02:53,920 --> 00:03:02,950 You can see watch four and then watch three and then watch. 49 00:03:05,410 --> 00:03:07,840 To finally watch one. 50 00:03:10,320 --> 00:03:12,240 Now you will find that. 51 00:03:13,750 --> 00:03:16,150 We will have unique images. 52 00:03:16,160 --> 00:03:20,200 So all images are all different except for this image. 53 00:03:20,200 --> 00:03:21,850 I think a game is too big. 54 00:03:22,570 --> 00:03:28,060 Therefore, I'm going to teach you a way to make sure that all images have the same exact size. 55 00:03:28,810 --> 00:03:31,300 So to do this, I'm going to here in the. 56 00:03:32,450 --> 00:03:33,530 In the shop here. 57 00:03:34,070 --> 00:03:39,470 I'm going to create I'm going to create a style tank because I don't want to. 58 00:03:40,220 --> 00:03:42,110 I don't want to change the main design. 59 00:03:42,440 --> 00:03:45,840 So only in the shop, I'm going to add a few different things. 60 00:03:45,900 --> 00:03:49,910 Therefore, we don't need to create another stylesheet file. 61 00:03:49,910 --> 00:03:54,700 We just can add the the few changes here in a local style. 62 00:03:55,280 --> 00:03:58,340 So here in this style, remember the products? 63 00:03:58,610 --> 00:03:59,510 These products. 64 00:04:01,210 --> 00:04:02,110 Let me close this. 65 00:04:02,800 --> 00:04:09,040 These products are inside the product class so we can access them using the product. 66 00:04:09,550 --> 00:04:13,390 And we need to edit the image size so we can say product image. 67 00:04:14,050 --> 00:04:22,630 So I'm going to say here in this style, I'm going to say dot product and then image, and then I'm 68 00:04:22,630 --> 00:04:25,150 going to change the width and height and width. 69 00:04:25,840 --> 00:04:28,690 Width is going to oh is always going to be 100%. 70 00:04:29,290 --> 00:04:41,290 However, the height the height is going to be order and the box sizing is going to be border box. 71 00:04:42,130 --> 00:04:46,830 And finally, the object fit is going to be cover cover. 72 00:04:47,140 --> 00:04:50,410 That way, all images will have the same exact size. 73 00:04:50,440 --> 00:04:54,430 Let me show you now that all of these images will have the same exact size. 74 00:04:55,150 --> 00:04:57,910 So as you can see now, all images have the same exact size. 75 00:04:58,480 --> 00:05:05,230 But again, the problem is that some images might have, might or might originally be small, such as 76 00:05:05,230 --> 00:05:08,140 this one is originally originally small. 77 00:05:08,590 --> 00:05:10,660 So this is the only problem that we will have. 78 00:05:11,170 --> 00:05:16,630 So my recommendation is to use images that are already big in order to avoid this problem. 79 00:05:16,990 --> 00:05:24,970 Also, the resolution might be a little low for Sony for some images that have that are that are originally 80 00:05:24,970 --> 00:05:25,990 originally small. 81 00:05:26,560 --> 00:05:28,440 So you need to take these into account. 82 00:05:28,450 --> 00:05:30,490 But I think our website is perfect. 83 00:05:32,450 --> 00:05:38,360 Finally, I'm going to add links to the shop and to the homepage, because if I click on home, nothing 84 00:05:38,360 --> 00:05:38,940 is going to happen. 85 00:05:38,940 --> 00:05:40,970 And if you click on shop, nothing's going to happen. 86 00:05:41,450 --> 00:05:46,820 So in the navigation bar, in the shop that each email you're going to be getting on bar, I'm going 87 00:05:46,820 --> 00:05:55,310 to say here for the home, I'm going to say index that it's HTML and for the shop I'm going to say shop, 88 00:05:55,580 --> 00:05:56,450 that is T.M.. 89 00:05:56,990 --> 00:06:01,190 Similarly for the index here, I'm going to say in the navigation bar. 90 00:06:03,340 --> 00:06:04,290 I'm going to say. 91 00:06:06,010 --> 00:06:08,110 Com index that it's email. 92 00:06:08,570 --> 00:06:11,950 And for the shop I'm going to say shop that it should email. 93 00:06:12,730 --> 00:06:14,080 Now let me save everything. 94 00:06:14,080 --> 00:06:14,710 Save all. 95 00:06:17,750 --> 00:06:18,710 Alamy refresh. 96 00:06:20,990 --> 00:06:25,850 So now if they click on shop, it is just going to refresh the page. 97 00:06:26,330 --> 00:06:30,950 If you click on them, it's going to take you to the home page and from there, from the home page. 98 00:06:30,950 --> 00:06:34,460 If you click on home, it's just going to reload the page. 99 00:06:34,880 --> 00:06:38,270 And if you click on shop, it's going to take you to the shop page. 100 00:06:38,810 --> 00:06:41,780 So now we have the links also activated.