1
00:00:02,480 --> 00:00:07,450
Guess not that we got our basic set up out of the way, we can also standing off to actually not just

2
00:00:07,670 --> 00:00:09,110
both on creating our head section.

3
00:00:09,380 --> 00:00:13,430
So let's go back into the demo and one more quick thing.

4
00:00:13,440 --> 00:00:21,170
So I have here are finished actual running project, going to take it out and I'm going to place it

5
00:00:21,170 --> 00:00:21,920
right.

6
00:00:22,890 --> 00:00:23,880
On the right side.

7
00:00:25,130 --> 00:00:28,490
Where did you go from the right side of our tax return?

8
00:00:29,300 --> 00:00:35,780
I had to do this because we are going to now switch to a a phone format.

9
00:00:35,780 --> 00:00:37,000
So let's go in here.

10
00:00:37,010 --> 00:00:39,710
Let's I'm going to also change this to go down.

11
00:00:40,820 --> 00:00:45,870
Let's touch this one down and stretch this one down my case.

12
00:00:45,910 --> 00:00:48,710
Now I'm going to say I am already on the phone with my.

13
00:00:50,370 --> 00:00:55,830
But I think I'm a bit too much something, so let's go here from 150.

14
00:00:56,490 --> 00:01:01,250
Let's change this to one hundred now that's much better.

15
00:01:02,670 --> 00:01:08,690
Or 125, let's see how this looks that kind of stretches down here, but we don't need this part.

16
00:01:08,760 --> 00:01:10,410
I just need to see the format.

17
00:01:10,890 --> 00:01:18,630
So in order for me to know that, yes, we are in a phone format, so we're under four hundred pixels,

18
00:01:18,670 --> 00:01:19,770
OK, for a width.

19
00:01:20,880 --> 00:01:24,870
So let's go back into our header section and let's create our e-mail.

20
00:01:26,760 --> 00:01:32,020
The header section is actually pretty simple, we don't have the tag right here, we're just creating

21
00:01:32,190 --> 00:01:34,320
a div with a class of header text.

22
00:01:36,210 --> 00:01:37,590
And the Danish text.

23
00:01:40,920 --> 00:01:47,010
And within Iraq had a hashtag, so this would be just a general continuing to create two more things.

24
00:01:47,490 --> 00:01:50,610
One would be the head, a text content.

25
00:01:50,610 --> 00:01:59,580
So create a narrative with a class of and the text and underscore content

26
00:02:02,640 --> 00:02:04,860
within hearing and create in each one.

27
00:02:04,860 --> 00:02:06,810
So we could actually delete this one.

28
00:02:11,890 --> 00:02:17,270
And now within our each one, I just want to type my name, you can type yours if you want.

29
00:02:17,290 --> 00:02:17,990
It doesn't matter.

30
00:02:17,990 --> 00:02:19,750
Just it's just going to be the title.

31
00:02:20,410 --> 00:02:22,240
Each one, Norburg B.

32
00:02:22,240 --> 00:02:29,620
M and underneath of this integrated each to which we have the title section of the company naming media.

33
00:02:34,080 --> 00:02:36,180
Around underneath our H2O.

34
00:02:36,210 --> 00:02:37,860
We're not going to create a button.

35
00:02:39,430 --> 00:02:42,700
So guten tag with a class of PTM.

36
00:02:43,640 --> 00:02:49,490
And in the end, I'm going to include the icon tag and it's going to be now from Pontoise and this would

37
00:02:49,490 --> 00:02:53,690
have the classic FS dot f eight dash.

38
00:02:55,320 --> 00:02:58,410
Book and open book.

39
00:02:59,490 --> 00:03:01,100
Oh, you go.

40
00:03:02,820 --> 00:03:09,750
So as soon as I do this, well, that's actually less safe, there should be.

41
00:03:10,950 --> 00:03:11,280
It is.

42
00:03:12,550 --> 00:03:20,020
There's a button with our icon, and I still need to type in between them right after I contact the

43
00:03:20,020 --> 00:03:26,400
anchor, text a anchor tag with an atrip of this is going to go to the idea of contact.

44
00:03:26,740 --> 00:03:31,680
So as soon as we click on this button, this should bring us down to this contact section.

45
00:03:31,960 --> 00:03:34,630
This is what I'm going to use, hash and contact.

46
00:03:34,930 --> 00:03:43,120
This just means as soon as I click on a button, which I can see right now, somewhere down here.

47
00:03:44,490 --> 00:03:48,480
There we go, and that's also type in here contact.

48
00:03:51,570 --> 00:03:59,100
OK, now, so as soon as we click on a button, it should take us down to our head to our contact section.

