1
00:00:00,710 --> 00:00:05,870
Now, in this video, we're going to create and style our header, so let's first of all, going to

2
00:00:05,870 --> 00:00:08,140
our e-mail because you still need to create it.

3
00:00:09,110 --> 00:00:14,420
And also right after navigation and typing in here, comment of Heather.

4
00:00:15,470 --> 00:00:17,590
Oh, Heather Element is actually pretty simple.

5
00:00:17,600 --> 00:00:22,910
We're just going to create a header that won a header tag.

6
00:00:24,010 --> 00:00:25,930
And also Heather Idee.

7
00:00:29,040 --> 00:00:35,790
Within our Heather idea, we're going to create R.H. for and we're going to give it the title of hello

8
00:00:36,540 --> 00:00:45,930
and welcome to and then we're going to create a each one is actually going to be Title C.

9
00:00:45,930 --> 00:00:46,350
S.

10
00:00:46,350 --> 00:00:48,270
S Free Animation's.

11
00:00:52,940 --> 00:01:00,260
And then we're going to create a break after break, tech eight and percent and.

12
00:01:02,240 --> 00:01:05,440
Not a break tag and then transitions.

13
00:01:09,400 --> 00:01:14,050
And I each one, we're going to go down here and create a pattern.

14
00:01:16,120 --> 00:01:23,260
And this will have a class of beat, the end and another class of pity and plus.

15
00:01:26,490 --> 00:01:29,190
And also the castle over.

16
00:01:31,490 --> 00:01:34,930
Everything a button going to type in any meat.

17
00:01:37,040 --> 00:01:39,060
OK, so that's basically it for e-mail.

18
00:01:39,440 --> 00:01:45,800
Now let's go into our success and start signing this, not as a comment of Heather.

19
00:01:46,400 --> 00:01:49,190
So know what section is styled within here.

20
00:01:50,890 --> 00:01:57,490
And isn't going to take the heather it, so Heather, now let's position this absolute.

21
00:02:03,060 --> 00:02:12,150
We're going to position it from the top 50 percent and from the left, 30 percent.

22
00:02:14,170 --> 00:02:16,450
So let's quickly take a look at this.

23
00:02:16,790 --> 00:02:17,880
This finished project.

24
00:02:17,890 --> 00:02:21,670
There's our project, so it's positioned.

25
00:02:23,170 --> 00:02:27,590
Left and though it's not entirely safe.

26
00:02:29,180 --> 00:02:33,620
Now it's positioned left 30 percent and from the top 50 percent.

27
00:02:35,180 --> 00:02:39,500
And also want to give this a translate to transform.

28
00:02:40,570 --> 00:02:46,090
And translate on the y axis of minus 50.

29
00:02:49,790 --> 00:02:50,720
Precent.

30
00:02:55,690 --> 00:03:04,390
OK, now let's change the color to hash, say, white collar as displayed as flex.

31
00:03:05,880 --> 00:03:09,540
And this change reflects the direction to a column.

32
00:03:14,050 --> 00:03:16,180
Not I can take the H1 within this.

33
00:03:18,210 --> 00:03:27,690
So our title right here, this one, and it's targeted now let's change the font size, first of all,

34
00:03:27,690 --> 00:03:29,160
to three right now, five.

35
00:03:29,170 --> 00:03:30,240
I'm sorry about that.

36
00:03:30,840 --> 00:03:31,370
Five minutes.

37
00:03:31,380 --> 00:03:33,810
Let's have a real large font size for this.

38
00:03:35,130 --> 00:03:41,400
Then I'm going to give it a margin from top and bottom of three ram and zero left and right.

39
00:03:41,790 --> 00:03:47,100
So it has a bit more space between our subtitle here and more space between.

40
00:03:47,100 --> 00:03:50,300
The button also has increase the letter spacing.

41
00:03:50,700 --> 00:03:58,500
And if we do this one pixel, well, this isn't what I wanted.

42
00:03:58,560 --> 00:04:02,160
I just jumped to our e-mail one pixel.

43
00:04:02,670 --> 00:04:08,520
So they're a bit more space in between the letters and also let's give it the texture in order for it

44
00:04:08,520 --> 00:04:18,050
to pop out a bit from pixel, one pixel and two pixels and the color of hash.

45
00:04:18,060 --> 00:04:30,240
Rififi now for the font family going to choose that space to make sure I think I gave it to the entire

46
00:04:30,240 --> 00:04:30,810
body.

47
00:04:32,600 --> 00:04:38,030
But Rudolph says, I'm going to carpet this and paste it down here.

48
00:04:38,100 --> 00:04:39,590
But without the sensitive.

49
00:04:41,060 --> 00:04:44,090
I just want to get a good job, Morrocco.

50
00:04:45,270 --> 00:04:50,560
Okay, let's go pick up a body and copy this.

51
00:04:54,560 --> 00:04:57,230
They sit in here and that's it.

