Voiceover: Hello back, let's build one more section.
This one is where the customers tell about
their experience with OMNI Food.
And it is actually one of the sections I like the most.
We will once again use beautiful food imagery
to almost make the user feel hungry
just by browsing our website.
So here, we have just three customers, side by side
and what they have to say.
And this way of showing customer testimonials
is actually pretty common.
In this lecture, we will once again practice our skills.
We'll learn how to create a beautiful effect
with background images using just CSS
and how to effectively communicate
what customers have to say about our company.
So, here we are back in our HTML document.
And you'll see here, we already have
way over 200 lines of code.
Great, right?
So as always, another section here.
And this one is called Section Testimonials.
Some space here, and now, starting with the title,
let me just, as always,
get the text for this section.
And here we go.
So the title here will be
Our Customers Can't Live Without Us.
So, giv,
class and another row here.
And in this row we will have nothing but the title.
Ch2 snomed.
Which we already are pretty used to by now.
And now another row, and in this row
is where we will have our customer opinions.
Now, since we have three customers,
we will of course include three columns here.
So, you already know how to do this.
Span one of three,
because we have three columns.
And now HTML actually has an element
designed precisely to include quotes
into HTML documents.
And what I'm talking about, is the element blockquote.
And in this element, we can just paste our text.
Very well.
And yet another HTML element,
is the cite element.
And the cite element is obviously where we will put
the name of the person
who expressed this opinion.
So inside of the blockquote, usually goes the text
and then the cite element where we will
put the author of this text.
Now, besides this text, we also have an image of this person
and we can also include this into this cite element.
So the image is pretty easy to include here.
Let's go to Resources, Image
and we have our customers down here.
See, one, two, and three.
So next I just have to change the number.
So this is our first customer.
And, okay, I think that's the correct HTML
for one of the coms.
Let me just copy this as usual
and paste it here
so we can complete our row.
So we have three nice columns.
Now, as always, let me copy this text here.
It's Joana Silver.
She comes probably from Portugal.
And now this is image two.
And that's her.
And the last one.
Great.
And this is Milton Chapman
with customer three.
And here he is.
Okay, you do it off the text and I think
that should be your HTML code.
We will not need more than this.
So let's see what it looks like.
This was our previous section
and here is our current section.
And what is happening here, this looks pretty weird.
Well, what's going on here?
Let's go back and
okay, here I see the problem.
It shouldn't be row, of course not,
you probably saw this before I saw it.
So it should be col.
Of course, it's a column right?
So let's go back.
And now, this looks just as it should, right?
So this is the HTML code, now it's correct.
And let's format it in CSS
in the next lecture.