1
00:00:00,300 --> 00:00:05,430
Now, in this world, we're going to start a style of football and also context section because it's

2
00:00:05,430 --> 00:00:06,750
the same section.

3
00:00:07,320 --> 00:00:09,270
So let's go back to our e-mail.

4
00:00:10,240 --> 00:00:15,760
And it's actually created within our photo, which we gave the which also gave the idea of contact,

5
00:00:16,180 --> 00:00:18,370
we will also create another H3.

6
00:00:21,430 --> 00:00:24,340
And we're going to get this title of contact us

7
00:00:27,940 --> 00:00:34,510
on the need for HP to create the external container so a class of container actually contact content,

8
00:00:34,540 --> 00:00:39,830
a contact container within this container.

9
00:00:39,850 --> 00:00:46,900
We're going to have now a couple of device, the first device with a general div tag, and this will

10
00:00:46,900 --> 00:00:47,770
have the email.

11
00:00:50,630 --> 00:00:56,060
OK, and we do know you are going to use a email icon, so from one thousand, so let's create the icon

12
00:00:56,060 --> 00:01:01,430
tag with a class of every S and then a class F A minus envelope.

13
00:01:07,810 --> 00:01:11,570
Not after our I contact we have a anchor tag.

14
00:01:12,880 --> 00:01:21,460
And well, you could set it, for example, to go back to Gmail, so if you were typing HTP s and Baxley's

15
00:01:21,460 --> 00:01:26,140
backslash w w dot Gmail dot com.

16
00:01:26,290 --> 00:01:29,890
If you have this connected, then it would automatically open up your Gmail.

17
00:01:29,950 --> 00:01:34,870
So I'm not going to do this, but we could.

18
00:01:35,030 --> 00:01:39,880
I'm going to set it up for Google and Twitter w.

19
00:01:42,330 --> 00:01:52,950
Google dot com and are also going to use the target option, which will be blank, so when we open is

20
00:01:52,950 --> 00:01:54,720
going to open up a blank page.

21
00:01:56,230 --> 00:01:58,960
And you could type in your e-mail address, for example.

22
00:01:59,050 --> 00:02:01,810
This would be contact that minecart media

23
00:02:05,050 --> 00:02:08,290
dot com, OK, after we have this.

24
00:02:08,290 --> 00:02:10,230
So they should be down here.

25
00:02:10,240 --> 00:02:13,300
And if I click on it, you should open up a new page.

26
00:02:13,300 --> 00:02:13,780
Google.

27
00:02:13,840 --> 00:02:14,230
Yeah.

28
00:02:16,030 --> 00:02:19,890
So after we did this, we're going to step out out of our container.

29
00:02:22,380 --> 00:02:23,650
I will create another dip.

30
00:02:25,260 --> 00:02:27,450
Now this, they will contain the iPhone.

31
00:02:30,720 --> 00:02:36,720
So I don't think F the s again, an F A minus phone

32
00:02:40,440 --> 00:02:45,200
and volume, OK?

33
00:02:46,440 --> 00:02:52,130
And within actually, after I can tell you, I'm just going to use a bull tag and will type in here

34
00:02:52,140 --> 00:02:55,470
five, four, five minus five out of the five and some kind of number.

35
00:02:57,690 --> 00:03:00,810
So there's also the phone number and there's also the phone.

36
00:03:01,440 --> 00:03:02,940
Shall I use this with the volume.

37
00:03:03,300 --> 00:03:03,570
Mm.

38
00:03:04,290 --> 00:03:04,950
I see.

39
00:03:05,670 --> 00:03:06,900
I'm going to leave the other one.

40
00:03:06,900 --> 00:03:09,450
But you could also leave this with the volume if you like it more.

41
00:03:11,650 --> 00:03:13,000
Somehow this is much prettier.

42
00:03:15,020 --> 00:03:18,320
OK, we have unless they of now after we finish with our phone.

43
00:03:18,530 --> 00:03:19,640
Let's get another David.

