1
00:00:01,408 --> 00:00:05,240
Let's get started with our header in here

2
00:00:05,240 --> 00:00:10,240
and specifically not the nav item but our page logo.

3
00:00:10,250 --> 00:00:13,580
The logo simply was the text 'Travel Goals'.

4
00:00:13,580 --> 00:00:17,490
And here we didn't use an image, we used plain text

5
00:00:17,490 --> 00:00:21,540
with a specific font style applied later on.

6
00:00:21,540 --> 00:00:25,160
Therefore, what we need in the header is a new element

7
00:00:25,160 --> 00:00:28,040
and this element will be an anchor tag.

8
00:00:28,040 --> 00:00:31,080
It will be a link not a paragraph or something like that

9
00:00:31,080 --> 00:00:34,202
because by clicking onto this logo,

10
00:00:34,202 --> 00:00:38,260
you should be redirected to the landing page.

11
00:00:38,260 --> 00:00:41,080
Therefore, what we need is this anchor tag here

12
00:00:41,080 --> 00:00:45,810
and it should be a reference to the index HTML file.

13
00:00:45,810 --> 00:00:50,440
So with a slash + index HTML, and as I said,

14
00:00:50,440 --> 00:00:53,533
the logo should be named 'Travel Goals' here.

15
00:00:54,690 --> 00:00:55,830
If we check this out,

16
00:00:55,830 --> 00:00:57,750
we see we have the travel goals link here,

17
00:00:57,750 --> 00:01:00,080
nothing too spectacular here.

18
00:01:00,080 --> 00:01:03,570
I want to change one thing here though, or add something.

19
00:01:03,570 --> 00:01:05,060
We have the header,

20
00:01:05,060 --> 00:01:07,540
which contains the anchor tag and the nav.

21
00:01:07,540 --> 00:01:10,010
The anchor tag here is an inland element,

22
00:01:10,010 --> 00:01:11,523
nav is a block element.

23
00:01:11,523 --> 00:01:15,000
And I would like to have two block elements,

24
00:01:15,000 --> 00:01:16,410
one after another.

25
00:01:16,410 --> 00:01:19,830
That's the first thing and we could use the display property

26
00:01:19,830 --> 00:01:23,320
to change the element type here,

27
00:01:23,320 --> 00:01:24,810
but I don't want to do this.

28
00:01:24,810 --> 00:01:27,190
Instead, I want to use something

29
00:01:27,190 --> 00:01:30,730
which is pretty common for real-world projects.

30
00:01:30,730 --> 00:01:33,970
Whenever you don't have a real semantic element

31
00:01:33,970 --> 00:01:34,960
you want to use,

32
00:01:34,960 --> 00:01:37,256
but you need a container element

33
00:01:37,256 --> 00:01:39,580
to add additional elements to add to it,

34
00:01:39,580 --> 00:01:42,100
then we use non-semantic elements,

35
00:01:42,100 --> 00:01:45,140
which can either be a span, we talked about this,

36
00:01:45,140 --> 00:01:48,330
this is a non-semantic inland element

37
00:01:48,330 --> 00:01:52,090
or a div for a non-semantic block element.

38
00:01:52,090 --> 00:01:53,764
We want to have a block element in here,

39
00:01:53,764 --> 00:01:57,740
therefore, I'll take the anchor tag and put it into here,

40
00:01:57,740 --> 00:01:59,520
format this quickly.

41
00:01:59,520 --> 00:02:01,324
With that we created our logo

42
00:02:01,324 --> 00:02:05,630
and there is one additional thing I would like to add here,

43
00:02:05,630 --> 00:02:10,410
as we only have one logo, one unique logo on our website,

44
00:02:10,410 --> 00:02:12,320
but probably multiple links.

45
00:02:12,320 --> 00:02:14,130
I want to be very explicit

46
00:02:14,130 --> 00:02:18,110
about how we can select this link here

47
00:02:18,110 --> 00:02:22,570
and for this, I'll add an id as attribute to our div.

48
00:02:22,570 --> 00:02:24,600
So we use the id attribute

49
00:02:24,600 --> 00:02:28,017
and the id here should be 'page-logo'.

50
00:02:29,050 --> 00:02:30,920
With this logo being unique

51
00:02:30,920 --> 00:02:34,280
but being on all of our pages on the website,

52
00:02:34,280 --> 00:02:35,910
because we will have two pages,

53
00:02:35,910 --> 00:02:39,110
our landing page and the place's page;

