1
00:00:01,350 --> 00:00:05,020
Right, so in this video, we're going to create our social navigation here.

2
00:00:05,790 --> 00:00:12,960
So let's assume, first of all, Jumptap initial project and go into each demo.

3
00:00:16,500 --> 00:00:22,860
Now, after little Heather get hit in another section, so first of all, this type of comment so we

4
00:00:22,860 --> 00:00:25,620
know what we're doing social.

5
00:00:27,720 --> 00:00:38,760
NAB and to this comment are going to hit this section, this section tag, the idea of social within

6
00:00:38,760 --> 00:00:50,070
this single integrated dip lexicon, which would dip out of here and just create a social container

7
00:00:51,120 --> 00:00:51,660
class.

8
00:00:54,650 --> 00:00:58,040
Within this container, I'm going to use not font awesome icons.

9
00:01:01,480 --> 00:01:07,090
So if we go to font awesome back, I say I'm just going to show you an example.

10
00:01:07,090 --> 00:01:09,070
Let's say Facebook.

11
00:01:13,110 --> 00:01:15,960
And loading, loading, loading, loading.

12
00:01:16,980 --> 00:01:21,060
Clung to the strange.

13
00:01:23,330 --> 00:01:23,980
OK.

14
00:01:28,680 --> 00:01:29,430
Let's try this again.

15
00:01:30,720 --> 00:01:33,930
Well, never mind, let's go into our.

16
00:01:34,950 --> 00:01:43,230
They've back again, so social continuum, and I'm sure I can target this so I can tag that last name

17
00:01:43,650 --> 00:01:49,290
of Fabi, then space F a dash Facebook.

18
00:01:53,560 --> 00:02:01,480
And also, I want to show you this, first of all, so just by doing this, we should have your free

19
00:02:01,480 --> 00:02:02,380
Facebook text.

20
00:02:02,530 --> 00:02:03,760
Why do I have three of them?

21
00:02:05,050 --> 00:02:07,150
Just y y y y y y.

22
00:02:08,420 --> 00:02:10,970
Weatherfield, them amazing.

23
00:02:12,070 --> 00:02:12,420
Oh.

24
00:02:13,990 --> 00:02:17,170
Is it because the face, the font or some pages?

25
00:02:18,010 --> 00:02:19,270
Oh, the bit messed up.

26
00:02:20,830 --> 00:02:23,200
Mr. President Hayes book.

27
00:02:26,020 --> 00:02:27,530
Something was wrong with Pontotoc today.

28
00:02:28,030 --> 00:02:35,840
Nevertheless, here is one times Facebook and they have kind of standing on this.

29
00:02:35,860 --> 00:02:36,880
What are the three of them?

30
00:02:37,150 --> 00:02:37,830
Still don't get it.

31
00:02:39,640 --> 00:02:40,840
Hmm, strange.

32
00:02:41,260 --> 00:02:48,560
No mind, so you can see we have three icons and they need freshness again.

33
00:02:49,450 --> 00:02:55,360
Well, to make them larger because here they are large and tiny.

34
00:02:55,720 --> 00:02:56,710
So how can we do that?

35
00:02:56,710 --> 00:02:57,190
We can.

36
00:02:57,430 --> 00:03:05,470
Actually, within the class, there is a functionality class F, a dash to X. This means two times its

37
00:03:05,470 --> 00:03:05,860
size.

38
00:03:06,200 --> 00:03:08,360
As soon as we do this, we will have.

39
00:03:08,650 --> 00:03:09,930
Why do I have three of them?

40
00:03:10,540 --> 00:03:16,630
I don't get to do something now container and I only have one I can tell.

41
00:03:17,710 --> 00:03:27,080
Hmmm, this is so strange, so don't have any kind of standing in here now to figure it out eventually,

42
00:03:27,790 --> 00:03:34,180
but what I do need to do is copy this actually for my times and.

43
00:03:35,800 --> 00:03:42,070
And I want to replace the I the Facebook name here with Instagram.