52
00:04:58,310 --> 00:04:59,970
So let's take a look at this.

53
00:04:59,990 --> 00:05:01,640
Oh, it was a of sense.

54
00:05:02,390 --> 00:05:05,660
Oops, sorry about that, Sentsov.

55
00:05:07,880 --> 00:05:10,300
That's it, safe and yep, that's much better.

56
00:05:11,980 --> 00:05:17,630
OK, next up, we're going to take this button and why do I have one XP?

57
00:05:18,170 --> 00:05:19,830
Oh, because I jumped into the e-mail.

58
00:05:19,920 --> 00:05:20,950
Oh, sorry.

59
00:05:22,200 --> 00:05:23,210
This, again, is gone.

60
00:05:24,800 --> 00:05:27,170
Now, the button already has this hover effect.

61
00:05:28,930 --> 00:05:37,000
And also have the active effect because we targeted the button class as we created this effect.

62
00:05:38,120 --> 00:05:45,260
OK, so already we have some effects without doing anything, only applying classes, predefined so-called

63
00:05:45,260 --> 00:05:53,270
utility classes, but now want the button to have us take a look at the finished project, this pulse

64
00:05:53,270 --> 00:05:53,700
effect.

65
00:05:53,730 --> 00:06:00,830
Now, we'll create this using a keyframe let's go back, first of all to a project and then go into

66
00:06:00,830 --> 00:06:01,530
access.

67
00:06:02,450 --> 00:06:06,950
Now let's go to Keyframe, which will mimic that pulsation.

68
00:06:07,580 --> 00:06:12,680
So at Keyframe am going to call this pulse.

69
00:06:14,240 --> 00:06:26,540
And this is going to go from zero percent with the opacity of zero, and I'm going to copy this four

70
00:06:26,540 --> 00:06:27,200
times.

71
00:06:28,890 --> 00:06:31,200
Not outside there, but inside of defense.

72
00:06:31,230 --> 00:06:32,130
One, two, three, four.

73
00:06:32,580 --> 00:06:34,270
This would be 30 percent.

74
00:06:35,520 --> 00:06:37,830
I just jump to us again.

75
00:06:38,130 --> 00:06:43,670
So this will be 40 percent, then 70 percent and then 100 percent.

76
00:06:44,160 --> 00:06:50,670
And at 30 and 40 percent, it's going to be the one that a seventh is going to be zero.

77
00:06:50,670 --> 00:06:53,610
And at 100 it's going to be a positive one again.

78
00:06:54,240 --> 00:06:59,760
Now, let's grab onto the class of Bitti and Dash palls.

79
00:07:01,440 --> 00:07:04,830
There's the class that we assigned to our second Bethanne there.

80
00:07:05,100 --> 00:07:11,040
Now we're going to use the shorthand animation, going to call on the name Pulse, that adoration of

81
00:07:11,040 --> 00:07:11,840
three seconds.

82
00:07:12,480 --> 00:07:14,470
I'm also going to go with Kubic.

83
00:07:14,990 --> 00:07:24,090
I think I go to the bazaar of zero point seventy five, then zero point eighty two and zero point one

84
00:07:24,090 --> 00:07:25,890
hundred sixty one and one.

85
00:07:26,160 --> 00:07:30,840
And I'm also going to to set this as infinite.

86
00:07:32,710 --> 00:07:36,280
So let's take a look at our button that already have.

87
00:07:37,840 --> 00:07:49,390
Why isn't this working all week, downtown animation to tap in the classroom, Puttnam Plus plus Pulse,

88
00:07:51,730 --> 00:07:55,840
Al and else, so now it's pulsing.

89
00:07:55,850 --> 00:07:56,440
Excellent.

90
00:08:01,050 --> 00:08:04,430
Now, my question is, how do we stop it?

91
00:08:06,680 --> 00:08:13,310
Because as you can see, I Hollerith in our face project, it stops is not longer pulsing.

92
00:08:13,370 --> 00:08:19,460
Well, this is pretty simple for so go back to our website, see how it still pulsing.

93
00:08:19,470 --> 00:08:20,240
We don't want that.

94
00:08:20,780 --> 00:08:28,400
We're going to go into a success and then to take a button off pulse beat and pulse.

95
00:08:29,120 --> 00:08:32,700
Why, to put it between brackets is not a no rate, is not JavaScript.

96
00:08:32,720 --> 00:08:36,410
So just that impulse plus your pulse.

97
00:08:37,400 --> 00:08:42,140
And we're going to set our animation to non.

98
00:08:43,980 --> 00:08:52,260
Oh, and of course, I mean Hollywood, so as soon as we hit, save and take a look in our project,

99
00:08:52,380 --> 00:08:56,490
if we follow a button, then it has no more animation.

100
00:08:57,330 --> 00:08:59,520
OK, so that's basically it for the head of.