1
00:00:01,290 --> 00:00:04,530
In this video, we're going to take care of our contacts section right here.

2
00:00:05,250 --> 00:00:10,050
So let's go to our website and also go to text editor.

3
00:00:11,040 --> 00:00:21,590
Now, this area is similar to the social section, sort of some of the comment of contact NAPP and then

4
00:00:21,630 --> 00:00:23,890
scroll down a bit as we did up there.

5
00:00:23,910 --> 00:00:31,890
We're going to create a section with an idea of contact and also a class of Porchetto.

6
00:00:37,890 --> 00:00:45,450
Within our section, we're going to create a container, so it did with a glass of contact container.

7
00:00:48,860 --> 00:00:54,350
And within this container, just going to include the icons, the icons are pretty much similar to the

8
00:00:54,350 --> 00:00:55,650
icons that we had out here.

9
00:00:56,270 --> 00:01:00,530
The only difference is that this time I'm going to the closing tag.

10
00:01:01,280 --> 00:01:12,230
No, but seriously, the difference is that the class starts with the FAA less then f a end street view.

11
00:01:14,590 --> 00:01:25,510
And then a dash to times and are a said two times to X and our class of Hober So asserts we do this,

12
00:01:25,510 --> 00:01:26,590
we should have.

13
00:01:27,100 --> 00:01:28,050
They do.

14
00:01:28,630 --> 00:01:31,780
Now let's compare this three more times.

15
00:01:34,010 --> 00:01:43,400
I'm going to place the first one right on the second one, hit the phone, then we have a male so precise

16
00:01:43,550 --> 00:01:48,980
male and its bulk male Bulc.

17
00:01:50,580 --> 00:01:59,780
And actually, that's it, we only have three icons then we did this, take a look at our first year,

18
00:01:59,880 --> 00:02:00,600
we only had three.

19
00:02:02,640 --> 00:02:04,750
Now, that's pretty much it for the e-mails.

20
00:02:04,770 --> 00:02:07,440
We could start up in our sixth.

21
00:02:10,390 --> 00:02:19,870
So let's start with a comment on that section, OK, and then if this we're going to target or contact

22
00:02:20,200 --> 00:02:20,710
Heidi.

23
00:02:22,740 --> 00:02:28,440
And we're going to start studying it by positioning it again as fixed, and this time we're going to

24
00:02:28,440 --> 00:02:30,290
fix it to the right.

25
00:02:31,110 --> 00:02:32,370
So right zero.

26
00:02:33,420 --> 00:02:34,860
Got to display this fax.

27
00:02:36,690 --> 00:02:42,750
And of course, the flex direction would be in a condo action, you're also going to line the items

28
00:02:42,750 --> 00:02:53,490
to the center and we're going to have a mix width of 10 new portrait and a max height or just a height

29
00:02:53,820 --> 00:02:59,300
of I.D. you put right now for the border radius.

30
00:02:59,760 --> 00:03:00,920
It's a bit different this time.

31
00:03:00,930 --> 00:03:08,250
We want our upper left corner to be 10 pixels or upper right corner to be zero pixels, then bottom

32
00:03:08,250 --> 00:03:12,680
right corner zero pixels and the bottom left corner to be 10 pixels.

33
00:03:12,710 --> 00:03:14,310
So let's take a look at this.

34
00:03:15,090 --> 00:03:16,190
And hey, there we go.

35
00:03:16,920 --> 00:03:21,090
Now, don't forget, we already have that border class, that shadow class within it.

36
00:03:21,390 --> 00:03:26,940
Now for transition, we still need to use our three seconds and is.

37
00:03:29,300 --> 00:03:34,970
Now, let's take the container, the class of contact and container.

38
00:03:37,880 --> 00:03:38,330
And.

39
00:03:40,180 --> 00:03:41,740
We'll display this as Fleck's.

40
00:03:45,950 --> 00:03:56,480
The flex that option in the column and the items will be justified, not the items.

41
00:03:57,260 --> 00:03:58,310
Oops, sorry about that.

42
00:03:59,140 --> 00:04:02,860
Going to justify the content with space around.

43
00:04:04,760 --> 00:04:06,750
So if we take a look in here.

44
00:04:07,220 --> 00:04:07,690
Oh yeah.

45
00:04:08,330 --> 00:04:10,170
So this is actually the perfect example.

46
00:04:11,120 --> 00:04:14,720
This is the space that the container is taking up.

47
00:04:15,560 --> 00:04:17,530
It's taking up only the necessary space.

48
00:04:17,540 --> 00:04:24,440
So what we need to do is tell it to take up the entire space of its pound container, which is the idea

49
00:04:24,440 --> 00:04:25,160
of contact.

50
00:04:26,730 --> 00:04:32,860
Now, the Pentagon with ideal contact, has a viewport height of viewpoints, OK, right there.

51
00:04:33,130 --> 00:04:42,250
So as soon as we tell this to have a height of one hundred percent of its pound container, then it

52
00:04:42,250 --> 00:04:47,080
spreads out with 100 percent of the space that is within the container.

53
00:04:47,650 --> 00:04:50,760
Only to do now is increase the letter spacing.

54
00:04:51,370 --> 00:04:54,880
I actually give it the march or a margin of one room.

55
00:04:55,690 --> 00:04:56,920
And there we go.

56
00:04:57,880 --> 00:05:00,650
This should be perfect.

57
00:05:01,000 --> 00:05:01,690
All right.

58
00:05:01,900 --> 00:05:10,090
Now, I still want to do something, and that is the FAA s should have the same colors after as the

59
00:05:10,090 --> 00:05:13,330
FAA piece, because if you take a look here, these are gray.

60
00:05:13,330 --> 00:05:15,250
And if you hover over them, they would turn white.

61
00:05:15,670 --> 00:05:17,770
And we need to do the same thing to our F.

62
00:05:18,040 --> 00:05:24,010
S. So just cover feet, be changed the face and a they would go.

63
00:05:25,260 --> 00:05:27,480
OK, so that's pretty much it for the context section.