And we're back. In this video, 1
we're going to add the image to this section. 2
As usual, we need to export the image. Group the whole thing first and give it a name. 3
We can't directly export this as is. If we do Figma will export the cropped image. You can see that 4
in the preview. But we don't want an already cropped image. 5
We want it to be cropped by the page boundaries itself. 6
More like part hidden away. 7
So just drag a copy of this whole group somewhere else on the page, 8
this will reveal the entire graphic. And now we can export it. 9
We need PNG. And 2X for retina resolutions. And then compress the size, 10
otherwise, it's too large. As usual, we're going to compress it on imagecompressor.com or something 11
like that. 12
Let's add an image element inside this container and then upload our image. 13
Select HiDPI since we are using 2X. 14
All right. 15
Now, what do we do? 16
We've already done a very similar thing in the previous website. 17
So a lot of things are going to be quite the same. 18
We need the image to go on the right, as usual, flexbox is a great option for this. 19
That's what we used last time as well. To create a flexbox, 20
we need an extra div block, where we're going to place content and image inside. 21
Let's create a new class - flexbox. 22
And change the display to flex. 23
Let's set that alignment or center. 24
And while we're at it, let's set the Justify Space Between. 25
Why? 26
Because we want content to be glued on the left and image to be glued on the right edge. 27
That's not going to change anything, at this stage, because there is really no space inside the flexbox. 28
And the way space between setting works is sort of like a spring, it inserts a spring in between that 29
pushes elements to the sides. But with the zero space, there's nothing to be pushed. 30
If we make the image small like 500 pixels, then it will work. It's going to be pressed against the edge 31
of the flexbox. 32
If you remember, last time we used a special trick, to move image to the edge and beyond it. 33
We used negative margin. So we are going to do the same thing here. But let's bring the image back to 34
its original size first. Now, you'll see that at the beginning, the negative margin doesn't move the image. 35
But then at some point it starts moving. 36
To be honest, I'm not 100% sure why this is happening. 37
It definitely has to do with the fact that image is so large and it's going beyond the boundaries 38
of the parent. 39
This is why I always advise, to never style images directly. Drop them inside div block and style that 40
instead. You're gonna get more predictable and proper behavior, because flexbox does weird things 41
to images. And it's just best to have them inside their own dedicated div block. And then it's going to behave 42
properly and you'll understand what's happening. And you're not goinna have to deal with some weird 43
behavior, when the margin isn't moving and then at some point it starts moving and so on. 44
But this time, I have used just the image, so we can learn from our mistakes. 45
One last thing we need to fix here is this overflowing issue. To fix this, we need to tell the section, 46
to clip elements if they overflow beyond the borders. 47
It's simple. 48
We just need to set Overflow to hidden. 49
Don't forget, overflow setting is set on the parent, not on the image itself. 50
Let's create the combo class named overflow hidden. 51
We don't want to mess with our default section. And then apply this overflow setting. 52
Excellent. 53
Let's double check the preview and responsiveness. 54
And we're done with this section.