1
00:00:02,080 --> 00:00:08,670
Kissing this video, we're going to take care of our logo up here and this little button, actually

2
00:00:08,680 --> 00:00:11,280
the entire navigation, so logo and navigation.

3
00:00:11,500 --> 00:00:19,240
But first you probably see that we have something missing and there is a box shadow, which you can

4
00:00:19,240 --> 00:00:22,420
see here at our borders or our well, our borders.

5
00:00:22,430 --> 00:00:24,130
Yes, they are extremely dark.

6
00:00:24,640 --> 00:00:30,250
And this effect is actually achieved by going to Maine and then we're going to create a boccaro.

7
00:00:30,610 --> 00:00:38,450
But this dark shadow will not be towards the outside, but it would be towards the inside of the box.

8
00:00:38,450 --> 00:00:48,940
So when to use the incept this time and we do it by zero zero pixels and then 500 pixels spread and

9
00:00:48,940 --> 00:00:53,990
won her pixel intensity and also use a really dark colored hash one one.

10
00:00:54,070 --> 00:01:01,270
And as soon as we do this and go actually to our website, they go we have this dark border all around.

11
00:01:02,420 --> 00:01:08,560
OK, now let's take care of a navigation, and I'm also going to tell me your coming comment of just

12
00:01:08,570 --> 00:01:08,810
that.

13
00:01:10,000 --> 00:01:16,150
So let's go up here and start, first of all, taking the idea of now.

14
00:01:20,340 --> 00:01:22,050
And we're going to position it relative.

15
00:01:22,120 --> 00:01:26,340
Now, this is very important, if you position something relative, then you can position within this

16
00:01:26,910 --> 00:01:35,910
relative item items absolute and we are going to position also absolute, but let's give our navigation

17
00:01:35,910 --> 00:01:44,790
a width of 80 percent so we don't want our navigation to have the the entire with as you can see here

18
00:01:44,790 --> 00:01:52,380
in our finished project, it goes it still has here and here on the left and right side bit of space

19
00:01:52,530 --> 00:02:00,570
and is why we only displayed it as 80 percent knows it has this effect that the pages on it this large

20
00:02:00,570 --> 00:02:07,110
and are navigations here left and right for the social media and contact will separate from the page

21
00:02:07,110 --> 00:02:07,530
somehow.

22
00:02:09,000 --> 00:02:10,830
So on this, go back to our page.

23
00:02:15,230 --> 00:02:18,740
And now let's give it a height of 80 pixels.

24
00:02:20,410 --> 00:02:30,190
A margins of top and bottom zero and left and right auto now still want to have a bit of a padding from

25
00:02:30,190 --> 00:02:40,330
the top of the rim and I'm going to display it as flex and is because I want to align my two items,

26
00:02:40,330 --> 00:02:45,160
which if we take a look and our index thought e-mail.

27
00:02:46,610 --> 00:02:53,680
Do we have within our nerve we have actually free items, we have an image, we have a label and a button,

28
00:02:54,250 --> 00:02:59,050
and we want to be displayed and we want them to have a flex direction.

29
00:02:59,050 --> 00:03:03,910
But we still have a problem with this bubble and the way we're going to take care of this, actually

30
00:03:04,150 --> 00:03:05,780
taking care of this right now.

31
00:03:06,280 --> 00:03:14,050
So underneath of are never going to target on Navidea again within this the idea idea of logo.

32
00:03:14,920 --> 00:03:21,460
And I want to give this a height of 70 pixels and also a width of only 60 pixels.

33
00:03:22,450 --> 00:03:25,480
So as soon as I do this, then a bubble is small again.

34
00:03:25,990 --> 00:03:29,410
So we have here a button, here's a bubble and here's a label.

35
00:03:29,800 --> 00:03:34,000
And let's position this label at the finish with navigation.

36
00:03:35,560 --> 00:03:47,790
I'm going to line items to the center and justify the content to space between and this is because I

37
00:03:47,790 --> 00:03:54,030
said we have actually free items here because this is one item is the image, the label.

38
00:03:54,030 --> 00:03:55,510
And here's our button.

39
00:03:55,860 --> 00:03:59,850
Now, they have space between them and zero space on the left and right.

40
00:04:01,340 --> 00:04:08,900
So I still want to move that label over our bubble, as you remember and as you can remember, our navigation

41
00:04:08,900 --> 00:04:14,270
is positioned relative, and this means I can position now our label tag.

