Now, in this video, we're going to create and style our header, so let's first of all, going to
our e-mail because you still need to create it.
And also right after navigation and typing in here, comment of Heather.
Oh, Heather Element is actually pretty simple.
We're just going to create a header that won a header tag.
And also Heather Idee.
Within our Heather idea, we're going to create R.H. for and we're going to give it the title of hello
and welcome to and then we're going to create a each one is actually going to be Title C.
S.
S Free Animation's.
And then we're going to create a break after break, tech eight and percent and.
Not a break tag and then transitions.
And I each one, we're going to go down here and create a pattern.
And this will have a class of beat, the end and another class of pity and plus.
And also the castle over.
Everything a button going to type in any meat.
OK, so that's basically it for e-mail.
Now let's go into our success and start signing this, not as a comment of Heather.
So know what section is styled within here.
And isn't going to take the heather it, so Heather, now let's position this absolute.
We're going to position it from the top 50 percent and from the left, 30 percent.
So let's quickly take a look at this.
This finished project.
There's our project, so it's positioned.
Left and though it's not entirely safe.
Now it's positioned left 30 percent and from the top 50 percent.
And also want to give this a translate to transform.
And translate on the y axis of minus 50.
Precent.
OK, now let's change the color to hash, say, white collar as displayed as flex.
And this change reflects the direction to a column.
Not I can take the H1 within this.
So our title right here, this one, and it's targeted now let's change the font size, first of all,
to three right now, five.
I'm sorry about that.
Five minutes.
Let's have a real large font size for this.
Then I'm going to give it a margin from top and bottom of three ram and zero left and right.
So it has a bit more space between our subtitle here and more space between.
The button also has increase the letter spacing.
And if we do this one pixel, well, this isn't what I wanted.
I just jumped to our e-mail one pixel.
So they're a bit more space in between the letters and also let's give it the texture in order for it
to pop out a bit from pixel, one pixel and two pixels and the color of hash.
Rififi now for the font family going to choose that space to make sure I think I gave it to the entire
body.
But Rudolph says, I'm going to carpet this and paste it down here.
But without the sensitive.
I just want to get a good job, Morrocco.
Okay, let's go pick up a body and copy this.
They sit in here and that's it.
So let's take a look at this.
Oh, it was a of sense.
Oops, sorry about that, Sentsov.
That's it, safe and yep, that's much better.
OK, next up, we're going to take this button and why do I have one XP?
Oh, because I jumped into the e-mail.
Oh, sorry.
This, again, is gone.
Now, the button already has this hover effect.
And also have the active effect because we targeted the button class as we created this effect.
OK, so already we have some effects without doing anything, only applying classes, predefined so-called
utility classes, but now want the button to have us take a look at the finished project, this pulse
effect.
Now, we'll create this using a keyframe let's go back, first of all to a project and then go into
access.
Now let's go to Keyframe, which will mimic that pulsation.
So at Keyframe am going to call this pulse.
And this is going to go from zero percent with the opacity of zero, and I'm going to copy this four
times.
Not outside there, but inside of defense.
One, two, three, four.
This would be 30 percent.
I just jump to us again.
So this will be 40 percent, then 70 percent and then 100 percent.
And at 30 and 40 percent, it's going to be the one that a seventh is going to be zero.
And at 100 it's going to be a positive one again.
Now, let's grab onto the class of Bitti and Dash palls.
There's the class that we assigned to our second Bethanne there.
Now we're going to use the shorthand animation, going to call on the name Pulse, that adoration of
three seconds.
I'm also going to go with Kubic.
I think I go to the bazaar of zero point seventy five, then zero point eighty two and zero point one
hundred sixty one and one.
And I'm also going to to set this as infinite.
So let's take a look at our button that already have.
Why isn't this working all week, downtown animation to tap in the classroom, Puttnam Plus plus Pulse,
Al and else, so now it's pulsing.
Excellent.
Now, my question is, how do we stop it?
Because as you can see, I Hollerith in our face project, it stops is not longer pulsing.
Well, this is pretty simple for so go back to our website, see how it still pulsing.
We don't want that.
We're going to go into a success and then to take a button off pulse beat and pulse.
Why, to put it between brackets is not a no rate, is not JavaScript.
So just that impulse plus your pulse.
And we're going to set our animation to non.
Oh, and of course, I mean Hollywood, so as soon as we hit, save and take a look in our project,
if we follow a button, then it has no more animation.
OK, so that's basically it for the head of.