All language subtitles for 21. Making the Homepage Responsive (1)

Right.

So if I refresh the page once more, we should be able to see the animation.

There are a lot of animations over here, right?

So you can see the animations and the more you move, the more animations are there, which is pretty

awesome for people visiting the website.

Now over here, let's go ahead and achieve these animations, the same level of animations.

So I'm going to go over here and the first, the first column, the entire column, I'm going to click

on it and I want you to go to Advanced.

Now, the column actually contains the headings, the person, the button, everything.

So if you add an animation, it's going to add an animation to all the elements as opposed to if you

go and add an animation per element, it's going to take you some time and it's just like doing the

same thing four times.

So over here I'm going to go to motion effects and entrance animation.

I'm going to make it fade in.

Fade in is not really cool.

Maybe let's try with something like bouncing down, right?

Kind of like this.

Now I'm going to click on this individual person and let me go to Advanced over here to Motion Effects.

And I'm going to give him a a different animation.

Now, here, zoom in.

Left.

Bouncing, right?

A bouncing left instead or bouncing right is pretty good.

Right.

So I'm just going to keep it now over here on the update and let me scroll down over here.

So I'm going to click this entire section.

Now I'm going to add an animation to the entire section.

I'm gonna go to motion effects.

Let me scroll down here and I'm going to make it not zoom in, but bounce in kind of like this.

Now over here, I'm going to click this element.

Let me go to Advanced.

Scroll down to background.

It should be the motion effects.

Let me click on motion effects up here and it should fade in from left like this.

And this one over here should bounce in.

I'm going to go to motion effects default, scroll down, bounce in kind of like this.

And so I think this is pretty cool.

Now over here, if I go to mission statement, I'm going to click on it, go to Advanced.

And over here let me go to Motion Effects Entrance animation Fade in from the left.

Or instead fading from the left is pretty cool.

And over here, this one is well, should be fading from the left, which is the description.

So I'm going to go to motion effects fading left over here.

As far as the button, I'm going to make it pulse, so I'm going to click on the button.

Right up here.

Normally I should be able to select it.

And if I can't click on it, I'm going to use my navigator.

Now let's use the navigator over here.

Now we are on the third section.

If I'm correct, I'm just going to drag these.

So this is the third section of the post blocks.

Now the fourth section.

I'm sorry, not the third.

I'm going to click on the button from here and let me go to Advanced Motion Effects.

And over here, we will make this make this pulse.

Right.

So let's just go to Pulse, right?

So kind of like this.

It doesn't really look pretty good.

Let's try with flash and see.

I think pulse is better.

Right.

So update.

Let me keep my navigator up there in case I need it.

Let me just make it a little smaller here.

I can't.

Well, okay, so let me go here and click here on the about us.

In the about us here.

I'm going to go here motion effects and I'm going to fade in from the right.

Fade in.

Right?

And over here as well.

I'm going to go to motion effects.

Motion effects fade in.

Right.

And this one here should pose kind of similar to the other one.

Now, you can do one thing, which is pretty cool.

You can copy this button style by clicking on this button.

You can copy and I can come down over here.

This is a trick and you can click here and paste style and it will paste the style of the button.

Now let's see if it pasted the animation as well.

Yes, it did.

Animation duration.

Let's try with fast for this one.

Right.

Well, let's get it back to normal.

Right.

So update.

So right now we have our animations, which are pretty cool.

Now, what is left for us to do is I think I didn't add an animation for the guy here, so let me just

click on him.

Right.

So image advanced.

If we go to motion effects now, he should be zoomed in kind of like this.

Update And I should add, like I've added over here, I should add a separator between sections.

So let's go ahead and add a divider.

This is pretty easy.

So I'm just going to go ahead and click on each section from here.

Let me close the navigator first because it's just occupying space.

Let me click here and I want to go to Advanced.

Right.

It's not there.

Let's go to style.

In fact, scroll down, click on Shape Divider.

And at the bottom, click bottom.

And click here Tilt.

Tilt opacity.

Right.

And there we go.

Now you can add different dividers, for example, split.

There are a lot of dividers up there.

For example, waves pattern.

Now, pyramids, just a lot of patterns I'm going to go for instead of those, I'm going to go for tilt

opacity.

I like that better.

And if I scroll down up here, I'm going to click this one as well.

Go to style, scroll down.

Shape, divider, bottom and over here.

Tilt opacity.

Let me scroll down over here as well.

Click here.

Go to style, scroll down shape, divider bottom tilt opacity.

And let me just.

Now here it's not displaying.

So let me just click up here.

Let me go to style.

Go to shape Divider bottom tilt opacity.

Now, it's not appearing because maybe the background color here is white, but that doesn't really

affect our design.

Now, what's not really going well here is you can see this little detail here.

The camera is overlapping.

I don't like that.

So I'm going to click here on my section.

Now we're refining the website.

I'm going to scroll down here, position center, center attachment.

I'm going to keep it by default.

No repeat and display size should cover.

And this is much better, right?

You can see it's a lot more refined.

And so right now we have the animation set up.

What I can do is I can go here to preview changes and let's just see how good the website is, right?

So it's going to work.

The animations are working.

If I scroll down, animations are there.

It looks really like a like a like a bombardment of information, which is pretty cool.

I think the homepage is worked up to a good level.

So right now what we're going to do is we're going to go ahead and build an equally important page,

which is the blog page, and I want you to concentrate.

It's not going to be difficult, but concentrate because this is required for you.

And once you learn how to build the blog page in a way that we're going to do it, you're going to be

able to replicate that for multiple websites that you're going to be building in the future, because

a lot of people face problems when it comes to blogs.

And the problem here is that they're so easy.

It's so easy to make a blog look like this.

You have to just pay careful attention to what we're going to do.

So keep going.

And let's go ahead right now.

And let me just first of all here, click on the blog.

I want to click on the blog from the preview, and I'm going to click on Customize to go to the Customizer

so that we can continue customizing the blog.