42
00:04:16,020 --> 00:04:22,130
Also, I could have chosen the lead by debunking to go with the tag and position.

43
00:04:23,430 --> 00:04:24,740
Absolutely not.

44
00:04:25,410 --> 00:04:31,560
Does not suffice to just position something absolute, and we still need to tell it where it should

45
00:04:31,560 --> 00:04:31,850
be.

46
00:04:32,430 --> 00:04:37,230
So I'm going to push it from the left, 25 pixels.

47
00:04:39,340 --> 00:04:42,250
And also from the top 25 pixels.

48
00:04:47,420 --> 00:04:57,980
OK, as soon as we do this, then it's up here, but I want to do a couple of things to this text.

49
00:04:59,060 --> 00:05:01,730
So first of all, I'm going to change its font size.

50
00:05:04,480 --> 00:05:06,580
To one point eight gram.

51
00:05:09,150 --> 00:05:16,320
Not going to change the cursor to pointer and are also going to give it a touch shadow.

52
00:05:17,700 --> 00:05:26,610
There it is, texture of one pixel, one pixel and two pixels and a like dark color.

53
00:05:28,080 --> 00:05:29,460
I guess that's a bit better.

54
00:05:29,460 --> 00:05:37,290
But I still want to change its font family, because if you take a look in our finished project, it

55
00:05:37,290 --> 00:05:38,230
looks a bit different.

56
00:05:38,250 --> 00:05:39,680
So this is the font that we need.

57
00:05:40,080 --> 00:05:48,060
Now we need to go back to to Google fonts and let's go back in here and search for the font family that

58
00:05:48,060 --> 00:05:48,690
I used.

59
00:05:48,690 --> 00:05:55,060
And I think I think it was I telic my term.

60
00:05:56,210 --> 00:05:58,070
I think it was this on.

61
00:05:59,470 --> 00:06:01,480
So they found imported.

62
00:06:03,650 --> 00:06:06,670
I have both of them now, and it doesn't matter.

63
00:06:10,350 --> 00:06:15,270
You can go up here, either you can replace this because now they're both settled, you can just paste

64
00:06:15,730 --> 00:06:22,740
space in the next one because see, we have space plus, uh, godsake plus display case.

65
00:06:22,740 --> 00:06:25,350
The both farm families now mixed in with this.

66
00:06:25,830 --> 00:06:29,970
And the second font family that we just selected is this one item.

67
00:06:31,440 --> 00:06:32,280
For ETM.

68
00:06:33,000 --> 00:06:39,870
OK, so let's go to try to do downtown logo and then to use this font family.

69
00:06:41,010 --> 00:06:43,260
OK, let's say when I see how this looks.

70
00:06:44,280 --> 00:06:45,020
Hey, there we go.

71
00:06:46,620 --> 00:06:49,930
I said that, for example, we could use a.

72
00:06:52,010 --> 00:06:53,870
Ta ta ta ta on the nerve.

73
00:06:54,710 --> 00:06:57,770
That logo class, so let's go back.

74
00:06:59,450 --> 00:07:07,850
And to our e-mail and written here, going to also give you the class of Hober as soon as I do this,

75
00:07:08,720 --> 00:07:14,430
if he hung over our navigation, I can't see it right that my.

76
00:07:15,390 --> 00:07:16,320
I should actually.

77
00:07:17,260 --> 00:07:18,360
Increase.

78
00:07:18,400 --> 00:07:19,600
Yeah, I know what I'm going to do.

79
00:07:21,860 --> 00:07:23,100
What's going on here?

80
00:07:23,140 --> 00:07:31,780
And if we label and hover over it, I'm just going to change the color color and I'm going to go with

81
00:07:31,780 --> 00:07:33,330
something completely whatsoever.

82
00:07:33,380 --> 00:07:35,340
FFA, OK?

83
00:07:35,830 --> 00:07:39,290
And now with Hollywood, they tend to be white.

84
00:07:40,090 --> 00:07:46,750
So the last thing actually, are we finished or we finished with this nasty need to start our button.

85
00:07:49,940 --> 00:07:55,010
So let's grab on to our PTM, because the button has this class of PETN.

86
00:07:56,360 --> 00:08:00,720
And we can go now to success and stardom.

87
00:08:01,970 --> 00:08:07,090
So class of PETN, I want to do a couple of things to this.