54
00:02:39,110 --> 00:02:42,933
we can actually also create another style sheet here.

55
00:02:44,550 --> 00:02:45,750
Let's do this now.

56
00:02:45,750 --> 00:02:49,010
And let's use, as we learnt it already in earlier modules,

57
00:02:49,010 --> 00:02:51,370
a shared CSS file here.

58
00:02:51,370 --> 00:02:53,600
This will be a style which will be applied

59
00:02:53,600 --> 00:02:55,037
to any of the pages.

60
00:02:55,037 --> 00:02:58,090
As I said, the logo will be on all pages.

61
00:02:58,090 --> 00:03:03,090
Let's not forget to add the link to the style sheet

62
00:03:03,200 --> 00:03:05,840
ahead of the style CSS file

63
00:03:05,840 --> 00:03:09,320
because first, the shared styles should be loaded

64
00:03:09,320 --> 00:03:11,750
so we use the shared CSS file.

65
00:03:11,750 --> 00:03:13,110
And in this file,

66
00:03:13,110 --> 00:03:16,870
I now want to add some generic styles here.

67
00:03:18,790 --> 00:03:21,010
And for that, let's go back to our page

68
00:03:21,010 --> 00:03:23,750
and open the developer tools once again.

69
00:03:23,750 --> 00:03:28,410
I would like to add a first style to our body in here,

70
00:03:28,410 --> 00:03:31,480
as you see the body has a default margin, for example

71
00:03:31,480 --> 00:03:33,750
and that's one thing I want to get rid of.

72
00:03:33,750 --> 00:03:34,870
The second thing is,

73
00:03:34,870 --> 00:03:37,890
I would like to add a default font family

74
00:03:37,890 --> 00:03:39,150
to the body element

75
00:03:39,150 --> 00:03:40,600
because this will then allow us

76
00:03:40,600 --> 00:03:44,720
to add specific font families to selected elements,

77
00:03:44,720 --> 00:03:49,350
but generally have a nicer font family than the default one.

78
00:03:49,350 --> 00:03:52,860
So let's add our body type selector here.

79
00:03:52,860 --> 00:03:57,730
and let's say that the font family should be 'Quicksand'

80
00:03:57,730 --> 00:04:02,730
and as a fallback, sans-serif,

81
00:04:03,460 --> 00:04:07,506
and we'll set the margin in general to zero, like this.

82
00:04:07,506 --> 00:04:11,310
And as you see, our font family improved already.

83
00:04:11,310 --> 00:04:14,130
However, this is not the font family I want to use

84
00:04:14,130 --> 00:04:16,529
for our logo here.

85
00:04:16,529 --> 00:04:20,738
As you saw, we added an id to our log, the page logo id

86
00:04:20,738 --> 00:04:25,738
and we will now use this id, so hashtag + page-logo.

87
00:04:26,670 --> 00:04:29,210
And specifically in this logo,

88
00:04:29,210 --> 00:04:32,670
I want to refer to the anchor tag in here,

89
00:04:32,670 --> 00:04:34,170
that's what I want to style.

90
00:04:34,170 --> 00:04:37,760
So again, I'm very explicit about what I want to select,

91
00:04:37,760 --> 00:04:41,830
and this allows me to add specific styles to this link

92
00:04:41,830 --> 00:04:43,517
inside the page logo id.

93
00:04:43,517 --> 00:04:48,517
What's other links can have other generic styles in here.

94
00:04:48,610 --> 00:04:53,610
So, for the logo, I first want to add some padding,

95
00:04:53,620 --> 00:04:57,160
as you see, it's very close to the left and top border.

96
00:04:57,160 --> 00:04:59,570
So let's add some padding

97
00:04:59,570 --> 00:05:03,823
and for this we could use 10 pixels here.

98
00:05:04,830 --> 00:05:07,729
Then I wanna use another font family

99
00:05:07,729 --> 00:05:12,030
and here I'm going to use Oleo Script.

100
00:05:12,030 --> 00:05:13,940
This is also a font family,

101
00:05:13,940 --> 00:05:16,750
which we can use, thanks to Google Fonts,

102
00:05:16,750 --> 00:05:18,476
so this is in here.

103
00:05:18,476 --> 00:05:21,520
So make sure to add this link in case you missed it

104
00:05:21,520 --> 00:05:23,400
when we set up the project.

105
00:05:23,400 --> 00:05:26,333
And as fallback we use sans-serif.

106
00:05:28,570 --> 00:05:32,300
Then I want to add some color to our logo here.

