‫Hey, dad.
‫Welcome back, Sharon, decide now in this lecture here to start our journey with a new section now.
‫Now here in this section, we are utilizing sixth group to create this example.
‫This should be simple because we are going to have multiple grades and we can arrange them, according
‫to our columns, Andrew.
‫I'm going to call this section maybe walking because we are going to explain why this app is good or
‫why this whole start up is quote.
‫So let's start with this structure.
‫Let me squeeze this up, this is our growth and let me create a new section called section.
‫Let me call this action us walking.
‫I'm also going to include the container here.
‫Looks good to me.
‫And now we are going to have two major section, the first one is about this whole thing.
‫This whole section, which is basically text, then we are going to have this section, which is going
‫to contain all items that we are going to utilize and are great.
‫So let's jump here.
‫And the first thing is, I'm going to create a division and I'm going to call this ask content.
‫So there will be a dog, which will be my dog line.
‫Then there will be another dog, which will be about my main line.
‫Then there will be another dog, which is going to be my description.
‫We have been following this structure for a while now, we are going to create another division and
‫I'm going to call this house, maybe demo or maybe anything else, that's a demo and then we are going
‫to have multiple items, all of them.
‫So we are going to realize he it's great to have.
‫This should be easy.
‫Let me jump back here now inside demo.
‫I'm going to add multiple items and call them as I demand to try and keep on calling.
‫Remember one point this is going to be eight on one two three, and then I'm going to call this as image
‫then item four, five and six.
‫I know a bunch of you don't remember this Greg properly, so let's try to implement and discuss about
‫it as we move forward.
‫But before adding content inside our demo section, let's complete this one.
‫So all I have to do is post add my heading, which is going to be about why high school I remember high
‫schoolers start up name.
‫The second thing is about our mainline.
‫Which is going to be our structure learning, and then we are going to have our description.
‫So let me add my description here.
‫Save this one and this looks quite.
‫Get back here.
‫So this is the content we need to update several things, so first, let me get back here.
‫Here, I need to select my walking section and I'm going to add fighting dog and RAM because we need
‫space.
‫The second thing is I'm going to select my content.
‫Which is inside my walking itself, so I'm going to select this content and head, I'm going to change
‫the font size.
‫Let's say a font size asked to read.
‫The next thing is I'm going to align all the content at center.
‫So desk looks quite.
‫The next thing I'm going to do is I need to select my timeline than my main line as well as description.
‫So let me select my tag line here.
‫Now there will be a few things.
‫The first thing is about my phone size.
‫The tagline font size will be for them.
‫The second thing is about my font we I need to go around 600.
‫And then my going to.
‫Now, since this is a tagline, I'm going to go with maybe this one, the Sistine colored.
‫Going to war with Iraq, save this one.
‫Looks good to me.
‫My high school over here, I need to utilize the next one team next.
‫Yeah, this one.
‫Now I need to update both of them.
‫Let me quickly do that.
‫Select the content and then I'm going to have my email line and I just need to change the font size,
‫which is going to be three RAM.
‫No one will be my opponent quick, which is going to be 600.
‫And then again, there will be a different color.
‫Now, this time the killer will be about my team.
‫So I just need to use fraud and then there will be team color.
‫And I need to add some margin bottom line in this space between this main line as well as the description.
‫So let me go with my description here.
‫Simply select the description I made my -- sites to do them.
‫The next thing is going to be about color.
‫And I remember its long description.
‫So this is going to be paying text long.
‫Crane, I knew you square and team text long.
‫The other thing is I need to add some miles in water, which is going to save this one and get back
‫here.
‫Looks good.
‫Yeah.
‫There is no space here, so we can change that, but I think everything except this space looks good.
‫Nick Marks space for a while.
‫Now here is our demo section.
‫Now remember, this demo section is going to follow.
‫This is great and we are going to have multiple items.
‫So the first thing I'm going to do is I'm going to define the structure for each item here, and that
‫can be creative.
‫And I'm going to call this as item one.
‫So in this, I don't want I'm going to have to be done with tighter.
‫And then again, I'm going to have a done with less corruption.
‫Now, why did this title and description, because we are going to have this Typekit and this description?
‫The other thing is if you observe this whole section, this whole section currently following the arraignment
‫of right, whereas this whole section is forming the alignment of left, remember this?
‫So let me add, a property has moved right.
‫That means all the decks that should move towards the right side.
‫OK.
‫So these are the two properties.
‫And let me add some some context here.
‫Let me say that this is your support and let me add some item here.
‫OK, this looks good.
‫I need to copy this one at least three times.
‫This is going to be item two.
‫This is going to be item three.
‫And again, I need to change the text.
‫Let me first track session and then there will be gamified learning.
‫So these are the three part.
‫These are the tea partier.
‫Now we need to image at the center, remember, we haven't applied any day debuffs system, not for
‫this whole section.
‫So I'm going to add the image, I am going to my media and here I need to select my feet for.
‫See, and I'm going to call this as class.
‫That image.
‫It was good to me then I knew to create these three.
‫So what I'm going to do is I'm going to copy this.
‫Add this hair and change the item.
‫This is going to be for this is going to be a fight and this is going to be six.
‫I can also say this as item, but this will confuse.
‫I hope you got the idea.
‫Let me quickly change the text, which is not necessary right now, but let me do that.
‫So this will be gamified, this will be.
‫Practical examples.
‫And this will be on American access on things like this, save this one.
‫Get back here.
‫So now we have this part.
‫This is our image and this box.
‫OK, so we have added all the content now we need to do with our success.
‫So what I'm going to do is I simply need to select the demo first.
‫Now inside this demo, I need to add crude because I went to a glacier, says Greg, and then I need
‫to set the template.
‫What I'm going to start with is template column, one I find for my first column, 0.85 or my second
‫and then one after or my third.
‫What I mean by that this is going to be one that for this is going to be zero point eight.
‫This is going to be one.
‫If I if I right click here, I can show you better with this whole credit system.
‫If you observe this, this is your one after this is you will see it happen.
‫And this is your one at what looks good.
‫Let me get back here.
‫Now I need to select my rules, so I'm going to go over grid template rules and here I'm going to repeat
‫one half hour or three of them.
‫So this is going to be three times one at.
‫Looks good to me.
‫Oh, I need to utilize areas to define each block.
‫That means we have defined this rule column everything, but now we need to define which item they stay
‫here, here, here and everywhere else.
‫So what I can do is I can utilize.
‫Great template areas.
‫This is going to be our great template areas.
‫And now we can define the first three blocks.
‫That means this one, this one and this one.
‫What I'm going to do is I'm going to say item one.
‫Then it will be my image and then item four.
‫Remember this one item one my image?
‫Item four.
‫Similarly, now we need to follow with the other three part.
‫Said I need you to.
‫All right.
‫Do I know five?
‫And then I done three and I had six.
‫What I did is now this is item two, image item five, item three, image item six.
‫I need to add some gap here.
‫So what I can do is I can utilize gap.
‫Which is going to be wondering now if I save this one?
‫Get back here.
‫OK.
‫Now you can see things are not arranged right now.
‫Why?
‫Because we haven't given the area name if remember, this whole name doesn't exist right now, we need
‫to provide this name to each individual class.
‫Currently, we are assuming that the name of this class, the green area name, will be item one, but
‫it's not.
‫We need to send this.
‫That means I need to look like I need to select this item one and remember, I need to add a name,
‫which is great area, and I need to provide on names I don't want.
‫Now this is the name which is walking, and I need to do this with every single item.
‫And let me select this demo for us.
‫So the tech demo and then I.
‫This is going to be two.
‫Then this will be my image.
‫This is going to be five.
‫And this is going to be a six if I save this one.
‫Get back here now you can see this is working fine.
‫So that's how this whole thing is going to work.
‫We still need to do a lot of improvement.
‫That means we need to add fixed alignment.
‫We also need to update the sizes.
‫So what I'm going to do is here, I'm going to jump in and I'm going to select the first thing which
‫is going to be the more dark title.
‫And here I'm going to change the font size, which is going to be for them.
‫The other thing I'm going to update is my color and I'm going to select the pink color.
‫No, I remember them, and I need to change the default rate, which is going to be six hundred looks
‫good to me.
‫This should be fine.
‫Let me go with the other one, which is going to be the description and head.
‫I just need to change the font size, which is going to be 1.8.
‫The other thing I need to change is going to be my color.
‫I'm going to take like an air.
‫I just need this big Team X and it should be long.
‫Save this one.
‫And if I get back here, you can see and if you observe, things are looking good.
‫Yeah, there will be certain changes that we still need to do, but it's much better.
‫One quick thing I can do is I can add an alignment so that I can select our demo and pricing move,
‫right?
‫And this should be a text line that should be.
‫Right.
‫Save the Swan and get back in.
‫Looks good.
‫But again, I need to change this all the time.
‫All right, and this will be more.
‫By default, exceptionalism.
‫That's not an issue.
‫The other thing is it's currently taking too much space.
‫I don't need to stretch this long.
‫So if I click here and if you observe this is you dog this dude, this is taking too much space.
‫And the reason is because of this image.
‫This image is taking maybe a height of, let's say, 100.
‫Now this height is divided among them, which is 33, 33 and 33.
‫So what I can do is I can change the image height, or I can control the image height.
‫For example, let's say the stakes are high.
‫You can see how he does maybe 200, except for now.
‫I see this extra gap between these photograph is gone.
‫So here we can definitely control this.
‫I know you finished this one.
‫The first thing I'm going to do is add some padding on all these sides of image.
‫So I don't touch anything, so what I'm going to do is here, I'm going to get into my image.
‫This is the image that we have and had, I can simply are finding that will automatically add some space
‫on all these side.
‫You know, so this is done on midnight, click here and going to the image, OK, looks good, but I
‫think this is taking too much space.
‫If you observe this great right now, we said This is wonderful.
‫This is 0.84 and this is wonderful.
‫But if you visually observe this is less than a midsize, that means images extending too much.
‫What we can do is we can just take this, we can add our top 100 plus and save this one.
‫And if I get back here.
‫Yup.
‫Things are looking much better.
‫Yes, it's working great, and I think this is good now, this is good enough.
‫The only thing is here we need to add some space and we need to add this floating mark.
‫Yup.
‫But to add my experience, I just need to visit my demo to add space, I just need to increase this
‫from two to five rpm, which is my description.
‫This looks good.
‫The other thing is quickly add this whole thing.
‫So what I'm going to do is you jump in.
‫And I can die apart inside my world, so I can just imagine.
‫I already have this inside my media, inside my ship and head.
‫I need to r.b.g ship.
‫Let's see what is the Navy utilized earlier.
‫So if you scroll up a bit.
‫We utilize float be.
‫And help me, IRA Glass, and I'm going to call this House floor B.G..
‫Great, now I can utilize this one, and I also need to update this memo.
‫So here is my demo here, I'm going to see a position as relative because I am going to play with a
‫child that is going to be my float B.G., which is definitely inside my demo.
‫And here I'm going to change the setting.
‫This is going to be positioned on and this will be absolute.
‫And then I can select all the properties like I can go in the bottom.
‫And this is going to be 100 pixels.
‫The other thing is going to be right, which is going to be five.
‫And then remember to add sitting next.
‫Otherwise, these will cover your content if I get back here.
‫Yup, this is.
‫Now remember how we added here, we just changed it to absolute and then bottom.
‫And then, right, OK, now I need to add some animation so this can rotate here if you observe this
‫is rotating.
‫OK, so what I need to do is I simply need to add animation had let me call this as it.
‫Duration, let's say, three seconds and then timing function should be, is Billy, let's use again,
‫I try and find out which direction alternate.
‫And there is not many more.
‫They sure do our plane, but we need to add a keyframe.
‫So and I just need to utilize it, OK?
‫At zero percent.
‫Remember what we are going to do with renewed high need to realize transforming.
‫Here, I just need to rotate.
‫And since we are rotating the complete item, that means the complete image.
‫I just need to realize routine.
‫Otherwise if I'm moving, according to X-axis Y-axis, then I need to utilize X on Y.
‫I can rotate and stop with zero degrees at zero percent at 100 percent.
‫Let's transform this and then rotate again and rotated in 1990.
‫And if I save this one it back here.
‫You can see this as a talking point.
‫Remember, this is rotating the 90 degree only here we can update things, we can change things in terms
‫of speed or anything else if you want.
‫So and I can see maybe five seconds, so this will be much slower.
‫Now you can also add bounce property if you want or anything else.
‫But I think this section is enough.
‫I just need to add some spacing here if required.
‫So that's all for this section.
‫I hope you got the idea.
‫How we utilize CSI is great.
‫Thank you for calling.
‫And I see you guys ready for the one.
‫That's going to be fun because we are going to realize, as we do as winners, Flexbox.
‫Thank you for following.
‫I hope this was helpful and I see you guys in the next one.