[00:00:01] Hi welcome back to the reactor building and this time you are going to be positioning the Canfell and say button here. So first thing I want to do is get rid of these styles because we don't want these styles we want to have the size of here on the top right. So we're going to do that is by going into our signing. And I want to change button here I want to name it to something you can acquire the signing forms let's say sign a button and then I'm going to go to the sign in form and change this right here is a class name is equal to sign in button. OK so it's cold outside. Yes it's Kovak here. It's a normal Buy now. Now the next thing I want to do is I want to position these up the top here so we can do that pretty easily. Give them unique names let's get to our newsletter. And let's name each of these fields so for the newsletter here I want to change a few things I want to get rid of this inclosing did or this. Yeah I did. And then I want to put the link down here. And that well actually what I want to do is put a div around it. But then change this Dave to a paragraph let's see do. Yeah well let's get rid of this div right there and then let's do this and put a dip around this paragraph tag. Okay. So that's what we got. Now it's name is Debrett. [00:01:44][103.7]
[00:01:45] It's a class name is equal to a newsletter form cancel underscore underscore Kensal. Now next thing you want to do is let's just give this button a class name Kainaz Shirshov in there. But yeah let's give it a class name and newsletter form underscore underscore something. And then let's change the tax year to say instead of say let's say submit. Now I'm going moved this white space. All right. Now let's go to these two our seats us and are signing to see us when it to its own file. While we'll put it in its own file right now it's creating a filing or style folder and call it and we'll call a newsletter underscored diciest us and what's important in your main right now and let's put it right underneath our content. So I'm going to say well let's put it to you that import Sosh newsletter underscore that. All right that's good. No it's because I don't mean diciest us and start writing on our tags so we have to cancel on this of me here and copy I put it in your and then I'm going to paste it again and then just change it to submit. OK. Now we have our items here. Let's go ahead and style them the way we want. Well it's position them actually so let's give them IJI position. That's Salou. Let's start with the Kancil here. So let's say position is absolute and the same rate is zero and top is negative 36 degrees negative 36 so can get it above the line. Let's see where did they go. [00:03:51][125.7]
[00:03:51] OK so real quick we have to make the form rate relative we have to set the position to relatives that we can actually use absolute positioning so let's get ready to use whatever form here are saying it's us and let's just say let's say each position is relative and then all added Let's move this code toward the east. Or how does the US cut it out and move over here. Just put it at the top. All right I'm going to save that. I'm going to head over to our out and see what we have. All right so our Kansas veterans now looking like it's up there. Let's just up why some styles from over here onto that. So can I click this and copy and I'll explain the styles. Ok so I'm not going to write them and I'm going to reference them so the cancel I'm going to say hi is 24 pixels the way it is 130 pixels. And then the border is one pixel solid 40 40 40 14 and we would call this card a great one for. And then I'm going to copy for a radius of 16 pixels and you then I'm going to get rid of this one I copied Caecilius out of these four lines right here. Now let's check it out in browser and see what we're looking like yet. Looking nice we'll get rid of the cancer all styles and I'm a real quick look at our signing. Diciest US or wherever we put the action which we were putting on a condom. Yes so we could just inherited a lot of these styles probably. But I don't want to. [00:05:42][110.9]
[00:05:42] So let's just go to use it and let's say let's do this let's put coloured colored 3 1 OK so I changed the color. Now I want to get this century. And we can do that by referencing the p tag that's it. Here we go to our newsletter and we have this Peter. And let's just say on the pre-tax margins you know let's say that go back in here and it should centric. OK. Nice and good. Now let's get the submit button up there and then give it the styles here. So pretty much the same style is except for a background color of our color red and the text color white. So all of us remember that. Let's go here and let's say the right is going to be zero and then our right for uncancel I'm going to put it about 90 pixels so it can be a little bit over from this made by and then so are submitted it's going to be a rate of zero talk of negative 36 pixels as well. Let's check that out. OK. It's looking good now. The reason I did negative 36 is because it's at the top of our form right underneath the title. So that might seem the height rich because it's right underneath the amaizing the high and then amazing another 12 to die to get that space because if we look at her design here it's about 16 pixels. I mean that in minus 16 from 24. So that's why I'm that's why I'm getting 36 because these are 24 high. So we're getting negative 36 to put those up there. Now we look at her here. We should get the styles of the men. Pretty simple stuff. [00:07:35][112.4]
[00:07:36] Let's just copy over our styles from here and then change the colors of it. So for the border we want white and for the color of the white and then to the background color we want that color red. The background color is colored red. And that's good wear out and see what we're looking at. So you're looking like really looking really clean. I'm going to inspect it and look at the styles here. OK. It's looking good for a little margin at the bottom padding on the P C padding padding bottom. What we can do margin zip padding to put things over the top. So as you say padding bottom to pixels without pushing up on the PTI we see this like all right so what we can do is just sit here on the canso. Well let's just leave it like that for now. That's looking pretty close. Yeah it looks good. Like the font size is a bit different the way I'm going to specifying here on weight is 100 in theory that is looks the same mechanism for getting over. And you were interesting I guess that is just looks different and you import it because this is the same exact reason we didn't even cop even here and put it in here and it should be the same. Same so I guess that working the cause for me from now we might come back and change it. But that looks good to me. Let's go ahead and move on into the next guide of where we will be done with this format and we will see. [00:09:53][136.4]
[00:09:54] We are we've got to edit this one the edit form on news that we saw out of style. So let's go ahead and added that. And then after that we'll get into the details. So next you guys are going to be at it for at the detail. So let's commit our code of let's say good status good good committed the style the newsletter form actions catching the next guy or we will hop into it and use that component. [00:09:54][0.0]
[589.1]