So things are a bit off in many ways at the moment.
To get started, let's first change the size of the image.
We saw this already on the landing page,
by default images
tend to take quite a lot of space available,
therefore, as we did it already, earlier in the course,
we'll give the image a fixed width and height.
Well, to make it smaller.
For this, we have different options to do so.
We could refer to the image here in general,
or we'll again, use a descendant combinator maybe
that we say, we want to tackle images here,
which are list items.
So part of a list in the end, and this list
should be part of the main elements.
The main section of our website.
To do this we go to the places CSS file,
and finally add some code in here.
So we'll say in the main element list items and images,
this will have the advantage
that when adding more images here
for all our different destinations that we have,
well, this tab will be applied for these images.
So, let's say we add a width of maybe 300 pixels
for this image.
We'll see if this is the appropriate size.
And a fixed height here of 280 pixels.
And again, as you saw it throughout the course,
images are more or less the only element,
so to say, where we add a height.
Typically we work with padding to increase the height
of certain elements.
With this in place, well, the images became a lot smaller.
I think this is around about out the right size we need,
but now we see another issue on our page.
The issue here is our header because on the landing page,
the background image should be both behind the header,
so to say.
Therefore, we applied specific styles to this header
to make this possible.
On our destinations page though,
I don't think this is the look we want to have.
Because here we don't have a background image,
but a normal image now,
and this image will be, well, displayed multiple times
for different locations.
So it definitely should not be behind the header.
Do you have an idea how we can fix this quickly?
We can change our position property, right?
Because here, in the header,
we have position absolute applied.
If we would unselect this, then this will do the trick.
We don't need left, and top zero, by the way.
And also the width is not required because by default,
our header is a block element.
Therefore it occupies the entire space available here.
But nevertheless, we can see that by changing
the position property, we can get the desired result.
Now back in our code, we should keep in mind
that in our shared CSS file, here.
Where is it?
Here, in the header, we have, the position absolute
a rule applied and also all the other rules.
So this has to be overwritten.
And how does this work now?
Well, it works by going to the places CSS file again,
and in here top maybe to keep our order
from top to bottom on the page,
we'll select the header and now add the position property
with a value of static here.
As you learned, static is the default value
for the position property.
So typically you don't have to apply this value,
but for such cases where you add a different value
for the position property in general, keep in mind,
we added it here in the shared CSS file.
But now on specific pages or in specific cases,
you want to override this change,
then you use position static.
As I said, also all the other properties,
So width, top and left are not required here,
but they also don't hurt, so we can keep these in here.
We don't have to add a different value to these.
And with this in place, if we save this, this is working.
What's important here
is that the order of our imports matters.
If we go back to our places HTML file
to the top here into the head section right here,
you see that we first set the link for the shared CSS file,
where we changed the position property to absolute.
And afterwards we add the link to the places CSS file,
so to specific styles applied to this page.
And this is very important.
If you were to change the order here and save this,
then suddenly our image will be behind our header
because now the rules set in the shared CSS file
override the rules we have from the places CSS file.
Therefore, it's always important
to add the shared CSS filing first,
this typically holds the more common style, so to say,
and then a specific styles afterwards.
Just a side note here though.
As we already working on the header,
we could actually finish some generic styles for our page
because as you saw in our example earlier
the entire a page should have a grayish background color.
Not a background image as we had it on the landing page.
Therefore, and with the logic we just had
with the order of our import, so shared before
the specific CSS file, we could say that our shared code
for the body here could be overwritten, or in our case,
could be enhanced for the specific styling
we want to have on the place, the` CSS file.
Therefore I'll add another body selector here.
And for this body, I want to change one thing now.
I want to add a background color,
but not with the background color property,
but with the background property,
because we want to use a CSS function once again.
And that's our linear gradient function.
We'll use 40 degrees for the angle of the gradient
and color wise, we'll use again, our RGB colors
add the parenthesis and here use 77, 77 and 77.
This will be a grayish tone.
And the second RGB code will be quite similar.
It's 58, 58 and 58.
We don't need the space in here.
And with this, we see we added this background color
to our page.
By the way, the fact that the footer is kind of
in the middle of nowhere at the moment
is something we'll tackle a bit later.
So please ignore this for the moment.
So our page is progressing well,
what's now totally off is our, well, card
that we want to achieve in the end.
We basically have in our main element now
this unordered list, and in there,
we have our first list item,
which basically is a block element
with three other elements inside one inlaid element
of the image here, and two block elements,
the div and the div.
One holding the description
and the other one holding the link.
I think it's time now
to work on the layout of this card as a next step.