107
00:05:32,300 --> 00:05:35,700
Again, we use an rgb color

108
00:05:35,700 --> 00:05:39,017
and this should be 245, 243 and 160.

109
00:05:47,580 --> 00:05:51,520
Then, we'll change the font size a bit, make it 50 pixel,

110
00:05:51,520 --> 00:05:53,783
fix this font size here.

111
00:05:53,783 --> 00:05:55,920
And if we have a look now, yeah,

112
00:05:55,920 --> 00:05:57,850
this looks a lot better already.

113
00:05:57,850 --> 00:06:00,260
You see the padding is maybe not yet sufficient,

114
00:06:00,260 --> 00:06:03,189
so we might have to work on this when we work on the header

115
00:06:03,189 --> 00:06:05,560
and of course the background image is missing,

116
00:06:05,560 --> 00:06:07,780
so the readability is not perfect.

117
00:06:07,780 --> 00:06:09,880
And we have this underscore here,

118
00:06:09,880 --> 00:06:12,040
so we should get rid of this maybe.

119
00:06:12,040 --> 00:06:14,940
Do you know how this works? You hopefully do.

120
00:06:14,940 --> 00:06:19,015
This works with the text-decoration property,

121
00:06:19,015 --> 00:06:21,308
which we can set it to none.

122
00:06:21,308 --> 00:06:23,144
The underscore is gone.

123
00:06:23,144 --> 00:06:26,900
And now, we are almost done with the logo already.

124
00:06:26,900 --> 00:06:30,580
I just want to introduce two new properties here

125
00:06:30,580 --> 00:06:33,063
to make it look even better.

126
00:06:33,063 --> 00:06:37,430
Both properties are related and can be specifically applied

127
00:06:37,430 --> 00:06:38,540
to text.

128
00:06:38,540 --> 00:06:39,440
The first one here,

129
00:06:39,440 --> 00:06:43,510
therefore, is the text-transform property.

130
00:06:43,510 --> 00:06:48,510
As you see, you can define the way letters are displayed

131
00:06:49,510 --> 00:06:50,470
with this property.

132
00:06:50,470 --> 00:06:54,320
You have different ways, capitalized, lowercase, uppercase

133
00:06:54,320 --> 00:06:55,580
and so on.

134
00:06:55,580 --> 00:07:00,150
In our case, I want to use uppercase.

135
00:07:00,150 --> 00:07:02,660
This will capitalize all the letters

136
00:07:02,660 --> 00:07:05,310
and now it looks a lot more beautiful, in my opinion.

137
00:07:06,510 --> 00:07:10,570
And the second property also related to text,

138
00:07:10,570 --> 00:07:14,780
is the so-called text-shadow property.

139
00:07:14,780 --> 00:07:16,805
Now you know the box-shadow already,

140
00:07:16,805 --> 00:07:21,805
which allowed us to add a nice shadow behind our box model,

141
00:07:21,820 --> 00:07:22,653
so to say.

142
00:07:22,653 --> 00:07:25,999
So behind the entire box consisting of content, padding,

143
00:07:25,999 --> 00:07:27,830
margin and border.

144
00:07:27,830 --> 00:07:31,531
Here you can specifically add shadow behind text.

145
00:07:31,531 --> 00:07:34,640
Now the logic, how it works, it's basically the same.

146
00:07:34,640 --> 00:07:36,370
You have an horizontal offset,

147
00:07:36,370 --> 00:07:39,561
so left to right, with a value of one pixel here,

148
00:07:39,561 --> 00:07:43,990
then a vertical offset, so top to bottom, also one pixel.

149
00:07:43,990 --> 00:07:46,250
And then we have the blur radius,

150
00:07:46,250 --> 00:07:48,140
which will set to two pixels here.

151
00:07:48,140 --> 00:07:52,190
And then, what is missing, our rgb color.

152
00:07:52,190 --> 00:07:55,850
Again, I prepared a nice color for you.

153
00:07:55,850 --> 00:08:00,850
And this is zero, zero and zero.

154
00:08:01,040 --> 00:08:02,603
So plain black here.

155
00:08:05,340 --> 00:08:08,620
With that, you'll see we have this nice text shadow

156
00:08:08,620 --> 00:08:10,100
behind it.

157
00:08:10,100 --> 00:08:12,963
And our logo looks pretty cool so far, as I would say.

158
00:08:14,060 --> 00:08:16,760
Of course our header is not finished yet though,

159
00:08:16,760 --> 00:08:19,713
what's missing are our navigation items.