‫Hey, there.
‫Welcome back.
‫Now let us continue our task with the that part.
‫So if I get back here, there are few steps that I think you already have understanding about.
‫The first thing is we are going to give size to our container because currently it is going to spread
‫towards 100 percent.
‫So what I'm going to do is give us a two hour container and also give our displace flex so I can have
‫my water way than my legs than my social media and every other thing.
‫So we are going to work on this section was this particular part, which is going to be local links
‫and social media.
‫I'm going to comment the last two division parts.
‫That's done, and you can utilize our section hand or you can utilize that depend on you.
‫I'm going to replace this with section.
‫OK, this looks fine, so we have a section and we have the item.
‫Let me get back here.
‫And the first thing I'm going to do is I'm going to select my photo and then my section with a class
‫of container.
‫This looks fine, so we have start inserting the question is going to be about our work, so that could
‫be 90 percent.
‫The second one will be about our margin, so I need to give a margin as auto and then the third one
‫will be about our display, which is going to be flex.
‫Save this one.
‫Get back here.
‫OK, now this looks fine, so we have these three items that means these are no child for this flex
‫or this container, basically.
‫Now we can utilize different properties.
‫So the first property I'm going to utilize is definitely going to be justified content and I'm going
‫to add our space evenly.
‫So it will have gaps between all of the items you can see.
‫Now, I can also add different other parts, like banning that we will discuss later because you can
‫see there is some top space, I can add that also remember the property of Grab because if I click on
‫Inspect and if I try to minimize this, you can see all of these items are going down.
‫Or I should say Nicastro, because of their property.
‫So it's an important property.
‫Make sure you remember about it.
‫So here, let me add the wrap property all after the US just mention Flex Wrap as up and save this one.
‫There will be few changes that we can implement later, but that's good for now.
‫And this is looking fine.
‫OK, not fine, but OK, we are working on it.
‫The next thing is, I need to work on this because here you can see these are three different parts.
‫So what actually happened is if we jump here, we opened this link, and if I say this is flex now,
‫then all of them will be.
‫Item what I should say child, and then we can control them.
‫So what I'm going to do is I'm going to convert this link into Flex property.
‫So the basic thing I can do is I can utilize fodder and then I can directly select Link.
‫And had I just need to pass displays flags, and if I saved this one.
‫Now you can see I have this first, second as a as third column.
‫Now, at this point of time, we don't have much space on.
‫Also one important thing I recommend just click on Inspect.
‫Jump onto your hotel part and this section and then click on Flex, so you will see how they have distributed
‫all the items.
‫So there is some blank space, blank space, blank space and blank space.
‫Now remember the property of Flex Group.
‫We can utilize Flex Group for this particular section, so that means all the extra space can be distributed
‫among this.
‫So if I jump pad and if I use a property as the first property, I want to artist flex it up because
‫I want to have them responsive.
‫And the second property I want to artist Flex Grow.
‫Now, why I can apply this properly flex group, because we are a child of this country now, remember
‫this is an item for this container and I can say to save this one and get back here and you will see
‫the change now.
‫If I jump onto this section, click on this flex.
‫Now you don't see any type of extra space.
‫Why?
‫Because Flex Grow is distributing the extra space here later on.
‫I'm also going to utilize that space with our social icon.
‫We don't need space for our logo, but we need space for these two section.
‫OK, that said, I just need to arrange this properly now.
‫So let me get back.
‫And said I just need to first and justify content because I need to distribute all the columns, so
‫I'm going to utilize space evenly and save this one.
‫Get back here.
‫Hey, you can see now all three are distributed properly.
‫One change I need to do right now is about their phone size so we can visualize them better.
‫So all I have to do is just first jump here and I'm going to select the L.A..
‫Which is going to be fodder.
‫And inside that, I have links.
‫I have the world tag L.A. done.
‫And then inside that I can change the font size and I'm going to go with five rim.
‫And if I try this one?
‫OK, much better.
‫Now you can see some similarity.
‫I need to change the size for this.
‫Oh, OK.
‫Let me select that.
‫So remember, we have attached hiding.
‫That means that class as hurting, you can see.
‫So what we can do is we can override law nothing.
‫So I have to do is just select this.
‫And interrupt and I can directly select the class which is heading and I can change the color.
‫OK.
‫This looks dark somewhat, and then I'm going to change the font weight.
‫This is going to be 700.
‫The third thing I'm going to change is font size, and if I go over the 1.8m, this should look fine.
‫Remember, this is one point five and this is one point three.
‫Get back here.
‫You see, this is much better now.
‫OK, this looks fine, so we have a basic said about that photo.
‫Let me also add some top margin and bottom margin, or I should say padding here.
‫So let me jump on to my for the part and let me get inside my container and add some padding so that
‫I'm going to our fighting towards it.
‫Always going to be six a.m. Then right is going to be zero.
‫Bottom is going to be for them and then left, there's going to be zero.
‫And if I see this one jump back here, OK, I have some space on the top and bottom.
‫Now let me jump here on this particular section.
‫Why if I right click here again, I'm going to jump onto this flex button.
‫What this section actually let me do this.
‫Get inside the photo, select the container, click on Flex.
‫Now, if you observe maximum spaces distributed for our second section, and that is obvious because
‫we have utilized the flex good option, if I try to give them proper space, I just need to add content
‫that I need to give them flex direction as law.
‫Also, I need to add some background like this.
‫There's a dark gray background, so I need to do certain changes.
‫So the first thing I'm going to do is I'm going to jump onto the section, I'm going to minimize this
‫link, getting to this solution and then we have these L.A. tags.
‫So all I have to do is just jump here.
‫And the first thing I'm going to do select the photo social.
‫And then I have you will house how I'm going to define this.
‫So if I said this is a display of flags, then all of them are going to be changed.
‫Now I can control them.
‫That means if this is flex, that means I can arrange their direction, flex direction, according to
‫the rule.
‫I can also arrange them horizontally as well as vertically.
‫So this is the first change that I'm going to apply, all I have to do is, yes, utilize display and
‫I'm going to go with legs.
‫And the other thing I can do is I can justify content and I'm going to justify them at center.
‫Save this one.
‫Get back here.
‫You can see now they are actually in our direction.
‫OK, this looks fine, but I need to improve their size, so remember, their size is dependent on deformed
‫size.
‫What we can do is we can change this size our own or ally or directly, I so ahead I'm going to select
‫the four and I'm like the light dog on inside that I can do anything.
‫The first thing I'm going to do is definitely change the font size, which is going to affect the entire
‫content.
‫Let me go with 2.6 2.6m.
‫Save this one.
‫Get back here.
‫Now we can see they are pretty big, but again, they don't have this background.
‫So since we have selected a lie, basically what I'm doing is I have this a lie dug and then inside
‫this, I have this.
‫What I can do is I can change the background controlling this a little.
‫Basically, what I can do is I can add a background colour.
‫I like to background colour something related to dark grey.
‫Once that is done, I can set our height as well as work, so maybe let's go with five point five rim
‫as well as width.
‫Let's go with five point five rim.
‫OK, now we have these different item, if I right click here.
‫You can see we have these three boxes.
‫Let me add some margin.
‫So what I'm going to do is I'm going to on margin top and bottom zero going now and left and right should
‫be 0.6.
‫Adam, get back here.
‫You can see now we have spaces.
‫Now here is one breakfast how I can center these icons here.
‫So we have a light bag and then in between that we have some content.
‫This will help you to understand we have laid dog and then we have this icon how you can center that.
‫Again, we are learning about flex walks.
‫You should know about this.
‫What we can do is we can say this dog as flex, and then we can utilize align line items as well as
‫justified content towards center.
‫So that's what we are going to do.
‫Let me utilize this as display flex.
‫I mean, and then I just need to add to property justified content center as well as align items at
‫center.
‫Save this one.
‫Get back here.
‫OK, we did it.
‫We did some pretty good tasks.
‫Now if you compare this ad, it's better.
‫We are moving forward with some better results.
‫But there is still one requirement the so-called.
‫What we can do is we can utilize the border radius, so had all I have to do is just add our border
‫radius, I can add it here, simply add border radius.
‫And I'm going to drive it 50 percent.
‫Get back here.
‫This is working well.
‫We are moving forward.
‫The other thing that you can notice is the spaces between them that is clearly visible.
‫Also the size of our current logo.
‫So I need to improve that.
‫So before moving forward to next lecture, let us quickly edit the Howard effect and add some spaces
‫that could ease our task for the next lecture.
‫So just add to what effect?
‫Let me get back here.
‫I just need to select the same item and then are our.
‫And had I just need to change the color, which is going to be the green.
‫And I just need to change the culture towards point.
‫So let me add it to get back.
‫Yup, talking.
‫I hope you got the idea, what we are trying to do, the other thing is horrific for them also as well
‫as these facing.
‫So first, let me fix the spacing here we have this L.A. So remember, currently we are only working
‫with the font size with, ah, L.A..
‫And let me try to add some padding.
‫Let me try to add one rim here.
‫Saved this one.
‫Get back here.
‫OK, I think I should add some more spaces.
‫Remember, you can always right click here any Web site and you can get information, so if I right
‫click here, there is acting, which is 1.3m.
‫You can see just by visiting all these inspect levels.
‫So if I jump here currently I'm utilizing this one room I can utilize 1.3, then get back here.
‫Much better result.
‫And if you observe, OK, we are much closer, but we still have some differences with these spaces.
‫So in the next lecture, the first thing we are going to do is just fix this lugosi's again and then
‫start working with the product changes.
‫I hope this lecture was helpful.
‫Now you have basic understanding about all these flags that we are doing inside the flags and basically
‫we are just walking with bad intent.
‫So thank you for calling and I see you guys in the next one.