1
00:00:05,040 --> 00:00:11,140
The three are engaging with and this lesson is the page relative to the portfolio.

2
00:00:11,700 --> 00:00:16,670
So let's go to New Five and let's right portfolio age.

3
00:00:16,680 --> 00:00:19,530
Tommo, we have our new page.

4
00:00:21,180 --> 00:00:25,740
Let's go by the content of services, let's paste.

5
00:00:26,580 --> 00:00:33,720
Let's start with modifying the title and then in addition to modifying also porfolio.

6
00:00:34,670 --> 00:00:35,810
As section.

7
00:00:38,860 --> 00:00:47,710
Thing which hasn't been done previously with services, so let's also in services modify the title and

8
00:00:47,710 --> 00:00:56,920
then let's delete the content of container leaving exclusively the div you can benefit in the resources

9
00:00:56,920 --> 00:01:06,370
of your video from can simple images I have already inserted into my This is me folder.

10
00:01:06,370 --> 00:01:12,670
Then pause the video, save the images and insert them into the folder.

11
00:01:13,880 --> 00:01:20,030
Once done this, we can start inserting the various components of our portfolio.

12
00:01:21,250 --> 00:01:31,060
In selecting some images and their title and name of the website, Let's Start, then the first will

13
00:01:31,060 --> 00:01:36,780
be Div class, which we are naming item poll.

14
00:01:37,120 --> 00:01:42,130
So item portfolio where we will insert the image.

15
00:01:43,680 --> 00:01:50,310
Do, which we will associate anyway, a class calling image on this corpore.

16
00:01:51,890 --> 00:02:01,910
Which will be in the first place, 01, P and G, so let's close our AMG and let's insert the paragraphs

17
00:02:02,330 --> 00:02:05,960
sorted by title, which we are calling.

18
00:02:07,460 --> 00:02:07,950
SEC.

19
00:02:08,410 --> 00:02:11,960
Paul, that key section of the portfolio.

20
00:02:13,780 --> 00:02:14,740
After that.

21
00:02:18,150 --> 00:02:26,120
Another class, which we are calling some set on this corpore with the website, the number one image

22
00:02:26,120 --> 00:02:34,340
represents all that will insert oil in I will insert as website is Tacitus or dot com.

23
00:02:34,610 --> 00:02:37,160
Clearly an imaginary website.

24
00:02:37,670 --> 00:02:45,620
We have then completed the insertion of the first image we can associate to it first, all sectors of

25
00:02:45,620 --> 00:02:46,550
our stylesheet.

26
00:02:47,810 --> 00:02:54,920
After that, we we said also the following images started by saving check in the reserve, by going

27
00:02:54,920 --> 00:03:02,300
on to the portfolio, which, as you see, will provide a bigger image of our container with title and

28
00:03:02,300 --> 00:03:03,230
website.

29
00:03:04,270 --> 00:03:10,510
Let's therefore move to style and let's get on with inserting an item, Paul.

30
00:03:15,770 --> 00:03:20,660
To this selector, we will give TEKS Aline's center.

31
00:03:23,050 --> 00:03:25,120
A 10 piece of padding.

32
00:03:28,670 --> 00:03:32,990
And justify content center.

33
00:03:35,070 --> 00:03:43,770
As seen in one of the first lessons of this section, I had always inserted this play because there

34
00:03:43,770 --> 00:03:50,540
was no container relative to flex box, which in this case is instead inserted.

35
00:03:50,670 --> 00:03:59,400
So I can easily insert a property on the flex box, having already in the container display flex and

36
00:03:59,400 --> 00:04:03,990
also flex wrap that for that type of disposition.

37
00:04:05,000 --> 00:04:11,720
Completed with Justified Content Center, I can then dedicate to image poor.

38
00:04:15,350 --> 00:04:25,820
In image poor, I can give a precise tablet to 300 pixel width so that also when we have to do with

39
00:04:26,330 --> 00:04:29,360
300 pixel width devices.

40
00:04:32,700 --> 00:04:35,580
There won't be any visualization problem.

41
00:04:36,610 --> 00:04:38,920
We will then insert box shadow.

42
00:04:40,370 --> 00:04:40,940
Giving.

43
00:04:42,390 --> 00:04:48,420
A three pixel dimension, nine fade and a attending to black color.

44
00:04:49,930 --> 00:04:56,710
We have inserted white, but now let's modified by insert, for example, C8.

