1
00:00:05,220 --> 00:00:14,580
The third lesson of our project is taking us to insert header and footer into the pages, therefore,

2
00:00:14,580 --> 00:00:24,600
let's start with index and the header tag on a new line and below it, let's insert the futer tag.

3
00:00:26,670 --> 00:00:34,980
Of course, once inserting the contents, the header tag will appear as the first inside body and the

4
00:00:34,980 --> 00:00:36,580
photo tag as the last.

5
00:00:36,600 --> 00:00:43,150
So in between, all the relative tags to all parts of every single page will be inserted.

6
00:00:44,010 --> 00:00:51,720
The first thing you may notice in observing the left side of your screen, that is the Explorer, is

7
00:00:51,720 --> 00:00:55,860
the presence of the Astacio on the school logo.

8
00:00:55,860 --> 00:01:05,910
Underscore why in which you find in the video sources so downloaded inserted into this is me once done.

9
00:01:07,080 --> 00:01:09,550
Since the first deep into had a.

10
00:01:11,620 --> 00:01:13,240
We are calling logo.

11
00:01:14,160 --> 00:01:24,570
Obviously, inside this day, we are going to insert as I n g s are c estás, you know, a white dope

12
00:01:24,570 --> 00:01:27,270
being without any other attribute.

13
00:01:28,420 --> 00:01:35,140
Once in Sirte, the logo, then let's insert the navigation menu to complete the header.

14
00:01:36,100 --> 00:01:37,840
Then let's insert Knab.

15
00:01:39,110 --> 00:01:44,360
And inside now let's insert you out class menu.

16
00:01:45,470 --> 00:01:48,560
To define that for a list.

17
00:01:50,270 --> 00:02:00,260
Made up of various lead tags, which also have a relative clause which we recall menu item into which

18
00:02:00,260 --> 00:02:05,540
let's insert the links to the pages composing the menu.

19
00:02:06,730 --> 00:02:14,260
Therefore, let's insert index dot h map for about let's copy our hourly.

20
00:02:16,380 --> 00:02:22,710
And let's complete it with the other pages, let's insert services.

21
00:02:24,400 --> 00:02:26,020
Portfolio.

22
00:02:31,190 --> 00:02:32,420
Resumé.

23
00:02:34,460 --> 00:02:38,240
The curriculum, basically, and contact.

24
00:02:43,440 --> 00:02:52,140
Now that we have created our menu, we can close our header instead, as far as futer, let's assign

25
00:02:52,140 --> 00:02:58,410
a class directly to The Selecter, which we are calling for, underscores one.

26
00:02:59,480 --> 00:03:07,880
Inside the same, we will insert copyright is Tazewell two thousand twenty.

27
00:03:08,780 --> 00:03:11,060
All rights reserved.

28
00:03:14,080 --> 00:03:18,070
One saving, you will notice that we have set the base.

29
00:03:19,090 --> 00:03:22,060
For the header and the future.

30
00:03:23,020 --> 00:03:25,000
We can now go to the style.

31
00:03:27,660 --> 00:03:35,580
To insert the already inserted tag related and class related selectors to make them appear perfect,

32
00:03:35,580 --> 00:03:38,610
graphically speaking in our pages.

33
00:03:40,100 --> 00:03:43,320
Let's verify the result, getting back.

34
00:03:43,670 --> 00:03:53,270
And as you see, we have our Fewster and our menu inserted in addition to our logo without any instructions,

35
00:03:53,480 --> 00:03:59,600
and therefore now we can get on starting with our logo class.

36
00:04:03,270 --> 00:04:11,310
You will surely remember from the initial description of the cause that the project regarding the personal

37
00:04:11,310 --> 00:04:19,200
side, therefore this is a project which does not need any type of media queries, therefore does not

38
00:04:19,200 --> 00:04:22,380
need a different setting according to the device.

39
00:04:23,570 --> 00:04:31,670
It is going to be set so that without any type of variation due to the pay dimensions.

40
00:04:33,450 --> 00:04:40,140
Or change in the resolution, like in the case of a tablet or a mobile phone.

41
00:04:40,320 --> 00:04:43,930
This may appear, in any case, visually perfect.

42
00:04:44,100 --> 00:04:47,100
Therefore, we use the flex boxes.

43
00:04:48,060 --> 00:04:49,530
To make this possible.

44
00:04:51,280 --> 00:04:56,980
As far as the logo, let's simply insert display flags.

45
00:04:58,370 --> 00:05:03,710
And justify content centered.

46
00:05:05,710 --> 00:05:13,250
As you remember from the lessons on the Fleck's boxes, you don't need to insert flex direction row

47
00:05:13,330 --> 00:05:16,800
as by the forward that is implicit.

48
00:05:17,500 --> 00:05:26,070
Therefore, once inserted the display flex the flex, their action property will have as a preset value

49
00:05:26,080 --> 00:05:29,490
the horizontal setting, the one we want in this case.

50
00:05:29,530 --> 00:05:37,690
Therefore, let's insert exclusively justify content center to make the logo appear centered as to the

51
00:05:37,690 --> 00:05:38,860
page content.

52
00:05:39,370 --> 00:05:48,310
Given the fact this is a personal project, will we not insert the values, display web keflex or web

53
00:05:48,310 --> 00:05:50,480
justify contact center?

54
00:05:50,650 --> 00:05:57,340
But remember that when you will have to create a project which is supposed to go online, it's always

55
00:05:57,340 --> 00:06:02,590
a good idea to insert all the properties allowing us to render the stylesheet.

56
00:06:04,170 --> 00:06:06,930
Compatible with any browser.

