Let's continue with this module,
and I think now is the time to add the remaining cards.
Because, as you know, our places page should, of course,
hold several destinations, not Barcelona only.
What we can do for that is we can, as a first step,
go back to our code, into the places HTML file,
and now, we'll copy paste our list item here,
this one.
And, we will have 10 destinations at the end,
so we can simply copy it down here once.
Twice.
So we are at number three,
four,
five,
six,
seven,
eight,
nine,
and number 10.
That's it.
If we go back to our code now, we see we have,
well, 10 times Barcelona,
and each card sitting directly below each other.
Not the final look of course,
but we'll work on this in the next minutes.
Before we work on the styling though,
we first have to change the city, and the image,
and the link here for all our remaining destinations.
And for this, we need two things.
We need to change the code, of course,
and we need images for the corresponding cities.
Now, you can find both the images
and the code attached to this lecture
to avoid repetitive work at this stage.
First, make sure to download and unzip the images.
So you should have the images of these cities then,
somewhere on your machine.
And then, simply open the images folder here,
the places folder, inside the images folder,
and then simply take each of these images
and drag it into that folder step by step.
This, this,
like that, and Tokyo finally.
All in all,
this should be two, four, six, eight, 10, 11 images.
So this was step one.
So we can now go back to our code.
There we can now find all these
beautiful images of the cities, which we can, of course,
also close here to not occupy all the space up here.
And we can also close this folder.
And now with the images being added,
we have to change, well, all our list items,
because basically we have to change the path
to the corresponding image of the city, our old text,
the headline,
and, of course, also the link to the page
that redirects us to the information about the city.
Thankfully, as this is a kind of repetitive task,
you can also find this code attached to this lecture.
So make sure to download this code and copy it.
It is the code which contains our entire unordered list.
So from opening tag up here,
we can now select the code
up until the bottom, so the closing tag of the list.
So we basically now delete the entire content
off our main element.
And now you can copy and paste the code,
which you can find attached to this lecture, so like this.
Make sure that everything is all right,
so let's scroll up a bit.
Here we are in the main element,
there we have the unordered list with the list items,
so Barcelona, Hawaii, and so on.
And also at the bottom here,
make sure that your unordered list ends here,
then the main element, and afterwards we have the footer.
So if we save this and go back to our page,
yeah, I think this doesn't look too shabby.
However, although the look of our cards is fine,
we are far from the desired result.
You remember, this is what our page should look like.
So we have two destinations next to each other,
then here London,
so the third destination here should be, well,
occupying the entire space that we have right here,
and so on.
All other elements should be sitting next to each others,
so basically in two columns, so to say.
Now, we could try to achieve this look now.
If we go back,
we could say that we first increase, maybe,
the width of our unordered list a bit, as a first step,
because here we have it, at the moment,
in our places CSS file set to 800 pixels.
So let's maybe change this to 1,200 pixels.
This gives our images, well,
a bit more space as you see it here.
Actually, I can zoom out a bit to 125% here in my case.
So with that we would win some space,
and now each list item could have a specific width.
For example, here,
our items could have a width of, let's say,
500 pixels maybe.
If we do that,
we, well, kind of destroy the look of our cards,
which is not a problem at this stage.
But now, although our items are reduced in width,
and actually our container has more space available,
we have the problem that these items are block elements,
our list elements here.
And therefore,
each element is positioned well below each other.
Now you could say, well, with what I learned in this course,
why don't we use Flexbox here
to position the items next to each other?
And that's indeed one option.
We could say that our unordered list here is, again,
a flex container, holding all the list items,
which are then flex items.
And with that, we have more control about our page layout.
Let's give this a try.
We now can go to the unordered list selector here,
and change it to display flex.
With this, yeah.
Now we have our images sitting next to each other,
but, well, that's actually also not the desired result.
We could, of course,
change our flex direction again to column instead of row,
like this.
Well, also not working.
Here we have the initial state back before we edit Flexbox.
Or, let's delete this.
We could say flex-wrap.
You remember, you also learned about this property,
and set it to wrap like this.
Yeah, this would indeed bring us a bit closer here.
However, we still have some styling issues.
And if we would change the width of our unordered list to,
for example, 1,500 pixels,
then we would have
three elements sitting next to each other.
This means we don't have full control of our layout
here at the moment.
The problem is that the perfect application area for Flexbox
are one dimensional layouts,
meaning here in our header,
we want to have this horizontal allocation of our items.
Same thing here on the starting page, down here,
all items should be positioned next to each other.
But here in the destinations,
we now have a two dimensional problem, so to say.
We want to make sure that our cards here are positioned
in two dimensions.
So we want to have a specific column count,
two columns in our example here,
and then the cards should be divided
between the different rows.
Also think about the problem we have that we want to
position the London card here across one entire row.
So we have Barcelona and Hawaii next to each other,
and then London should come.
So as you'll see,
although we could kind of create this with Flexbox,
it requires a lot of, well, changes, adjustments,
and it will not be easy to create in the end.
We want to create our layouts as easy as possible.
Therefore, we will not use Flexbox here.
This means we can delete our flex code here.
So we are back in the initial state.
But instead, we have another tool which allows us
to easily create two dimensional layouts.
The CSS grid.