1
00:00:02,100 --> 00:00:05,470
Where is the styling of our footer applied?

2
00:00:05,470 --> 00:00:09,180
Well, obviously, not in the styles.css file

3
00:00:09,180 --> 00:00:12,320
where we worked in the last minutes actually.

4
00:00:12,320 --> 00:00:15,260
Here, we go back to our shared.css file.

5
00:00:15,260 --> 00:00:18,580
Because as the header here, our footer is also

6
00:00:18,580 --> 00:00:22,040
something we see on every page of our website.

7
00:00:22,040 --> 00:00:26,210
Therefore, it should be part of this shared.css file.

8
00:00:26,210 --> 00:00:30,970
We will refer to the footer with just normal type selectors,

9
00:00:30,970 --> 00:00:32,640
maybe some combinators.

10
00:00:32,640 --> 00:00:34,420
And I would like to get started first

11
00:00:34,420 --> 00:00:36,880
with the footer element itself.

12
00:00:36,880 --> 00:00:40,770
As I said, I would like to add some background color here.

13
00:00:40,770 --> 00:00:43,390
And I'll, again, use a linear gradient.

14
00:00:43,390 --> 00:00:47,320
Therefore, we'll refer to the background property here.

15
00:00:47,320 --> 00:00:50,900
And I'll add the linear gradient function here

16
00:00:50,900 --> 00:00:55,900
with a prepared value by myself with 70 degrees first.

17
00:00:56,210 --> 00:00:58,433
And then we add an RGB code.

18
00:01:00,300 --> 00:01:05,300
Don't forget the parenthesis here of 24, 24, and 24.

19
00:01:08,677 --> 00:01:13,040
And now, the second RGB code here, again,

20
00:01:13,040 --> 00:01:18,040
with the parenthesis should be 25, 29, and 29.

21
00:01:20,880 --> 00:01:24,120
So this is this grayish black look in the end.

22
00:01:24,120 --> 00:01:28,330
And if we go back now, you see we have this nice background,

23
00:01:28,330 --> 00:01:30,160
but we have the icons.

24
00:01:30,160 --> 00:01:34,390
Well, a little bit off from a size perspective.

25
00:01:34,390 --> 00:01:36,700
Let's work on these as a next step.

26
00:01:36,700 --> 00:01:37,990
And to do that,

27
00:01:37,990 --> 00:01:42,070
we can first think about the structure we have right here.

28
00:01:42,070 --> 00:01:44,360
Because we know that we have an unordered list,

29
00:01:44,360 --> 00:01:46,340
which contains the two list items

30
00:01:46,340 --> 00:01:50,020
where each list item contains an anchor tag.

31
00:01:50,020 --> 00:01:53,410
And in this anchor tag, we have the image element then.

32
00:01:53,410 --> 00:01:56,010
So before we dive deeper into how we organize

33
00:01:56,010 --> 00:01:59,070
or create the layout of these icons,

34
00:01:59,070 --> 00:02:01,870
let's first focus onto the size.

35
00:02:01,870 --> 00:02:04,693
And here, we could follow a pretty simple approach.

36
00:02:06,360 --> 00:02:08,949
If we apply a specific width

37
00:02:08,949 --> 00:02:11,810
and height to the list items here

38
00:02:11,810 --> 00:02:15,840
and then a percentage width and height to our images, well,

39
00:02:15,840 --> 00:02:18,630
then the rules regarding the width and the height

40
00:02:18,630 --> 00:02:22,260
of these images will refer to the parent element.

41
00:02:22,260 --> 00:02:23,840
Or the parent would be the anchor tag,

42
00:02:23,840 --> 00:02:26,650
which obviously doesn't have any height or width applied.

43
00:02:26,650 --> 00:02:29,870
And therefore, it will apply to the list element

44
00:02:29,870 --> 00:02:34,010
as the parent that predefines the space

45
00:02:34,010 --> 00:02:36,150
this container provides for the images.

46
00:02:36,150 --> 00:02:40,040
And therefore, we could make our images a lot smaller.

47
00:02:40,040 --> 00:02:41,330
What this means in simple words