44
00:03:21,190 --> 00:03:26,020
And let's give the six year title for eight for a follow us.

45
00:03:32,680 --> 00:03:33,910
And where can they follow us?

46
00:03:33,940 --> 00:03:37,930
Well, they could follow us in a container.

47
00:03:40,170 --> 00:03:44,550
Oh, I just called a social.

48
00:03:47,720 --> 00:03:48,770
Media container.

49
00:03:51,720 --> 00:03:55,620
No, I think that social media icons.

50
00:03:58,390 --> 00:04:07,060
Within this tape I'm going to use now for Icha so I can take care F A, B, then F eight dash Facebook.

51
00:04:11,860 --> 00:04:17,450
I'm going to copy this now three more times, I'm going to replace the Facebook with, first of all,

52
00:04:17,450 --> 00:04:22,480
Instagram, and then we're going to replace this with Twitter.

53
00:04:25,130 --> 00:04:29,210
And the last one I'm going to replace with YouTube, for example, you could use LinkedIn or whatever.

54
00:04:31,220 --> 00:04:37,220
So let's hit, save and hate their icons because that's pretty much it for this part.

55
00:04:37,220 --> 00:04:38,750
That's now start standing it.

56
00:04:39,520 --> 00:04:40,780
Let's go back into accessor.

57
00:04:40,790 --> 00:04:48,440
Let's step in here, comment of actually context, photo, but context, context, section one.

58
00:04:48,670 --> 00:04:51,950
Underneath of this, we going to target the idea of contact

59
00:04:56,090 --> 00:04:58,400
and to set a text line to the center.

60
00:04:58,400 --> 00:05:03,320
So want each time I have something, you know, contact to be centered and this is already starting

61
00:05:03,320 --> 00:05:04,110
to look much better.

62
00:05:05,180 --> 00:05:11,270
Now, let's give it a bit of a padding from top and bottom to ram and left them write one ram.

63
00:05:13,170 --> 00:05:17,510
Not to have just a bit of separation, but our contest section and the rest of the page.

64
00:05:18,100 --> 00:05:23,120
I want this to remain in the center so we get to set the margins to ODL.

65
00:05:25,970 --> 00:05:31,910
And I'm going to change the background color to a dog collar, so I wanted to resemble to this and also

66
00:05:32,330 --> 00:05:35,180
kind of differentiate that this is the end of the page.

67
00:05:35,720 --> 00:05:45,870
So Gansett the dark color hash 350 and also the color must change it to apathetically.

68
00:05:46,040 --> 00:05:47,780
I could Lisieux here ddd.

69
00:05:54,270 --> 00:06:01,470
Got to also use the tech shadow that we had in our head, so let's use tech shadow again, one pixel

70
00:06:02,130 --> 00:06:10,770
for pixel, two pixels, any on G.P.A. of let's go with the zero point one opacity.

71
00:06:11,250 --> 00:06:14,500
That's just O zero point to as if this is better.

72
00:06:14,790 --> 00:06:16,860
Just wanted to have just a bit of a shadow.

73
00:06:18,370 --> 00:06:21,070
OK, now to start standing our anchor tax.

74
00:06:22,720 --> 00:06:25,010
I think could tag, which is this one right here.

75
00:06:26,830 --> 00:06:35,320
So let's take our idea of contact and let's change the actually within this, we're going to now target

76
00:06:35,460 --> 00:06:36,840
the E an attack.

77
00:06:37,360 --> 00:06:40,240
Let's change its color, the hash DDD.

78
00:06:42,310 --> 00:06:44,080
OK, so this is also starred.

79
00:06:45,890 --> 00:06:53,690
Let's give it a affect, so let's compare this again when we hover over it and GTECH our.

80
00:06:57,490 --> 00:06:59,500
Let's change the tax declaration.

81
00:07:03,920 --> 00:07:13,430
To underline not we cannot use this in a form format of this redundant with this standard right here,

82
00:07:13,440 --> 00:07:18,080
so it will also apply when we will have a form format.

83
00:07:19,510 --> 00:07:25,840
OK, now I'm going to take the icon tags, so contact and icon tags.

