The third lesson of our project is taking us to insert header and footer into the pages, therefore,
let's start with index and the header tag on a new line and below it, let's insert the futer tag.
Of course, once inserting the contents, the header tag will appear as the first inside body and the
photo tag as the last.
So in between, all the relative tags to all parts of every single page will be inserted.
The first thing you may notice in observing the left side of your screen, that is the Explorer, is
the presence of the Astacio on the school logo.
Underscore why in which you find in the video sources so downloaded inserted into this is me once done.
Since the first deep into had a.
We are calling logo.
Obviously, inside this day, we are going to insert as I n g s are c estás, you know, a white dope
being without any other attribute.
Once in Sirte, the logo, then let's insert the navigation menu to complete the header.
Then let's insert Knab.
And inside now let's insert you out class menu.
To define that for a list.
Made up of various lead tags, which also have a relative clause which we recall menu item into which
let's insert the links to the pages composing the menu.
Therefore, let's insert index dot h map for about let's copy our hourly.
And let's complete it with the other pages, let's insert services.
Portfolio.
Resumé.
The curriculum, basically, and contact.
Now that we have created our menu, we can close our header instead, as far as futer, let's assign
a class directly to The Selecter, which we are calling for, underscores one.
Inside the same, we will insert copyright is Tazewell two thousand twenty.
All rights reserved.
One saving, you will notice that we have set the base.
For the header and the future.
We can now go to the style.
To insert the already inserted tag related and class related selectors to make them appear perfect,
graphically speaking in our pages.
Let's verify the result, getting back.
And as you see, we have our Fewster and our menu inserted in addition to our logo without any instructions,
and therefore now we can get on starting with our logo class.
You will surely remember from the initial description of the cause that the project regarding the personal
side, therefore this is a project which does not need any type of media queries, therefore does not
need a different setting according to the device.
It is going to be set so that without any type of variation due to the pay dimensions.
Or change in the resolution, like in the case of a tablet or a mobile phone.
This may appear, in any case, visually perfect.
Therefore, we use the flex boxes.
To make this possible.
As far as the logo, let's simply insert display flags.
And justify content centered.
As you remember from the lessons on the Fleck's boxes, you don't need to insert flex direction row
as by the forward that is implicit.
Therefore, once inserted the display flex the flex, their action property will have as a preset value
the horizontal setting, the one we want in this case.
Therefore, let's insert exclusively justify content center to make the logo appear centered as to the
page content.
Given the fact this is a personal project, will we not insert the values, display web keflex or web
justify contact center?
But remember that when you will have to create a project which is supposed to go online, it's always
a good idea to insert all the properties allowing us to render the stylesheet.
Compatible with any browser.
At this point, we can save and refresh and we see that our logo gets placed in the center of the page.
Let's insert now the property menu.
Which obviously should contain all the necessary info to transform our menu.
Inserted into this vertical list without end is tied into the horizontal element.
We have visualized in the first lesson of the project less than insert here as well.
This play flex.
Let's insert list, tie, tie, none to avoid the dots.
Besides every component of the list to show and last that insert flat wrap.
And you sure remember that the flex property really rap as an attribute, will permit to rap those content
that once inserted horizontally will not be able to be displayed on just one road within the browser.
Let's answer then also in this case, justify content center and let's save.
In addition to this, let's insert also the menu item.
To which we give a twenty two pixel font size.
And a 10 pics of padding.
In so doing, every single voice now horizontally inserted, we have an enormous, you know, 10 pixels,
top, bottom left and right.
Because these are links and therefore, as there are attacks and say the menu, that's insert also the
selector related voice.
So let's define a color.
White in this case.
And a tax declaration, non.
To make them different ones hovering around them.
And so a column over.
Let's insert a.
White color again.
But this time, a.
Seven hundred font weight, which is the thickness of the font, therefore a full weight load, when
done this we can save refresh the page and see the result.
See know our menu appears this way.
If we shrink the page, the content would automatically distribute themselves into two different roles.
Having set our logo and our menu, we can now focus our attention on the full term.
As you remember from the age TMAO in the computer, we didn't insert any selector or any PEV or any
other section tags, but we inserted a clause which we call food underscores the one, and therefore
we really just need to insert the same class.
And also in this case, obviously, we we gave the display facts.
Please note that all the display effect settings I am inserting one by one can be replaced by one container
only, which would be represented with a single display, flags within which we might insert then singularly
all our selectors without the display flags.
As for me, I am inserting it because I would like you to learn how to use Aflex boxes at their best.
Therefore, consider all this a revision in addition to display flags.
At this point we can insert our usual justify content center to make the future as well.
A result middle allai after that where we insert a background, therefore a background.
Carlo.
With yellowish color as seen in the sample, therefore from yellow, we might select then a shade.
Pointing to orange, but still yellow, poor background, therefore, for example, these are value
once done this way, will also in this case define font size, for example, 16 pixels, a fun way to.
Which in this case, we might set on 500, so bold but lighter, let's close the setting, giving a
20 piece of padding so that both over and under at the sides.
But what matters is top and bottom may have a space of 20 pixels get into the center of the selecta
last.
Let's insert a margin bottom so that at the end of the page there might be anyway a tiny, tiny piece
of space to make it stand out from the background.
Now we can say and see our final result, as you can see, we set our logo, our menu and our future
as a base for the pages we'll see in the next lesson's.