44
00:03:46,590 --> 00:03:47,640
Then Twitter

45
00:03:50,910 --> 00:03:51,990
and then LinkedIn.

46
00:03:57,390 --> 00:03:59,220
So we should have.

47
00:03:59,250 --> 00:04:01,840
Oh, my God, what just happened?

48
00:04:02,670 --> 00:04:05,550
There's something wrong with Hunterson.

49
00:04:06,810 --> 00:04:10,140
I get it, and the larger and larger and larger.

50
00:04:11,510 --> 00:04:16,420
This means something is amplifying them, but what what could it be?

51
00:04:18,220 --> 00:04:24,070
So I have my kit here, font, awesome to have to do something with the kit that will come in the kit

52
00:04:24,080 --> 00:04:25,230
out for me.

53
00:04:25,660 --> 00:04:25,980
Yep.

54
00:04:26,120 --> 00:04:27,670
This makes them disappear.

55
00:04:28,150 --> 00:04:32,230
So I comment this back in, then I have the.

56
00:04:33,220 --> 00:04:34,200
Something ain't right.

57
00:04:37,070 --> 00:04:44,120
Let me start styling this, so let's go into success and step in here, comment of social.

58
00:04:49,640 --> 00:04:57,680
And let's start styling our idea of social by positioning it fixed.

59
00:05:00,920 --> 00:05:09,170
And now that we said not that we assigned the type of position not to tell it where it should be fixed,

60
00:05:09,170 --> 00:05:14,850
I'm going to go left zero and this will push everything to the left side.

61
00:05:15,650 --> 00:05:22,580
Now, I can do this play flex because I want the content from the container to be displayed as flex.

62
00:05:23,000 --> 00:05:29,270
But this will display only the container now because Flex Display Sarafina Road.

63
00:05:29,270 --> 00:05:37,640
I'm going to change the flex direction to column and they are going to line all the items to the center.

64
00:05:39,180 --> 00:05:48,720
Nurses would do this if they were lined up into the center can now set a max width of 10 viewport with.

65
00:05:52,490 --> 00:05:58,050
And this is because I set my well, my container of the net here to 80 percent.

66
00:05:58,460 --> 00:06:02,260
So theoretically, I should have 10 percent here and 10 percent here.

67
00:06:03,080 --> 00:06:09,650
And because this is 100 percent of the viewport with I'm only going to take up here 10 percent of its

68
00:06:09,650 --> 00:06:09,910
with.

69
00:06:11,190 --> 00:06:18,270
Now, for the height of this container, we are only going to use 80 percent or 80 viewport heights.

70
00:06:22,480 --> 00:06:30,340
Now, let's also change the border radius, first of all, we're going to go on the upper left side

71
00:06:30,340 --> 00:06:39,790
of a corner with zero, then the right side 10 pixels, then the bottom left right side, also ten pixels

72
00:06:39,790 --> 00:06:42,050
and the bottom left side zero.

73
00:06:42,550 --> 00:06:48,470
So this should look then something like this, but we don't have a shadow to show it.

74
00:06:49,150 --> 00:06:52,890
So now what we need to do is implement our shadow.

75
00:06:53,200 --> 00:06:55,290
But for this we first need a border.

76
00:06:55,660 --> 00:06:59,710
So let me target this social idea again.

77
00:07:03,330 --> 00:07:06,540
And I'm going to give it a border.

78
00:07:07,530 --> 00:07:09,980
But only when I'm hovering over it.

79
00:07:16,860 --> 00:07:22,920
Now the world will be one pixel solid and has 350.

80
00:07:25,730 --> 00:07:34,010
And also, let's go back to an e-mail and give the the section a class of box shadow

81
00:07:36,860 --> 00:07:47,600
nurses who do this when we hover over all our left side of social, when we hover over our left section

82
00:07:47,600 --> 00:07:50,030
of social, we now have this shadow.

83
00:07:50,480 --> 00:07:53,590
Now, what exactly is going on with this icons?

84
00:07:53,600 --> 00:08:01,550
I need to take a closer look at this, but let's carry on by not targeting the social campaigner.

