1 00:00:07,180 --> 00:00:08,440 Welcome back. 2 00:00:08,470 --> 00:00:16,590 In this video, let's put into practice what we learned and that is positioning to build this project. 3 00:00:16,600 --> 00:00:19,830 So let's move step by step. 4 00:00:19,840 --> 00:00:22,210 So back to visual seed code. 5 00:00:22,390 --> 00:00:30,250 I have fresh HTML with only one heading here and my CSS file which is empty. 6 00:00:30,250 --> 00:00:33,790 So let me link up my CSS here. 7 00:00:37,620 --> 00:00:38,830 And here we go. 8 00:00:38,850 --> 00:00:41,910 Let me change this one to project the title. 9 00:00:41,940 --> 00:00:45,500 It can be a text of your choice. 10 00:00:45,510 --> 00:00:47,710 So here we go. 11 00:00:47,730 --> 00:00:52,140 Now I have the project, so let's move step by step. 12 00:00:52,170 --> 00:00:55,230 We are going to use this one as a roadmap. 13 00:00:55,260 --> 00:00:59,010 The first step is let's create the header. 14 00:00:59,160 --> 00:01:01,440 So back to the HTML. 15 00:01:01,470 --> 00:01:04,920 Let's look at the structure for the header. 16 00:01:05,010 --> 00:01:10,230 Let me remove this one from here and let me have a comment. 17 00:01:10,230 --> 00:01:12,450 Says header. 18 00:01:13,170 --> 00:01:20,880 And down here I'll make use of end of header to know where my element starts and then end. 19 00:01:20,880 --> 00:01:29,610 So inside I'm going to use head tag or header tag and inside the header tag I'm going to have a Dave 20 00:01:29,640 --> 00:01:32,160 that's going to wrap the element. 21 00:01:32,160 --> 00:01:37,020 And for that Dave, let me give it a class core wrapper. 22 00:01:38,290 --> 00:01:44,830 And then I have each one which says CSIS lay out. 23 00:01:50,810 --> 00:01:53,810 Project as that. 24 00:01:53,810 --> 00:01:58,520 And then I also have P tag which says that using. 25 00:02:03,720 --> 00:02:05,940 Relative absolute. 26 00:02:09,130 --> 00:02:10,720 And fixed. 27 00:02:13,260 --> 00:02:15,180 Positioning as that. 28 00:02:15,180 --> 00:02:19,470 And I have a link tag called Take This Course. 29 00:02:19,950 --> 00:02:20,550 Good. 30 00:02:22,170 --> 00:02:23,940 So let's see what I've achieved. 31 00:02:23,970 --> 00:02:26,220 Now, this is what we have. 32 00:02:26,250 --> 00:02:28,950 There is no CSS, so don't worry about that. 33 00:02:29,100 --> 00:02:33,000 The next section is the actual body here. 34 00:02:33,000 --> 00:02:35,030 And let me show you here. 35 00:02:35,040 --> 00:02:40,410 So I have a parent container which looks like this. 36 00:02:40,500 --> 00:02:48,690 And then inside the parent container are divided into two sections, the first one here, and then the 37 00:02:48,690 --> 00:02:49,440 other one. 38 00:02:49,440 --> 00:02:56,550 And I call this one as the right sidebar and then the left sidebar. 39 00:02:56,550 --> 00:02:59,700 And within each sidebar I have content. 40 00:02:59,710 --> 00:03:04,270 So the first thing to do is we need to create the container. 41 00:03:04,290 --> 00:03:06,990 So let's get back to visual code. 42 00:03:07,020 --> 00:03:08,520 So here we go. 43 00:03:08,550 --> 00:03:17,790 After the end of the header, I'm going to have a comment here and call this one as the container. 44 00:03:21,420 --> 00:03:21,830 Good. 45 00:03:21,840 --> 00:03:24,480 So let's go ahead and create the container. 46 00:03:24,660 --> 00:03:29,340 I'm going to give this one a class called container. 47 00:03:31,150 --> 00:03:31,560 Good. 48 00:03:31,570 --> 00:03:36,250 And then inside the container, I'm going to have the two sidebars. 49 00:03:36,250 --> 00:03:45,760 So the first one is going to be a Dave and it's going to be as the right side bar. 50 00:03:45,760 --> 00:03:48,280 So I call this one, right? 51 00:03:48,460 --> 00:03:54,460 So the first one is the right side bar. 52 00:03:54,490 --> 00:03:58,150 So I'll copy this one and then paste it here. 53 00:03:58,660 --> 00:04:07,270 And this I'm going to be the left side bar and this one going to be as left side bar. 54 00:04:07,270 --> 00:04:15,700 But let's try to reset the browser default by using the asterisk going to be margin. 55 00:04:17,490 --> 00:04:31,590 Of zero and then padding zero and border box, box sizing, sorry, it going to be border box, so save 56 00:04:31,590 --> 00:04:31,710 it. 57 00:04:31,710 --> 00:04:36,180 And now there is no spacing or margin around the element. 58 00:04:36,300 --> 00:04:39,810 So let's continue to fill up the content in it. 59 00:04:40,050 --> 00:04:47,670 Inside the right side bar, I added a dev with a class called Content. 60 00:04:48,850 --> 00:04:54,920 Because I may need this one to create some shadow around the content. 61 00:04:54,980 --> 00:04:56,920 Going to be the content. 62 00:04:58,420 --> 00:04:58,810 Good. 63 00:04:58,810 --> 00:05:01,210 And inside I have. 64 00:05:02,160 --> 00:05:02,790 Inside. 65 00:05:02,790 --> 00:05:05,910 I added each one called Learn. 66 00:05:08,910 --> 00:05:10,050 Node.js. 67 00:05:12,750 --> 00:05:13,280 Okay. 68 00:05:13,290 --> 00:05:17,580 And then I add that image as that. 69 00:05:17,580 --> 00:05:24,000 And for image you can go to Pixabay.com and search for any image of your choice. 70 00:05:24,120 --> 00:05:29,430 If you go to Pixabay, you can use any free lenses image of your choice. 71 00:05:29,430 --> 00:05:32,280 So just copy the URL and you're good to go. 72 00:05:32,310 --> 00:05:35,490 Let's say that you want this one. 73 00:05:35,490 --> 00:05:40,800 Click on that and right click and copy image address or you can download it. 74 00:05:40,920 --> 00:05:44,190 So I'm going to use the image I use for this project. 75 00:05:44,190 --> 00:05:46,770 So I'm going to copy the link here. 76 00:05:46,830 --> 00:05:55,050 So now inside the image, this is the image I use from Pixabay when I save it, and that is it. 77 00:05:55,050 --> 00:06:02,910 And after that, after the image, I added some paragraph with the text we're going to be learning here, 78 00:06:02,940 --> 00:06:03,840 save it. 79 00:06:03,840 --> 00:06:06,780 And now we have it down here. 80 00:06:07,320 --> 00:06:11,790 The last one going to be the link says Read More. 81 00:06:12,510 --> 00:06:20,790 And this is the link which says Read more with home slash and that is it for the right side content 82 00:06:20,790 --> 00:06:21,330 one. 83 00:06:21,330 --> 00:06:25,560 But because of the image, it has taken my space. 84 00:06:25,560 --> 00:06:28,560 So let's comment this one and let's continue. 85 00:06:28,590 --> 00:06:29,580 We bring it back. 86 00:06:29,580 --> 00:06:32,820 I want to show you how I'm going to lay out those contents. 87 00:06:32,910 --> 00:06:36,480 That is the right side bar. 88 00:06:36,480 --> 00:06:42,240 What about the left sidebar is going to be the same content. 89 00:06:42,450 --> 00:06:46,470 So for left sidebar, the content is going to be the same. 90 00:06:46,470 --> 00:06:55,290 So I haven't copy the contents inside the this div so I can copy all of them here and now inside this 91 00:06:55,290 --> 00:06:56,070 one. 92 00:06:56,070 --> 00:07:05,550 I'm going to paste it inside and this one I can change this one to learn HTML because it follows the 93 00:07:05,550 --> 00:07:10,500 same format, the h one image and the paragraph and then link. 94 00:07:10,500 --> 00:07:16,770 But for this one we see that we have this particular button which is called new. 95 00:07:16,890 --> 00:07:19,390 So that's what I'm going to add it here. 96 00:07:19,680 --> 00:07:22,020 So I gave it a def. 97 00:07:23,910 --> 00:07:27,390 With a class called Elect. 98 00:07:29,070 --> 00:07:33,870 And then inside I added a button called New. 99 00:07:34,230 --> 00:07:35,760 Now this is it. 100 00:07:35,760 --> 00:07:37,120 So let's see what we have. 101 00:07:37,140 --> 00:07:40,710 Yes, we see that it is not well laid out. 102 00:07:40,710 --> 00:07:45,690 So let's go ahead and add the layout in concept. 103 00:07:45,810 --> 00:07:50,610 Remember, we are going to move the right side bar to this side. 104 00:07:50,610 --> 00:07:53,580 So which is this property are we going to use? 105 00:07:53,850 --> 00:08:00,340 We are going to use what is called absolute meaning that if I add absolute. 106 00:08:00,360 --> 00:08:10,020 Now I've taken this particular element from the document flow and in that I need to add a position relative 107 00:08:10,020 --> 00:08:11,080 to the parent. 108 00:08:11,100 --> 00:08:15,120 And lucky for us, this is a parent called container, this one. 109 00:08:15,390 --> 00:08:21,510 So now if I get to the CSS part of it, let's select the container. 110 00:08:24,080 --> 00:08:29,480 And let's select the other classes to the right. 111 00:08:31,130 --> 00:08:33,470 And then the left. 112 00:08:34,250 --> 00:08:37,340 So let's fill up the container. 113 00:08:37,490 --> 00:08:42,350 Let's give the container a width of 100 parsecs. 114 00:08:42,799 --> 00:08:43,940 Even though it is. 115 00:08:43,940 --> 00:08:48,080 But we need it to control other elements also. 116 00:08:48,440 --> 00:08:54,170 And let's give it a height of, say, 100 v h. 117 00:08:54,260 --> 00:08:58,250 We want to give it a full height, v port height. 118 00:08:58,250 --> 00:09:03,290 And if we add a background colour, say red. 119 00:09:03,320 --> 00:09:04,460 Now let's see. 120 00:09:04,460 --> 00:09:09,110 We have Henry V H of the V port, as you see. 121 00:09:09,470 --> 00:09:18,710 The next point is that let's add some background color to the left side bar and then the right side 122 00:09:18,710 --> 00:09:19,340 bar. 123 00:09:19,370 --> 00:09:24,830 Copy this one and picture and change this one to, let's say, yellow. 124 00:09:25,010 --> 00:09:27,260 And this is what we have. 125 00:09:27,290 --> 00:09:32,930 This is a parent and this is a children being laid out like that. 126 00:09:32,930 --> 00:09:35,990 So how can you move this one to the right? 127 00:09:35,990 --> 00:09:38,030 So let's get going. 128 00:09:38,390 --> 00:09:44,810 Let's give it a weight of the right of 36. 129 00:09:47,090 --> 00:09:49,780 Now let's see the effect in deed. 130 00:09:49,790 --> 00:09:52,760 So I want to move this one to the side. 131 00:09:52,760 --> 00:09:55,340 So what property are we going to use? 132 00:09:55,580 --> 00:09:58,250 We are going to use absolute meaning. 133 00:09:58,250 --> 00:10:02,420 We want to take this one away from the document flow. 134 00:10:02,420 --> 00:10:07,940 So if I add position called absolute, what would be the effect? 135 00:10:07,970 --> 00:10:08,690 Have a look. 136 00:10:08,720 --> 00:10:12,860 It could see that it has taken from the document flow. 137 00:10:12,860 --> 00:10:16,220 So now I can move this one to this side. 138 00:10:16,220 --> 00:10:24,920 So when I say top zero and then write zero, let's see what is going to happen when I make this of Top 139 00:10:24,920 --> 00:10:31,670 Zero, can we guess what is going to happen based on what you've learned and see that it has positioned 140 00:10:31,700 --> 00:10:33,950 itself to the viewport? 141 00:10:33,950 --> 00:10:35,990 That is, the parent has the HTML. 142 00:10:35,990 --> 00:10:43,430 But what I want is that I want to position this one to be relative to the parent, which is the red 143 00:10:43,430 --> 00:10:45,210 one from top to bottom either. 144 00:10:45,320 --> 00:10:53,600 So I need to add position core relative to the nearest parent and now I have it as that. 145 00:10:53,600 --> 00:11:02,360 So if I want to move this one to this side, I'm going to make use of right to be zero on the right 146 00:11:02,360 --> 00:11:04,220 side, zero this. 147 00:11:04,220 --> 00:11:06,590 And now here we go. 148 00:11:06,830 --> 00:11:14,210 If I want to increase the height to be equal to the parent container, then the same as we did for the 149 00:11:14,210 --> 00:11:15,020 parent. 150 00:11:15,050 --> 00:11:20,810 We are going to use a height of 100 pixels or 100. 151 00:11:20,810 --> 00:11:23,660 VH going to be the same as that. 152 00:11:23,660 --> 00:11:25,430 And here we go. 153 00:11:25,580 --> 00:11:27,200 But you can see that. 154 00:11:27,980 --> 00:11:31,250 The elements have been stuck on that. 155 00:11:31,250 --> 00:11:35,210 So I need to reduce the size of this one. 156 00:11:35,210 --> 00:11:39,320 So we are going to use some simple mathematics here or logic here. 157 00:11:39,470 --> 00:11:48,710 Remember, the weight of the parent container is 100 parsecs and on that I have taken 30 pieces for 158 00:11:48,710 --> 00:11:53,200 the right side bar, meaning that it has leapt with what, 70%? 159 00:11:53,210 --> 00:11:56,040 So I can give this one to the yellow one. 160 00:11:56,060 --> 00:11:59,450 So for the yellow, that is a left side bar. 161 00:11:59,480 --> 00:12:03,820 I'm going to give it a weight of 70%. 162 00:12:03,830 --> 00:12:10,790 So now 70% plus 30 is equal to 100, which is the parent. 163 00:12:10,820 --> 00:12:12,770 Now, let's see. 164 00:12:12,890 --> 00:12:17,360 And indeed, we haven't been laid out like that. 165 00:12:17,360 --> 00:12:19,450 So this is the flow. 166 00:12:19,460 --> 00:12:25,880 So what has left is to add our custom cases to have something like this. 167 00:12:25,880 --> 00:12:32,270 So now it's time to bring up all the images in the mix because I'm going to resize them. 168 00:12:32,480 --> 00:12:35,120 Next is less remove the comment. 169 00:12:35,120 --> 00:12:39,620 I want to see the images because I want to control them using CSS. 170 00:12:39,650 --> 00:12:41,330 Now these are the images. 171 00:12:41,330 --> 00:12:42,710 They are too big. 172 00:12:42,800 --> 00:12:44,780 So now back to CSS. 173 00:12:44,780 --> 00:12:52,580 Let's go ahead and select the image tag and give it a weight of 300 pixels. 174 00:12:52,580 --> 00:13:01,400 And then the height also has 300 pixels and let's give it a pot n around it to be five pages. 175 00:13:01,790 --> 00:13:04,580 Now let's see a there you go. 176 00:13:04,580 --> 00:13:08,930 I think the height let me give it as 200. 177 00:13:09,950 --> 00:13:11,960 Yeah, it's working good. 178 00:13:11,960 --> 00:13:15,500 So now let's go ahead and remove all the background colours. 179 00:13:15,500 --> 00:13:16,430 Doesn't look good. 180 00:13:16,430 --> 00:13:16,970 Right. 181 00:13:16,970 --> 00:13:19,970 So let's remove the background colour for this one. 182 00:13:19,970 --> 00:13:21,730 Likewise this one. 183 00:13:21,740 --> 00:13:24,710 Now we know that our layout is done. 184 00:13:25,430 --> 00:13:26,420 Okay, good. 185 00:13:26,420 --> 00:13:31,520 So let's add some border around this one or we can maintain it. 186 00:13:31,550 --> 00:13:34,490 I think if you do that, it will be more nice. 187 00:13:34,490 --> 00:13:43,490 So on the right side bar, let's give it border lift as one PC solid black. 188 00:13:45,710 --> 00:13:52,070 That has some division around the sidebar here, but the text is so close. 189 00:13:52,090 --> 00:13:53,620 Don't worry, you will fix it. 190 00:13:53,620 --> 00:13:56,290 So let's start working on the header. 191 00:13:56,290 --> 00:13:59,860 So let's get going for the header. 192 00:14:00,010 --> 00:14:02,230 This is how I like to start my element. 193 00:14:02,230 --> 00:14:04,060 I will start from top to bottom. 194 00:14:04,060 --> 00:14:07,330 So now after header, then our container comes. 195 00:14:07,330 --> 00:14:07,840 Right? 196 00:14:07,840 --> 00:14:11,950 So let's add a header with the CSS properties. 197 00:14:11,950 --> 00:14:24,220 Background color here is going to be as hash tag F, F and then a height of give it us for v, h and 198 00:14:24,220 --> 00:14:29,170 then the entire width supposed to be 100%. 199 00:14:29,170 --> 00:14:32,230 So let's save it and now we have it. 200 00:14:32,230 --> 00:14:38,890 But let's add a background color to the entire body so that you're going to have some differentiation 201 00:14:38,890 --> 00:14:45,250 between the background color of the body and then the actual container contents. 202 00:14:45,430 --> 00:14:52,360 So for the body, I added hash tag f five, f five, f five. 203 00:14:52,360 --> 00:14:53,860 I see that when I save it. 204 00:14:53,860 --> 00:14:55,920 Now it looks good. 205 00:14:55,930 --> 00:15:01,570 The next question is how can we move this particular element at the center here? 206 00:15:01,900 --> 00:15:10,390 And we have a section to talk about Flexbox, which is really easy to position element the way we want 207 00:15:10,390 --> 00:15:16,510 for the meantime, let's play around with it and use some CSS technique to get it done. 208 00:15:16,690 --> 00:15:25,660 So back to the CSA, remember we added a wrapper inside the header, so now let's target the wrapper. 209 00:15:25,690 --> 00:15:37,900 So after the header here, let's make a piece of wrapper and in there give it a margin of zero and auto. 210 00:15:38,230 --> 00:15:41,890 And with this one, let's see, nothing seems to be happening. 211 00:15:41,890 --> 00:15:50,740 But if I add maximum width, which is equal to maximum content, let's see, let's refresh it. 212 00:15:50,740 --> 00:15:52,810 Nothing seems to be happening. 213 00:15:52,840 --> 00:16:01,540 And because I made some type of mistake here, a double p, I start nine could see that it has moved 214 00:16:01,540 --> 00:16:08,350 at the center and also I want to position the elements at the center of itself. 215 00:16:08,350 --> 00:16:13,120 So here I'm going to give a text, a line to be center. 216 00:16:13,150 --> 00:16:20,590 Now if we see that the ad center asked that and I want to have some padding to the top here. 217 00:16:20,620 --> 00:16:28,510 So going to be as padding top padding top here as 20 P6, save it. 218 00:16:28,510 --> 00:16:30,430 And now let's see. 219 00:16:30,430 --> 00:16:40,420 Yes, so let's go ahead and style the link and let me copy the CSS here for you to see because we are 220 00:16:40,420 --> 00:16:44,170 done with the actual concept and this is the link. 221 00:16:44,170 --> 00:16:50,890 So for this one, first of all, I selected the header and in the I have a link, let me show you here 222 00:16:51,100 --> 00:16:54,340 we have the header and then the link tag here. 223 00:16:54,340 --> 00:16:58,330 So if I save it, this is the style for that. 224 00:16:58,330 --> 00:17:06,160 And if you see that there is no margin or padding around it and we can get that one done pretty easy. 225 00:17:06,160 --> 00:17:15,160 So let's select the H one comma and P tag and let's give it font size of each of 20 pixels. 226 00:17:15,640 --> 00:17:21,970 And I want to give it a pattern around both sizes as ten x. 227 00:17:21,970 --> 00:17:24,010 So now this is what we have. 228 00:17:24,040 --> 00:17:31,120 The next one going to be the card for the element inside the left side bar. 229 00:17:31,120 --> 00:17:32,650 And here we go. 230 00:17:32,680 --> 00:17:35,410 That one is for the left. 231 00:17:35,410 --> 00:17:36,040 Right. 232 00:17:36,040 --> 00:17:43,090 So this one, if you scroll down here, you see that we have a class called left and I want to style 233 00:17:43,090 --> 00:17:44,980 everything inside here. 234 00:17:45,100 --> 00:17:47,740 So let me go ahead and tie that. 235 00:17:47,740 --> 00:17:51,640 So this is the left side bar here. 236 00:17:51,640 --> 00:17:58,780 So to move faster, let me paste the CSS inside the left and I'll explain to you because this one, 237 00:17:58,780 --> 00:18:00,640 we have talked about it before. 238 00:18:01,180 --> 00:18:08,470 I gave it a background color of white and border of five border radius and book sizing and the margin 239 00:18:08,470 --> 00:18:10,270 if I save it. 240 00:18:10,270 --> 00:18:11,950 And now let's have a look. 241 00:18:11,980 --> 00:18:13,720 This is what we have. 242 00:18:13,720 --> 00:18:16,840 You can see that it is moving towards this one. 243 00:18:16,840 --> 00:18:18,370 Why is it so? 244 00:18:18,610 --> 00:18:28,270 A because I gave it a margin of ten and because I gave it a width of 70 plus 30, which is equal to 245 00:18:28,270 --> 00:18:28,920 100. 246 00:18:28,920 --> 00:18:31,960 And now I have taken away ten pixels. 247 00:18:31,960 --> 00:18:37,360 So now I need to reduce the width of this 1 to 65. 248 00:18:38,530 --> 00:18:40,930 Now I have this effect. 249 00:18:41,290 --> 00:18:41,740 All right. 250 00:18:41,740 --> 00:18:44,950 The next step is going to be this side here. 251 00:18:45,020 --> 00:18:46,550 Which is this for this one? 252 00:18:46,550 --> 00:18:48,380 I didn't add any style to it. 253 00:18:48,380 --> 00:18:51,690 I just made some copy and paste and that is all. 254 00:18:51,710 --> 00:18:56,040 So now what has left is the left here? 255 00:18:56,060 --> 00:19:05,330 And remember, if I want to position this one to the side, unless I add position, core, absolute, 256 00:19:05,330 --> 00:19:10,370 and then for the left side by here, I'm going to give a position called relative. 257 00:19:10,460 --> 00:19:14,230 That way is going to position itself nicely. 258 00:19:14,240 --> 00:19:16,880 So here we go. 259 00:19:16,880 --> 00:19:22,290 So let's look at the class for the new, which is called a left. 260 00:19:22,520 --> 00:19:27,400 So let me go ahead and select that core left. 261 00:19:27,410 --> 00:19:34,340 So let me paste the class for a left and you can see that I have added position called absolute. 262 00:19:34,340 --> 00:19:39,290 When I do that, let me remove the top and bottom and show you what's going to happen. 263 00:19:39,290 --> 00:19:41,870 And you can see the effect down here. 264 00:19:41,870 --> 00:19:44,840 But let me target the button itself. 265 00:19:44,840 --> 00:19:51,170 So I'm going to select the left and then the button and I'm going to have that effect. 266 00:19:51,470 --> 00:19:51,860 Good. 267 00:19:51,860 --> 00:19:54,490 So now I want to put it here. 268 00:19:54,500 --> 00:19:56,690 So what is going to be the logic? 269 00:19:56,690 --> 00:20:00,500 So I have given it a position called absolute. 270 00:20:00,500 --> 00:20:06,800 So I'm going to be top zero and then the right or so zero, save it. 271 00:20:07,010 --> 00:20:12,680 And we have the effect and that is it and that is it. 272 00:20:12,680 --> 00:20:18,740 So I'll go ahead and copy and paste this contents as that. 273 00:20:18,740 --> 00:20:29,450 So now back to the index for the left side bar, which is this one I'm going to copy two or three times. 274 00:20:29,450 --> 00:20:34,340 So select all, let me select and then collapse it and copy. 275 00:20:34,700 --> 00:20:39,740 And then down here paste it as many as you want, save it. 276 00:20:39,740 --> 00:20:42,410 And now this is what we have. 277 00:20:42,410 --> 00:20:51,830 And for the right side, bar two, which is this one, make sure that you select the contents. 278 00:20:52,100 --> 00:20:53,120 Copy that. 279 00:20:53,720 --> 00:20:59,480 And then inside the right container, paste it, paste it, paste it, paste it and save it. 280 00:20:59,480 --> 00:21:01,370 And there we go. 281 00:21:01,400 --> 00:21:04,430 We have it as the final one. 282 00:21:04,640 --> 00:21:11,390 The last one is about the fixed one here, and that one is pretty simple to implement. 283 00:21:11,390 --> 00:21:19,340 So inside the parent or even the body anywhere because of a face, it doesn't take into consideration 284 00:21:19,340 --> 00:21:20,840 any parent. 285 00:21:20,840 --> 00:21:29,720 So I'm going to add, let's say a div co promo and inside let's add a button called a root now. 286 00:21:29,720 --> 00:21:34,550 So inside I have 100% free and root now. 287 00:21:34,580 --> 00:21:40,100 So now if I save it, let's see where it is which is here. 288 00:21:40,670 --> 00:21:46,070 But as soon as I add position fixed to eight, let's look at the effect. 289 00:21:46,070 --> 00:21:50,390 So now I'm back to the CSS and let's select the class. 290 00:21:50,390 --> 00:21:58,550 So let me copy the class for you here and let me explain to you now I have selected the class called 291 00:21:58,550 --> 00:22:06,650 Promo and I gave it a position called Fix because for face is always look up to the viewport and bottom 292 00:22:06,650 --> 00:22:09,620 zero and width of it as what, 500. 293 00:22:09,620 --> 00:22:12,020 So these ones are just for styling. 294 00:22:12,020 --> 00:22:15,230 So let me comment that one and let's see what we have. 295 00:22:15,440 --> 00:22:21,830 We see that it is always at the bottom here because I say that bottom supposed to be zero and the width 296 00:22:21,830 --> 00:22:23,240 is called 500. 297 00:22:23,240 --> 00:22:30,160 And if we want to style the button, you go to the index and there is a button, you toggle the promo 298 00:22:30,170 --> 00:22:31,220 and then the button. 299 00:22:31,310 --> 00:22:32,960 So here we go. 300 00:22:32,990 --> 00:22:39,350 Let me remove the comments and you're going to have the same effects as the final one. 301 00:22:39,350 --> 00:22:48,050 So comparing this one and the final one is the same, just that you can change the images to make your 302 00:22:48,050 --> 00:22:48,710 own. 303 00:22:48,740 --> 00:22:49,400 All right. 304 00:22:49,400 --> 00:22:53,630 Here and the project and relative and fixed positioning.