Let's take the chance to style
the different parts of our card now in a bit more detail,
and let's get started with the card itself.
So with the list item.
Here, I want to add some properties we learned about that
we use to improve the styling of our page.
And one property is our box-shadow that we can add
to the entire card.
So here to our list item,
here, I will set the box shadow to again,
maybe one pixel left, right.
One pixel top, bottom, and the radius of four pixels.
With an RGBA color here once again,
because if we're to work on the opacity of it,
so this should be just black again.
So zero, zero, zero.
And here we'll add a value for alpha of 0.2.
We'll also add a border radius of six pixels here
and with this, yeah,
our card looks better already.
Hard to see the back shadow here.
But if we zoom in a bit, you can slightly see it.
So it's just a very little addition to it,
to make the look a bit better.
The card looks good, while the image doesn't.
Two reasons for this.
If we check the right upper corner of our card,
you see our rounded corner due to
the border radius property we applied.
On the left side, though,
where the image sits, well,
we don't have these rounded corners.
What's the reason for this?
Well our image here exceeds the border of the container.
So of the list item here,
although it doesn't exceed it in general,
it exceeds it in the corners where we apply
the different property to our container.
We can change this behavior though,
with a specific property.
This property is called overflow and it allows us to well,
control the overflow.
So how an element,
which exceeds the dimension of the container, is behaving.
So here in the end, we want to,
well clip anything that would exceed our container.
So the corners here in the end,
and this can be achieved with this property.
This property is not applied to the child in the container,
so to say, but to the container itself,
because typically you want all elements,
which are part of your container, to behave the same way,
when it comes to that overflow behavior.
For this, we can apply this overflow property here
to our list item.
Therefore we'll set the overflow here to
the default value first, which is visible.
This, no big surprise, doesn't change a thing.
We still have these corners here.
This is the default behavior, but as you just saw it with
the position property,
there might be cases where you want to go back
to this behavior.
Therefore, you can keep this value here in mind.
For our purpose here though, we need another value.
Our value here is not visible,
but it is hidden, so easy to remember,
visible default one, hidden well,
the case you probably need in your projects
from time to time.
With hidden, if we go back,
you see that the image and by the way,
also all the other elements,
exactly fit into the borders of the container.
And with that,
we also improve the look right here.
Our image still doesn't look perfect though.
It is squashed into the container
because we applied a fixed dimension to it.
We talked about images in a lot of detail
in earlier lectures of this module.
So if you closely inspect the image, it's again,
squashed a bit.
So it has its default dimensions.
You probably remember how we can change this.
We can change this with the object fit property.
If we add it here,
to the image in the dev tools, object fit,
and which value do we need right here,
cover, that's exactly what we need.
It will fit the image into the space available
and will cut off any parts of it,
which would be bigger than the space available.
And if we unselect this now, you'll see what I mean.
We squashed it into a container.
So let's add the object-fit property to our image here.
So object-fit, cover.
With this, our image looks a lot better.
So besides overflow,
these were things we know already though.
Now it's your turn to also apply a concept to learn about,
but in a different environment,
because the positioning of the image
and the item content class here is all right,
but inside our content,
I don't think this is the look that we want to achieve
because instead of the text and the link here being
positioned to the left and below each other,
so with not a huge gap in here, well,
this should actually be the result.
The heading and the text is all right,
but inside this right part of our card,
the link here,
you can ignore the arrow for the moment,
should be positioned in the right bottom corner.
And there should also be more space here
in between these elements.
Now you can try to achieve this with margins or petting,
but there is a very easier way to achieve this
with flexbox once again.
So this is your next task now,
try to achieve the following styling with flexbox,
change the color,
the text color of the city, and the description,
from black to a slight grayish tone,
and also remove the link style of
the explore link down here,
change its color to whatever color you want.
We will use the right RGB code in the solution lecture,
so in the next lecture, and apply a hover effect to it.
If you check out the hover effect, by the way,
you see it has rounded corners, so also implement this.
So these are your tasks for the next lecture.
Take your time.
You learned all that it takes to finish this task
and therefore, see you in the next lecture,
hopefully with great results from your side.