49
00:04:00,630 --> 00:04:08,670
Not after we finish with this and we're also outside of this text, Heather, so I had a text class,

50
00:04:09,000 --> 00:04:10,170
but still remaining within.

51
00:04:10,170 --> 00:04:17,760
I had a tag we've got now going to create another div with an idea of header image, and this will contain

52
00:04:17,760 --> 00:04:18,480
our image.

53
00:04:21,610 --> 00:04:26,260
Now, for this other image, we need to take control of it and access.

54
00:04:27,550 --> 00:04:33,430
And I'm going to go now to Intercessors and Estaban, who also comment of had section.

55
00:04:36,420 --> 00:04:40,830
Let's take an idea of the image, the image.

56
00:04:43,350 --> 00:04:46,650
And now I'm going to use the background property.

57
00:04:49,380 --> 00:04:52,080
With no background property, I'm going to use art, you are out.

58
00:04:52,680 --> 00:04:59,910
So this is actually where we are going to go, actually, because this is a traditional we need this

59
00:04:59,920 --> 00:05:00,530
ATRA.

60
00:05:00,930 --> 00:05:02,580
We need this link right here.

61
00:05:02,820 --> 00:05:03,930
It's going to carpet.

62
00:05:04,830 --> 00:05:11,460
Go back into our success and pasted in, and as soon as we do this, we can see it right now.

63
00:05:11,490 --> 00:05:13,620
We still need to do a bit of studying.

64
00:05:13,630 --> 00:05:15,300
So we need to set our background.

65
00:05:15,560 --> 00:05:18,030
You tell it need to tell, first of all, where the position is.

66
00:05:18,630 --> 00:05:21,540
And for this, I'm going to use a..

67
00:05:21,750 --> 00:05:36,090
First of all, this is the composition center background size cover contained cover and the background

68
00:05:36,090 --> 00:05:39,600
repeat background repeat we're to set and no repeat.

69
00:05:39,600 --> 00:05:41,230
So we don't want our image to repeat.

70
00:05:41,990 --> 00:05:44,160
Now we can do it either this way.

71
00:05:44,160 --> 00:05:45,450
And it was an image.

72
00:05:47,490 --> 00:05:54,140
And the hype, so we're going to set this image to a height of 50 viewport heights, and I'm going to

73
00:05:54,140 --> 00:05:55,910
do this no to have.

74
00:05:57,090 --> 00:06:00,560
Let's go back to e-mail and let's delete or comment out.

75
00:06:00,570 --> 00:06:04,010
What are we going to do this this time right here?

76
00:06:04,020 --> 00:06:05,340
So we only have one image.

77
00:06:05,790 --> 00:06:11,760
So there's an image from our Heather Tesche Image ID.

78
00:06:13,300 --> 00:06:20,380
And what we did right here, I'm not going to comment out and to show you the short answer, this is

79
00:06:20,380 --> 00:06:26,820
B actually center, then cover and then no repeat.

80
00:06:27,160 --> 00:06:31,540
And this should do exactly the same thing as this did right here.

81
00:06:31,840 --> 00:06:33,670
So I'm going to leave them in here.

82
00:06:33,760 --> 00:06:36,400
But I was going to also leave them comment about.

83
00:06:38,400 --> 00:06:47,010
Now they're in dire need to do a couple of things, for example, when we reach then a a larger format

84
00:06:47,010 --> 00:06:47,790
than a phone.

85
00:06:49,500 --> 00:06:59,510
Wanted to be displayed as flex zero one and 60, viewport with anger to see what what will happen when

86
00:06:59,510 --> 00:07:01,290
we're going to leave our form format.

87
00:07:02,090 --> 00:07:05,540
Now it's going to set us to a margin zero, though.

88
00:07:05,540 --> 00:07:08,000
We already had everything set to zero.

89
00:07:09,230 --> 00:07:14,000
And within our image, I'm also going to include the animation now, the animation we still need to

90
00:07:14,000 --> 00:07:14,510
create this.

91
00:07:14,510 --> 00:07:19,120
I'm just going to type in animation, come out and we're going to come back to this a bit later on.

92
00:07:19,760 --> 00:07:22,490
But now let's continue on styling this spot right here.

93
00:07:22,490 --> 00:07:23,210
So I'll text.

94
00:07:25,830 --> 00:07:32,220
So first of all, I'm going to take a header tag and tell it that everything that is in this had a tag,

95
00:07:32,490 --> 00:07:35,990
it's all of the text that will be created should have that shadow.

96
00:07:36,000 --> 00:07:40,980
And this shadow would be one pixels, one pixel spent on pixels in the Ojibwe.

97
00:07:40,980 --> 00:07:44,400
A tree be a.