57
00:06:08,100 --> 00:06:16,470
At this point, we can save and refresh and we see that our logo gets placed in the center of the page.

58
00:06:19,370 --> 00:06:22,940
Let's insert now the property menu.

59
00:06:24,420 --> 00:06:31,680
Which obviously should contain all the necessary info to transform our menu.

60
00:06:33,500 --> 00:06:40,320
Inserted into this vertical list without end is tied into the horizontal element.

61
00:06:40,370 --> 00:06:47,670
We have visualized in the first lesson of the project less than insert here as well.

62
00:06:47,810 --> 00:06:49,410
This play flex.

63
00:06:49,520 --> 00:06:57,950
Let's insert list, tie, tie, none to avoid the dots.

64
00:06:57,950 --> 00:07:05,510
Besides every component of the list to show and last that insert flat wrap.

65
00:07:06,570 --> 00:07:16,710
And you sure remember that the flex property really rap as an attribute, will permit to rap those content

66
00:07:16,710 --> 00:07:25,120
that once inserted horizontally will not be able to be displayed on just one road within the browser.

67
00:07:25,380 --> 00:07:32,770
Let's answer then also in this case, justify content center and let's save.

68
00:07:34,320 --> 00:07:39,360
In addition to this, let's insert also the menu item.

69
00:07:41,080 --> 00:07:44,950
To which we give a twenty two pixel font size.

70
00:07:47,280 --> 00:07:49,740
And a 10 pics of padding.

71
00:07:51,010 --> 00:08:00,130
In so doing, every single voice now horizontally inserted, we have an enormous, you know, 10 pixels,

72
00:08:00,670 --> 00:08:02,770
top, bottom left and right.

73
00:08:03,700 --> 00:08:11,470
Because these are links and therefore, as there are attacks and say the menu, that's insert also the

74
00:08:11,470 --> 00:08:13,690
selector related voice.

75
00:08:14,650 --> 00:08:17,140
So let's define a color.

76
00:08:21,060 --> 00:08:22,620
White in this case.

77
00:08:24,420 --> 00:08:26,910
And a tax declaration, non.

78
00:08:29,790 --> 00:08:33,490
To make them different ones hovering around them.

79
00:08:33,510 --> 00:08:37,350
And so a column over.

80
00:08:40,630 --> 00:08:42,310
Let's insert a.

81
00:08:43,310 --> 00:08:44,990
White color again.

82
00:08:49,760 --> 00:08:51,260
But this time, a.

83
00:08:52,930 --> 00:09:01,570
Seven hundred font weight, which is the thickness of the font, therefore a full weight load, when

84
00:09:01,570 --> 00:09:06,860
done this we can save refresh the page and see the result.

85
00:09:07,020 --> 00:09:11,080
See know our menu appears this way.

86
00:09:11,200 --> 00:09:20,170
If we shrink the page, the content would automatically distribute themselves into two different roles.

87
00:09:20,590 --> 00:09:27,900
Having set our logo and our menu, we can now focus our attention on the full term.

88
00:09:28,150 --> 00:09:38,200
As you remember from the age TMAO in the computer, we didn't insert any selector or any PEV or any

89
00:09:38,200 --> 00:09:46,510
other section tags, but we inserted a clause which we call food underscores the one, and therefore

90
00:09:46,510 --> 00:09:50,140
we really just need to insert the same class.

91
00:09:50,470 --> 00:09:56,020
And also in this case, obviously, we we gave the display facts.

92
00:09:56,440 --> 00:10:04,840
Please note that all the display effect settings I am inserting one by one can be replaced by one container

93
00:10:04,840 --> 00:10:13,120
only, which would be represented with a single display, flags within which we might insert then singularly

94
00:10:13,450 --> 00:10:17,830
all our selectors without the display flags.

95
00:10:17,860 --> 00:10:25,110
As for me, I am inserting it because I would like you to learn how to use Aflex boxes at their best.

96
00:10:25,120 --> 00:10:31,360
Therefore, consider all this a revision in addition to display flags.

97
00:10:31,360 --> 00:10:39,130
At this point we can insert our usual justify content center to make the future as well.

98
00:10:39,150 --> 00:10:47,320
A result middle allai after that where we insert a background, therefore a background.

99
00:10:48,840 --> 00:10:49,590
Carlo.

100
00:10:50,570 --> 00:11:01,550
With yellowish color as seen in the sample, therefore from yellow, we might select then a shade.

101
00:11:03,210 --> 00:11:11,340
Pointing to orange, but still yellow, poor background, therefore, for example, these are value

102
00:11:11,700 --> 00:11:22,410
once done this way, will also in this case define font size, for example, 16 pixels, a fun way to.

103
00:11:24,010 --> 00:11:34,030
Which in this case, we might set on 500, so bold but lighter, let's close the setting, giving a

104
00:11:34,060 --> 00:11:39,150
20 piece of padding so that both over and under at the sides.

105
00:11:39,160 --> 00:11:47,920
But what matters is top and bottom may have a space of 20 pixels get into the center of the selecta

106
00:11:48,610 --> 00:11:49,060
last.

107
00:11:49,060 --> 00:11:56,470
Let's insert a margin bottom so that at the end of the page there might be anyway a tiny, tiny piece

108
00:11:56,470 --> 00:11:59,670
of space to make it stand out from the background.

109
00:12:00,720 --> 00:12:12,000
Now we can say and see our final result, as you can see, we set our logo, our menu and our future

110
00:12:12,150 --> 00:12:16,890
as a base for the pages we'll see in the next lesson's.