Next up, we're going to start our navigation and our header section on both of them would be in a so-called
main section.
Now, I'm going to type in here, comment, actually, free comments first would be that I need my main
section
in my main section.
I will have actually in the copied this.
This is the end of the main section, and within here, we're going to have our.
Navigation.
Carpet, and this will also end somewhere.
And if that will have a header section and just ahead, you'll need to type in sections, not entire
section and end of the header.
Now, I always like to comment on things as best as I can, because, for example, I'm going to take
this.
Now and go back to my H.T., into my success and pace it in, and of course, the comments are not as
they should be.
Because these are serious comments, so let me select one of them so hard audience.
Bom, bom, bom, bom, bom.
And they let them know, select the next one, control the.
And let them.
OK, now I can comment them, although.
There go and head to the main section of each section, so I also want to be able to know exactly where
I am in my e-mail and my access and comments really help me out.
I definitely encourage to use comments as much as you can always to explain to yourself and to the coders
when they look at your code or when a designer looks at what you've done.
Hey, there's a there is that thing and it starts there and ends there.
And this is what he thought when he was doing that.
So let's get started with our main section, as I said, but in here will have a tag of mean.
And this will have a idee of mean, I love to give I.D. so we can already take this entire thing and
paste it in here on our comments.
Now we're going to go into our navigation and create a NAFDAC, and this will have an idea of Knap with
on NAFDAC, we're going to have a anchor tag which will have a Iot of KNAB logo, nav dash logo.
We're all logo live and a shirt that was just refreshed the page and going to tap me here, I'm for
Manhart Media, not for anchor tag.
I'm going to create you all.
After I have the anchor tag, I'm going to create a unordered list where our navigation items will live.
So within here, I'm going to create the el-hai.
Then this will contain the anchor tag and this anchor tag would then have.
A text of about.
And I'm going to multiply all of this, they let you go so close this one up here, so let's multiply
this with three times and you can always say, oh, that's not what I want.
I need to open and close parenthesis.
So close it up here and open it up at the beginning.
And now it's free again, and yeah, I got three and tax, what the hell is AP?
We don't need this.
Oh, man, that's much better now, don't need to get to go into my anchor tag.
And create an issue, so let's select all of the anchor tags or at least to start the opening anchor
tags.
Control D or Kamandi on the Mac and go in here and create each ref, and for the H.F., you're going
to basically create exactly what is in here.
So if it's about, then it's going to call give it a a direction for about the next or the next one
will be a direction for services.
And the lesson would be for contact.
So let's look both of them and contact.
Now, if you didn't know this, if you create a anchor tag with this H.F., this just means that with
a hash and a name, when I get something, decide the exact idea and I click on the anchor tag, this
will bring me to the side.
So that's how I managed to show you in our example.
In our example here is the Finnish Web page.
If I click on services, it will bring to services.
And this is just basically a tag with an idea of services.
But I will show you this later on.
OK, so we have our navigation done a lot and actually check it out.
How does this look?
We have a Web site opened here and hey, there we go.
So let's go down here after navigation.
Now we need to create our header for a header.
I'm going through the header tag.
I just misspelled Heather, so there they go, so let's create the Heather tag.
And I'd also give it the idea of Heather.
Within our headhunt integrity, each one.
And within here, we're going to give it the name of Aflex Park's website.
OK, after H1 going to create an H3 element now and with that being here responsive.
Design.
And after each week, we're going to create now a button tag.
And this is where we are and this is where Abu Subclauses come in, so I'm going to create a PETN class
so that PETN and not again, BITA and success.
And then third party and for the size LG, I want to have a large button and within it I want to contain
a anchor tag again.
And this should have the issue of contact, because you in our example, when I pressed up here on Contact
US, this brought me down to the contact part of the output of the Web page.
And within our anchor tags, we're going to type in contact us.
OK, so let's sit here and let's see if we managed to create this will.
So, yeah, let's now style or Heather and our navigation.
So let's go back into our success.
Now, let's do some general styling for our main section.
Going to target the idea of main.
So, I mean, and I'm going to give it a height of 100 Vuko tights, and this just means it's going
to take up the entire height of the viewport.
Now, we need a background image.
And for this, we're going to, first of all, type in background image.
Nunga to select a new URL, and this is where our next technology or Mexican website comes into play
and this website is source on splash, dot com source dot on splash, dot com.
And you can see it right here.
Now, from Thorson's place dot com, we have this specific photo, and for here I'm going to copy.
Are your home right here?
I'm going to explain this very quickly.
So if I would copy only this hero in his save, let's go to our website, which is here.
I can't see anything because I didn't size it, so first of all, it needs a background.
Sighs And we're going to give it a size of cover, why image?
Then it's going to then we want to position the image, so background position and we're going to choose
center.
So it'd be totally in the center and we don't want an image to repeat.
So background.
Repeat.
With no repeat.
Not this free already this week.
These three options already give us our image, but I don't want this image, I want a specific image.
So the way I did it is then I may you go to on Splash Dotcom and you search for image, for example,
I used to allow you to do.
And I can't my image.
So let's start from the top again.
Oh, there you go.
There's so click on this image and you will see up here near you are this is the image I'd like.
You just need to copy this I.D. in the cockpit, go back to my code editor and paste it in here.
So it's between the dot com and the width and height of the image.
So if I paste it in here.
And it's safe.
Let's go back here.
Go back to the website to see where the image.
Collodi.
Now, there's an image, I guess as simple as that, you just copied and pasted in here.
Now, the last two things here are the width and the height.
You could obviously change them, but I would recommend to leave them as great as they are.
Okay.
Next, I want to give this the entire main section right here.
If you if you saw this in our main section here, everything has a bit of a shadow.
So I'm going to give the entire main section a tag shadow.
Of one pixel, one pixel, one pixel and the color of hexadecimal, 350.
So a bit of a dark color.
Now, if you go back to our Web page.
And it's actually this one because we already have a bit of a tech shadow.
OK, then I still need to I want to do is to change the entire colors of our main to a light colored
so that that hash this would give us this white color.
OK, next up is the navigation.
I was going through a navigation boot.
And first, I'm going to split everything up, so we have this 100 percent height for me and I mean
contains our navigation and our header, not for the navigation.
So let's choose, first of all, the idea of NAV.
We're going to give it a height of 10 viewport height.
So it's going to take up it's like picking up 10 percent from the entire viewport.
Now, also going to increase the font size to two ram for navigation only and now and then to display
it as flex and display and flex.
And as we learn, flex or flex, all automatically flexes into a row.
So it flexes my m m m here, my logo and my you element all on that list.
Now, let us let's give this also a bit of a padding of one room, and then we're going to give it a
background color.
Of zero action on G.P.A..
Also have a bit of a capacity of zero zero tab, zero tab point.
One, and what this will do is give me a dark, but with a capacity of zero one color, so it will be
a bit of a bit transparent.
Let's continue on now, we're going to target the logo so harsh, the idea of never logo.
Now, I'm going to give it a first of all, I need to size it, so let's give it a height.
Of 60 pixels and a width of 60 pixels, I'm going to give you the square size.
Now, I can give it also because it now has a size, I can give it a background color and because it's
a square I can of rounded up by typing in border radius and 50 percent.
So let's see what we just did.
I didn't do anything.
Why is that?
To do.
NAB Oh, Jesus.
There we go, there's a round circle around the square circles.
No, we don't have on her round circles.
OK, next up on the displayed as Fleck's not direction.
And I'm going to align it, so align itself to the center and now everything is aligned in the center
right here.
Now let's take care of our you l.
So first of all, we're going to try it on navigation idea again, some now and within this, the honor
that list, we're going to give it a width, not the window, with 100 percent of its container.
And you will see this is now going to take up this entire container with.
Then we're going to display this flex.
And as soon as we display those facts, we also need to push should this should already be displayed
in a row because it's safe, but we want to have this in our on our side.
So what we need to do.
We need to justify the content
to the flags.
And as soon as we do this and also safe.
Now, this is pushed to the right side, OK?
Simple as that.
Now, let's target our allies or navigation items or list items we're going to do again, I didn't have
witness to the list and within it all of the allies.
And what I'm going to do is just give them a bit of a padding to the left side of one room.
As soon as I do this now, we have to let each of the left sides a padding of one ran.
We could do obviously more, but I'm going to leave it as one room.
OK, next up, we're going to.
Style, our anchor tags, so let's go in here, let's take it.
I could just copy this.
And with inheritance and tax and I'm going to change the color.
To them, it should be F.
They're going to increase the font size.
They're going to increase their font weight to Boulder.
Let me leave it at Bold, Bold is enough and I'm also going to increase the letter spacing to one pixel.
OK, so let's say they look perfect.
There we go.
Another thing I want to start is the header, so this part right here.
So let's go back into our code.
There's the end of navigation now.
We're going to go in here and see how perfectly commented out this now is.
There's no way we could get lost now in our styling.
OK, for Heather, I'm going to, first of all, target the Heather Idee.
Then we're going to give it the rest of the viewport, which is 90 viewport hides from 100, we're going
to display it as flags not in line Fleck's.
We're going to choose the flex direction now, so let's take a look at first of all.
Now, I want to have them in a column not in a row sort of typing column because normally they would
Flexner or not this would happen.
But no problem.
I'm going to take care of this now.
We can't justify the content to the center as soon as we do this.
So he's not pushed down here to the center and to have it in the center of the entire page need to align
the items.
Also to the center, and as soon as we do this, we have every now in the center of the page.
OK, now let's take care of our H1, so let's target to Heather idea again, and within this hour,
each one year think is font size to 10 REM.
This way, it depends on the resolution you have.
So maybe 10 REM is sufficient.
Too much or too little.
Just play around with it and you will see the right one now for text.
And I'm going to go with center.
And we are also going to give it a margin for the bottom and what this will do, so just hit save and
I want to push this a bit further down.
So I'm going to give the H one imagine from the bottom to the bottom of four ram.
And as you can see, it's safe.
Yeah, this is a bit pushed down now.
Became the last couple of things we need to take care of is the button and the H.
We saw this first article, Heather Idee.
And within this, we had to target the H3 and I'm just going to give this a color.
Of a RGV eight.
Of a complete dark color, so zero zero zero and point seven, I see how all this looks.
Hmm, it's OK.
Not a thing I want to start is our button sabatina idea of whether we have a class of Bitti and success.
And I'm going to give it a margin from the top of the room, and they should push our button down a
bit further from here.
OK.
And.
And then I say, I want to do with this button, this changes Congress is blue and on the line.
I don't like this.
So let's go with the bottom.
He had the anchor tag, so I'm just going to come up with this.
Pasted down here again and within our button success, we're going to target the anchor tag.
I'm going to change the color of the text to white, so hash that.
And going to Texas form.
Am I going to transform the text, the text transform to uppercase?
Not decoration, text, transform uppercase, OK, so we have only capital letters that we go.
OK, so that's pretty much it for this one.
See you in the next one.
Bye bye.