Let's get started with our header in here
and specifically not the nav item but our page logo.
The logo simply was the text 'Travel Goals'.
And here we didn't use an image, we used plain text
with a specific font style applied later on.
Therefore, what we need in the header is a new element
and this element will be an anchor tag.
It will be a link not a paragraph or something like that
because by clicking onto this logo,
you should be redirected to the landing page.
Therefore, what we need is this anchor tag here
and it should be a reference to the index HTML file.
So with a slash + index HTML, and as I said,
the logo should be named 'Travel Goals' here.
If we check this out,
we see we have the travel goals link here,
nothing too spectacular here.
I want to change one thing here though, or add something.
We have the header,
which contains the anchor tag and the nav.
The anchor tag here is an inland element,
nav is a block element.
And I would like to have two block elements,
one after another.
That's the first thing and we could use the display property
to change the element type here,
but I don't want to do this.
Instead, I want to use something
which is pretty common for real-world projects.
Whenever you don't have a real semantic element
you want to use,
but you need a container element
to add additional elements to add to it,
then we use non-semantic elements,
which can either be a span, we talked about this,
this is a non-semantic inland element
or a div for a non-semantic block element.
We want to have a block element in here,
therefore, I'll take the anchor tag and put it into here,
format this quickly.
With that we created our logo
and there is one additional thing I would like to add here,
as we only have one logo, one unique logo on our website,
but probably multiple links.
I want to be very explicit
about how we can select this link here
and for this, I'll add an id as attribute to our div.
So we use the id attribute
and the id here should be 'page-logo'.
With this logo being unique
but being on all of our pages on the website,
because we will have two pages,
our landing page and the place's page;
we can actually also create another style sheet here.
Let's do this now.
And let's use, as we learnt it already in earlier modules,
a shared CSS file here.
This will be a style which will be applied
to any of the pages.
As I said, the logo will be on all pages.
Let's not forget to add the link to the style sheet
ahead of the style CSS file
because first, the shared styles should be loaded
so we use the shared CSS file.
And in this file,
I now want to add some generic styles here.
And for that, let's go back to our page
and open the developer tools once again.
I would like to add a first style to our body in here,
as you see the body has a default margin, for example
and that's one thing I want to get rid of.
The second thing is,
I would like to add a default font family
to the body element
because this will then allow us
to add specific font families to selected elements,
but generally have a nicer font family than the default one.
So let's add our body type selector here.
and let's say that the font family should be 'Quicksand'
and as a fallback, sans-serif,
and we'll set the margin in general to zero, like this.
And as you see, our font family improved already.
However, this is not the font family I want to use
for our logo here.
As you saw, we added an id to our log, the page logo id
and we will now use this id, so hashtag + page-logo.
And specifically in this logo,
I want to refer to the anchor tag in here,
that's what I want to style.
So again, I'm very explicit about what I want to select,
and this allows me to add specific styles to this link
inside the page logo id.
What's other links can have other generic styles in here.
So, for the logo, I first want to add some padding,
as you see, it's very close to the left and top border.
So let's add some padding
and for this we could use 10 pixels here.
Then I wanna use another font family
and here I'm going to use Oleo Script.
This is also a font family,
which we can use, thanks to Google Fonts,
so this is in here.
So make sure to add this link in case you missed it
when we set up the project.
And as fallback we use sans-serif.
Then I want to add some color to our logo here.
Again, we use an rgb color
and this should be 245, 243 and 160.
Then, we'll change the font size a bit, make it 50 pixel,
fix this font size here.
And if we have a look now, yeah,
this looks a lot better already.
You see the padding is maybe not yet sufficient,
so we might have to work on this when we work on the header
and of course the background image is missing,
so the readability is not perfect.
And we have this underscore here,
so we should get rid of this maybe.
Do you know how this works? You hopefully do.
This works with the text-decoration property,
which we can set it to none.
The underscore is gone.
And now, we are almost done with the logo already.
I just want to introduce two new properties here
to make it look even better.
Both properties are related and can be specifically applied
to text.
The first one here,
therefore, is the text-transform property.
As you see, you can define the way letters are displayed
with this property.
You have different ways, capitalized, lowercase, uppercase
and so on.
In our case, I want to use uppercase.
This will capitalize all the letters
and now it looks a lot more beautiful, in my opinion.
And the second property also related to text,
is the so-called text-shadow property.
Now you know the box-shadow already,
which allowed us to add a nice shadow behind our box model,
so to say.
So behind the entire box consisting of content, padding,
margin and border.
Here you can specifically add shadow behind text.
Now the logic, how it works, it's basically the same.
You have an horizontal offset,
so left to right, with a value of one pixel here,
then a vertical offset, so top to bottom, also one pixel.
And then we have the blur radius,
which will set to two pixels here.
And then, what is missing, our rgb color.
Again, I prepared a nice color for you.
And this is zero, zero and zero.
So plain black here.
With that, you'll see we have this nice text shadow
behind it.
And our logo looks pretty cool so far, as I would say.
Of course our header is not finished yet though,
what's missing are our navigation items.