1
00:00:02,090 --> 00:00:04,370
So this was a lot of content,

2
00:00:04,370 --> 00:00:08,250
a lot of work we are almost done in this lecture

3
00:00:08,250 --> 00:00:12,940
I want to finish some details on our page here though.

4
00:00:12,940 --> 00:00:17,010
The first thing I saw is that our hover effect for the nav

5
00:00:17,010 --> 00:00:19,530
items here is okay I like it,

6
00:00:19,530 --> 00:00:21,810
but with that hover effect,

7
00:00:21,810 --> 00:00:24,450
being implemented many lectures ago,

8
00:00:24,450 --> 00:00:28,720
we also added the hover effect to our page logo.

9
00:00:28,720 --> 00:00:31,190
And to be honest, I don't think this looks good,

10
00:00:31,190 --> 00:00:33,810
especially if we go to landing page, no,

11
00:00:33,810 --> 00:00:36,130
not the look that we want here.

12
00:00:36,130 --> 00:00:39,790
The problem we have is that if we check our code,

13
00:00:39,790 --> 00:00:44,030
which is in the shared CSS file here it is this header,

14
00:00:44,030 --> 00:00:47,646
a hover code we have, well header a,

15
00:00:47,646 --> 00:00:51,853
refers to all anchor tags inside our header.

16
00:00:53,030 --> 00:00:55,560
If we check this quickly out in the dev tools,

17
00:00:55,560 --> 00:00:57,740
we see that in our header, we have, well,

18
00:00:57,740 --> 00:01:02,740
the anchor tag in the nav items, unordered list, list items.

19
00:01:02,910 --> 00:01:04,180
Here it is.

20
00:01:04,180 --> 00:01:05,360
That's the correct one,

21
00:01:05,360 --> 00:01:10,360
but also the anchor tag here in our page logo,

22
00:01:10,560 --> 00:01:14,300
therefore we should be more explicit here about our

23
00:01:14,300 --> 00:01:15,460
combinator.

24
00:01:15,460 --> 00:01:20,300
We should say that only anchor tags inside the header and

25
00:01:20,300 --> 00:01:24,477
inside the nav item should have the cyber effect.

26
00:01:24,477 --> 00:01:25,800
Therefore,

27
00:01:25,800 --> 00:01:30,800
we can go back and simply add nav here ahead of our pseudo

28
00:01:30,930 --> 00:01:34,210
selector with this in place this should be fixed.

29
00:01:34,210 --> 00:01:36,290
Yep now this looks a lot better.

30
00:01:36,290 --> 00:01:37,860
You see hover effect here.

31
00:01:37,860 --> 00:01:42,860
Here we have it, talking about the logo and these nav items,

32
00:01:45,200 --> 00:01:47,700
the color here on our places page.

33
00:01:47,700 --> 00:01:51,630
It's also not what I want here, for the landing page,

34
00:01:51,630 --> 00:01:52,920
this yellow tone is great.

35
00:01:52,920 --> 00:01:54,180
I think it looks good.

36
00:01:54,180 --> 00:01:56,030
But on the destinations page,

37
00:01:56,030 --> 00:01:57,940
I would like to have a bluish tone.

38
00:01:57,940 --> 00:02:01,263
So this tone we have here in our explore link,

39
00:02:02,300 --> 00:02:04,670
how did we add the styling to these?

40
00:02:04,670 --> 00:02:07,940
Well in the shared CSS file,

41
00:02:07,940 --> 00:02:11,300
we added the style to our logo like this.

42
00:02:11,300 --> 00:02:16,300
So we selected the page logo ID and then the anchor tag and

43
00:02:16,470 --> 00:02:21,470
40 list items, well, we did it with the header a,

44
00:02:22,410 --> 00:02:23,690
selector here.

45
00:02:23,690 --> 00:02:27,360
Therefore we have to override both of these selectors to

46
00:02:27,360 --> 00:02:29,090
change the color with this.

47
00:02:29,090 --> 00:02:30,470
We go into our places,

48
00:02:30,470 --> 00:02:34,200
CSS file and scroll up a bit maybe.

49
00:02:34,200 --> 00:02:39,200
And let's first add the ID selector page logo and here the

50
00:02:39,570 --> 00:02:41,260
anchor tag.

51
00:02:41,260 --> 00:02:46,260
And the second one was the, maybe not here, maybe there.

52
00:02:46,930 --> 00:02:50,840
The second one is the header a selector.

53
00:02:50,840 --> 00:02:54,593
I just showed you for the color of the nav items.

54
00:02:56,000 --> 00:02:59,980
The page logo should have this blue color tone

55
00:02:59,980 --> 00:03:01,320
I just referred to.

56
00:03:01,320 --> 00:03:06,320
So this has an RGB code of one eight three two three

57
00:03:08,170 --> 00:03:13,170
zero, oops, two three zero and two three five.

58
00:03:13,680 --> 00:03:18,680
And we can actually copy paste this here for our nav items.

59
00:03:19,120 --> 00:03:20,440
Let's see yep.

60
00:03:20,440 --> 00:03:21,273
This looks better.

61
00:03:21,273 --> 00:03:23,550
I think, as I said, it remains unchanged,

