Original subtitles

1 1

Hello back, let's build one more section. 2

2

This one is where the customers tell about 3

3

their experience with OMNI Food. 4

4

And it is actually one of the sections I like the most. 5

5

We will once again use beautiful food imagery 6

6

to almost make the user feel hungry 7

7

just by browsing our website. 8

8

So here, we have just three customers, side by side 9

9

and what they have to say. 10

10

And this way of showing customer testimonials 11

11

is actually pretty common. 12

12

In this lecture, we will once again practice our skills. 13

13

We'll learn how to create a beautiful effect 14

14

with background images using just CSS 15

15

and how to effectively communicate 16

16

what customers have to say about our company. 17

17

So, here we are back in our HTML document. 18

18

And you'll see here, we already have 19

19

way over 200 lines of code. 20

20

Great, right? 21

21

So as always, another section here. 22

22

And this one is called Section Testimonials. 23

23

Some space here, and now, starting with the title, 24

24

let me just, as always, 25

25

get the text for this section. 26

26

And here we go. 27

27

So the title here will be 28

28

Our Customers Can't Live Without Us. 29

29

So, giv, 30

30

class and another row here. 31

31

And in this row we will have nothing but the title. 32

32

Ch2 snomed. 33

33

Which we already are pretty used to by now. 34

34

And now another row, and in this row 35

35

is where we will have our customer opinions. 36

36

Now, since we have three customers, 37

37

we will of course include three columns here. 38

38

So, you already know how to do this. 39

39

Span one of three, 40

40

because we have three columns. 41

41

And now HTML actually has an element 42

42

designed precisely to include quotes 43

43

into HTML documents. 44

44

And what I'm talking about, is the element blockquote. 45

45

And in this element, we can just paste our text. 46

46

Very well. 47

47

And yet another HTML element, 48

48

is the cite element. 49

49

And the cite element is obviously where we will put 50

50

the name of the person 51

51

who expressed this opinion. 52

52

So inside of the blockquote, usually goes the text 53

53

and then the cite element where we will 54

54

put the author of this text. 55

55

Now, besides this text, we also have an image of this person 56

56

and we can also include this into this cite element. 57

57

So the image is pretty easy to include here. 58

58

Let's go to Resources, Image 59

59

and we have our customers down here. 60

60

See, one, two, and three. 61

61

So next I just have to change the number. 62

62

So this is our first customer. 63

63

And, okay, I think that's the correct HTML 64

64

for one of the coms. 65

65

Let me just copy this as usual 66

66

and paste it here 67

67

so we can complete our row. 68

68

So we have three nice columns. 69

69

Now, as always, let me copy this text here. 70

70

It's Joana Silver. 71

71

She comes probably from Portugal. 72

72

And now this is image two. 73

73

And that's her. 74

74

And the last one. 75

75

Great. 76

76

And this is Milton Chapman 77

77

with customer three. 78

78

And here he is. 79

79

Okay, you do it off the text and I think 80

80

that should be your HTML code. 81

81

We will not need more than this. 82

82

So let's see what it looks like. 83

83

This was our previous section 84

84

and here is our current section. 85

85

And what is happening here, this looks pretty weird. 86

86

Well, what's going on here? 87

87

Let's go back and 88

88

okay, here I see the problem. 89

89

It shouldn't be row, of course not, 90

90

you probably saw this before I saw it. 91

91

So it should be col. 92

92

Of course, it's a column right? 93

93

So let's go back. 94

94

And now, this looks just as it should, right? 95

95

So this is the HTML code, now it's correct. 96

96

And let's format it in CSS 97

97

in the next lecture.