1
00:00:05,160 --> 00:00:12,720
Let's complete now the about page that he's the index of This is Me, our personal site.

2
00:00:13,140 --> 00:00:21,270
Since we have a inserted header and footer, we can now get on created a container.

3
00:00:24,980 --> 00:00:34,930
Into we we will insert the components scene before let's start with a class which we are calling item

4
00:00:34,940 --> 00:00:36,410
underscores the one.

5
00:00:38,480 --> 00:00:43,940
Into this class, we are inserting a header with our name.

6
00:00:45,340 --> 00:00:55,470
And a series of paragraphs to which we are associate in a class which we are calling some item underscores

7
00:00:55,690 --> 00:00:56,110
one.

8
00:00:57,240 --> 00:01:04,740
Inserting our title in this case, instructor and web developer.

9
00:01:06,080 --> 00:01:08,540
After that, a second paragraph.

10
00:01:11,140 --> 00:01:21,040
With the same item zero to class insight, which we will insert a that is a description of our work.

11
00:01:22,390 --> 00:01:32,770
Once this first day is over, let's then insert another item which we are calling item zero to.

12
00:01:35,500 --> 00:01:42,820
Into which we will insert a personal image of ourselves at your disposal.

13
00:01:42,880 --> 00:01:51,580
There's an image called me PMG, which you can find in the resources when this is inserted into the

14
00:01:51,580 --> 00:01:53,490
folder, as you can see.

15
00:01:53,590 --> 00:02:02,200
Let's here as well insert HMG as our See Me Dot PMG and let's close our tag.

16
00:02:02,500 --> 00:02:12,070
Let's give a class, in this case public image, to allow the insertion of the attributes through the

17
00:02:12,070 --> 00:02:13,080
stylesheets.

18
00:02:13,630 --> 00:02:17,280
Also, the image itself once closed.

19
00:02:17,290 --> 00:02:26,200
This first part, let's get out from the container, adding a tax section to each attribute a class.

20
00:02:31,600 --> 00:02:37,970
Which we are calling sick, underscore zero one in this class, we insert.

21
00:02:38,020 --> 00:02:39,070
This is me.

22
00:02:40,030 --> 00:02:47,830
The setting of this section is important as far as the stylesheets, because in the pages coming after

23
00:02:47,830 --> 00:02:56,380
index, therefore from service to contact, we will use this section as a title inserted inside each

24
00:02:56,380 --> 00:02:56,770
of them.

25
00:02:58,030 --> 00:03:04,930
To conclude an hour about let's insert an additional Dave Glass container.

26
00:03:08,480 --> 00:03:11,660
Insight, which we will insert.

27
00:03:14,270 --> 00:03:21,590
Some new device which we are calling item SEC, which will contain some Lorem.

28
00:03:23,890 --> 00:03:30,840
In our example, we have inserted three of them, therefore, let's insert three here as well.

29
00:03:32,080 --> 00:03:33,670
And, of course.

30
00:03:35,350 --> 00:03:44,560
With in mind, a hypothetical website to publish, then to web within these items says we will define

31
00:03:45,400 --> 00:03:47,830
some aspects of our work.

32
00:03:49,630 --> 00:03:57,550
Once done, now, we have completed the next stage, the Mopar, therefore we can save and check the

33
00:03:57,550 --> 00:03:58,080
result.

34
00:03:58,870 --> 00:04:06,790
As you can see, we have our name with a relative job after that, a brief description of our image

35
00:04:06,790 --> 00:04:08,420
available to you as well.

36
00:04:09,100 --> 00:04:17,710
The title of the following section and the three lorem four features you may like to insert later.

37
00:04:18,220 --> 00:04:20,650
At this point, we can get to style.

38
00:04:21,850 --> 00:04:24,820
Starting off defining our container.

39
00:04:25,850 --> 00:04:32,510
Therefore, let's insert the containers selector and let's define the white background.

40
00:04:34,680 --> 00:04:36,150
For the central part.

