Where is the styling of our footer applied?
Well, obviously, not in the styles.css file
where we worked in the last minutes actually.
Here, we go back to our shared.css file.
Because as the header here, our footer is also
something we see on every page of our website.
Therefore, it should be part of this shared.css file.
We will refer to the footer with just normal type selectors,
maybe some combinators.
And I would like to get started first
with the footer element itself.
As I said, I would like to add some background color here.
And I'll, again, use a linear gradient.
Therefore, we'll refer to the background property here.
And I'll add the linear gradient function here
with a prepared value by myself with 70 degrees first.
And then we add an RGB code.
Don't forget the parenthesis here of 24, 24, and 24.
And now, the second RGB code here, again,
with the parenthesis should be 25, 29, and 29.
So this is this grayish black look in the end.
And if we go back now, you see we have this nice background,
but we have the icons.
Well, a little bit off from a size perspective.
Let's work on these as a next step.
And to do that,
we can first think about the structure we have right here.
Because we know that we have an unordered list,
which contains the two list items
where each list item contains an anchor tag.
And in this anchor tag, we have the image element then.
So before we dive deeper into how we organize
or create the layout of these icons,
let's first focus onto the size.
And here, we could follow a pretty simple approach.
If we apply a specific width
and height to the list items here
and then a percentage width and height to our images, well,
then the rules regarding the width and the height
of these images will refer to the parent element.
Or the parent would be the anchor tag,
which obviously doesn't have any height or width applied.
And therefore, it will apply to the list element
as the parent that predefines the space
this container provides for the images.
And therefore, we could make our images a lot smaller.
What this means in simple words
is that we can go back to our code.
First, select our list items.
I'll do this again with a descendant combinator here.
So footer and here the list items.
And there, I'll apply a width of, let's say, 80 pixels.
And the same for the height,
which should also be 80 pixels here.
And now, we'll select our images, again,
for the descendant combinator.
And here, we'll simply say,
well, the width should be 100% right here.
And the same thing should apply to our height.
With that in place, if we check the result,
you see our icons are, well, a lot smaller.
And surprisingly, if we check the size of these icons,
they have exactly 80 pixels.
As I said, the image size, the percentage value now refers
to the list element as the anchor tag itself, well,
it doesn't define any weight or height.
Therefore, our list item is relevant here.
This was a big step already.
What's wrong here now though is the layout of our icons.
I would like to have these next to each other,
not below each other.
But now, things are pretty easy for you I guess.
You know how we can easily fix
this with the knowledge gained in this lecture.
We can simply go back to the code and now refer to what?
Well, our unordered list here.
So the unordered list.
And here we, again, use our good old display flex property.
With this, we change the way our icons are aligned here.
We have some issues we have to work on though.
The first issue I see is the, well,
positioning of the icons.
These should be centered.
We know how we can, well, arrange this easily.
For example, if we go back to our header here,
you see how we define the way our items
are displayed inside our flex container.
We had display flex and then we had justify-content,
space between to put space in between the different items,
but besides space between,
we know we had other values we can apply here.
And the value that helps us here
is justify-content center.
This will center our flex items inside the flex container
and push the remaining space we have to the left
and to the right.
Evenly to the left and to the right
to be more precise of our elements.
With that, you see we quickly positioned
these elements in the center of our page.
What would help now is maybe some margin
between our list items though.
So it's on left and right margin.
So let's go to the list items
and add a margin of zero top bottom
and maybe 50 pixels to the left and to the right.
It looks better.
Why am I not using the margin for the top here?
Well, we could do this, for example, with 50 pixels.
Yeah, this would work.
But, generally,
I prefer the margin when it comes to the distance
between elements to the left and to the right.
Otherwise, in case like this,
when we want to have an impact onto the height
of our container,
I prefer working with padding instead of margin.
And the padding here doesn't have to be applied
on the list items,
but we can generally apply some padding
to our unordered list here.
Here, we use a padding of 40 pixels maybe.
Yeah, I think this looks good.
Or alternatively, you cannot get rid of the padding here.
And add the padding directly to the footer,
which would be the approach we follow right here.
Here, we'll use a padding of maybe a bit less
than what we just had.
So 46 pixels and zero.
Yeah, this shrinks it down a bit.
And now, I think our footer looks all right.
Let's also check it without the dev tools.
Yeah, I think this looks quite nice.
And if we click onto the links,
you see the Instagram page is opening.
Same thing as the case for our Facebook link.
So this is our finished landing page now.
I think it looks quite good, but we are not done yet.
Because if we click onto our Destinations link,
for example up here, then we go to our places.html page,
which is empty at the moment.
And the same problem happens
if we click onto Discover Places.
Therefore, our places page is what we will tackle
as a next step.