So this was a lot of content,
a lot of work we are almost done in this lecture
I want to finish some details on our page here though.
The first thing I saw is that our hover effect for the nav
items here is okay I like it,
but with that hover effect,
being implemented many lectures ago,
we also added the hover effect to our page logo.
And to be honest, I don't think this looks good,
especially if we go to landing page, no,
not the look that we want here.
The problem we have is that if we check our code,
which is in the shared CSS file here it is this header,
a hover code we have, well header a,
refers to all anchor tags inside our header.
If we check this quickly out in the dev tools,
we see that in our header, we have, well,
the anchor tag in the nav items, unordered list, list items.
Here it is.
That's the correct one,
but also the anchor tag here in our page logo,
therefore we should be more explicit here about our
combinator.
We should say that only anchor tags inside the header and
inside the nav item should have the cyber effect.
Therefore,
we can go back and simply add nav here ahead of our pseudo
selector with this in place this should be fixed.
Yep now this looks a lot better.
You see hover effect here.
Here we have it, talking about the logo and these nav items,
the color here on our places page.
It's also not what I want here, for the landing page,
this yellow tone is great.
I think it looks good.
But on the destinations page,
I would like to have a bluish tone.
So this tone we have here in our explore link,
how did we add the styling to these?
Well in the shared CSS file,
we added the style to our logo like this.
So we selected the page logo ID and then the anchor tag and
40 list items, well, we did it with the header a,
selector here.
Therefore we have to override both of these selectors to
change the color with this.
We go into our places,
CSS file and scroll up a bit maybe.
And let's first add the ID selector page logo and here the
anchor tag.
And the second one was the, maybe not here, maybe there.
The second one is the header a selector.
I just showed you for the color of the nav items.
The page logo should have this blue color tone
I just referred to.
So this has an RGB code of one eight three two three
zero, oops, two three zero and two three five.
And we can actually copy paste this here for our nav items.
Let's see yep.
This looks better.
I think, as I said, it remains unchanged,
of course, for the landing page,
with the change of the color,
we should also change our hover effect though.
Therefore,
we should also work on this pseudo selector and let's not
make the same mistake that we had in the
shared CSS file.
So here I'll refer to header and here to the nav element.
And then we add the pseudo selector to all anchor techs
inside the nav element.
Here, there are going to change two things.
First the background color to actually the same RGB code
we used up here.
So to this bluish tone,
but with the background color, having this color,
we should give the actual text different color here with the
color property.
And there are use an RGB code of
59, 59 and 59.
This means our pseudo selector should now be fixed.
So if we have either our nav items,
this fits perfectly our overall page look.
So with these changes, I think the page looks all right,
what we might do here is we might bring our headline and the
corresponding text up a bit, I think we have right here,
we have it, yeah.
We have a margin here.
And if we remove that margin,
we have margin collapsing.
So it will have the gap between the H two element and the
paragraph but the margin top, if that'll be removed,
then this will bring up this, enter a content a bit.
I think this would look nice.
So let's go back to the places CSS file and see where we
have our item content class, this one right here,
which holds the right part of our card so to say,
so item content, and here,
I want to refer to the H two element and there,
the margin should simply be set to zero.
Let's go back.
Yeah, I think this looks better.
It's a matter of taste of course,
but I think this looks great.
What we could do is we could add some more dummy texts also
to the London card here.
Let's maybe do this as a last change.
So we go to places,
HTML and here up to
London and simply add this paragraph.
Once again, as I said,
it's just some dummy texts, so it doesn't matter.
Yeah.
But I think it improves the overall look of that card and
yeah, it looks better I think.
But with this, if I quickly check this page,
maybe one link here, yeah.
This works nicely, yeah.
I think we did it.
We finished our website.
This is the second website you built now.
So the only thing that is left is a summary of what we
learned in this very long module.