0
1
00:00:02,710 --> 00:00:04,420
And we're back. In this video,
1

2
00:00:04,420 --> 00:00:06,820
we're going to add the image to this section.
2

3
00:00:06,910 --> 00:00:11,410
As usual, we need to export the image. Group the whole thing first and give it a name.
3

4
00:00:15,070 --> 00:00:20,710
We can't directly export this as is. If we do Figma will export the cropped image. You can see that
4

5
00:00:20,710 --> 00:00:23,850
in the preview. But we don't want an already cropped image.
5

6
00:00:23,860 --> 00:00:26,970
We want it to be cropped by the page boundaries itself.
6

7
00:00:27,040 --> 00:00:28,920
More like part hidden away.
7

8
00:00:29,170 --> 00:00:33,220
So just drag a copy of this whole group somewhere else on the page,
8

9
00:00:33,250 --> 00:00:39,070
this will reveal the entire graphic. And now we can export it.
9

10
00:00:39,070 --> 00:00:44,290
We need PNG. And 2X for retina resolutions. And then compress the size,
10

11
00:00:44,290 --> 00:00:51,350
otherwise, it's too large. As usual, we're going to compress it on imagecompressor.com or something
11

12
00:00:51,350 --> 00:00:51,800
like that.
12

13
00:00:59,080 --> 00:01:03,040
Let's add an image element inside this container and then upload our image.
13

14
00:01:12,130 --> 00:01:14,830
Select HiDPI since we are using 2X.
14

15
00:01:19,130 --> 00:01:19,480
All right.
15

16
00:01:19,490 --> 00:01:20,590
Now, what do we do?
16

17
00:01:20,600 --> 00:01:23,870
We've already done a very similar thing in the previous website.
17

18
00:01:23,900 --> 00:01:26,220
So a lot of things are going to be quite the same.
18

19
00:01:26,240 --> 00:01:30,850
We need the image to go on the right, as usual, flexbox is a great option for this.
19

20
00:01:30,860 --> 00:01:34,130
That's what we used last time as well. To create a flexbox,
20

21
00:01:34,130 --> 00:01:38,870
we need an extra div block, where we're going to place content and image inside.
21

22
00:01:47,220 --> 00:01:49,380
Let's create a new class - flexbox.
22

23
00:01:52,590 --> 00:01:54,690
And change the display to flex.
23

24
00:01:57,330 --> 00:02:00,000
Let's set that alignment or center.
24

25
00:02:00,000 --> 00:02:03,570
And while we're at it, let's set the Justify Space Between.
25

26
00:02:03,590 --> 00:02:03,990
Why?
26

27
00:02:04,020 --> 00:02:08,960
Because we want content to be glued on the left and image to be glued on the right edge.
27

28
00:02:09,000 --> 00:02:13,440
That's not going to change anything, at this stage, because there is really no space inside the flexbox.
28

29
00:02:13,570 --> 00:02:19,380
And the way space between setting works is sort of like a spring, it inserts a spring in between that
29

30
00:02:19,380 --> 00:02:23,740
pushes elements to the sides. But with the zero space, there's nothing to be pushed.
30

31
00:02:23,790 --> 00:02:30,540
If we make the image small like 500 pixels, then it will work. It's going to be pressed against the edge
31

32
00:02:30,540 --> 00:02:31,410
of the flexbox.
32

33
00:02:34,840 --> 00:02:39,310
If you remember, last time we used a special trick, to move image to the edge and beyond it.
33

34
00:02:39,400 --> 00:02:45,280
We used negative margin. So we are going to do the same thing here. But let's bring the image back to
34

35
00:02:45,280 --> 00:02:52,280
its original size first. Now, you'll see that at the beginning, the negative margin doesn't move the image.
35

36
00:02:52,610 --> 00:02:55,010
But then at some point it starts moving.
36

37
00:02:55,100 --> 00:02:57,760
To be honest, I'm not 100% sure why this is happening.
37

38
00:02:57,770 --> 00:03:02,750
It definitely has to do with the fact that image is so large and it's going beyond the boundaries
38

39
00:03:02,750 --> 00:03:03,530
of the parent.
39

40
00:03:03,530 --> 00:03:09,020
This is why I always advise, to never style images directly. Drop them inside div block and style that
40

41
00:03:09,020 --> 00:03:15,200
instead. You're gonna get more predictable and proper behavior, because flexbox does weird things
41

42
00:03:15,260 --> 00:03:21,080
to images. And it's just best to have them inside their own dedicated div block. And then it's going to behave
42

43
00:03:21,110 --> 00:03:25,010
properly and you'll understand what's happening. And you're not goinna have to deal with some weird
43

44
00:03:25,010 --> 00:03:28,690
behavior, when the margin isn't moving and then at some point it starts moving and so on.
44

45
00:03:28,820 --> 00:03:32,150
But this time, I have used just the image, so we can learn from our mistakes.
45

46
00:03:35,010 --> 00:03:40,530
One last thing we need to fix here is this overflowing issue. To fix this, we need to tell the section,
46

47
00:03:40,530 --> 00:03:44,060
to clip elements if they overflow beyond the borders.
47

48
00:03:44,280 --> 00:03:45,150
It's simple.
48

49
00:03:45,150 --> 00:03:47,540
We just need to set Overflow to hidden.
49

50
00:03:47,580 --> 00:03:52,170
Don't forget, overflow setting is set on the parent, not on the image itself.
50

51
00:03:52,200 --> 00:03:55,010
Let's create the combo class named overflow hidden.
51

52
00:03:55,020 --> 00:04:00,380
We don't want to mess with our default section. And then apply this overflow setting.
52

53
00:04:00,390 --> 00:04:00,810
Excellent.
53

54
00:04:00,810 --> 00:04:03,510
Let's double check the preview and responsiveness.
54

55
00:04:25,210 --> 00:04:26,570
And we're done with this section.