With the landing page being finished,
we can now continue with another page we need
on our website.
This page can be reached via two different links,
either in our Nav bar,
by clicking onto this destinations button
or by clicking onto our discover places button right here.
At the moment, no matter what we do, if we click it, though,
we end up on this empty page.
The reason for this is quite obvious.
In our project at the moment we added the places.html file,
but it's an empty file at the moment.
We'll change this in a few seconds,
but first let's see what this page should look like.
And here I have the finished page.
And if you closely inspect it,
you see some things that we have already
on our landing page.
For example, up here, our navigation bar,
here we have changed colors,
but the general idea is the same
that we saw on the landing page.
We again have a main part with all these different images
and the corresponding description here,
just some dummy text of course,
and a link named explore,
which can be clicked and which redirects us to
the Wikipedia page of the corresponding city.
And at the bottom, we have our footer again.
Now to speed things up a bit,
we can immediately see what we can take from our existing
index.HTML file, and that's the header and the footer.
We have to change the colors a bit,
but that's an easy thing.
But to get started as fast as possible,
we can do this right here.
So this means we go back to our code
into the index.HTML file,
and now first take our entire head,
including the doc type HTML part at the top.
Copy this entire code command C or control C
on Windows machines.
And now go to the places.HTML file and paste the code
command V or control V on Windows machines.
So this is the hat.
Then we go back to the index.HTML file, scroll down a bit,
take the header,
including the opening tag for the body element,
copy this and paste it here.
Now we add a main element.
This will be filled with content by us in the next lectures,
but we know that we have some main content in here.
And below our main element,
we go back to the index.HTML file,
scroll down,
up to here.
So sort of bottom basically, and go up like this.
So including the opening tag of the footer element,
copy this and paste it below our main element.
With this, we are almost done.
Our relative links to the images are the same,
so this is all right.
What we have to change though,
is up here in our head element,
the reference to the styles.css file because our styles
for the places page will either be part of the shared file,
the header and the footer, or be part of a new CSS file,
which we have to create, of course.
So let's do this quickly clicking right here and call it
places.css.
Which is empty of course now,
and then we can change the name of the file here
from style CSS to places CSS.
But besides that, I think this looks all right.
So if you now go back to our page
and quickly reload it here.
You see, we have some styling issues,
but that's of course due to the fact
that we don't have any content in our main element now.
But if we click onto destinations, we stay here.
If we click onto travel goals,
we are redirected to our landing page,
and now also this link here works.
So with this, we are ready to get started with our project.
As I showed you, this is our goal.
So we want to create our main part of the website now.
And the look you can see right here is a pretty common look
for modern websites by the way,
it's called Card Look because well,
each city here with the image looks like a separate card
displaying the individual content.
Therefore that's also something you will typically
create in your own projects.
The great news is to create this card look here on the page,
we will use another CSS technology.
More about this in the next minutes.
Let's now continue in the next lecture
by creating the HTML code of our page here.