45
00:04:59,530 --> 00:05:09,370
In so doing, the image will have a shadow and will be 300 pixel wide, we might insert Max with considering

46
00:05:09,370 --> 00:05:11,680
that some devices may have.

47
00:05:13,180 --> 00:05:17,830
A less than 300 pixel screen resolution dimension.

48
00:05:18,830 --> 00:05:23,780
Once archived image poor, let's insert sick for.

49
00:05:25,380 --> 00:05:35,670
To The Selecter relating to the title of our work, we will give an 18 pixel font size 13 font weight.

50
00:05:36,780 --> 00:05:39,630
Just like our name, so 300.

51
00:05:40,810 --> 00:05:43,720
After this, let's insert immagine.

52
00:05:45,110 --> 00:05:49,790
AP reported the top and zero pixel for all the rest.

53
00:05:51,560 --> 00:05:53,750
Let's inside then subsect.

54
00:05:55,120 --> 00:06:03,730
Poor to reach that a sign is slightly inferior, font size, therefore, 16 pixels for the site name.

55
00:06:04,900 --> 00:06:07,210
A simple phone wait.

56
00:06:08,360 --> 00:06:12,320
And zero pixel margin for all of them.

57
00:06:15,370 --> 00:06:24,850
So that immediately gets positioned just under the title in all these features, we can now say refresh

58
00:06:25,450 --> 00:06:36,520
and see that we have inserted our own image with a shadow after that, the title and the relative website.

59
00:06:39,020 --> 00:06:47,930
In the page we have just seen, you may have noticed that there is a mistake as far as one of the latest

60
00:06:47,930 --> 00:06:50,180
insurgent selectors.

61
00:06:52,720 --> 00:06:59,890
Now, try to find out this mistake and modify the content before getting on.

62
00:07:03,810 --> 00:07:14,670
The mistake made has to do with eye to poor, in fact, into a portfolio, we had inserted it with the

63
00:07:14,670 --> 00:07:19,620
underscore and not with the dash, then let's insert the underscore.

64
00:07:21,720 --> 00:07:23,970
That safe and refresh.

65
00:07:26,400 --> 00:07:35,190
You will notice the image is not stuck to the top margin of the container anymore, and the title and

66
00:07:35,190 --> 00:07:47,960
the website are centered exactly as according to the padding Section 10 pizzas and justify content center

67
00:07:48,540 --> 00:07:53,420
in addition to the general alignment of the text as centered.

68
00:07:54,420 --> 00:07:57,780
Let's move on and search in the other images.

69
00:07:59,220 --> 00:08:00,870
So let's insert.

70
00:08:03,330 --> 00:08:15,270
Five, six, seven, eight, nine, 10 images, let's modify with two, three, four, five, six,

71
00:08:16,170 --> 00:08:17,970
seven, eight.

72
00:08:19,090 --> 00:08:19,630
Nine.

73
00:08:21,190 --> 00:08:21,730
Ten.

74
00:08:23,710 --> 00:08:32,980
And here are 10 images we can assess, 10 diverse titles for them, image number two years, for example,

75
00:08:32,980 --> 00:08:34,130
with a computer.

76
00:08:34,540 --> 00:08:39,670
Number three with the photo, number four with travelling.

77
00:08:40,450 --> 00:08:42,820
Number five with gaping.

78
00:08:43,210 --> 00:08:46,900
Number six with games.

79
00:08:47,850 --> 00:08:49,980
Number seven with cars.

80
00:08:51,120 --> 00:08:54,150
Number eight with fashion.

81
00:08:55,020 --> 00:08:59,580
Number nine with sneakers and number 10 with relax.

82
00:09:02,790 --> 00:09:08,670
We can also magnify the names of the sides by inserting the name itself.

83
00:09:11,380 --> 00:09:14,470
So to have a complete portfolio.

84
00:09:25,760 --> 00:09:34,880
Now and save refresh and check the result, as you can see, our complete portfolio has been inserted

85
00:09:34,880 --> 00:09:36,480
with flex wrap.

86
00:09:36,500 --> 00:09:41,000
So if we widen three, we appear with one left out.

87
00:09:41,270 --> 00:09:44,950
If we shrink, the will appear one below the other.

88
00:09:45,590 --> 00:09:50,150
We have them correctly completed our portfolio.