‫You're welcome back.
‫Now let us start our task with this whole new section about our info and then all of this.
‫So recently we created our deal.
‫Now we need to work on it.
‫So we have added all we can do, which was required for this whole.
‫Now what I'm going to do is I'm going to replicate it four times and this should look something like
‫this.
‫These are the four boxes actually for the boxes.
‫Now this is how I develop.
‫That means our whole section.
‫So what I'm going to do is I'm going to utilize deflects so we can have everything on a horizontal direction.
‫That means these four device.
‫Then I'm going to utilize Flex again to keep them in sequence of column.
‫So this should be simple.
‫The first thing I need to do is just select my qualities.
‫Remember, I'm going to call this house has quality, if you remember.
‫I just need to select my qualities.
‫And had I'm going to go over display as flags, the second thing I'm going to do is justify our content.
‫So this is going to be spaced evenly.
‫And then I just need to utilize my flex it out properly, so whenever we are going to squeeze this,
‫it should be inoperable.
‫And then I'm going to add some margin.
‫So there will be a top margin, which has seven.
‫Then on the left hand side that has horizontal side, things should be auto.
‫And what will with and see if I save this one and go back here?
‫It's not walking, the problem here is we need some work at this point of time to work for this whole
‫team is 100 percent because of this description and all the other content.
‫What I'm going to do is I'm going to set up fit for this qualities.
‫That means that director.
‫So let's say the word is maybe let's take 250 Mixon.
‫Save this one and get back here.
‫Now you can see a talking point.
‫So we need to set some paperwork.
‫You can see 25 percent, maybe.
‫But this is not working fine.
‫Now let me add some background color and a few other properties so we can differentiate this.
‫So the first thing I'm going to do is add a background color.
‫Right now, this would be easily visible.
‫You can see.
‫Next door, I stopped the changes, so there will be margin that has won them on all these I.
‫Then I'm a big party and I need prodding of them on the top and bottom zero on the left and right.
‫And then I need a big border radius.
‫So I'm going to go over it going the extra save this one and get back.
‫I mean, looks good if you see this looks fine.
‫Now, if you want to visualize things better, right click here, let me take this down.
‫And the other thing is this now you can observe each and everything.
‫So the orange one is on margin.
‫Then this green one is our painting and then blue one is our content.
‫So I hope you got the idea.
‫This looks great.
‫Let me close this one now.
‫The other thing I need to do is I'm going to dig this inflects.
‫So that means this day also.
‫So what I'm going to do is I'm going to add our display as flex here.
‫And then remember, this time my flex direction will be column, so flex addiction should be called.
‫And then I can keep everything on center with the help of I line items so I can see a line items center.
‫Now this will help us to control horizontal.
‫Because we are using column, save this one and get back here looks good.
‫Now this is not going to bring any change, even if you remove this right now.
‫Things would be fine, exactly the same.
‫Why?
‫Because we are already utilizing next Alina's center.
‫The other thing that other property that I'm going to add is my walk shadow, which you remember we
‫discussed in the previous section itself.
‫So this bulkhead overhead must differentiate things much better.
‫Bruno looks good to me.
‫The other thing we need to do is just change this icon and heading, and then we need to add, transform,
‫add some spacing and don't stop attacking.
‫But let's quickly change the easiest stuff.
‫Selecting the icon and heading first.
‫So that question is about camera, then there is glow, then there is.
‫I wanted something.
‫And then there is a checklist.
‫This looks good.
‫Now let me quickly change the guidance.
‫Save this one.
‫Get back here.
‫Yeah, we did it.
‫Now we need to select each individual element that means these dogs and create the change.
‫So what I'm going to do is jump onto my standard cases now here, the first thing I'm going to do is
‫select my qualities and I'm going to select my Peter.
‫Now, what is this be done if you observe these are might be dogs?
‫So here I am, adding a simple property of margin top, actually some margin, top story.
‫That means there will be gap with top dog and top for each individual that looks better.
‫I hope you got the idea, what I just did.
‫Now I have option to walk with this icon.
‫This is going to me and my title and then description.
‫So let's let them so select this quality and then I have option to walk where I'm going because I have
‫already provided names here.
‫I'm going to walk with my icon.
‫So that first property that I want to include is background color so we can differentiate everything.
‫So if I go with background color, you can see this is the current position.
‫And let's change everything.
‫So here let me define our weight as well as height.
‫So let's take it as so intermix and height as well, which is going to be 70 pixel.
‫The other thing I'm going to take is one size so I can change the size of our icon.
‫Let's orient.
‫And then if you observe we got our icons with our background.
‫Let me quickly add border radius here.
‫So let's say border radius as 50 percent to make it soccer.
‫Looks good to me, but I need to make this icon at the center of this whole.
‫That means center of this, I'll.
‫What I can do is I can utilize property of Flexbox.
‫Will this place flags and then I can align it according to justify content.
‫So this will be center horizontally and then a line items.
‫So this will be center vertically.
‫If I jump back here, you can see now this is a center in the form of vertical as well as horizontal.
‫Oh, I need to move this whole item.
‫That means this icon at the center.
‫So the first thing we can do is we can change this do and have our display of Flex has recommended previously,
‫so we can say this is display as Flex and how we can set the direction as column.
‫Because this is deep, we need all item from top to bottom.
‫And now we will have a property of online items as saying, Don't save this one and get back here.
‫Now we will have a property of line self as anchor.
‫If I save this one and get back here, you can see this is working fine.
‫Remember this Alan Self is walking as a child property for this of.
‫So that's how we are going to work.
‫And we got this, we got this, everything looks good.
‫But I need to change background color for all of them.
‫So what I'm going to do is I'm going to add a class and I'm going to work on this as I go on one.
‫Similarly, I need to add an icon to icon three an icon for.
‫All I could do is change the color of what each individual icon.
‫So that means I just need to update it.
‫So here I need to include the background color that had save this one and get back here.
‫You can see it's working fine.
‫Offer this one on quickly based on her.
‫And if I jump back here now, if you observe things are working fine.
‫Yep, we definitely need to change the size of this description next.
‫Also, we need to add this transform property.
‫OK, let me do that quickly.
‫So the first thing is, let's update the description text.
‫So I just need to select this quantity and had I need to select the description part.
‫And all I have to do is add up one size.
‫1.6 rim.
‫And I need to change the color if I'm not using the teen color, if you observe, we need to copy this
‫one.
‫OK, everything is working fine, looks good to me.
‫We just need to transform that should be easy.
‫So I just need to jump on like one here and I just need to add our property.
‫So this is my corner and I need to ask how I affect.
‫Now on Howard, I need to transform and I need to scale it, so that means.
‫TRANSCOM had I'm going to scale it one point one from all directions, so if I jump there, okay, this
‫is working great, but if you see the transition is different.
‫Here we are, just directly scaling.
‫We need to add a transition because our snow covered transition.
‫Now we know these things, we can do this select all because we just have one property in the direction
‫of 0.5 second.
‫And then you can take that ease and ease out.
‫And if you remember about cubic business, you can utilize that.
‫So save this one.
‫Or this is too slow.
‫Let me take a property from CB.
‫Send this on to visualize this again.
‫OK.
‫Walking Point.
‫Looks good to me, I just need to change the font weight for this next.
‫Get back here and here I need to select the main line on I should sit tight and.
‫Spider, right?
‫I hope so.
‫Yeah, I do.
‫So now had I just need to change the font, we.
‫Let's call it 400 or 500.
‫Often walking fine, everything looks good to me.
‫So that's all for this whole section, I hope you got the idea what we just did, and now we need to
‫move on to this whole section, which is following theses grid.
‫And this is going to be interesting.
‫One of my favorite section because you are going to face a lot of problem.
‫So that's all for now.
‫Let's jump on to the next section, basically in the next lecture.
‫Thank you for calling, and I see you guys in the next one.