‫Hey, there.
‫Welcome back.
‫Now let us continue our task without our harder.
‫So in a previous lecture, we fix this part.
‫That means we now have both this item as flex item.
‫If you see this as a container, we have all of these item flex item.
‫Now, the next thing I'm going to do is I'm going to arrange them at this center first.
‫So that means first, let me get back here and change the size now and go back to trim.
‫OK, so this is the actual size that I want, and what I want is I want this image to be at the center
‫and I want these items to be at the center.
‫And remember, we have flex.
‫We can utilize online self.
‫So this image is inside this logo, then that means this division, what I can do is I can see this
‫division is legs and this is going to be an item, then I can apply the property of align self.
‫So let me jump back here and I'm going to select the.
‫Header, not logo.
‫And I'm going to say this as display.
‫Flex.
‫Now, once I applied this property, that means only child, all the items for this logo class will
‫be flex item.
‫And then we can control it, so let me add a line self-centered here, get back here.
‫Now this should be at center.
‫So this is local and this is going to be at the center.
‫Now, the other issue I currently see is this container is not taking the complete height, and that's
‫why this is not the center part.
‫So what I can do is I can change the height of container and say 200 percent to this height of container
‫will depend on its parent, which has had a seamless one.
‫Get back here.
‫Now you can see this is a dissenter because this container is taking the company tight.
‫Now the next thing is about this now.
‫So currently, you see, this is taking hundred percent, but not this ul.
‫So what we can do is we can utilize this part and arrange this well in the center of this now.
‫That means I want it here.
‫So the best idea is to change the height of a U.N. and say this haidar's a person.
‫That means this will depend on its fate and get back here.
‫Now, this useless 100 percent, so we can apply different Lexmark settings since this is a flex class.
‫So what we can do is we can trust our justify content and I need space between them, so I'm going to
‫use space.
‫If I do, space between that would be Knox.
‫If I use space around, that will have equal spaces.
‫So that would be horizontal.
‫The next thing will be about alien content.
‫So I'm going to use align items if I use align items and if I use enter, that would be vertical.
‫Save this one.
‫Get back here.
‫OK, great.
‫So now this is walking fine.
‫We are have this item at the center.
‫We have this item at the center.
‫But if you see we have applied this just to a content space around, it's not working.
‫Why?
‫Because of this piece, if I right click here again and dig this inspector at the bottom.
‫And if you jump here.
‫So this is to do this is now.
‫So we are not utilizing this whole space.
‫Now to fix this, the first thing I'm going to do is I'm going to add that a foreign size also, I'm
‫going to add padding.
‫So what I'm going to do is inside my head, I'm going to select my nerve, my jewel and then my airline.
‫Now inside this alive, all actors are fighting on the boat side, which has left and right.
‫So I'm going to zero and then do them.
‫The next thing is I'm going to upgrade their phone size, so I live crew uses on site is here and I'm
‫going to change them for 1.5 for them.
‫Save this one.
‫You can see it's much better.
‫I hope you got the idea, what we are trying to do.
‫So that's done, that's all for us.
‫Now there are several things that we need to upgrade.
‫The first thing is this looks a bit bulky.
‫That means a bit gold.
‫So what we can do is we can add 400 head.
‫And let me change country to 600 by default, that's around 300 400, so let's try 600.
‫OK, it's working fine.
‫We can also add our effect and change the culture and also change the color.
‫So what I'm going to do is I'm going to add 10.
‫It may copy this selector part, and here let me out.
‫Howard, and I'm going to change the color.
‫As usual, I have copied the colors, so you don't have to do anything.
‫That's done.
‫I also need to change the culture.
‫So what I'm going to do is I'm going to utilize calzone and then Janet 2.0, now head.
‫I'm not adding any type of a traveling and normal website.
‫Or I should say in our real website, you will add each rep and then there will be a link to a new page
‫that will be about premium or about the support page download page.
‫Martin, I'm not doing that because we don't need it.
‫We are just building different clone.
‫So I hope you got the idea what we are trying to do, and now it's look much better.
‫So that's it.
‫You can also change the color for sign up, as well as log in as most websites usually do.
‫The other thing that is remaining is about this particular white one.
‫So if I jump back here.
‫Now, how are we going to address addiction about the image size?
‫By default, the image sizes 100 percent of the original size.
‫That means if I am body image, which currently has a size of maybe a thousand pixels.
‫So when I imboden or added on my HD html page, it will be 2000 pixels, but we can what I did using
‫our.
‫Remember the default sizes 100 percent of the original size.
‫Now what we can do is we can set our image height as 100 percent off patent.
‫That means 100 percent.
‫Then it will depend on the logo size.
‫That means the size of this height.
‫So what we can do is we can try, OK, we can see here that image height is.
‫100 percent now on this, the size, the height of this particular element, which is our logo, which
‫is appear in court image.
‫Now if I change its height as currently we are following the height of our background, which is our
‫harder.
‫So if I say maybe height does.
‫50 pixels, suppose, and if I save it, if I get back here, you can see now the logo is changing its
‫size.
‫Maybe let me take it for the Pixel and if I save this, you can see nobody's changing its size.
‫So that means the height of our current child is dependent on its parent.
‫And we know about it.
‫So what we can do is we can add a height to our current logo or we can directly add to this and keep
‫updating the height every time.
‫We have some respond to content.
‫That means we are changing the size so we can't do any of it either.
‫We can depend on the parent height or we can just remove this and add a fixed height here with our current
‫image.
‫So maybe we can sit for eight pixels, something like this, for example.
‫And if I get my cat, you can see it's working fine.
‫I hope you got the idea.
‫So that's it that's done for our head out, there will be several changes, the question will be definitely
‫how you will see this as a scroll because it's a big page.
‫And that's why you are seeing difference when I'm switching my tabs.
‫So in the next lecture, what we are going to do is we are going to play with the main section.
‫Our header part is done for now.
‫I think only one changes remaining.
‫That is, when I visit this Spotify logo, we are going to get a pointer.
‫So what we can do is we can add a effect.
‫So let me select my selector.
‫And and our effect here.
‫And simply changed, the guard said here.
‫And see 2.0 saved us.
‫Get back here.
‫OK.
‫Everything is working fine for us now.
‫Thank you for calling.
‫I hope you got the idea.
‫Whatever we are trying to experiment on, not just with the Flexbox part, but we are also trying to
‫experiment with the other content like I and different type of work also.
‫So that's it for this lecture.
‫Let us continue the Spotify part in the next one.
‫Thank you for calling and I see you guys in the next one.