48
00:02:41,330 --> 00:02:44,240
is that we can go back to our code.

49
00:02:44,240 --> 00:02:46,640
First, select our list items.

50
00:02:46,640 --> 00:02:49,630
I'll do this again with a descendant combinator here.

51
00:02:49,630 --> 00:02:53,000
So footer and here the list items.

52
00:02:53,000 --> 00:02:58,000
And there, I'll apply a width of, let's say, 80 pixels.

53
00:02:58,400 --> 00:03:00,350
And the same for the height,

54
00:03:00,350 --> 00:03:03,130
which should also be 80 pixels here.

55
00:03:03,130 --> 00:03:06,300
And now, we'll select our images, again,

56
00:03:06,300 --> 00:03:08,050
for the descendant combinator.

57
00:03:08,050 --> 00:03:09,300
And here, we'll simply say,

58
00:03:09,300 --> 00:03:11,970
well, the width should be 100% right here.

59
00:03:11,970 --> 00:03:15,493
And the same thing should apply to our height.

60
00:03:17,760 --> 00:03:20,310
With that in place, if we check the result,

61
00:03:20,310 --> 00:03:23,633
you see our icons are, well, a lot smaller.

62
00:03:24,820 --> 00:03:29,040
And surprisingly, if we check the size of these icons,

63
00:03:29,040 --> 00:03:31,270
they have exactly 80 pixels.

64
00:03:31,270 --> 00:03:36,270
As I said, the image size, the percentage value now refers

65
00:03:36,550 --> 00:03:39,940
to the list element as the anchor tag itself, well,

66
00:03:39,940 --> 00:03:41,370
it doesn't define any weight or height.

67
00:03:41,370 --> 00:03:44,920
Therefore, our list item is relevant here.

68
00:03:44,920 --> 00:03:47,323
This was a big step already.

69
00:03:48,340 --> 00:03:53,340
What's wrong here now though is the layout of our icons.

70
00:03:53,580 --> 00:03:56,260
I would like to have these next to each other,

71
00:03:56,260 --> 00:03:57,400
not below each other.

72
00:03:57,400 --> 00:03:59,980
But now, things are pretty easy for you I guess.

73
00:03:59,980 --> 00:04:01,480
You know how we can easily fix

74
00:04:01,480 --> 00:04:03,740
this with the knowledge gained in this lecture.

75
00:04:03,740 --> 00:04:07,870
We can simply go back to the code and now refer to what?

76
00:04:07,870 --> 00:04:10,513
Well, our unordered list here.

77
00:04:11,960 --> 00:04:13,290
So the unordered list.

78
00:04:13,290 --> 00:04:18,290
And here we, again, use our good old display flex property.

79
00:04:18,980 --> 00:04:23,653
With this, we change the way our icons are aligned here.

80
00:04:24,500 --> 00:04:27,520
We have some issues we have to work on though.

81
00:04:27,520 --> 00:04:31,050
The first issue I see is the, well,

82
00:04:31,050 --> 00:04:32,650
positioning of the icons.

83
00:04:32,650 --> 00:04:34,260
These should be centered.

84
00:04:34,260 --> 00:04:37,190
We know how we can, well, arrange this easily.

85
00:04:37,190 --> 00:04:41,033
For example, if we go back to our header here,

86
00:04:42,190 --> 00:04:45,830
you see how we define the way our items

87
00:04:45,830 --> 00:04:48,950
are displayed inside our flex container.

88
00:04:48,950 --> 00:04:51,860
We had display flex and then we had justify-content,

89
00:04:51,860 --> 00:04:56,470
space between to put space in between the different items,

90
00:04:56,470 --> 00:04:58,320
but besides space between,

91
00:04:58,320 --> 00:05:01,940
we know we had other values we can apply here.

92
00:05:01,940 --> 00:05:03,940
And the value that helps us here

93
00:05:03,940 --> 00:05:07,160
is justify-content center.

94
00:05:07,160 --> 00:05:12,160
This will center our flex items inside the flex container

95
00:05:12,410 --> 00:05:15,700
and push the remaining space we have to the left

96
00:05:15,700 --> 00:05:16,780
and to the right.