98
00:07:46,140 --> 00:07:54,660
Of a dog collar, so zero for the red, zero for the green, zero for the blue and zero point five for

99
00:07:54,660 --> 00:07:58,860
the alpha game, you can always see that we have here a bit of a tech shadow.

100
00:08:00,760 --> 00:08:09,190
Now, let's take care of each one more title, so let's take the H1 tag and a Serita position relative

101
00:08:10,020 --> 00:08:11,680
has changed color to red

102
00:08:16,330 --> 00:08:22,390
and I'm going to increase his font size to the font size to two point five RAM.

103
00:08:27,900 --> 00:08:35,430
Now for H2O, it's actually just a simple styling, just going to increase the font size font size of

104
00:08:35,430 --> 00:08:36,540
one point three RAM.

105
00:08:39,290 --> 00:08:46,040
And I'm going to transform the text, though, to uppercase, so text transform uppercase.

106
00:08:48,700 --> 00:08:50,640
Well capitalized on pokies.

107
00:08:52,510 --> 00:08:53,490
OK, there we go.

108
00:08:55,530 --> 00:09:01,860
Now, let's take care of the entire head of textiles, so I want this to be displayed as flex centered

109
00:09:01,860 --> 00:09:05,550
in the page, I'm going to use this to target the header

110
00:09:08,250 --> 00:09:09,090
text class.

111
00:09:10,080 --> 00:09:14,460
And within our Creditex class, we're going to set this was thought to be displayed as flex.

112
00:09:17,250 --> 00:09:23,790
Going to have a definition for the Flexner's zero one and 40, we will put it, when is going to change

113
00:09:24,930 --> 00:09:28,160
from form format to a much larger format.

114
00:09:28,590 --> 00:09:35,520
And now we can just because you said it, this Fleck's do not justify the content center, align the

115
00:09:35,520 --> 00:09:36,750
items to the center.

116
00:09:38,080 --> 00:09:41,190
So hit save can see the change already happening up here.

117
00:09:42,060 --> 00:09:48,540
And I'm also going to do a text aligned to the center so even the text would be in the center.

118
00:09:49,620 --> 00:09:51,780
Now let's do a bit of a padding.

119
00:09:51,930 --> 00:09:56,280
So I want to have zero left and right, but I do want to have a bit of a padding top and bottom.

120
00:09:56,290 --> 00:09:59,820
So one ram would be enough.

121
00:10:02,890 --> 00:10:10,280
The last thing I want to change its height, so this should occupy a height or image already occupies

122
00:10:10,290 --> 00:10:11,490
a height of 50 viewport height.

123
00:10:11,530 --> 00:10:14,070
So let's look this also 250 viewport height.

124
00:10:14,460 --> 00:10:17,870
And this should now have here 50 viewport heights.

125
00:10:17,880 --> 00:10:20,610
And down here for the image, you also have 50 viewport heights.

126
00:10:22,090 --> 00:10:28,750
And the last thing we need to do is to, well, include our animation, because, as I said, we have

127
00:10:28,750 --> 00:10:32,100
here in our image animation and also for the text.

128
00:10:32,110 --> 00:10:37,940
I also want to have an animation let's type in here animation and going to leave it open right now because

129
00:10:37,940 --> 00:10:39,640
you need to create the keyframe.

130
00:10:40,270 --> 00:10:47,440
So let's get keyframes and keyframes and we're going to tell this to go from zero percent.

131
00:10:50,170 --> 00:10:55,800
And then we had zero percent of it up here, wanted to have a opacity of zero.

132
00:10:55,990 --> 00:11:01,870
And when the animation reaches 100 percent, it should have a capacity of one.

133
00:11:03,160 --> 00:11:05,990
So that's all the animation is going to do now.

134
00:11:06,000 --> 00:11:07,180
I'd also need to give it a name.

135
00:11:07,180 --> 00:11:08,470
So let's see anime.

136
00:11:11,680 --> 00:11:14,920
And now we can include this animation also going to the shorthands.

137
00:11:14,920 --> 00:11:17,500
So the animation name is anime.

138
00:11:17,770 --> 00:11:25,270
You're going to use the key thing is going to take up two seconds and is going to have a curve of easing

139
00:11:25,600 --> 00:11:26,700
out here.

140
00:11:26,740 --> 00:11:31,880
So there's animation for our text and we need to do this for our image also.

141
00:11:31,880 --> 00:11:38,590
So right here, we had an animation just going to copy this and it's both of them animated at the same

142
00:11:38,590 --> 00:11:41,260
time now and have the same type of animation.

143
00:11:41,270 --> 00:11:45,700
Also not want to change this color right here.

144
00:11:45,710 --> 00:11:47,050
So let me target the.

