1
00:00:05,060 --> 00:00:13,350
Let's complete now the creation of our This is B project with the contact dot aged page.

2
00:00:13,700 --> 00:00:15,740
Therefore, let's close race.

3
00:00:15,740 --> 00:00:26,000
You may as create the new contactor HTML page and let's copy and paste inside it the content of services.

4
00:00:27,060 --> 00:00:36,420
Let's modify the title into contact, also the SEC zero one section and let's delete the content of

5
00:00:36,420 --> 00:00:37,290
container.

6
00:00:40,330 --> 00:00:46,900
At this point, we can start by inserting a div class, we are calling for group.

7
00:00:51,530 --> 00:01:01,560
Inside this forum group, we are going to insert additional div with some inputs and a button to send

8
00:01:01,560 --> 00:01:03,350
the communication to the forum.

9
00:01:03,530 --> 00:01:10,660
Therefore, let's start with the class form on the score zero one inside each.

10
00:01:10,670 --> 00:01:13,400
Let's insert then input class.

11
00:01:14,460 --> 00:01:19,170
Some form with the placeholder there for.

12
00:01:20,140 --> 00:01:27,250
The predefine name appearing once we get into the page, starting from name.

13
00:01:28,560 --> 00:01:34,620
We can copy this content for e-mail, phone and message.

14
00:01:36,230 --> 00:01:43,820
One's done this, we know that the second will be, in fact, he made the third phone and the fourth

15
00:01:43,820 --> 00:01:44,510
message.

16
00:01:45,930 --> 00:01:53,280
However, we want to detach, for example, message from Phonte, therefore let's modify glass into

17
00:01:53,280 --> 00:01:54,800
four zero two.

18
00:01:54,930 --> 00:02:05,940
Let's close then with a div class four zero three Incyte, which we are inserting eight button class.

19
00:02:07,480 --> 00:02:15,730
Subform, ETN, which is, of course, Subform Busson, which we are calling submit.

20
00:02:17,090 --> 00:02:25,850
At this point, we have created the base of our form and saving and refreshing, we can verify going

21
00:02:26,000 --> 00:02:33,180
into contact that our form without any type of stylesheet was correctly inserted.

22
00:02:33,650 --> 00:02:40,640
Let's go back into our style, see, assess and let's start compiling the classes.

23
00:02:40,640 --> 00:02:44,360
We need that start from form group.

24
00:02:47,600 --> 00:02:50,180
Let's define a background.

25
00:02:53,220 --> 00:03:02,550
This time choosing the Fortum background as a reference so that our GBE may result with the same information

26
00:03:02,850 --> 00:03:04,590
that is the same color.

27
00:03:05,640 --> 00:03:13,740
As inserted Arriflex direction column, knowing that display flex has really been inserted into the

28
00:03:13,740 --> 00:03:14,610
container.

29
00:03:16,260 --> 00:03:19,170
Then let's select the line items.

30
00:03:21,440 --> 00:03:22,310
Senator.

31
00:03:23,890 --> 00:03:37,830
So vertically centering every single inserted component that's insert 300 pixel with a 30 pixel margin.

32
00:03:39,010 --> 00:03:46,960
Both top and bottom, but also left and right in padding, so an inner margin, all 10 picks, let's

33
00:03:46,960 --> 00:03:56,380
round the border with the border reviews, 20 pixels and let's insert a two pizza box shadow.

34
00:04:01,620 --> 00:04:03,630
With the four things sort of fade.

35
00:04:06,440 --> 00:04:16,250
Starting from yellow, trying to select a similar shade to the already inserted yellow or as much as

36
00:04:16,250 --> 00:04:16,850
possible.

37
00:04:18,420 --> 00:04:22,020
Let's select a shade like.

38
00:04:23,960 --> 00:04:32,090
This one, once done this, we can insert form underscore 01 and.

39
00:04:33,100 --> 00:04:36,520
Giving it exclusively a margin top.

40
00:04:40,360 --> 00:04:49,180
To detach all the various Divx form underscore to be this superior margin top, because this is the

41
00:04:49,180 --> 00:04:50,860
one referring to message.

42
00:04:52,430 --> 00:04:56,000
And after that, inside four zero three.

43
00:04:57,530 --> 00:05:00,800
Let's play, say, 15 pixel margin top.

44
00:05:03,170 --> 00:05:06,020
And a 25 Piegza.

45
00:05:07,990 --> 00:05:09,610
Margin barsoum.

46
00:05:11,440 --> 00:05:19,840
So that we can also have a certain space in between the end of our container and for let's conclude

47
00:05:19,840 --> 00:05:30,100
with the Subform classes starting from the general selecter, setting vaja non deleting, then all the

48
00:05:30,100 --> 00:05:33,280
borders our form has got in this moment.

49
00:05:36,060 --> 00:05:48,000
Then select exclusively a one pixel solid border black and the lighter border Bossom lets select twenty

