Voiceover: 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.