41
00:04:37,060 --> 00:04:39,640
Our usual display, Fleck's.

42
00:04:42,010 --> 00:04:50,470
The flex rep attribute, because also in this case, we want the contents, which I'm not able to read,

43
00:04:50,470 --> 00:04:55,990
is played on just one row to be able to automatically wrap.

44
00:04:56,910 --> 00:04:58,140
Justify.

45
00:04:59,160 --> 00:05:01,050
Content center.

46
00:05:02,310 --> 00:05:13,500
And in this case, also a line item center, because we want the part relative to name, word and description

47
00:05:13,500 --> 00:05:21,800
to appear centered as to the side image, which will then define the height of this game.

48
00:05:22,170 --> 00:05:27,200
Last, we will insert a 20 pixel margin barsoum.

49
00:05:31,240 --> 00:05:44,890
And we will add a full pixel extension box shadow with a 12 pixel fade of light blue shade, and therefore

50
00:05:44,890 --> 00:05:48,730
we will insert also in this case, a base.

51
00:05:51,860 --> 00:06:01,120
Correctly picked out of our system in visual studio code, which serves as a support with this, we

52
00:06:01,130 --> 00:06:05,840
should look like our background and then let's save.

53
00:06:07,310 --> 00:06:08,390
And refresh.

54
00:06:09,730 --> 00:06:10,720
And we see that.

55
00:06:12,060 --> 00:06:14,190
Our contents, we appear.

56
00:06:16,120 --> 00:06:22,630
Both for the first container and for the second, which obviously have the same name because the bay's

57
00:06:22,630 --> 00:06:29,260
setting must be the same, they will actually appear with a white background.

58
00:06:29,260 --> 00:06:34,690
And the shadow at this point once defined all the features of the container.

59
00:06:36,160 --> 00:06:39,370
We can step onto the H1 tag.

60
00:06:40,570 --> 00:06:50,140
Which in this case is not a class, but a type selector, and let's define its font size, 40 pixels

61
00:06:50,440 --> 00:06:53,650
with a three hundred pixel font weight.

62
00:06:55,500 --> 00:06:57,270
Therefore, quite thin.

63
00:07:00,140 --> 00:07:10,670
Once defined our H1, let's get ahead with the item classes, therefore item zero one in sight, which

64
00:07:11,000 --> 00:07:13,850
we will left align the text.

65
00:07:15,930 --> 00:07:20,910
We really gave a 20 piece of padding starting from the right.

66
00:07:22,130 --> 00:07:31,040
So that there can be some space in between the image and the text then inserted inside item zero one,

67
00:07:31,710 --> 00:07:37,400
after that we will assign the maximum width of 60 percent.

68
00:07:39,440 --> 00:07:44,510
In item two, instead, we will only insert.

69
00:07:47,450 --> 00:07:58,160
Once again, our teched a left, but this time a 20 pixelate left heading and no mux with so that only

70
00:07:58,160 --> 00:08:03,310
the first item may have a 60 percent limit inside the browser.

71
00:08:03,370 --> 00:08:08,420
Instead, the item zero two might automatically wrap.

72
00:08:09,380 --> 00:08:14,130
Now, let's insert these some items there for some items.

73
00:08:14,420 --> 00:08:14,870
One.

74
00:08:17,500 --> 00:08:22,390
Within which we will insert a 20 pixel font size.

75
00:08:24,130 --> 00:08:24,580
With.

76
00:08:25,920 --> 00:08:26,760
And bold.

77
00:08:27,810 --> 00:08:38,320
Font there for seven hundred pixel margin and a zero pixel margin, we can copy some items zero one.

78
00:08:41,780 --> 00:08:49,670
And modify only its font weight to make the two sub items different and finish off with a match.

79
00:08:52,210 --> 00:09:02,290
To which we would give a maximum width of one hundred and fifty pixels and a top ten bits of padding

80
00:09:02,290 --> 00:09:07,310
so that this may appear not totally stuck to the top margin.

81
00:09:08,320 --> 00:09:10,240
Let's keep our semicolons.

