In this video, we're going to build this section. 1
The layout is very similar to previous section that we already did. 2
So why not just duplicate it and take it from there? 3
Select the entire section and just do the copy-paste, Ctrl+C, Ctrl + V. I'll drop one after the 4
other. The order of the content is reversed. 5
We can change that by dragging the image element on top. And this will place image first. 6
This image has a negative margin applied to it, but this time we don't need it. To remove that we need 7
to remove the class. Because we can't make any edit to the margin itself. 8
That's going to affect the previous image. 9
And now let's replace it with our own image. 10
This time, we're going to export as JPEG, because we don't have transparent background. And JPEG is 11
always better option than PNG in terms of file size. But still, we're going to compress it in our image 12
compressor. 13
Let's replace the content. 14
♫ 15
And there we go. 16
Remove the overflow combo class from the section, we don't need that anymore. 17
Let's check the responsiveness. Okay, 18
we need some spacing between the two. 19
Let's add the margin to the image. 20
Okay, so what's going on here? 21
The content was pushed to the right and off the page. 22
The image is supposed to shrink, but it doesn't. 23
That's another reason why it's best to drop images inside a div block, especially when dealing with a 24
flexbox. 25
I think we've learned our lesson by now, so let's wrap it inside div block. 26
When I say wrap something inside the div block, it basically means to place it inside a div block. Add a 27
new block, 28
move it on top. And drag the image inside. 29
Create a new class and give it a 60 pixel margin. 30
And there. This time image is shrinking properly. 31
Actually, it's not the image but the image wrapper is shrinking properly. An image element obeys the boundaries 32
of its parent. The next section is very simple. 33
Duplicate this new section, 34
change the order inside the flexbox and replace the content. 35
Although in this case, we need the margin on the other side. 36
Create a combo class for the image wrapper element. 37
Apply 0 on the right and 60 on the left. 38
Excellent, these sections are looking great. In the next video, we're going to build the testimonial section. 39
That's going to be fun. 40
Stick around.