62
00:03:23,550 --> 00:03:25,913
of course, for the landing page,

63
00:03:27,410 --> 00:03:30,230
with the change of the color,

64
00:03:30,230 --> 00:03:33,280
we should also change our hover effect though.

65
00:03:33,280 --> 00:03:34,113
Therefore,

66
00:03:34,113 --> 00:03:38,020
we should also work on this pseudo selector and let's not

67
00:03:38,020 --> 00:03:40,420
make the same mistake that we had in the

68
00:03:40,420 --> 00:03:41,810
shared CSS file.

69
00:03:41,810 --> 00:03:46,810
So here I'll refer to header and here to the nav element.

70
00:03:49,200 --> 00:03:53,250
And then we add the pseudo selector to all anchor techs

71
00:03:54,110 --> 00:03:56,420
inside the nav element.

72
00:03:56,420 --> 00:03:59,530
Here, there are going to change two things.

73
00:03:59,530 --> 00:04:04,530
First the background color to actually the same RGB code

74
00:04:07,410 --> 00:04:08,730
we used up here.

75
00:04:08,730 --> 00:04:10,350
So to this bluish tone,

76
00:04:10,350 --> 00:04:12,960
but with the background color, having this color,

77
00:04:12,960 --> 00:04:16,730
we should give the actual text different color here with the

78
00:04:16,730 --> 00:04:17,913
color property.

79
00:04:18,870 --> 00:04:22,470
And there are use an RGB code of

80
00:04:22,470 --> 00:04:27,147
59, 59 and 59.

81
00:04:31,630 --> 00:04:35,130
This means our pseudo selector should now be fixed.

82
00:04:35,130 --> 00:04:38,220
So if we have either our nav items,

83
00:04:38,220 --> 00:04:42,233
this fits perfectly our overall page look.

84
00:04:44,200 --> 00:04:48,040
So with these changes, I think the page looks all right,

85
00:04:48,040 --> 00:04:52,627
what we might do here is we might bring our headline and the

86
00:04:53,940 --> 00:04:57,590
corresponding text up a bit, I think we have right here,

87
00:04:57,590 --> 00:04:58,800
we have it, yeah.

88
00:04:58,800 --> 00:05:00,010
We have a margin here.

89
00:05:00,010 --> 00:05:01,540
And if we remove that margin,

90
00:05:01,540 --> 00:05:02,530
we have margin collapsing.

91
00:05:02,530 --> 00:05:05,280
So it will have the gap between the H two element and the

92
00:05:05,280 --> 00:05:08,560
paragraph but the margin top, if that'll be removed,

93
00:05:08,560 --> 00:05:11,320
then this will bring up this, enter a content a bit.

94
00:05:11,320 --> 00:05:12,980
I think this would look nice.

95
00:05:12,980 --> 00:05:17,000
So let's go back to the places CSS file and see where we

96
00:05:17,000 --> 00:05:20,770
have our item content class, this one right here,

97
00:05:20,770 --> 00:05:24,523
which holds the right part of our card so to say,

98
00:05:25,533 --> 00:05:27,340
so item content, and here,

99
00:05:27,340 --> 00:05:30,390
I want to refer to the H two element and there,

100
00:05:30,390 --> 00:05:33,853
the margin should simply be set to zero.

101
00:05:35,370 --> 00:05:36,340
Let's go back.

102
00:05:36,340 --> 00:05:37,850
Yeah, I think this looks better.

103
00:05:37,850 --> 00:05:39,610
It's a matter of taste of course,

104
00:05:39,610 --> 00:05:41,230
but I think this looks great.

105
00:05:41,230 --> 00:05:45,390
What we could do is we could add some more dummy texts also

106
00:05:45,390 --> 00:05:47,560
to the London card here.

107
00:05:47,560 --> 00:05:49,620
Let's maybe do this as a last change.

108
00:05:49,620 --> 00:05:51,140
So we go to places,

109
00:05:51,140 --> 00:05:54,586
HTML and here up to

110
00:05:54,586 --> 00:05:59,586
London and simply add this paragraph.

111
00:05:59,640 --> 00:06:01,410
Once again, as I said,

112
00:06:01,410 --> 00:06:04,080
it's just some dummy texts, so it doesn't matter.

113
00:06:04,080 --> 00:06:04,913
Yeah.

114
00:06:04,913 --> 00:06:08,380
But I think it improves the overall look of that card and

115
00:06:08,380 --> 00:06:10,283
yeah, it looks better I think.

116
00:06:11,860 --> 00:06:15,223
But with this, if I quickly check this page,

117
00:06:16,336 --> 00:06:17,330
maybe one link here, yeah.

118
00:06:17,330 --> 00:06:20,210
This works nicely, yeah.

119
00:06:20,210 --> 00:06:21,710
I think we did it.

120
00:06:21,710 --> 00:06:23,720
We finished our website.

121
00:06:23,720 --> 00:06:26,620
This is the second website you built now.

122
00:06:26,620 --> 00:06:31,160
So the only thing that is left is a summary of what we

123
00:06:31,160 --> 00:06:33,623
learned in this very long module.