How can we now create this card look?
Well, we'll go there step-by-step,
but the first thing I want to change
is I want to define a specific width
for our entire container of the list items.
So, for our unordered list right here,
at the moment it occupies the entire space available,
and I want to limit this a bit with a fixed value.
For this,
I'll add another, Descendant combinator,
select the unordered list in our main element,
and I'll give this a width of maybe, 800 Pixels.
We'll see, if this is the final value,
but with that in mind,
you see now we have a specific area reserved
for our container here.
We could also get rid of the margin though.
Let's set the margin here to,
zero, top, bottom and auto lift.
Right, with this, we center our container.
Yeah, and I think with this,
we can work a bit better.
This brings the whole page to a bit more structure.
Now, let's focus onto our card though.
The idea should be that this image is basically
the left part of the card,
then right to it,
so in this area let's say,
we want to have the Barcelona, name below it.
We want to have to description,
and afterwards we want to have our link.
Now, this means that
we generally want to position our image here,
next to our two 'a,
while changing the image next to one
would be something we can easily achieve via Flexbox,
if you remember.
So, if we check out our places, HTML code,
maybe once again,
here this part.
Then, why don't we say that we Nest
the , with the Class actions,
inside our , of the Class item content here.
If we changed this, if we take this now,
and position it in here.
Maybe format this quickly,
then we would have our image,
next to the item content ,
and this now holds the entire content
of the right part of this card.
With this change in mind,
we could now turn our list items.
So, each single list item,
into a flex container,
and as we learned, in a Flex container,
the items are positioned next to each other by default,
due to the flex direction, with a value of row,
therefore, the image will be positioned
next to the item content.
With this,
we can go back to the places, CSS file.
And now here,
select, main list.
So, the list item.
And this should now be, display: flex.
And this does the trick, hopefully.
Yes it does.
As you see,
we are coming closer towards our card look.
We cannot also change,
the background color of the list item.
Here, I simply use plain white.
Yeah, this brings us even closer.
And if we now select our, item, content Class,
remember the item content now holds our city name,
the description and the link that we created.
So, we can select the entire Class now,
with the Class selector.
And here we add a padding of maybe, 24 Pixels.
Well then, this looks quite good.
With that, we easily created this card look.
We are not done yet, obviously,
but we'll come closer to it.