1 00:00:01,355 --> 00:00:04,532 Hello back, let's build one more section. 2 00:00:04,532 --> 00:00:07,040 This one is where the customers tell about 3 00:00:07,040 --> 00:00:10,337 their experience with OMNI Food. 4 00:00:10,337 --> 00:00:14,076 And it is actually one of the sections I like the most. 5 00:00:14,076 --> 00:00:16,816 We will once again use beautiful food imagery 6 00:00:16,816 --> 00:00:19,161 to almost make the user feel hungry 7 00:00:19,161 --> 00:00:21,715 just by browsing our website. 8 00:00:21,715 --> 00:00:25,848 So here, we have just three customers, side by side 9 00:00:25,848 --> 00:00:27,706 and what they have to say. 10 00:00:27,706 --> 00:00:30,469 And this way of showing customer testimonials 11 00:00:30,469 --> 00:00:32,559 is actually pretty common. 12 00:00:32,559 --> 00:00:36,762 In this lecture, we will once again practice our skills. 13 00:00:36,762 --> 00:00:39,084 We'll learn how to create a beautiful effect 14 00:00:39,084 --> 00:00:42,892 with background images using just CSS 15 00:00:42,892 --> 00:00:44,610 and how to effectively communicate 16 00:00:44,610 --> 00:00:48,360 what customers have to say about our company. 17 00:00:49,997 --> 00:00:53,497 So, here we are back in our HTML document. 18 00:00:54,827 --> 00:00:56,893 And you'll see here, we already have 19 00:00:56,893 --> 00:00:59,143 way over 200 lines of code. 20 00:01:00,469 --> 00:01:01,552 Great, right? 21 00:01:03,836 --> 00:01:06,971 So as always, another section here. 22 00:01:06,971 --> 00:01:10,638 And this one is called Section Testimonials. 23 00:01:14,773 --> 00:01:18,940 Some space here, and now, starting with the title, 24 00:01:21,294 --> 00:01:23,986 let me just, as always, 25 00:01:23,986 --> 00:01:26,486 get the text for this section. 26 00:01:32,281 --> 00:01:33,442 And here we go. 27 00:01:33,442 --> 00:01:34,812 So the title here will be 28 00:01:34,812 --> 00:01:37,812 Our Customers Can't Live Without Us. 29 00:01:39,130 --> 00:01:39,963 So, giv, 30 00:01:42,130 --> 00:01:44,380 class and another row here. 31 00:01:45,539 --> 00:01:49,440 And in this row we will have nothing but the title. 32 00:01:49,440 --> 00:01:50,357 Ch2 snomed. 33 00:01:52,157 --> 00:01:55,477 Which we already are pretty used to by now. 34 00:01:55,477 --> 00:01:59,053 And now another row, and in this row 35 00:01:59,053 --> 00:02:03,326 is where we will have our customer opinions. 36 00:02:03,326 --> 00:02:06,243 Now, since we have three customers, 37 00:02:08,782 --> 00:02:13,287 we will of course include three columns here. 38 00:02:13,287 --> 00:02:16,213 So, you already know how to do this. 39 00:02:16,213 --> 00:02:17,713 Span one of three, 40 00:02:19,146 --> 00:02:22,366 because we have three columns. 41 00:02:22,366 --> 00:02:26,011 And now HTML actually has an element 42 00:02:26,011 --> 00:02:29,011 designed precisely to include quotes 43 00:02:30,781 --> 00:02:33,033 into HTML documents. 44 00:02:33,033 --> 00:02:37,200 And what I'm talking about, is the element blockquote. 45 00:02:40,649 --> 00:02:44,649 And in this element, we can just paste our text. 46 00:02:46,431 --> 00:02:47,264 Very well. 47 00:02:50,657 --> 00:02:53,722 And yet another HTML element, 48 00:02:53,722 --> 00:02:55,649 is the cite element. 49 00:02:55,649 --> 00:02:59,816 And the cite element is obviously where we will put 50 00:03:00,821 --> 00:03:02,654 the name of the person 51 00:03:04,453 --> 00:03:06,703 who expressed this opinion. 52 00:03:09,190 --> 00:03:12,371 So inside of the blockquote, usually goes the text 53 00:03:12,371 --> 00:03:15,807 and then the cite element where we will 54 00:03:15,807 --> 00:03:18,140 put the author of this text. 55 00:03:21,450 --> 00:03:25,954 Now, besides this text, we also have an image of this person 56 00:03:25,954 --> 00:03:30,121 and we can also include this into this cite element. 57 00:03:31,551 --> 00:03:35,218 So the image is pretty easy to include here. 58 00:03:37,913 --> 00:03:40,246 Let's go to Resources, Image 59 00:03:42,232 --> 00:03:43,811 and we have our customers down here. 60 00:03:43,811 --> 00:03:45,900 See, one, two, and three. 61 00:03:45,900 --> 00:03:49,317 So next I just have to change the number. 62 00:03:51,891 --> 00:03:54,391 So this is our first customer. 63 00:03:55,420 --> 00:03:58,920 And, okay, I think that's the correct HTML 64 00:04:00,366 --> 00:04:02,033 for one of the coms. 65 00:04:03,176 --> 00:04:05,676 Let me just copy this as usual 66 00:04:08,865 --> 00:04:10,282 and paste it here 67 00:04:12,033 --> 00:04:14,796 so we can complete our row. 68 00:04:14,796 --> 00:04:17,296 So we have three nice columns. 69 00:04:19,280 --> 00:04:22,863 Now, as always, let me copy this text here. 70 00:04:24,409 --> 00:04:25,909 It's Joana Silver. 71 00:04:28,449 --> 00:04:31,235 She comes probably from Portugal. 72 00:04:31,235 --> 00:04:33,402 And now this is image two. 73 00:04:35,415 --> 00:04:36,665 And that's her. 74 00:04:39,803 --> 00:04:41,220 And the last one. 75 00:04:46,630 --> 00:04:47,824 Great. 76 00:04:47,824 --> 00:04:49,991 And this is Milton Chapman 77 00:04:53,443 --> 00:04:55,110 with customer three. 78 00:04:56,810 --> 00:04:58,060 And here he is. 79 00:05:01,082 --> 00:05:03,799 Okay, you do it off the text and I think 80 00:05:03,799 --> 00:05:06,586 that should be your HTML code. 81 00:05:06,586 --> 00:05:09,253 We will not need more than this. 82 00:05:12,112 --> 00:05:14,779 So let's see what it looks like. 83 00:05:15,781 --> 00:05:18,079 This was our previous section 84 00:05:18,079 --> 00:05:19,983 and here is our current section. 85 00:05:19,983 --> 00:05:24,929 And what is happening here, this looks pretty weird. 86 00:05:24,929 --> 00:05:26,462 Well, what's going on here? 87 00:05:26,462 --> 00:05:27,879 Let's go back and 88 00:05:28,774 --> 00:05:31,191 okay, here I see the problem. 89 00:05:32,466 --> 00:05:34,556 It shouldn't be row, of course not, 90 00:05:34,556 --> 00:05:37,723 you probably saw this before I saw it. 91 00:05:38,596 --> 00:05:40,454 So it should be col. 92 00:05:40,454 --> 00:05:42,172 Of course, it's a column right? 93 00:05:42,172 --> 00:05:43,589 So let's go back. 94 00:05:44,982 --> 00:05:48,732 And now, this looks just as it should, right? 95 00:05:51,158 --> 00:05:54,084 So this is the HTML code, now it's correct. 96 00:05:54,084 --> 00:05:57,042 And let's format it in CSS 97 00:05:57,042 --> 00:05:58,709 in the next lecture.