1
00:00:07,290 --> 00:00:08,430
In this video.

2
00:00:08,430 --> 00:00:12,100
Let's go ahead and then apply seahorses to the nerve bar.

3
00:00:12,120 --> 00:00:13,980
So back to the CCIS.

4
00:00:14,010 --> 00:00:18,530
Before we continue, let's add some global CSS to some elements.

5
00:00:18,540 --> 00:00:26,430
So for PE elements, I want to give a different color hashtag three, three and then the line height

6
00:00:26,430 --> 00:00:36,410
to be 1.5 and then margin bottom is going to be as 1.5 rim.

7
00:00:36,420 --> 00:00:43,680
So with this one, I can go ahead and remove this PE link here because I have it as a global styling

8
00:00:43,730 --> 00:00:44,550
above here.

9
00:00:44,730 --> 00:00:48,360
So if I save it, you can see that everything remains the same.

10
00:00:48,360 --> 00:00:50,910
So let's target with the navigation.

11
00:00:50,940 --> 00:00:54,570
Remember we are designing for mobile first approach.

12
00:00:54,570 --> 00:00:59,820
So now try to reduce the screen size and now let's work with that.

13
00:00:59,850 --> 00:01:03,210
So for the images we are going to control.

14
00:01:03,210 --> 00:01:11,250
So to fit inside it container because of that, we are going to use a specific class on the logo.

15
00:01:11,370 --> 00:01:14,370
So I think the number comes before the header.

16
00:01:14,370 --> 00:01:19,470
So our come here and start with the navigation or now.

17
00:01:19,650 --> 00:01:26,250
So here let's start with enough and give it a width of 100%.

18
00:01:26,700 --> 00:01:29,580
So let's go ahead and then style the logo.

19
00:01:29,580 --> 00:01:31,290
But look at the structure here.

20
00:01:31,380 --> 00:01:39,030
I want to target the image so I can give a class to the image or I can target NAV and the image.

21
00:01:39,030 --> 00:01:41,910
Then I will have access to this one.

22
00:01:41,910 --> 00:01:43,530
So here we go.

23
00:01:43,560 --> 00:01:47,760
I'm going to make use of NAV and then the IMG.

24
00:01:48,060 --> 00:01:52,860
So here I want to give the width of the logo as 100 page works.

25
00:01:52,860 --> 00:01:54,330
So save it.

26
00:01:54,330 --> 00:01:57,330
And I think this is okay for my likeness.

27
00:01:57,330 --> 00:02:00,510
And let me give you some margin on the logo.

28
00:02:00,510 --> 00:02:05,100
As for Page, so now the logo is done.

29
00:02:05,100 --> 00:02:09,509
The next step is look at to find out where everything is at the center.

30
00:02:09,509 --> 00:02:13,050
So you may be thinking, well, we may need flex property, right?

31
00:02:13,050 --> 00:02:14,190
And you are right.

32
00:02:14,190 --> 00:02:23,190
So next property is let's add some box shadow and when I pay zero pays x one pays x one pesos and the

33
00:02:23,190 --> 00:02:34,350
color is rg b a and then going to be 000 comma 0.1 or possibly save it.

34
00:02:34,350 --> 00:02:38,010
And now we have something like this as compared to the final one.

35
00:02:38,010 --> 00:02:39,900
We are almost there.

36
00:02:40,080 --> 00:02:48,930
The next step is let's add display flex to it as that and then I want align everything at the center.

37
00:02:48,930 --> 00:02:56,130
But before that let's change the direction to column and then the justified content to be center and

38
00:02:56,130 --> 00:02:59,010
then align items to the center.

39
00:02:59,010 --> 00:03:03,180
Also save it and you can see that everything is in line.

40
00:03:03,330 --> 00:03:07,350
The next step is let's control the individual here.

41
00:03:07,440 --> 00:03:10,350
Remember this eyes are inside.

42
00:03:10,350 --> 00:03:12,150
A parent called up.

43
00:03:12,570 --> 00:03:20,460
So it means that I can use display flags on the parent so that I can control eight element or its children.

44
00:03:20,460 --> 00:03:24,150
So here we go after the logo here.

45
00:03:24,180 --> 00:03:27,030
Let's go ahead and style the links.

46
00:03:27,030 --> 00:03:30,450
So our target, the NAV and then the new arrow.

47
00:03:30,660 --> 00:03:34,860
And for this one, give it a display of flex.

48
00:03:36,030 --> 00:03:38,370
The next property is flex direction.

