‫Hey, there.
‫Welcome back.
‫Now let us talk working with the next section, so that means we currently have this country parked
‫as well as the section.
‫Pretty easy.
‫All I have to do is jump head on Commander Spock first, let me uncomment all of them.
‫And save this one.
‫Get back here.
‫Now the problem currently you see, is we have this section, which is our icon plus country and the
‫other section head itself because we are following flex directions, it's pretty obvious.
‫Now, I heard if I want to move this to next section, basically head, I'm taking the complete part,
‫complete part of this section.
‫What I can do is I can change the 200 percent because I'm taking complete part if I right click here
‫and click on Flex here.
‫You can see I'm taking complete part here, so that means this horizontal is 100 percent.
‫What I can do is I can select this location.
‫This is going to be after social folder and then I'm going to select my location and head.
‫I can set it 100 percent.
‫Remember, 100 percent will depend on the parent or the parent for now is contained.
‫So this is going to take hundred percent of this container grid.
‫And if I jump here, get back here, you can see this is going to be 100 percent this whole line.
‫I hope you got the idea.
‫Now I can change it to flex and or any any direction that I want.
‫Now this is under my control.
‫So my main motive was to give you an idea how we can do that at simple now.
‫So since we have this location, I can change not opting.
‫I can add margin because if you observe we have some gap this gap here, we can add this margin to.
‫All I could do is.
‫Use margin drop in.
‫I can give maybe 10.
‫Then the second thing is, I'm going to convert this into this Netflix, and that really will have option
‫with the justified content.
‫And I can suplex and save this one.
‫Get back here and you can see now we have this content here.
‫But the issue is if you observe, the issue is the pacing.
‫So I need to change the size.
‫I also need to add some spacing.
‫So let me jump here.
‫First, let me increase the acorn size and I'm going to go with one point to them.
‫And the other thing I need to change is the color also.
‫Yup, it's not white.
‫It's somewhat gray.
‫So I also need to update the color.
‫And I'm going to utilize someone great.
‫So this is done, but remember, I need to add some spacing spacing between these two, and if you observe
‫it, let me try to zoom in and if you observe this, this is not equal, so this is lying on the top.
‫Pops up and this is in center, the globe is touching the top and the country name is in the center
‫of this whole thing.
‫OK, we can control this.
‫Since we are using Flexbox, we can do a lot of thing.
‫But let me jump here first and see my dogs.
‫So we have this eye dog and then we have this pen.
‫OK, so first, we need to control this van.
‫Add some padding so we can have some space on left and right side.
‫Select decoder, then I have my location.
‫And then I have my Spanta and let me add finding.
‫I zero on the top and one room on the left and right.
‫So this is going to have some space.
‫This looks better.
‫The other thing I need to change is remember the global icon.
‫So all I have to do is again, select the item.
‫So this is going to be shorter than my dog and head.
‫I just need to align self center.
‫Why?
‫Because up period is flex.
‫Currently the parent of this is Flex.
‫This whole location is following the Flex.
‫So this is going to be an item on I can utilize all the properties that I'm following and we can do
‫this and I'll save this one.
‫Get back in.
‫OK, now this looks fine.
‫Exactly like this, and I need to add our effect.
‫OK.
‫This should be simple.
‫All I have to do is just select the location, complete location itself and what effect?
‫What a dark location.
‫And remember, this is going to be ours.
‫I just need large property.
‫And there are going to be two changes the cursor as well as the color.
‫So just add it to save this one getting back.
‫This looks fine.
‫OK.
‫This was great.
‫Now we have to just follow the last part, which is going to be this.
‫And there are a few common changes that we need to do.
‫We need to change to flex our a direction that is going to be flex direction and then we are going to
‫control both of them.
‫Also, I need to change to flex so I can have all of them horizontally together.
‫So this is going to work fine.
‫I need I can do this quickly.
‫I just need to select the porter.
‫Select the extras.
‫This is next, right?
‫Oh, OK, yeah.
‫So I just need to select that and also where it is going to be a hundred percent.
‫So I just need to.
‫I read 200 percent and then I just need to display this is going to be flags.
‫Then I just need to utilize the justified content.
‫I need to add space between them so I can save space between.
‫And I also need to follow data property so they can be up and down when we are trying to go responsive.
‫So right click and inspect.
‫Try this one.
‫You can see this is the first part.
‫This is the second part.
‫This is the first part, this is the second part that looks fine, so I'm going to add Rob saved this
‫one.
‫So this should be the basic property for our.
‫Do S. know this and this?
‫OK, this looks fine to me.
‫Comparing to this year, there should be some margin at the top, we will add it later.
‫I need to change the font size, I need to change the color.
‫And I also need to make them follow the rule pattern.
‫I'll get back here and simply, I just need to select the world first.
‫So when you select the photo, I'm going to select the extras you will Barton.
‫Now had the first property, I'm going to apply this displaced legs so you can have the full property
‫of road.
‫The other thing I'm going to apply is flex it up, so if we try to decrease screen size, things will
‫work fine.
‫The next thing I'm going to take some margin, so I want to earn margin on the right side so we can
‫maintain the space between the last company indexed as well as our current extra length.
‫Let me discuss about this in a minute, so let me jump in.
‫Scroll down, you can see this is how our current extra links are.
‫And this is the current company name.
‫I right click here, click on Inspect and go to you, and now you can see the Orange.
‫This is the margin, so if I try to decrease the size by any time we have this pretty close, we will
‫have some margin here.
‫You can see this extra space and that is the reason I have it.
‫So this extra margin is going to help us a lot.
‫Why did time not resizing?
‫OK, this looks fine.
‫Now there are certain changes that we need to do like I need to change font size, so I definitely need
‫to jump on to my lighter.
‫I also need to change the color.
‫I also need to change the padding since we need to add some space between them.
‫So what we can do is we can utilize this U.N. and we can just add and light and had I need to add font
‫size first, so I'm going to go with 1.1m.
‫The second thing I'm going to change is my color, and this is pretty common now.
‫And the third thing is, I'm going to add some padding and I'm going to go with one room, save this
‫one and get back here.
‫OK, much better.
‫You can see that's how we are walking.
‫We also need to update for this.
‫That means the company name, all I have to do is call or something similar, but this time span.
‫So let me copy this one.
‫And had instead you well, I'm going to go respond and I need to ask somewhat similar setting, but
‫there will be few changes.
‫The first thing is it's going to be 1.2m calories going to remain same.
‫Then I need to add padding.
‫But on the right side, you see there is some gap between U.S. and had this space.
‫So let me add padding to the right, save this one, get back here.
‫Now this is working better, right click here.
‫OK.
‫There is some issue.
‫This is not at this center.
‫So we have a property since this is a child of this man is a child of flex class.
‫So what we can do is we can add online self assets and save this one.
‫Get back here.
‫OK, so now this is art center itself, and we have some extra space, if you see the purple part.
‫This is the extra space and we can do costume changes if we want, we can see a flex crew.
‫This is going to take extra space now, but we need some extra space.
‫So this is working fine.
‫And if you observe there is some margin here and we can change that.
‫So let me jump on to my solution lynx and had I should add some margin at the top.
‫So if you jump here, I can add some margin, either with my fuel or with my social.
‫So let me try again, go with my margin.
‫I need to hard with top and bottom and then left and right will be zero, save this one.
‫Looks better.
‫Yeah, the background is changing because in our clone website, this is our clone.
‫We have respond to background, depend on this screen size.
‫We haven't applied that, but check this for the part only.
‫And this is great.
‫We have cloned it, and I hope you got the idea how we did it.
‫So if I try to minimize this, there are a lot of settings that we need to do, but we are doing well.
‫There are settings, there are settings that we need to fix.
‫But we are doing what?
‫So if I go with the Ford 50 that is approx the mobile size, we need to fix this, OK?
‫And if I go with this website, Benzie.
‫This change that soon as we go around or something, even on 600 cell.
‫So that's done that's done for the clone part, and this looks fine on our deck stock guarantee.
‫I should say on monitor or laptop next to you basically means, oh, screen size greater than 900 and
‫this looks great.
‫One thing I can change right now is maybe I'd flex here, but I don't think we need now because as soon
‫as I go with this size, I need to add a hamburger icon.
‫So if you see here, we need to change the height.
‫So let's add some hamburger icon.
‫So we will do these changes in the next part.
‫I hope you got the idea of what we did.
‫Make sure you try to do some practice.
‫This point with the Flexbox so you can have ideas about all the changes that we did.
‫Thank you for calling and I see you guys in the next one where we are going to discuss about responsiveness.
‫We are going to discuss about resizing on end.
‫Thank you for following and I see you in the next one.