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

af Afrikaans
ak Akan
sq Albanian
am Amharic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
ceb Cebuano
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hmn Hmong
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranรฎ)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
lb Luxembourgish
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
my Myanmar (Burmese)
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian
pl Polish
pt-BR Portuguese (Brazil)
pt Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
sm Samoan
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu

Original subtitles

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.

Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.