49
00:03:38,550 --> 00:03:41,130
I want to be on top of each other.

50
00:03:41,130 --> 00:03:43,650
So now this is what we have.

51
00:03:43,950 --> 00:03:52,830
The next step is let's move everything under center as we did for the container or as center.

52
00:03:52,890 --> 00:03:55,260
And now this is what we have.

53
00:03:55,320 --> 00:04:03,570
The next step is let's remove the styling that is a bulletin by making use of less tile to non.

54
00:04:03,840 --> 00:04:11,070
And lastly, let's give some pattern of say five or two pixels, let's say two padlocks.

55
00:04:11,100 --> 00:04:14,850
Now have a look and this is what we have.

56
00:04:14,880 --> 00:04:21,510
If we want them to be at the start here, we are going to use what is called flex start.

57
00:04:21,899 --> 00:04:25,710
And let's see what I'm going to happen and this is what we have.

58
00:04:25,710 --> 00:04:29,400
But think if to be at the center is good.

59
00:04:29,430 --> 00:04:30,150
All right.

60
00:04:30,180 --> 00:04:34,020
The next step is let's remove the underline from each text.

61
00:04:34,020 --> 00:04:36,600
So we are going to target the a tag.

62
00:04:36,600 --> 00:04:38,370
So which is this one?

63
00:04:38,370 --> 00:04:46,440
So we can target the now you error and then the a tag or we can give them a specific class so that we

64
00:04:46,440 --> 00:04:47,430
can style it.

65
00:04:47,430 --> 00:04:53,880
So let's go ahead and then select the individual line and then we target the a tag.

66
00:04:53,880 --> 00:05:00,000
So we're going to be us now and then you Arrow and I and then the a tag here.

67
00:05:00,210 --> 00:05:04,470
So for this one, let's give it a text decoration as none.

68
00:05:05,340 --> 00:05:06,210
Now let's see.

69
00:05:06,210 --> 00:05:06,750
And now you.

70
00:05:06,890 --> 00:05:09,830
And see that there is no underline for each text.

71
00:05:10,130 --> 00:05:19,060
Next step is we can add some spacing between the lines so we can go ahead and target the line also.

72
00:05:19,070 --> 00:05:22,900
So here we go now and then u l l i.

73
00:05:22,910 --> 00:05:29,120
And then we can give it some padding to be, let's say three.

74
00:05:29,990 --> 00:05:30,740
Let's see.

75
00:05:31,310 --> 00:05:33,620
Yeah, I think right now is okay.

76
00:05:33,650 --> 00:05:34,830
Yeah, it's okay.

77
00:05:34,850 --> 00:05:36,390
Or we can give it a colour.

78
00:05:36,410 --> 00:05:38,510
The choice is yours.

79
00:05:38,630 --> 00:05:47,990
The next step is that let's try the specific link or create post b10, which is what we added the class

80
00:05:48,080 --> 00:05:50,180
or create B10.

81
00:05:50,180 --> 00:05:59,180
So let's select that and let's come back to the CSS and now let's make this of dots and add D classes

82
00:05:59,180 --> 00:05:59,780
to it.

83
00:05:59,960 --> 00:06:11,660
So let's give it a background colour to be a hashtag F, F, five, a5f and next is let's give it a

84
00:06:11,660 --> 00:06:24,140
colour on the button to be hashtagged f, f, f and border to be none and padding to be ten parsecs.

85
00:06:24,140 --> 00:06:25,610
20 parsecs.

86
00:06:29,650 --> 00:06:31,720
And border radios.

87
00:06:31,750 --> 00:06:35,380
To be $5 and font size.

88
00:06:35,380 --> 00:06:41,770
Also to be 1.2 ram and cursor to be pointer.

89
00:06:41,950 --> 00:06:44,740
And now this is what we have.

90
00:06:44,740 --> 00:06:49,240
And you can see that we have some padding or margin below the bottom.

91
00:06:49,510 --> 00:06:54,940
So let's add padding bottom to, let's say $10.

92
00:06:55,180 --> 00:06:56,410
So let's save it.

93
00:06:56,410 --> 00:06:58,780
And now this is what we have.

94
00:06:58,810 --> 00:06:59,410
Great.

95
00:06:59,410 --> 00:07:03,460
What has left is a better responsiveness on desktop.

96
00:07:03,460 --> 00:07:05,680
I want them to be in raw.

97
00:07:05,680 --> 00:07:08,200
So let's fix that one in the next video.