85
00:08:02,640 --> 00:08:08,100
Because they need to place those icons into a row, so I started the class of social container.

86
00:08:12,940 --> 00:08:21,520
And again, we're going to display it as Flex will change to flex their action to column and we'll justify

87
00:08:21,520 --> 00:08:26,290
the ad and would justify the content with space around.

88
00:08:26,920 --> 00:08:32,890
Now, what this will do is create equal space around the items of all the items, which are the icons

89
00:08:32,890 --> 00:08:33,750
are now messed up.

90
00:08:33,770 --> 00:08:35,410
But we're going to fix this.

91
00:08:35,710 --> 00:08:39,250
Let's also give it a height of 100 percent of its container.

92
00:08:39,280 --> 00:08:49,750
This is just spread out everything in the entire container and also a margin of one gram all around.

93
00:08:51,410 --> 00:08:54,150
OK, so there would be our navigation.

94
00:08:54,710 --> 00:09:00,350
Now, one last thing I want to do is keep actually two things keep each icon.

95
00:09:01,680 --> 00:09:08,700
A hover effect that can do this very simply by going into icons and also signing them and actually going

96
00:09:08,710 --> 00:09:16,190
to select these two times, hold down command on the Mac or control on the PC, then DTD.

97
00:09:16,740 --> 00:09:18,000
Then one error.

98
00:09:18,000 --> 00:09:18,370
Left.

99
00:09:18,630 --> 00:09:18,980
Right.

100
00:09:18,990 --> 00:09:20,360
I mean, space.

101
00:09:20,370 --> 00:09:27,530
And I'm going to give them the class of Pober says we do this, then, hey, we should have actually

102
00:09:27,540 --> 00:09:28,250
that effect.

103
00:09:28,950 --> 00:09:30,270
Why don't we have that effect.

104
00:09:32,440 --> 00:09:33,740
Something's not right here.

105
00:09:34,240 --> 00:09:38,750
I know what the problem is, haha, I'm an idiot.

106
00:09:39,460 --> 00:09:41,180
I didn't close the eye Congress.

107
00:09:42,400 --> 00:09:43,630
That's what the problem is.

108
00:09:47,590 --> 00:09:48,880
I didn't use a closing in.

109
00:09:49,780 --> 00:09:52,710
What is the matter with me too much Emet?

110
00:09:52,750 --> 00:09:53,880
That's what the problem is.

111
00:09:54,370 --> 00:09:55,530
So let's save it.

112
00:09:56,170 --> 00:09:56,770
Go in here.

113
00:09:56,770 --> 00:09:58,920
And I'm an idiot.

114
00:09:59,560 --> 00:10:03,600
So we also have the effect of the.

115
00:10:04,740 --> 00:10:14,520
However, effect, don't call myself an idiot, however, it's in the class, oh, because of the color.

116
00:10:14,880 --> 00:10:16,750
Exactly, because they need to change the color.

117
00:10:16,780 --> 00:10:20,550
The hover has to go up here.

118
00:10:21,880 --> 00:10:28,810
Actually, the whole class has the primary color, which, well, it has an opposite of zero point eight,

119
00:10:29,020 --> 00:10:38,140
I'm going to reduce actually the the color of our F a B's, which are actual class icons.

120
00:10:38,150 --> 00:10:40,690
So anything that has this class F.S.B.

121
00:10:42,150 --> 00:10:49,920
Now a different class of class of Fabi and all this changed a color to the color of secondary color

122
00:10:50,400 --> 00:10:53,290
key and also going to include a transition here.

123
00:10:53,310 --> 00:10:58,770
So when we hover out, we'll still have that smooth over effect.

124
00:10:58,840 --> 00:11:01,140
So what is.

125
00:11:05,330 --> 00:11:09,020
OK, now let's try this up hovering and there we go.

126
00:11:09,470 --> 00:11:13,050
OK, so that's pretty much it for the social icons.

127
00:11:13,580 --> 00:11:14,360
So see the next.