97
00:05:16,780 --> 00:05:18,840
Evenly to the left and to the right

98
00:05:18,840 --> 00:05:22,110
to be more precise of our elements.

99
00:05:22,110 --> 00:05:25,130
With that, you see we quickly positioned

100
00:05:25,130 --> 00:05:28,093
these elements in the center of our page.

101
00:05:29,140 --> 00:05:31,730
What would help now is maybe some margin

102
00:05:31,730 --> 00:05:34,320
between our list items though.

103
00:05:34,320 --> 00:05:36,150
So it's on left and right margin.

104
00:05:36,150 --> 00:05:38,430
So let's go to the list items

105
00:05:38,430 --> 00:05:40,620
and add a margin of zero top bottom

106
00:05:41,840 --> 00:05:46,240
and maybe 50 pixels to the left and to the right.

107
00:05:46,240 --> 00:05:47,490
It looks better.

108
00:05:47,490 --> 00:05:50,460
Why am I not using the margin for the top here?

109
00:05:50,460 --> 00:05:53,830
Well, we could do this, for example, with 50 pixels.

110
00:05:53,830 --> 00:05:55,420
Yeah, this would work.

111
00:05:55,420 --> 00:05:57,950
But, generally,

112
00:05:57,950 --> 00:06:01,310
I prefer the margin when it comes to the distance

113
00:06:01,310 --> 00:06:03,840
between elements to the left and to the right.

114
00:06:03,840 --> 00:06:05,640
Otherwise, in case like this,

115
00:06:05,640 --> 00:06:07,810
when we want to have an impact onto the height

116
00:06:07,810 --> 00:06:09,170
of our container,

117
00:06:09,170 --> 00:06:12,950
I prefer working with padding instead of margin.

118
00:06:12,950 --> 00:06:16,120
And the padding here doesn't have to be applied

119
00:06:16,120 --> 00:06:17,640
on the list items,

120
00:06:17,640 --> 00:06:20,460
but we can generally apply some padding

121
00:06:20,460 --> 00:06:23,560
to our unordered list here.

122
00:06:23,560 --> 00:06:26,950
Here, we use a padding of 40 pixels maybe.

123
00:06:26,950 --> 00:06:28,710
Yeah, I think this looks good.

124
00:06:28,710 --> 00:06:33,040
Or alternatively, you cannot get rid of the padding here.

125
00:06:33,040 --> 00:06:36,690
And add the padding directly to the footer,

126
00:06:36,690 --> 00:06:38,880
which would be the approach we follow right here.

127
00:06:38,880 --> 00:06:41,350
Here, we'll use a padding of maybe a bit less

128
00:06:41,350 --> 00:06:42,470
than what we just had.

129
00:06:42,470 --> 00:06:44,870
So 46 pixels and zero.

130
00:06:44,870 --> 00:06:46,650
Yeah, this shrinks it down a bit.

131
00:06:46,650 --> 00:06:49,460
And now, I think our footer looks all right.

132
00:06:49,460 --> 00:06:52,430
Let's also check it without the dev tools.

133
00:06:52,430 --> 00:06:55,260
Yeah, I think this looks quite nice.

134
00:06:55,260 --> 00:06:57,320
And if we click onto the links,

135
00:06:57,320 --> 00:06:59,833
you see the Instagram page is opening.

136
00:07:00,750 --> 00:07:04,273
Same thing as the case for our Facebook link.

137
00:07:07,160 --> 00:07:10,910
So this is our finished landing page now.

138
00:07:10,910 --> 00:07:14,940
I think it looks quite good, but we are not done yet.

139
00:07:14,940 --> 00:07:17,840
Because if we click onto our Destinations link,

140
00:07:17,840 --> 00:07:22,130
for example up here, then we go to our places.html page,

141
00:07:22,130 --> 00:07:23,800
which is empty at the moment.

142
00:07:23,800 --> 00:07:25,670
And the same problem happens

143
00:07:25,670 --> 00:07:28,640
if we click onto Discover Places.

144
00:07:28,640 --> 00:07:32,100
Therefore, our places page is what we will tackle

145
00:07:32,100 --> 00:07:33,193
as a next step.