84
00:07:27,590 --> 00:07:35,000
Going to sell it to a padding of zero point five, brown and top and left and right one round.

85
00:07:36,860 --> 00:07:39,360
So we had a bit of a petting now, but no eye contact.

86
00:07:40,610 --> 00:07:43,400
Now I still want them to be a bit more larger.

87
00:07:43,400 --> 00:07:51,910
So let's increase the font size to, let's say, to ram obviously stylus as you wish.

88
00:07:52,930 --> 00:07:55,200
But I think this is pretty good.

89
00:07:56,620 --> 00:08:02,410
Now, don't get confused by this on the line, because if I refresh the page, it will disappear.

90
00:08:02,440 --> 00:08:07,040
This is just because I had it active, let's just say so.

91
00:08:07,090 --> 00:08:09,150
Next up, we're going to take our divorce.

92
00:08:09,560 --> 00:08:12,880
I want to change this alignment right here, actually.

93
00:08:13,000 --> 00:08:14,240
First of all, take care of Tiger.

94
00:08:14,270 --> 00:08:23,620
So within a context to take the H free the contact lady and I'm going to change his font size to free

95
00:08:23,620 --> 00:08:23,950
RAM.

96
00:08:24,900 --> 00:08:33,140
Let's give it the margin to the bottom, so let's differentiate a bit margin bottom of one round and

97
00:08:33,150 --> 00:08:37,830
I think it's safe and I think this looks much better on this.

98
00:08:38,990 --> 00:08:44,960
The cities want to do not want to stay in the same size because this is far too large.

99
00:08:44,990 --> 00:08:46,610
Let's stay with them.

100
00:08:47,240 --> 00:08:48,200
Yep, that's much better.

101
00:08:48,920 --> 00:08:59,840
So let's think we need to do is take Hong Kong contact container and then we're going to take the immediate

102
00:08:59,840 --> 00:09:00,220
dip.

103
00:09:01,100 --> 00:09:09,290
So let's take this live and let's give it a petting of one point twenty five ram from the top and bottom

104
00:09:09,290 --> 00:09:10,720
and zero from the left and right.

105
00:09:10,730 --> 00:09:18,470
And now we're going to also display them as flags and we change the flex direction, they call them

106
00:09:18,470 --> 00:09:19,430
and see what happens.

107
00:09:20,270 --> 00:09:28,520
As you can see, we took our days and display them as flex and also have them set up in a column direction.

108
00:09:29,360 --> 00:09:32,510
So the last thing I want to do is take care of the icons right here.

109
00:09:33,200 --> 00:09:34,940
And this is just the general settings.

110
00:09:34,970 --> 00:09:37,480
This will take effect also later on.

111
00:09:37,490 --> 00:09:42,830
So let's take the social and score media and icons

112
00:09:45,710 --> 00:09:47,270
and as display them as flex.

113
00:09:49,840 --> 00:09:58,550
Let's change the flex direction, the hero, we will now actually inhibit them for flexing in another

114
00:09:58,550 --> 00:10:02,940
direction, then roll and that's justified the content to the center.

115
00:10:03,150 --> 00:10:07,070
OK, and this is also pretty much it for our photo section.

116
00:10:07,730 --> 00:10:09,350
So let's see.

117
00:10:09,620 --> 00:10:14,010
I still think I would like to have a bit of padding here.

118
00:10:15,340 --> 00:10:16,730
Now, this actually looks good.

119
00:10:17,510 --> 00:10:19,640
OK, so that's pretty much it for this one.

120
00:10:19,790 --> 00:10:21,980
Next up, it's time to make this responsive.

121
00:10:21,990 --> 00:10:25,430
So this changes to a standard format.

122
00:10:26,610 --> 00:10:28,020
iPad, for example.

123
00:10:29,620 --> 00:10:33,160
And yeah, we're going to take care of this.

124
00:10:34,970 --> 00:10:39,730
I think we're going to start them with the head of OK, so soon in the next one by.