50
00:05:48,000 --> 00:05:57,360
two pixel font size and let's keep a one pixel letter spacing to space the single letters.

51
00:05:59,590 --> 00:06:02,650
After that, let's insert as a background color.

52
00:06:04,080 --> 00:06:07,320
The same of four group.

53
00:06:09,220 --> 00:06:17,980
And let's define also the Ramano fun family, because in this case, he won't inherit the fun from Buddy.

54
00:06:19,260 --> 00:06:29,640
Let's conclude with the outline property, which we have never seen before, but its use is only deleting

55
00:06:29,640 --> 00:06:35,310
the borders when insightful and input gets selected.

56
00:06:35,790 --> 00:06:44,670
In this case, as you see, it's all black and with outline, it will be deleted and let's insert none.

57
00:06:46,570 --> 00:06:53,230
Let's modify also these pseudo classes starting from Placeholder.

58
00:06:55,250 --> 00:07:03,320
Giving a well specified color in comparison to the one usually inserted, we can continue with our black

59
00:07:03,470 --> 00:07:05,910
in a slightly lighter shade.

60
00:07:05,930 --> 00:07:08,480
Let's define a Samie bowl.

61
00:07:08,790 --> 00:07:12,890
Five hundred pixels and let's insert then.

62
00:07:14,420 --> 00:07:25,130
With the focus and tribute associated to the Subform class, a different order bossom so that every

63
00:07:25,130 --> 00:07:29,120
time there would be the death scene selection for outline.

64
00:07:30,030 --> 00:07:37,720
Exclusively, an inferior border tending to red should be defined.

65
00:07:38,190 --> 00:07:43,230
We will also define, in this case, a red light this.

66
00:07:44,850 --> 00:07:51,570
And let's close let's end with our support for the P.M..

67
00:07:52,710 --> 00:07:55,290
To modify the submit button.

68
00:07:56,450 --> 00:07:57,380
Let's delete.

69
00:07:58,880 --> 00:08:02,000
The background, let's delete the borders.

70
00:08:04,860 --> 00:08:05,760
Let's give it the.

71
00:08:06,800 --> 00:08:11,690
Carla, we have just chosen for border bottom.

72
00:08:14,700 --> 00:08:18,450
So that the word submit may be displayed in red.

73
00:08:19,600 --> 00:08:28,600
And let's go on inserting what has been inserted also in Subform, because also in this case, in the

74
00:08:28,600 --> 00:08:31,450
form the fun family.

75
00:08:33,500 --> 00:08:43,280
Does not get inherited, let's get also five hundred picks, a fun way to letus facing one.

76
00:08:47,350 --> 00:08:58,360
Twenty two pixel font size now we have completed the insertion of the necessary data to make form and

77
00:08:58,360 --> 00:09:03,160
set for display correctly as far as our presentation.

78
00:09:03,280 --> 00:09:13,570
So if we refresh, we can notice that our form has been correctly inserted and we can verify by going

79
00:09:13,570 --> 00:09:23,770
on name, email, phone or message that our inferior red border was correctly inserted and the outline

80
00:09:23,770 --> 00:09:24,640
has vanished.

81
00:09:24,670 --> 00:09:34,060
Therefore, we have concluded our creation of the This is Me project with the very simple conter page.

82
00:09:35,070 --> 00:09:39,650
Heaviness style, able to implement the U.

83
00:09:39,690 --> 00:09:40,350
X.

84
00:09:41,630 --> 00:09:52,010
Now, if you are wondering why we had to insert, again, the font attributes into the sub sub for relative

85
00:09:52,010 --> 00:10:02,270
selectors, it's because the browsers like Chrome in our case, automatically identify some types of

86
00:10:02,270 --> 00:10:07,580
age, them out of tags, associating to them some specific properties.

87
00:10:08,180 --> 00:10:13,360
In our case, if, for example, we wanted to inspect to.

88
00:10:14,810 --> 00:10:17,900
With the instrument provided by Google Chrome.

89
00:10:19,340 --> 00:10:25,160
Right inside the single inputs, and therefore, for example, in message.

90
00:10:26,180 --> 00:10:34,340
We would notice that, of course, for which is the class of the signing of the specific input, we

91
00:10:34,340 --> 00:10:42,140
give its own properties, but deleting the font family, as you can see, automatically the system makes

92
00:10:42,140 --> 00:10:50,900
use of some pre established attributes, in fact, in input, which is a user agent and stylesheet,

93
00:10:50,930 --> 00:10:55,800
therefore a predefined browser style, the font will be Aryal.

94
00:10:55,910 --> 00:11:04,070
So if within the class of the single input, this specific font and the other relative information do

95
00:11:04,070 --> 00:11:09,740
not get define it, we automatically end up the area font.

96
00:11:10,010 --> 00:11:16,940
Therefore replicating the font family is necessary also within these classes.