145
00:11:48,710 --> 00:11:55,470
The H2 within our tax, or actually I could set it here is the H2 should have a color.

146
00:11:56,180 --> 00:11:58,780
Let's give it the evil color of six six six.

147
00:12:00,050 --> 00:12:01,370
That's actually just a great color.

148
00:12:04,110 --> 00:12:08,910
The last thing we need to stand out here is this button right here, so let's grab onto a button.

149
00:12:09,600 --> 00:12:13,310
We actually could give it a give it a class of Betty.

150
00:12:13,320 --> 00:12:19,290
And so now let's give it a bit of padding of one round, top and bottom to wrap them.

151
00:12:19,290 --> 00:12:19,580
Right.

152
00:12:23,490 --> 00:12:25,650
Now, I got to change the borders.

153
00:12:25,680 --> 00:12:27,000
You have this black border.

154
00:12:27,060 --> 00:12:27,740
I don't like them.

155
00:12:27,750 --> 00:12:36,210
So let's change the border to one pixel and hash DDT and also solid,

156
00:12:41,130 --> 00:12:43,410
decent work, solid that will.

157
00:12:46,040 --> 00:12:52,910
We keep I'm going to take out now the outlines of the outlines are you see when you click on it, but

158
00:12:53,060 --> 00:12:59,180
this signing right here and the understanding which will actually take more of an effect, for example,

159
00:12:59,180 --> 00:13:05,060
the outlines to none, which is where you click on it, it has its outline, but not with when we would

160
00:13:05,060 --> 00:13:05,990
do this in.

161
00:13:07,850 --> 00:13:13,520
In a tabloid format and not in the best of all, that you would see the click but right here in a phone

162
00:13:13,520 --> 00:13:14,930
format or in a tablet form.

163
00:13:14,970 --> 00:13:18,320
We were just happen to one scene that we won't see it.

164
00:13:18,320 --> 00:13:24,590
But I just because I already have it here, I we have grabbed onto the the class.

165
00:13:25,010 --> 00:13:26,020
I want to set the standard.

166
00:13:26,030 --> 00:13:26,990
So outline.

167
00:13:28,180 --> 00:13:28,600
None.

168
00:13:31,060 --> 00:13:36,250
OK, now let's give it a bit of a margin, I want to push the button down from the top, so I'm going

169
00:13:36,250 --> 00:13:37,330
to use margin.

170
00:13:40,080 --> 00:13:40,590
Jen.

171
00:13:42,580 --> 00:13:44,320
Top off to read

172
00:13:49,330 --> 00:13:50,800
the stories again, top.

173
00:13:56,430 --> 00:13:59,790
And now I'm going to change the border, so give this.

174
00:14:00,810 --> 00:14:03,840
Take up the sharp edges near the border radius.

175
00:14:08,140 --> 00:14:10,990
All 50 pixels, OK?

176
00:14:13,530 --> 00:14:16,050
Now, a couple of things, a chateau.

177
00:14:21,160 --> 00:14:30,370
Of zero zero five pixels and one pixel spread and order to be a color with the opacity of free.

178
00:14:31,700 --> 00:14:37,750
And the last thing I want to do is change his background, color to background, color, hash, and

179
00:14:37,780 --> 00:14:41,270
and go with free, free, free, say, Dockray.

180
00:14:42,470 --> 00:14:46,400
Now, because we have within here a any anchor tag.

181
00:14:47,580 --> 00:14:54,810
We need to know Target, and I only want to target this, too, so if I would have you know, we will

182
00:14:54,810 --> 00:15:00,430
have we will have other attacks within here, not within here, but within the Web page.

183
00:15:00,450 --> 00:15:05,970
We will have done in our contact section we have our icons don't want to start them.

184
00:15:05,970 --> 00:15:09,270
So going going specific style between our Betty and class.

185
00:15:11,200 --> 00:15:19,960
The anchor tags and once again, we better in class the eye contact, so only those that are in the

186
00:15:19,960 --> 00:15:21,620
better class and the bottom class.

187
00:15:22,180 --> 00:15:25,990
So let's change the color, first of all, to a white collar.

188
00:15:26,830 --> 00:15:30,820
Going to increase the font size, font size.

189
00:15:33,690 --> 00:15:38,490
The one point to run and I'm going to give them a pen to write.

190
00:15:42,030 --> 00:15:48,210
In order to push this black book, I come there to zero point five.

191
00:15:49,800 --> 00:15:51,240
OK, and there we go.

192
00:15:51,270 --> 00:15:55,010
There's a button, so that's pretty much it for a header.

193
00:15:57,460 --> 00:16:03,910
We have all had a textile, then we have an image and also we have animation, not so soon, the next

194
00:16:03,910 --> 00:16:04,150
one.