Let's complete now the creation of our This is B project with the contact dot aged page.
Therefore, let's close race.
You may as create the new contactor HTML page and let's copy and paste inside it the content of services.
Let's modify the title into contact, also the SEC zero one section and let's delete the content of
container.
At this point, we can start by inserting a div class, we are calling for group.
Inside this forum group, we are going to insert additional div with some inputs and a button to send
the communication to the forum.
Therefore, let's start with the class form on the score zero one inside each.
Let's insert then input class.
Some form with the placeholder there for.
The predefine name appearing once we get into the page, starting from name.
We can copy this content for e-mail, phone and message.
One's done this, we know that the second will be, in fact, he made the third phone and the fourth
message.
However, we want to detach, for example, message from Phonte, therefore let's modify glass into
four zero two.
Let's close then with a div class four zero three Incyte, which we are inserting eight button class.
Subform, ETN, which is, of course, Subform Busson, which we are calling submit.
At this point, we have created the base of our form and saving and refreshing, we can verify going
into contact that our form without any type of stylesheet was correctly inserted.
Let's go back into our style, see, assess and let's start compiling the classes.
We need that start from form group.
Let's define a background.
This time choosing the Fortum background as a reference so that our GBE may result with the same information
that is the same color.
As inserted Arriflex direction column, knowing that display flex has really been inserted into the
container.
Then let's select the line items.
Senator.
So vertically centering every single inserted component that's insert 300 pixel with a 30 pixel margin.
Both top and bottom, but also left and right in padding, so an inner margin, all 10 picks, let's
round the border with the border reviews, 20 pixels and let's insert a two pizza box shadow.
With the four things sort of fade.
Starting from yellow, trying to select a similar shade to the already inserted yellow or as much as
possible.
Let's select a shade like.
This one, once done this, we can insert form underscore 01 and.
Giving it exclusively a margin top.
To detach all the various Divx form underscore to be this superior margin top, because this is the
one referring to message.
And after that, inside four zero three.
Let's play, say, 15 pixel margin top.
And a 25 Piegza.
Margin barsoum.
So that we can also have a certain space in between the end of our container and for let's conclude
with the Subform classes starting from the general selecter, setting vaja non deleting, then all the
borders our form has got in this moment.
Then select exclusively a one pixel solid border black and the lighter border Bossom lets select twenty
two pixel font size and let's keep a one pixel letter spacing to space the single letters.
After that, let's insert as a background color.
The same of four group.
And let's define also the Ramano fun family, because in this case, he won't inherit the fun from Buddy.
Let's conclude with the outline property, which we have never seen before, but its use is only deleting
the borders when insightful and input gets selected.
In this case, as you see, it's all black and with outline, it will be deleted and let's insert none.
Let's modify also these pseudo classes starting from Placeholder.
Giving a well specified color in comparison to the one usually inserted, we can continue with our black
in a slightly lighter shade.
Let's define a Samie bowl.
Five hundred pixels and let's insert then.
With the focus and tribute associated to the Subform class, a different order bossom so that every
time there would be the death scene selection for outline.
Exclusively, an inferior border tending to red should be defined.
We will also define, in this case, a red light this.
And let's close let's end with our support for the P.M..
To modify the submit button.
Let's delete.
The background, let's delete the borders.
Let's give it the.
Carla, we have just chosen for border bottom.
So that the word submit may be displayed in red.
And let's go on inserting what has been inserted also in Subform, because also in this case, in the
form the fun family.
Does not get inherited, let's get also five hundred picks, a fun way to letus facing one.
Twenty two pixel font size now we have completed the insertion of the necessary data to make form and
set for display correctly as far as our presentation.
So if we refresh, we can notice that our form has been correctly inserted and we can verify by going
on name, email, phone or message that our inferior red border was correctly inserted and the outline
has vanished.
Therefore, we have concluded our creation of the This is Me project with the very simple conter page.
Heaviness style, able to implement the U.
X.
Now, if you are wondering why we had to insert, again, the font attributes into the sub sub for relative
selectors, it's because the browsers like Chrome in our case, automatically identify some types of
age, them out of tags, associating to them some specific properties.
In our case, if, for example, we wanted to inspect to.
With the instrument provided by Google Chrome.
Right inside the single inputs, and therefore, for example, in message.
We would notice that, of course, for which is the class of the signing of the specific input, we
give its own properties, but deleting the font family, as you can see, automatically the system makes
use of some pre established attributes, in fact, in input, which is a user agent and stylesheet,
therefore a predefined browser style, the font will be Aryal.
So if within the class of the single input, this specific font and the other relative information do
not get define it, we automatically end up the area font.
Therefore replicating the font family is necessary also within these classes.