Let's complete now the about page that he's the index of This is Me, our personal site.
Since we have a inserted header and footer, we can now get on created a container.
Into we we will insert the components scene before let's start with a class which we are calling item
underscores the one.
Into this class, we are inserting a header with our name.
And a series of paragraphs to which we are associate in a class which we are calling some item underscores
one.
Inserting our title in this case, instructor and web developer.
After that, a second paragraph.
With the same item zero to class insight, which we will insert a that is a description of our work.
Once this first day is over, let's then insert another item which we are calling item zero to.
Into which we will insert a personal image of ourselves at your disposal.
There's an image called me PMG, which you can find in the resources when this is inserted into the
folder, as you can see.
Let's here as well insert HMG as our See Me Dot PMG and let's close our tag.
Let's give a class, in this case public image, to allow the insertion of the attributes through the
stylesheets.
Also, the image itself once closed.
This first part, let's get out from the container, adding a tax section to each attribute a class.
Which we are calling sick, underscore zero one in this class, we insert.
This is me.
The setting of this section is important as far as the stylesheets, because in the pages coming after
index, therefore from service to contact, we will use this section as a title inserted inside each
of them.
To conclude an hour about let's insert an additional Dave Glass container.
Insight, which we will insert.
Some new device which we are calling item SEC, which will contain some Lorem.
In our example, we have inserted three of them, therefore, let's insert three here as well.
And, of course.
With in mind, a hypothetical website to publish, then to web within these items says we will define
some aspects of our work.
Once done, now, we have completed the next stage, the Mopar, therefore we can save and check the
result.
As you can see, we have our name with a relative job after that, a brief description of our image
available to you as well.
The title of the following section and the three lorem four features you may like to insert later.
At this point, we can get to style.
Starting off defining our container.
Therefore, let's insert the containers selector and let's define the white background.
For the central part.
Our usual display, Fleck's.
The flex rep attribute, because also in this case, we want the contents, which I'm not able to read,
is played on just one row to be able to automatically wrap.
Justify.
Content center.
And in this case, also a line item center, because we want the part relative to name, word and description
to appear centered as to the side image, which will then define the height of this game.
Last, we will insert a 20 pixel margin barsoum.
And we will add a full pixel extension box shadow with a 12 pixel fade of light blue shade, and therefore
we will insert also in this case, a base.
Correctly picked out of our system in visual studio code, which serves as a support with this, we
should look like our background and then let's save.
And refresh.
And we see that.
Our contents, we appear.
Both for the first container and for the second, which obviously have the same name because the bay's
setting must be the same, they will actually appear with a white background.
And the shadow at this point once defined all the features of the container.
We can step onto the H1 tag.
Which in this case is not a class, but a type selector, and let's define its font size, 40 pixels
with a three hundred pixel font weight.
Therefore, quite thin.
Once defined our H1, let's get ahead with the item classes, therefore item zero one in sight, which
we will left align the text.
We really gave a 20 piece of padding starting from the right.
So that there can be some space in between the image and the text then inserted inside item zero one,
after that we will assign the maximum width of 60 percent.
In item two, instead, we will only insert.
Once again, our teched a left, but this time a 20 pixelate left heading and no mux with so that only
the first item may have a 60 percent limit inside the browser.
Instead, the item zero two might automatically wrap.
Now, let's insert these some items there for some items.
One.
Within which we will insert a 20 pixel font size.
With.
And bold.
Font there for seven hundred pixel margin and a zero pixel margin, we can copy some items zero one.
And modify only its font weight to make the two sub items different and finish off with a match.
To which we would give a maximum width of one hundred and fifty pixels and a top ten bits of padding
so that this may appear not totally stuck to the top margin.
Let's keep our semicolons.
Let's save and refresh.
As you see, we have got our initial result.
As far as the container part.
Which ones stretched and shrunk will perfectly adapt, as you see also in this case, after some shrinking,
the image will automatically wrap.
So now we can complete the other selectors.
Let's start with SEC 01.
Which is our selecter with this is me.
Incyte, which insur the classical display flags and let's insert here also.
Justify content, send to.
A background tending to read.
But a bit lighter.
Therefore, let's move across the pilot and for example, we can insert this.
Let's complete with a white column for the tax.
So that it may stand out on red font size, set to 50 pixels.
Text.
Only Apricus.
Font weight.
Five hundred, therefore, a semi bowl and margin bottle, 20 paces set this way by saving and refreshing.
We see that our selector would be perfectly positioned below and over the first container, again,
20 pixel distance and perfectly centered.
Also in this case, by shrinking, as you see, it will remain the same.
You will notice that the style of the page displays a light blue background and other colors such as
red and yellow, which are the main colors we have seen.
When we discussed the ex, they match perfectly according to the sequence it displayed when we were
talking about color combinations.
So they have been chosen mainly to maintain a perfect UX and therefore an excellent combination along
with this sans serif text.
Therefore, the modern font.
Let's complete now our content.
By inserting the last selector.
Therefore, item sick inside it, let's define here as well.
Text a line left, a 20 pixel padding so that it has a well defined in a margin.
Again, a 20 pixel font size.
And last, let's define some margins on the left and on the right in percentage, we'll insert zero
to make the top margin automatic, 10 percent for the right one.
Zero for the bottom and 10 percent for the left one.
In so doing, saving and refreshing, we end up.
With our content, which, as you see, we'll have an additional percentage margin, which, by shrinking
the content, will adapt along with the inserted timing.
Therefore, we have completed our index page and we can get on with the services.