82
00:09:10,540 --> 00:09:12,760
Let's save and refresh.

83
00:09:13,810 --> 00:09:16,960
As you see, we have got our initial result.

84
00:09:18,330 --> 00:09:21,000
As far as the container part.

85
00:09:22,360 --> 00:09:32,830
Which ones stretched and shrunk will perfectly adapt, as you see also in this case, after some shrinking,

86
00:09:33,940 --> 00:09:37,630
the image will automatically wrap.

87
00:09:38,870 --> 00:09:44,390
So now we can complete the other selectors.

88
00:09:45,960 --> 00:09:49,200
Let's start with SEC 01.

89
00:09:51,060 --> 00:09:54,000
Which is our selecter with this is me.

90
00:09:55,480 --> 00:10:02,500
Incyte, which insur the classical display flags and let's insert here also.

91
00:10:03,550 --> 00:10:06,550
Justify content, send to.

92
00:10:09,980 --> 00:10:15,380
A background tending to read.

93
00:10:17,580 --> 00:10:19,790
But a bit lighter.

94
00:10:20,640 --> 00:10:28,500
Therefore, let's move across the pilot and for example, we can insert this.

95
00:10:29,070 --> 00:10:32,490
Let's complete with a white column for the tax.

96
00:10:34,060 --> 00:10:40,600
So that it may stand out on red font size, set to 50 pixels.

97
00:10:43,730 --> 00:10:44,390
Text.

98
00:10:45,880 --> 00:10:47,260
Only Apricus.

99
00:10:49,280 --> 00:10:50,180
Font weight.

100
00:10:52,320 --> 00:11:04,600
Five hundred, therefore, a semi bowl and margin bottle, 20 paces set this way by saving and refreshing.

101
00:11:04,620 --> 00:11:13,230
We see that our selector would be perfectly positioned below and over the first container, again,

102
00:11:13,230 --> 00:11:16,760
20 pixel distance and perfectly centered.

103
00:11:17,070 --> 00:11:22,250
Also in this case, by shrinking, as you see, it will remain the same.

104
00:11:22,350 --> 00:11:30,480
You will notice that the style of the page displays a light blue background and other colors such as

105
00:11:30,480 --> 00:11:35,190
red and yellow, which are the main colors we have seen.

106
00:11:35,190 --> 00:11:43,350
When we discussed the ex, they match perfectly according to the sequence it displayed when we were

107
00:11:43,350 --> 00:11:45,680
talking about color combinations.

108
00:11:45,690 --> 00:11:53,970
So they have been chosen mainly to maintain a perfect UX and therefore an excellent combination along

109
00:11:53,970 --> 00:11:55,860
with this sans serif text.

110
00:11:55,900 --> 00:11:57,750
Therefore, the modern font.

111
00:11:59,310 --> 00:12:01,490
Let's complete now our content.

112
00:12:03,610 --> 00:12:07,060
By inserting the last selector.

113
00:12:09,350 --> 00:12:15,000
Therefore, item sick inside it, let's define here as well.

114
00:12:15,560 --> 00:12:25,580
Text a line left, a 20 pixel padding so that it has a well defined in a margin.

115
00:12:26,760 --> 00:12:29,460
Again, a 20 pixel font size.

116
00:12:30,470 --> 00:12:39,290
And last, let's define some margins on the left and on the right in percentage, we'll insert zero

117
00:12:39,290 --> 00:12:43,640
to make the top margin automatic, 10 percent for the right one.

118
00:12:44,940 --> 00:12:48,760
Zero for the bottom and 10 percent for the left one.

119
00:12:49,470 --> 00:12:53,790
In so doing, saving and refreshing, we end up.

120
00:12:54,840 --> 00:13:03,210
With our content, which, as you see, we'll have an additional percentage margin, which, by shrinking

121
00:13:03,210 --> 00:13:08,800
the content, will adapt along with the inserted timing.

122
00:13:09,270 --> 00:13:16,380
Therefore, we have completed our index page and we can get on with the services.