0
1
00:00:02,700 --> 00:00:05,280
In this video, we're going to build this section.
1

2
00:00:05,280 --> 00:00:08,760
The layout is very similar to previous section that we already did.
2

3
00:00:08,770 --> 00:00:11,520
So why not just duplicate it and take it from there?
3

4
00:00:11,970 --> 00:00:17,130
Select the entire section and just do the copy-paste, Ctrl+C, Ctrl + V. I'll drop one after the
4

5
00:00:17,130 --> 00:00:21,070
other. The order of the content is reversed.
5

6
00:00:21,120 --> 00:00:25,920
We can change that by dragging the image element on top. And this will place image first.
6

7
00:00:27,530 --> 00:00:32,360
This image has a negative margin applied to it, but this time we don't need it. To remove that we need
7

8
00:00:32,360 --> 00:00:36,270
to remove the class. Because we can't make any edit to the margin itself.
8

9
00:00:36,290 --> 00:00:39,040
That's going to affect the previous image.
9

10
00:00:39,330 --> 00:00:41,630
And now let's replace it with our own image.
10

11
00:00:46,280 --> 00:00:51,170
This time, we're going to export as JPEG, because we don't have transparent background. And JPEG is
11

12
00:00:51,170 --> 00:00:57,260
always better option than PNG in terms of file size. But still, we're going to compress it in our image
12

13
00:00:57,260 --> 00:01:07,600
compressor.
13

14
00:01:41,130 --> 00:01:46,710
Let's replace the content.
14

15
00:01:47,910 --> 00:01:59,350
♫
15

16
00:01:59,510 --> 00:02:00,310
And there we go.
16

17
00:02:02,870 --> 00:02:06,350
Remove the overflow combo class from the section, we don't need that anymore.
17

18
00:02:10,110 --> 00:02:14,370
Let's check the responsiveness. Okay,
18

19
00:02:14,370 --> 00:02:16,020
we need some spacing between the two.
19

20
00:02:16,410 --> 00:02:18,020
Let's add the margin to the image.
20

21
00:02:24,920 --> 00:02:26,610
Okay, so what's going on here?
21

22
00:02:26,630 --> 00:02:29,680
The content was pushed to the right and off the page.
22

23
00:02:29,840 --> 00:02:32,480
The image is supposed to shrink, but it doesn't.
23

24
00:02:32,480 --> 00:02:37,400
That's another reason why it's best to drop images inside a div block, especially when dealing with a
24

25
00:02:37,400 --> 00:02:38,380
flexbox.
25

26
00:02:38,390 --> 00:02:42,340
I think we've learned our lesson by now, so let's wrap it inside div block.
26

27
00:02:42,380 --> 00:02:47,240
When I say wrap something inside the div block, it basically means to place it inside a div block. Add a
27

28
00:02:47,240 --> 00:02:48,100
new block,
28

29
00:02:48,170 --> 00:02:50,540
move it on top. And drag the image inside.
29

30
00:02:53,220 --> 00:02:55,800
Create a new class and give it a 60 pixel margin.
30

31
00:03:00,810 --> 00:03:03,760
And there. This time image is shrinking properly.
31

32
00:03:03,760 --> 00:03:09,730
Actually, it's not the image but the image wrapper is shrinking properly. An image element obeys the boundaries
32

33
00:03:09,730 --> 00:03:14,700
of its parent. The next section is very simple.
33

34
00:03:14,730 --> 00:03:16,850
Duplicate this new section,
34

35
00:03:17,130 --> 00:03:20,950
change the order inside the flexbox and replace the content.
35

36
00:03:26,650 --> 00:03:29,970
Although in this case, we need the margin on the other side.
36

37
00:03:30,010 --> 00:03:32,740
Create a combo class for the image wrapper element.
37

38
00:03:36,820 --> 00:03:40,110
Apply 0 on the right and 60 on the left.
38

39
00:04:14,450 --> 00:04:19,490
Excellent, these sections are looking great. In the next video, we're going to build the testimonial section.
39

40
00:04:19,630 --> 00:04:20,750
That's going to be fun.
40

41
00:04:20,750 --> 00:04:21,310
Stick around.