Voiceover: Welcome back to building the header.
This is part three, let's continue.
So this already looks very good.
Now what's missing here is the logo image here,
we want the logo image here and we want
some simple navigation to show right here.
But first of that, we see that our code has grown
a little bit and if we keep adding more and more code,
we will at some point get completely lost in here.
So let's make a nice code structure here so that
we organize everything into logical pieces of code.
And for that we will use CSS comments, and comments
are like code that will not be seen by the browser.
It's like invisible code it's just for us to write something
here which will not affect any of our web page.
So I will just show you how.
Comments in CSS are using / and *.
And you see everything down here got gray
now because I opened a comment.
Now I can write something here but then close it again.
And now the rest of the CSS code is back to normal.
So I usually like to do it like this,
I put some lines here to separate some stuff.
Then I write what this code section is all about.
Here I will say basic setup.
Then I close this, but then another line like this here.
Alright.
I will copy this so that we can put
it in our styles as well.
So down here I can say like
these are reusable components and this
is because we will use those all over the website.
But then we have things like this one
which should go into a different place.
Let me just cut them and put them down here.
So I will put one of the sections for each of
the sections that we will build on our website.
So when we later browse our code,
we know exactly where to look like for different stuff.
So, header.
So all the code for our header goes here.
Now the buttons that we are going to reuse may be in
different places can stay right here.
Now we'll just say that these are buttons.
Those are buttons and these are headings.
Because you know we will maybe
use some of them again later.
Headings.
And we can keep adding more comments
like that later down the road.
So everything is nicely separated and then we know exactly
where to look for our CSS code.
So we already learned a lot of stuff in this lecture
but we will go even further because we will now
put a logo and a navigation bar on top of this page.
So we formatted this, everything inside of this content,
and now let's add a nav element,
where the navigation and the button will go.
And now to center everything inside of that
navigation I will use a row.
Do you remember we said that row will always be centered.
So this will be a row.
Yes, alright.
Now we want the logo to be here and for that let me just
first put the logo inside our folder.
So I will go back to our contents folder,
and this is the content Omni Foot provided us.
And actually most of these are images,
so I will just put all of them, we'll copy them,
and put all of them inside our images.
Now I'll paste them here, okay.
Except for maybe the text, I will delete the text here.
And alright, great.
So we want the white logo.
They actually gave us two logos a black one and a white one.
And we want the white logo here because the background
is so dark that the best thing to do
is to use the white logo here.
Now the best way to put an image,
you probably remember how to do that.
It's image, then source, and we already
know how it is, where it is right?
So we go to resources, image, and now
it should be down here somewhere.
It is logo white.
Alright, and now the alternative text,
which we will say is just Omni Foot logo.
And of course we have to give it a class
so that we can format it.
The logo should be just right for this.
Alright.
And now for the navigation.
Now the navigation is usually done
using a so called unordered list.
Unordered lists is just like some bullet points
where each bullet point will be
an element of the navigation.
So how do we do that?
Ul stands for an ordered list,
and let's just call it main nav.
And now for each of the elements inside
of an ordered list, we say le.
Which means like list element.
And now each of the list elements will be a link
because that's what a navigation is all about, right?
Navigation is like a collection of links.
So let's see what Omni Foot had in mind
for this navigation, what they want there.
So they want, let me just copy this so it's easier.
Just down here, I will delete it after this.
So these will be links.
So, a element, hrev,
hrev will be again it will point nowhere for now.
So it will be like an empty link
so I'll use the hash sign again.
And this is here, food delivery.
Alright?
And as before I will just duplicate this with command d.
We have four, so duplicate it three times.
The next one is how it works
and our cities, and sign up.
Alright.
Let's see.
Now the image is huge, it's way too big so
let's start by formatting the image.
I don't know why the unordered list isn't showing up here
but we'll, ah okay it's actually here.
So you see these bullet points and you see those blue links.
We will just format this in a minute,
let's start with the logo.
So the class is called logo.
So it's in the header so I will put it right here.
So logo, so logo I think the height,
the optimal height will be 100 pixels
and then the width should be determined automatically
so as before we'll say auto here.
Okay now we want this to be floated all to the left side.
So we can use the float property here
and say it should be on the left side.
Alright then we can actually already do some things
for the main navigation .
Main navigation.
Just say that it should float to the right side.
So this is what it looks like.
So the food delivery logo is right here on this side
and the navigation is on the right side,
just as we specified it before.
Now we have to format this navigation,
and I will show you how and this is actually
the way everyone formats their navigations.
So the first thing here is in this unordered list,
because main nav is an unordered list, right,
is to say that we want to get rid of those bullet points.
So we say list style none.
Okay and that should do it for now.
Now we want to select the li elements inside of this.
Let me show you it to you, so we want to select this.
And we already learned how to do that before, right?
So we say main navigation and we want to
select all li elements inside of them.
So this is how we do it:
main nav and then all li elements inside it.
And again we want to change the way they are displayed.
So they are now block elements and we want them
to be inline blocks so that they can be side by side
and we want some margin between them.
Let's say we want a left margin of 40 pixels.
So each of those blocks will have
a margin on the left side of 40 pixels.
And this is what it looks like.
So the li elements are now nicely aligned
such as we want them.
And now it's just time to format
how the links inside of them look.
And in order to do that, we can even go further down
and say main nav then we want to select the li elements
inside of them and then the a element
inside of each of the li.
Easy as that.
Now we want them to be wide and such as before
we want to get rid of that text underline,
so we say text decoration none.
And I think it will look great if we make them upper case.
So text transform again, upper case and then
let's specify the font size as well.
This shouldn't be too big because as you know
our base font size is 20 pixels and let's
say you want it to be 18 pixels.
But as I said before, we will never use the unit in pixels.
We want it to be 18 pixels, but expressed in percentage.
So what do we do?
We divide that 18 pixels we want by this base,
base text size.
So 18 divided by 20 which is 0,9 which is 90 percent.
So we will just say we want the font size to 90 percent
and then it will give us 18 pixels.
And that's how it looks like.
Not bad, right?
Now we probably want some distance between the logo
at the top and then center
this navigation so that here,
like here on the middle of this logo.
And in order to do that, we will specify
a margin on the top of the logo.
So margin top, let's say 20 pixels and margin,
no it's right here.
So the main nav should have a margin top of,
I don't know, 60 pixels probably.
And yeah this looks pretty great, right?
This may be a little bit too much,
I will say 55 pixels but it doesn't really matter.
Okay, now very good.
One thing is we want some hover effect right here.
And one beautiful thing that we can
do that you probably saw on many websites is to,
once we hover an element, give it some border, okay?
A two pixel border I think would look great.
So one thing that we did not yet do here
is to say that this is a link.
And after that say that a visited link
should look exactly the same.
So this is exactly what we did with the buttons here before.
So this is the link at the visited state
and now we want some hover and active states.
Hover and active states.
And what we want here is a nice border at the bottom.
With let's say two pixels, again a solid line,
and the color can be our orange color that would look great.
So our orange color is this one here, right?
And we will probably use this a lot of time,
so I will just make a comment here and paste it.
Orange color.
So each time we want it we know where to find it, okay?
So we want this to be orange.
Now in order for this to happen we need this border
to exist before we actually hover it,
but since we don't want to see it we make it transparent.
So now I think we can do in CSS
is we can say transparent, transparent.
So it will not be visible until we actually hover it.
And such as with the buttons,
we want a nice transition here.
And you know already how to do this so we say transition
and then the property we want to emanate.
So it's border bottom in this case,
and again 0.2 second interval in between those.
So how does it look like?
Okay it works, right?
Now let's, it doesn't look so good because we want
some more space between the line and the text, right?
And there's an easy way to do this and maybe
you can guess already how we will do this.
It is to specify a padding for the link.
And padding is an inside space, so a space inside
of the box which goes between the content and the border.
So we'll add some padding to the bottom and also to the top.
And we can make it for example 8 pixels.
We put it here.
So want a padding top and bottom of 8 pixels,
so we put it here and left and right 0 pixels.
And I think now everything is perfect.
Just check it.
Alright, this looks absolutely fantastic,
don't you think so?
So the first section is completely designed.
We have learned a lot of stuff in this section.
Congratulations, you just built the first
section of your real world website!
Isn't that great?
This was a lot of stuff to absorb and if you didn't
understand everything right away,
don't worry you can always go back if you want.
So now come with me to the next section.