1 00:00:01,420 --> 00:00:06,700 So now what I'm going to do is that I'm going to show you that you can add these these two buttons, 2 00:00:07,150 --> 00:00:10,590 these two icons in the same in the same ally. 3 00:00:10,810 --> 00:00:16,720 So instead of adding each one in a separate now item, you can add both together. 4 00:00:17,080 --> 00:00:22,420 So let me show you what I'm going to do so you can copy this and replace it in the same in the same 5 00:00:22,420 --> 00:00:26,410 nav bar icon in the same number item, and then remove this. 6 00:00:27,100 --> 00:00:29,350 And now it's going to be displayed like this. 7 00:00:30,070 --> 00:00:36,570 So I think this is better because now we have here a much bigger space, but we still need to work on 8 00:00:36,580 --> 00:00:36,970 a design. 9 00:00:36,970 --> 00:00:38,530 But you can also do this. 10 00:00:38,770 --> 00:00:41,380 So you can use the first method or this method. 11 00:00:41,890 --> 00:00:43,540 Also the shopping cart. 12 00:00:43,550 --> 00:00:47,170 You can use the shopping cart or you can use the shopping bag. 13 00:00:47,710 --> 00:00:50,410 The shopping bag is going to display your shopping bag. 14 00:00:51,010 --> 00:00:55,690 So as you can see back about like this, another thing I'm going to do is that. 15 00:00:57,070 --> 00:01:05,650 I am going to make this navigation bar fixed, meaning that if you scroll, I want this navigation bar 16 00:01:05,650 --> 00:01:12,850 to remain at the top of the screen always so that the user will always be able to check this navigation 17 00:01:12,850 --> 00:01:18,370 bar and click on any button if they want, even if they scroll. 18 00:01:18,940 --> 00:01:24,100 To do this, you can use a class plus called Fixed Top. 19 00:01:24,640 --> 00:01:27,670 So here if you say fixed top. 20 00:01:29,400 --> 00:01:35,160 This is going to make this navigation bar stick to the top of the screen. 21 00:01:36,980 --> 00:01:43,910 Another thing that I'm going to do is that I'm going to increase the height of this navigation bar, 22 00:01:44,390 --> 00:01:46,520 and there are so many options to do this. 23 00:01:46,520 --> 00:01:56,990 The easiest option is to use the py3 that the Y is the margin is the padding is the padding y which 24 00:01:56,990 --> 00:02:00,680 is height and the padding top and bottom. 25 00:02:01,100 --> 00:02:07,910 You can increase this all the way to you can increase this all the way to five. 26 00:02:07,910 --> 00:02:09,100 So you can say you slice. 27 00:02:10,830 --> 00:02:12,510 Five is going to increase it further. 28 00:02:12,900 --> 00:02:14,610 But of course, five is too large. 29 00:02:14,620 --> 00:02:15,450 I'm going to say three. 30 00:02:16,510 --> 00:02:17,350 Three is enough. 31 00:02:18,130 --> 00:02:19,150 I think three is enough. 32 00:02:20,350 --> 00:02:21,970 So this is for the navigation bar. 33 00:02:23,410 --> 00:02:27,610 And another thing the thing that I'm going to do is that instead of displaying playing off bar, I'm 34 00:02:27,610 --> 00:02:29,260 going to remove this navigation bar. 35 00:02:29,860 --> 00:02:31,210 I'm going to remove this nav bar. 36 00:02:31,690 --> 00:02:33,400 And instead I'm going to use an image. 37 00:02:33,410 --> 00:02:37,030 I'm going to display the icon, the logo of the website. 38 00:02:37,450 --> 00:02:39,550 So I'm going to say image and then sauce. 39 00:02:40,330 --> 00:02:48,790 And then the sauce is going to be equal to double courts and then assets for slash images for slash 40 00:02:49,480 --> 00:02:52,720 and then logo that g big. 41 00:02:53,350 --> 00:03:03,010 However, I don't have I don't have a an image called logo that so we need to add a in the images is 42 00:03:03,010 --> 00:03:08,890 going to add a a a logo to this folder and I'm going to do that later. 43 00:03:08,950 --> 00:03:11,300 But for now, I'm just going to say assets. 44 00:03:12,310 --> 00:03:12,760 Image. 45 00:03:12,760 --> 00:03:13,390 Images. 46 00:03:13,390 --> 00:03:13,810 Logo. 47 00:03:14,000 --> 00:03:16,690 JP So the name of the image is going to be JP. 48 00:03:17,440 --> 00:03:17,950 Leave me now. 49 00:03:17,950 --> 00:03:19,720 Work on this style a little bit. 50 00:03:19,720 --> 00:03:22,090 So I'm going to open up the. 51 00:03:23,290 --> 00:03:24,610 Style here, the style. 52 00:03:24,610 --> 00:03:25,240 Let's use this. 53 00:03:25,900 --> 00:03:27,760 And then I'm going to add the following designs. 54 00:03:28,240 --> 00:03:29,860 I'm going to have the general designs. 55 00:03:30,070 --> 00:03:31,660 So what are the general designs? 56 00:03:32,170 --> 00:03:39,340 The general designs are the things that will be applied to the complete website, such as the designs 57 00:03:39,340 --> 00:03:46,360 for the headers and designs for titles and things like that. 58 00:03:47,440 --> 00:03:55,720 First I'm going to say here dot nav buttons, and then I'm going to add enough buttons class to the 59 00:03:56,320 --> 00:03:57,370 do this to this. 60 00:03:57,370 --> 00:04:01,180 Therefore, I'm going to say here now buttons. 61 00:04:01,900 --> 00:04:06,040 And then what I'm going to do is that I'm going to increase the margin left. 62 00:04:06,790 --> 00:04:10,240 I'm going to say margin margin left. 63 00:04:10,660 --> 00:04:14,380 So the margin left is going to be 160%. 64 00:04:15,190 --> 00:04:20,620 And the reason why I'm doing this is because I want to push this nav bar refresh and show you what's 65 00:04:20,620 --> 00:04:21,160 going to happen. 66 00:04:22,270 --> 00:04:24,280 I want to push this now back to the right side. 67 00:04:24,760 --> 00:04:26,170 So this is how it's going to look like. 68 00:04:26,170 --> 00:04:28,480 I'm going to be displaying this balance on the right side. 69 00:04:29,050 --> 00:04:30,460 Let me decrease this a little. 70 00:04:30,460 --> 00:04:34,620 So instead of instead of 60, I'm going to say 5050 is enough. 71 00:04:34,630 --> 00:04:36,000 I think so. 72 00:04:36,010 --> 00:04:40,750 50 will display like this and you can. 73 00:04:41,840 --> 00:04:42,350 Here. 74 00:04:43,370 --> 00:04:49,070 Let's let's say 60 because I think 60 is great. 75 00:04:49,280 --> 00:04:50,630 So 60 will be great. 76 00:04:51,320 --> 00:04:52,400 Now what I'm going to do. 77 00:04:53,480 --> 00:04:54,230 Is that? 78 00:04:54,710 --> 00:04:58,520 I'm going to add some designs to the complete beach. 79 00:04:58,520 --> 00:05:00,800 So for the complete site, I'm going to add the following. 80 00:05:01,250 --> 00:05:03,950 First, the margin is going to be zero. 81 00:05:04,610 --> 00:05:12,050 If adding is going to be zero and the box sizing is going to be border box. 82 00:05:13,190 --> 00:05:14,000 Border box. 83 00:05:14,390 --> 00:05:21,290 Next, I'm going to change the buy of the website so the body will have a font. 84 00:05:22,480 --> 00:05:23,200 Family. 85 00:05:24,500 --> 00:05:28,130 And then I'm going to for that phone trauma right now from Google. 86 00:05:29,540 --> 00:05:34,820 So you can head on over to Google, click on first. 87 00:05:34,820 --> 00:05:37,320 You need to go to fonts that Google Google.com. 88 00:05:37,670 --> 00:05:43,490 And then you can select your the the fonts that you want, the font that I'm going to be using here. 89 00:05:44,090 --> 00:05:44,670 It's called. 90 00:05:45,110 --> 00:05:45,650 It's called. 91 00:05:47,230 --> 00:05:47,710 Open. 92 00:05:49,190 --> 00:05:49,970 Poppins. 93 00:05:49,970 --> 00:05:50,870 It's called Poppins. 94 00:05:50,870 --> 00:05:53,750 So I'm going to click on it and then I'm going to select it. 95 00:05:53,750 --> 00:06:01,640 And then in order to import that font, what you need to do is that you need to click on select this 96 00:06:01,820 --> 00:06:05,480 style, and then here you will find link and import. 97 00:06:05,480 --> 00:06:11,810 I'm going to click on import and then you need to copy this part, this part, and then you need to 98 00:06:11,810 --> 00:06:18,020 put it back in your project at the top, in the style you need to visit here and then here, the font 99 00:06:18,020 --> 00:06:20,630 family is going to be equal to the Poppins. 100 00:06:21,110 --> 00:06:22,400 So I'm going to say here, Poppins. 101 00:06:23,970 --> 00:06:34,370 But make sure that this spelling is correct Poppins and then comma and then there. 102 00:06:35,610 --> 00:06:38,340 So this is for the family of the complete --. 103 00:06:38,820 --> 00:06:40,590 Next, I'm going to work on the one. 104 00:06:40,590 --> 00:06:41,520 I'm going to change this one. 105 00:06:41,970 --> 00:06:47,400 So I'm going to change the font size and the font weight for each one, two and three and four and five 106 00:06:47,400 --> 00:06:48,240 and even six. 107 00:06:48,720 --> 00:06:51,810 So I'm going to see font size for each one. 108 00:06:51,810 --> 00:07:01,290 The font size is going to be 2.5 RTM, whereas the font from 4 to 8 different ways weight is going to 109 00:07:01,290 --> 00:07:02,520 be seven hundreds. 110 00:07:04,740 --> 00:07:06,750 I'm going to also change the use of all two. 111 00:07:06,780 --> 00:07:17,130 I'm going to say font size 1.9 rtm whereas the font weight. 112 00:07:18,290 --> 00:07:19,970 Is going to be six hundreds. 113 00:07:21,120 --> 00:07:28,260 And then I'm going to copy this and I'm going to sit here and here and here. 114 00:07:29,250 --> 00:07:32,520 So for each three, I'm going to say here it's three. 115 00:07:33,750 --> 00:07:45,420 For the three, the font, the font size is going to be 1.5 and the font weight is going to be a time 116 00:07:45,420 --> 00:07:59,160 great for age, for the font size is going to be 1.2 and the font weight is 600 and then for each five. 117 00:08:01,140 --> 00:08:01,560 The. 118 00:08:01,740 --> 00:08:05,160 I'm going to change the font size to be one. 119 00:08:07,130 --> 00:08:08,240 And we want to wait. 120 00:08:09,430 --> 00:08:10,810 Is going to be 400. 121 00:08:14,110 --> 00:08:16,030 And four inch six. 122 00:08:17,360 --> 00:08:19,220 I'm just going to change the color. 123 00:08:19,250 --> 00:08:20,290 I'm going to say color. 124 00:08:22,880 --> 00:08:25,930 Then I'm going to change the color to this color. 125 00:08:25,940 --> 00:08:31,690 I'm going to be using a color that's close to the white color. 126 00:08:31,690 --> 00:08:32,740 I'm going to say the eight. 127 00:08:33,250 --> 00:08:36,010 The eight, the eight. 128 00:08:39,470 --> 00:08:41,330 So this is for for this part. 129 00:08:42,290 --> 00:08:48,310 Next, what I'm going to do is that I'm going to work on the this part. 130 00:08:48,320 --> 00:08:53,360 I'm going to work on it because this we no longer need this. 131 00:08:53,840 --> 00:08:57,050 I'm going to work on the body of our website.