‫Welcome back.
‫Now let us continue our task with our current high school website.
‫So here I am currently with my unordered list, and I simply need to update a few settings.
‫The first one is going to be about my one size.
‫Definitely, I need to change it.
‫The second one will be to add some padding between them and then add some margin at the top.
‫So the first thing I'm going to do is here, I'm going to change the font size.
‫And head on with the war already on sales of one point six Saddam.
‫Now remember, I haven't utilized this whole thing as an excel.
‫I haven't utilized them.
‫I'm using 16 pixels by default currently, and this is going to be big.
‫So let me change the font size 210 pixels and let me go in and go with font size.
‫That's it.
‫And Pixel C on this one.
‫Get back here, OK?
‫And I also need to add something related to font, which so that can be voted on and I'm going to go
‫in 500.
‫Much work out great, you can go with 600 also if you want, but this looks fine to me for now, or
‫I can just drive at $600 to.
‫Looks good.
‫The other thing is we need to change the color if we want.
‫So what I'm going to do is I'm going to have a color and I'm going to go with.
‫Save this one.
‫Get back here.
‫For now, that's OK now I need to add some padding.
‫So what I'm going to do is I got I'm going to add this padding with my dog or with my airbag, depending
‫on me, so I can go with there later on, I can go with it.
‫What I can do is I can jump here and I just need to select the menu you want.
‫And then I lay down and have a kind of hiding and I'm moved to go with them on top and bottom and then
‫pull them on left and right.
‫So if I see if we can get back here looks good, I remember this one is going to be converted into a
‫button, so I haven't added any type of padding yet.
‫For now, this looks great, but I need to add space from the top.
‫So what I can do is I can add some padding on this whole headset itself on the top and bottom.
‫So what I need to do is just jump there.
‫I can I graduated with my novel by accident, so I continue fighting and I'm going to give it to them
‫and then zero, save this one, get back here.
‫This looks great.
‫Yup, yup.
‫Yup, we need to fix this one.
‫Don't worry.
‫But for the base level, this is great.
‫I think this color is not the exact one.
‫OK, so this color, I think, is not the exact one which we have selected.
‫OK.
‫This is or what again.
‫So what I need to do is this color in this from here?
‫And I need to add it with my help, save this one.
‫Get back here.
‫Now this is working great and I need to update this one, which was my contact us.
‫Let me convert that into a button acts of this whole contacting.
‫So if I jump in, I can IRA Glass here who my contact and I can say VPN or something else.
‫I can give it a name.
‫So what I'm going to do is I'm going to say a class and then I'm going to have a common property as
‫being so if I need to create a button again, maybe here, maybe here I can just directly jump onto
‫this VPN class.
‫OK.
‫So what I'm going to do is I'm going to create a VPN here.
‫Now, remember later we are going to move this into some components, something related to utility,
‫if you remember, we can do this, if you remember the bootstrap lectures, what we can do is we can
‫create dot m2.
‫That will be margin to not be true, that will be padding, too.
‫Similarly, this will be a button, which is our component now for the specific Bartlett me.
‫Like some stylings, I'm going to go with a color first.
‫That means the font that you are going to follow.
‫There should be wide and there will be something as background color.
‫Like me and my background color, so this is going to be the background color, then we need some padding
‫on the top and bottom so we can have a proper button.
‫I'm going for that one room as well as put them on the x axis, and then I'm going to have a border
‫radius, which is going to be protected.
‫Save this one.
‫Get back here.
‫Now you can see this whole button is stretched, so if I right click here.
‫And if you observe this is this useless flex.
‫And then each item is stretched to the top and bottom.
‫That means that it is taking complete space.
‫And if you observe, if I just uncheck this flex.
‫This pattern is working fine now.
‫So what is happening is this is taking complete SpaceX, complete SpaceX, which is provided to it,
‫and we somehow need to fix this.
‫What we can do is on a bulldog.
‫We cannot allow an item center.
‫So this will aid only the required space and will be aligned to the center and it will not be stretched.
‫That means if I jump out of it, my you will find a property has a line items center.
‫Save this one.
‫You can see it's working fine.
‫So I it was taking the complete space.
‫Now this is a line at this center with the required space of the content.
‫OK, I hope you got the idea, but if I remove this line, I'm saying that you can see this is strange.
‫Click on Inspect.
‫Scroll down to the content you can see there's no stretch to cover everything.
‫Now you can do one more important thing, for example, if my jumper and my a lighter.
‫And if I try to increase departing from top to bottom, maybe 20, you can see this button is now trying
‫to stretch from top to bottom, which is the required space.
‫I hope you got the idea.
‫OK.
‫So make sure to add this line items have required.
‫OK, that's done for the top navigation bar and the next one, we are going to play with this on how
‫you will see some animation and sometimes you can add also.
‫So if you haven't started this, how what effect transition that will be continuing as we move forward
‫with adult fiction?
‫Thank you for calling.
‫I hope you got the idea what we just heard.
‫And I see you guys in the next one.