[00:00:00] And welcome back to the reactor building. And this guy we're going to add in this this kind of border you see here etc. border. So first thing I want to do is throw in the the margin for the entire op here. We want everything to generally be pushed in about 140 pixels like you see here in the design. And then the top it doesn't specify but we can see that it's a 1 800 31 from the bottom and then the height of this is about 30. And then the entire document has a height of 900 like you see here on the top right corner. So we can do is say OK 30 plus 831 is equal to 861. And then we can say OK minus the entire document which is nine hundred thirty nine pixels from the top. So 140 and 39. So let's go to our app code and let's go to our main Dicey's us. And with that added in a body tag and let's just say Margene thirty nine pixels 140 pixels Duchon give us the margin we need. Wait for the app to reload. You'll notice it's all about where we want it to be. So next thing we want to do is out in the border finally. So super simple see us here the width is 4500 40 pixels background color is 88 88 nice 40 pixels. Now I'm not going to copy this just because 1 we don't want the width to be 14 40. We want it to be 100 percent so we can resize it and then we want the height to be 40. That's right. [00:01:39][98.8]
[00:01:39] And then I can remember the background. So let's head over to our code and let's just put that should see where we are. This is a new file and let's call it a better word. SPSS unless the DOT headers. Well let's call this apple forward because that's what we're going to call a component and then we'll make sure this is an CSSA file. And then I'm just going to say hey 40 pixels with 100 percent and a background color of da da da and believe that it was. Let me check the design here. We're chilling. Now let's go ahead and add in the actual component to our styles. Let's just remember that the Takizawa border and then enter Hauk folder what's name made it or not. Yes. Now here let's just copy over and dodgy us. So same kind of structure. Let's rename it to and afterbirth and then export and import it. Oh yes we set up let's get rid of this. Well let's get rid of this and then it will still be rendering our child component. And let's just say in class name let's just change it to border and then go out and you are signing. So now we have our component. We have our CSI. Now we just need to actually use this. So adding oversigning not just we want to use it similar to similarly to how I should. The second way of adding in the letter actually. Exactly. The second the right the second we should Saluzzi in court. I had heard word from dot dot slash slash slash hogwash. Had a reporter. [00:03:37][117.1]
[00:03:38] Now let's copy that. Let's head to the bottom here and let's just call it on CNN so I'd had her word take signed and Paramor. So just explain what's going on here. We are seeing out our border and taking signing as a as a PARAMOR It's not going into our world like you see here and it is being rendered into our debt here. So real quick. This isn't going to work. I'm pretty sure it's good you are like we're going to see it but it's not going to work. Let's see. All right. Or it's just not Horak. But what we want to do is not put it inside of this because this is only 40 pixels. So it's cut this class name. I'm going to put another div in here and let's give this the class name and then I'm going to pull it up Lonni on the same lines. There's nothing in here. OK. Now I'm going to go into art. And the reason it was initially working is because we actually have important at our border. I mean it's us. So it's going here and was important and had her work now go to far in the browser and see what it looks like. Yeah looks great. Now you'll notice that it's getting cut back because of the margin we have. So pretty simple fix all we need to do is get your code here and just say. I had a border file and you see a margin minus thirty nine pixel or we can just read that as your pixels and then minus 140 pixels. [00:05:12][93.6]
[00:05:13] I should pause to the left and right. Yes we. Now we did. The reason it's still not working is because the width is 100 percent the container but 100 percent is everything that's in the 140. So we can do this exchange just to have you with. And it should give us the entire view. Ok sweet. So that's our header and everything's looking nice. Let's go to my design here and see if we can add some margin to make it look a bit better. So it's about 41 pixels down from the PS logging to continue. And it's about what we'll deal with this body part later because we need it in another agency to get this tax money. So all we need to do is say OK 41 pixels from the please logging to continue. Right now it should be about 39 I believe. Let's go and check the inspect element made header. You can see the exact distance but we can safely assume that it's thirty nine because we're setting this to zero. And then in our meantime he says we have 39 being applied the entire body will actually be applied to the body. So probably not. Let's just put this 41 pixels and see what happens. All right. Went down about 40 pixels looking pretty close to our design. I will say that the goal if not identical but yeah looks nice let's go ahead and hop into the next guy where we will get started on this component. The log in text you see here. [00:06:44][90.8]
[00:06:44] And the reason we want to make this agency is logging on the line is because we're going to use it across seal Sina and obviative county that has new user here and then they are logging as logging. So we want to be able to use this in multiple places and we're also going to do it like we approached our border compartment because we need to pass in another parameter. And that's going to be the attacks. So it's going to commit our code status good at getting command and I'm just going to say treat it and Henare component. Right now actually the next day where we will get into that navigation test component of that we'll call it. So we'll see you then. [00:06:44][0.0]
[400.3]