88
00:08:07,350 --> 00:08:15,430
So first of all, border, as you can see, our button in this particular moment doesn't have any border.

89
00:08:15,830 --> 00:08:16,850
So let's give it one.

90
00:08:17,790 --> 00:08:20,960
Let's use a border of two pixel solid.

91
00:08:23,560 --> 00:08:25,690
And I'm going to use AGP.

92
00:08:27,670 --> 00:08:31,600
A just a moment, I could use the variable.

93
00:08:32,110 --> 00:08:40,570
Yep, I could use a secondary color, so I'm not going to do this and to delete this and going to say

94
00:08:40,570 --> 00:08:43,570
var and within parentheses.

95
00:08:45,770 --> 00:08:52,700
Going to the secondary color, it's safe and we should have now a border, yay, there you go.

96
00:08:55,540 --> 00:09:01,900
Now for the color of the techs within it and also going to use the VA and secondary color.

97
00:09:06,040 --> 00:09:06,490
OK.

98
00:09:08,880 --> 00:09:14,550
This is going to give this a fact that is not selected, so we need to go over it in order to be selected

99
00:09:15,510 --> 00:09:18,420
and because we had a hover effect to.

100
00:09:19,860 --> 00:09:27,030
Set as a class, or at least I think we did set it as a class class, however, yep, we have it in

101
00:09:27,030 --> 00:09:30,270
here, I now want to change something.

102
00:09:30,270 --> 00:09:30,810
So.

103
00:09:32,470 --> 00:09:38,320
We did have it as a transition when we hover over it, but also when it comes back, so when it's no

104
00:09:38,320 --> 00:09:48,130
longer hovered, it needs to have this transition of ease and the time we and if we hit, save and go

105
00:09:48,130 --> 00:09:52,750
over it, it has the same effect as if we hover and hover up.

106
00:09:58,500 --> 00:10:02,940
Now, listen, I want to do through this button is take care of the border area, so this is a bit too

107
00:10:02,940 --> 00:10:03,690
small for me.

108
00:10:03,690 --> 00:10:10,940
So it's just going here to select a border radius and go with twenty five pixels.

109
00:10:11,160 --> 00:10:14,670
OK, as soon as we do this, we have this nice rounded up border.

110
00:10:16,020 --> 00:10:20,490
Now, I also want not only the text to have this hover effect, but also the border.

111
00:10:21,030 --> 00:10:31,740
For this, we need to take care of our bit and and in the hover state, going to the border and give

112
00:10:31,740 --> 00:10:35,930
it the same color as as if we would hover over it.

113
00:10:36,570 --> 00:10:39,090
Says we have here to the job.

114
00:10:40,220 --> 00:10:44,420
There's a horrified with this, so actually you just need to copy this.

115
00:10:46,710 --> 00:10:52,560
Let's go completely down to a hover and a sea borders, but it should increase is with.

116
00:10:55,080 --> 00:10:57,270
And solid and the color.

117
00:11:01,620 --> 00:11:04,890
Now, if you hover with the border, also has that hover effect.

118
00:11:10,410 --> 00:11:15,990
OK, next, I want to say something to the button beside of the holler state, we could also have an

119
00:11:16,050 --> 00:11:16,850
active state.

120
00:11:17,610 --> 00:11:23,250
Now this state is when we click on the button that does go to the button.

121
00:11:23,250 --> 00:11:24,920
So I click on the button.

122
00:11:25,680 --> 00:11:30,200
Something something should happen because I'm clicking, but I'm not seeing anything happening.

123
00:11:30,630 --> 00:11:36,360
Normally, you would then get a login form and sign up form.

124
00:11:36,900 --> 00:11:40,370
But I also wanted to have just a tinge of an effect.

125
00:11:40,860 --> 00:11:45,390
Now we can achieve this by going and creating that active shooter selector.

126
00:11:45,810 --> 00:11:51,900
And first of all, let's we're going to a transform skil point.

127
00:11:53,030 --> 00:12:01,010
Ninety five percent actually is just going to scale to 95, not 95 percent, but to 95 percent of five

128
00:12:01,010 --> 00:12:01,910
percent off.

129
00:12:03,200 --> 00:12:10,850
And I also want this to have a transition of point three seconds as we head on the hover effect.

130
00:12:12,080 --> 00:12:17,330
So if I click now on the button, you see it shrinks down five percent.

131
00:12:18,250 --> 00:12:21,280
All right, so that's basically it for the navigation and the logo.