The three are engaging with and this lesson is the page relative to the portfolio.
So let's go to New Five and let's right portfolio age.
Tommo, we have our new page.
Let's go by the content of services, let's paste.
Let's start with modifying the title and then in addition to modifying also porfolio.
As section.
Thing which hasn't been done previously with services, so let's also in services modify the title and
then let's delete the content of container leaving exclusively the div you can benefit in the resources
of your video from can simple images I have already inserted into my This is me folder.
Then pause the video, save the images and insert them into the folder.
Once done this, we can start inserting the various components of our portfolio.
In selecting some images and their title and name of the website, Let's Start, then the first will
be Div class, which we are naming item poll.
So item portfolio where we will insert the image.
Do, which we will associate anyway, a class calling image on this corpore.
Which will be in the first place, 01, P and G, so let's close our AMG and let's insert the paragraphs
sorted by title, which we are calling.
SEC.
Paul, that key section of the portfolio.
After that.
Another class, which we are calling some set on this corpore with the website, the number one image
represents all that will insert oil in I will insert as website is Tacitus or dot com.
Clearly an imaginary website.
We have then completed the insertion of the first image we can associate to it first, all sectors of
our stylesheet.
After that, we we said also the following images started by saving check in the reserve, by going
on to the portfolio, which, as you see, will provide a bigger image of our container with title and
website.
Let's therefore move to style and let's get on with inserting an item, Paul.
To this selector, we will give TEKS Aline's center.
A 10 piece of padding.
And justify content center.
As seen in one of the first lessons of this section, I had always inserted this play because there
was no container relative to flex box, which in this case is instead inserted.
So I can easily insert a property on the flex box, having already in the container display flex and
also flex wrap that for that type of disposition.
Completed with Justified Content Center, I can then dedicate to image poor.
In image poor, I can give a precise tablet to 300 pixel width so that also when we have to do with
300 pixel width devices.
There won't be any visualization problem.
We will then insert box shadow.
Giving.
A three pixel dimension, nine fade and a attending to black color.
We have inserted white, but now let's modified by insert, for example, C8.
In so doing, the image will have a shadow and will be 300 pixel wide, we might insert Max with considering
that some devices may have.
A less than 300 pixel screen resolution dimension.
Once archived image poor, let's insert sick for.
To The Selecter relating to the title of our work, we will give an 18 pixel font size 13 font weight.
Just like our name, so 300.
After this, let's insert immagine.
AP reported the top and zero pixel for all the rest.
Let's inside then subsect.
Poor to reach that a sign is slightly inferior, font size, therefore, 16 pixels for the site name.
A simple phone wait.
And zero pixel margin for all of them.
So that immediately gets positioned just under the title in all these features, we can now say refresh
and see that we have inserted our own image with a shadow after that, the title and the relative website.
In the page we have just seen, you may have noticed that there is a mistake as far as one of the latest
insurgent selectors.
Now, try to find out this mistake and modify the content before getting on.
The mistake made has to do with eye to poor, in fact, into a portfolio, we had inserted it with the
underscore and not with the dash, then let's insert the underscore.
That safe and refresh.
You will notice the image is not stuck to the top margin of the container anymore, and the title and
the website are centered exactly as according to the padding Section 10 pizzas and justify content center
in addition to the general alignment of the text as centered.
Let's move on and search in the other images.
So let's insert.
Five, six, seven, eight, nine, 10 images, let's modify with two, three, four, five, six,
seven, eight.
Nine.
Ten.
And here are 10 images we can assess, 10 diverse titles for them, image number two years, for example,
with a computer.
Number three with the photo, number four with travelling.
Number five with gaping.
Number six with games.
Number seven with cars.
Number eight with fashion.
Number nine with sneakers and number 10 with relax.
We can also magnify the names of the sides by inserting the name itself.
So to have a complete portfolio.
Now and save refresh and check the result, as you can see, our complete portfolio has been inserted
with flex wrap.
So if we widen three, we appear with one left out.
If we shrink, the will appear one below the other.
We have them correctly completed our portfolio.