1
00:00:08,320 --> 00:00:09,370
In this video.

2
00:00:09,370 --> 00:00:14,260
Let's go ahead and then style the images to have something like this.

3
00:00:14,380 --> 00:00:16,580
So let's start with the mobile first.

4
00:00:16,590 --> 00:00:20,530
So I'm going to reduce the browser width and here we go.

5
00:00:21,070 --> 00:00:30,910
So first step is let's target the container when I be docked works does container and for this display

6
00:00:30,910 --> 00:00:35,520
as flat and flex direction to the column.

7
00:00:35,530 --> 00:00:45,430
Then after that a line items to be center and then the width of it has 100% and the height also adds

8
00:00:45,430 --> 00:00:51,030
hundred percent and padding as zero and then ten works.

9
00:00:51,310 --> 00:00:55,950
Remember, the image is inside the work item and then the image.

10
00:00:55,960 --> 00:01:09,040
So our target, the works dash item and then the image and give it a width of 100% and height also as

11
00:01:09,040 --> 00:01:10,570
100%.

12
00:01:10,720 --> 00:01:12,010
So let's save it.

13
00:01:12,010 --> 00:01:13,540
And this is what we have.

14
00:01:13,540 --> 00:01:16,290
We can see that we are done on mobile.

15
00:01:16,300 --> 00:01:17,170
We are done with it.

16
00:01:17,200 --> 00:01:20,830
You can see how cool is it and you can see that for the final one.

17
00:01:20,830 --> 00:01:23,170
We have some Hoover Effect as that.

18
00:01:23,470 --> 00:01:26,260
So let's select the works.

19
00:01:26,260 --> 00:01:30,730
And then on Hoover, this is what we want to do.

20
00:01:31,060 --> 00:01:36,070
I want to add border of one piece of solid.

21
00:01:39,760 --> 00:01:49,000
So let's add transform property and for transform you want to scale it as 1.1 and transition is going

22
00:01:49,000 --> 00:01:56,770
to be all 0.56 is and cursor to be pointer.

23
00:01:56,980 --> 00:01:58,810
So now let's have a look.

24
00:01:58,930 --> 00:02:04,030
You can see that I have these cool effects if I move my mouse on it.

25
00:02:04,270 --> 00:02:06,820
So what has left is on desktop.

26
00:02:06,820 --> 00:02:12,490
On desktop, I want to have a to be a form of grid, not something like this one.

27
00:02:12,490 --> 00:02:18,060
So let's finish up quickly here and let's add the media query as we did before.

28
00:02:18,070 --> 00:02:23,680
So here are going to be the media query.

29
00:02:25,140 --> 00:02:27,960
And here asks me dear.

30
00:02:27,960 --> 00:02:35,690
And then you pass in the main dash with and you're going to be seven, six, eight episodes.

31
00:02:36,610 --> 00:02:42,950
So on desktop you want to change the direction of the work place to use row.

32
00:02:42,970 --> 00:02:48,250
So we insert here, let's go ahead and then select the works.

33
00:02:51,100 --> 00:02:58,170
Dice lists, dice container, and then for this display to flex.

34
00:02:58,180 --> 00:03:03,610
So with this one, let's have a look and you can see that it is moving from left to right.

35
00:03:03,880 --> 00:03:08,050
Next step is let's add flex wrap to wrap.

36
00:03:08,170 --> 00:03:14,890
Then let's add justify contain to be center and then align items to be center.

37
00:03:15,070 --> 00:03:16,330
Now this what?

38
00:03:16,330 --> 00:03:22,900
We have something like this one, but let's go ahead and then reduce the width of this item here so

39
00:03:22,900 --> 00:03:25,510
that it will move from left to right.

40
00:03:25,990 --> 00:03:26,260
Great.

41
00:03:26,260 --> 00:03:34,800
So let's go ahead and then select the works item and then we are going to change the width to 30%.

42
00:03:34,810 --> 00:03:36,910
So with this one, let's have a look.

43
00:03:36,940 --> 00:03:39,400
We have something like this.

44
00:03:39,400 --> 00:03:42,320
And on mobile, this is what we have.

45
00:03:42,340 --> 00:03:43,150
Let me show you.

46
00:03:43,150 --> 00:03:49,380
It's nice on desktop, this is what we have, but let's add some spacing around the item.

47
00:03:49,390 --> 00:03:50,800
So here we go.

48
00:03:50,830 --> 00:03:58,690
Inside the works item here, let's add margin to ten pixels and this is what we have.

49
00:03:58,690 --> 00:04:00,400
Everything looks nice.