[00:00:00] Hi there and welcome back to react operability. And this guy I said we would modify it not news letter buttons to look like our design here but we're going to skip over that for now and we're going to get in the border here for the for the night here and we're going to have basically space our items correctly. So we're not using Bootstrap. So right now it looks like it's pretty close to what we want but we're doing it in a way that we don't really want to do it. We set it up with bootstrap earlier just to quickly get out something on the screen so we can see it. But I want to go away from the strap now and style it in a different way. So let's go ahead and implement these styles by first getting rid of all of these class names in here or let's let's keep them but let's replace them so let's say while we don't need one for the content but for our archive here we want to give this a tag of let's just say newsletter underscore underscore side. And then for the top here with just a newsletter. OK so basically what's going on here and we've got reversed styles for bootstraps it's going to look a little weird. This is get me down here. Pretty simple fix all we have to do is go in and give these other their proper widths and heights mostly just our wits. So that's what it is according to our design about 5 Click on this it looks like it says it's 140 pixels. [00:01:34][93.7]
[00:01:35] And then the margin right is going to be about thirty nine pixels so let's make this or 161 pixels that looks like must have had something else selected 161 of them are generated 39. And then for this component we already know it's 960 because the image 960 pixels. So let's go in here and let's do this. And later on there's going to be guides on it where we will completely restyle the the application and make it mobile responsive and we'll have media queries like a joke. But just to get into styles a little bit we're going to do it like this so you can I can show you how to do it this way and then later on you'll learn how to modify cell. So yeah 960 and 161 with the merged 939. So let's start by giving our right here the margin rate or a width of 960. So we named Ed in our newsletter content. We have a classroom of newsletter content. So I'm going to go to you as he is satisfied we have here and it looks like we already declared this 961. So what we've read is that and then let's give it our we already have with on this so basically all we need to know is that flex blocks to our main container sort of newsletter. Let's go to our main diciest us some of these and we'll put this in its own file later on or we could just out one right now so we might as well just import Dallasites newsletter and then once create that file in our style folder here newsletter Nicias us and let's just say dot newsletter with a display flex and then let's flex direction. [00:03:33][117.7]
[00:03:35] This is going to automatically be rolled. We don't even need to specify that it's Rousell let's get rid of that and then justify content space between. Okay so let's go back to our app and see what we got through that page. It says that we don't have a newsletter so we know use Litterbug. We just did it so we should remove page file to him if not found not viewable news. Diciest US made a mistake and here dot news letter. Oh yeah right here. Not sure what's the reward. It's not working. Newsletter dicy us. Let's go back to our main. I'm going to put these back in graphic Romane and get rid of that you compiles. I'm going to add the second important news letter Doris Lessing whose letter. Interesting. I'm not sure I was working. Maybe it's because we import did before we created it. But if that's the case that's pretty exclusive to us because we've done up and it's worked before. Basically we have our our Flex box in here now which is nice. Now with the margin rate of thirty nine pixels to our side here so I'm going to go into our content I see it's US news content and just say on our DOT newsletter underscore on this Web site I'm just going to say merging right about thirty nine pixels and so we get all right should pull it. Yeah. OK. Now we want to do is with the underscore here the underline here. I'm not going to copy this because we're all copying the word suburban pixel E6 66. I'll just type it out so you can follow along. [00:05:39][124.7]
[00:05:40] And then we want to Martin Bob about 47 pixels to push away from the watermarking top on the content 47 pixels to push away from the knife here. So go good news Lundazi assassin just a margin of 47 pixel boys. Let's go back in here. So we got all right. Nice nice looking pretty nice. Now we could even give it a padding and then give the top a border. But since we are going to use in requests we might as well give it to you. Will get the margin. Bottom line is we don't have to put this in our in our requests. The margin as well so let's go to our site she had to our I. Now let's do that so let's say I'm not on the margin bottom 40 some pixels and let's say padding because we need in the order word bottom line pixels solid hash tag E6 E6 6 that should be looking pretty nice. Now let's go back in here until we get all right. Outside's except for we don't want to having my bag because it's going to push it down as if it's in the container. So you can see the line right there. Very suddenly let's just change it to market and it should be good. OK. That's looking nice but it looks like it's not where it needs to be looks like because when you pass you'll see above or line here and if you remember we added them padding of 13 pixels to this to put it down here so let's just say I think it was 13 pixels to say Pangborn 13 pixels. And let's see. [00:07:28][107.8]
[00:07:29] Yeah it looks like I understand we have a panic button 13 pixel slash print right. That's great. Now let's just give it width of two pixels. The design doesn't say to do that but I want to put any width of two pixels on the border just on one. OK well we'll go back to one. I think that actually might look nicer with one that looks good. Let's go ahead and see what you do now. So this is all working. We have her at hand here. Let's go in Commander code. And then finally get back to our editing. So it's a good status. Good gig. And let's just say I did styles to I've added grooming headers and have components for Hawk styles can see that happen in the next guy where we will added the stylus with the edit and and use Luders for real this time I promise. So I'll see you then. [00:07:29][0.0]
[443.8]