1 00:00:00,971 --> 00:00:02,360 line:15% Hello, and welcome back 2 00:00:02,360 --> 00:00:05,866 line:15% to building the customer testimonial section. 3 00:00:05,866 --> 00:00:08,049 line:15% This is getting easier and easier. 4 00:00:08,049 --> 00:00:10,203 line:15% Don't you think so? 5 00:00:10,203 --> 00:00:13,934 line:15% So, let's have some more fun with CSS. 6 00:00:13,934 --> 00:00:18,188 So, this is where we left our website in the last lecture 7 00:00:18,188 --> 00:00:22,535 and now, let's start by adding a beautiful background image 8 00:00:22,535 --> 00:00:26,452 that is actually in the folder of our contents. 9 00:00:27,940 --> 00:00:31,638 In our project folder, so right here. 10 00:00:31,638 --> 00:00:34,807 So, it will be a background image. 11 00:00:34,807 --> 00:00:37,724 So, this image, right now, is here. 12 00:00:39,094 --> 00:00:41,634 It is called back customers, 13 00:00:41,634 --> 00:00:43,889 but since it will be a background image 14 00:00:43,889 --> 00:00:47,424 it should be here inside our CSS folder. 15 00:00:47,424 --> 00:00:50,289 So as you remember, all our background images 16 00:00:50,289 --> 00:00:52,872 go right here into this folder. 17 00:00:54,149 --> 00:00:57,399 So, now we are ready to use that image. 18 00:00:58,700 --> 00:01:01,533 So, let's go back to our CSS file. 19 00:01:02,398 --> 00:01:05,231 Let's create some space down here. 20 00:01:09,266 --> 00:01:12,266 You are already used to this by now. 21 00:01:20,156 --> 00:01:24,156 Let's start to define the code for this section. 22 00:01:26,292 --> 00:01:28,042 Section testimonials. 23 00:01:30,315 --> 00:01:34,482 So, let's start by defining again a background image. 24 00:01:35,417 --> 00:01:36,750 Background image 25 00:01:39,156 --> 00:01:43,323 and this is how we do it again and make customers. 26 00:01:45,917 --> 00:01:49,899 Alright, so as before, we want this image to fill 27 00:01:49,899 --> 00:01:51,849 the whole width of the browser, 28 00:01:51,849 --> 00:01:52,682 so we say 29 00:01:54,023 --> 00:01:54,856 background 30 00:01:56,909 --> 00:01:57,742 size 31 00:01:58,635 --> 00:01:59,468 cover. 32 00:02:00,464 --> 00:02:03,410 So, this is probably what you will always want to do 33 00:02:03,410 --> 00:02:04,670 with your images. 34 00:02:04,670 --> 00:02:07,420 So, let's see the result of this. 35 00:02:10,338 --> 00:02:13,171 Alright, so this is way too bright 36 00:02:15,844 --> 00:02:19,075 and it's the same situation as we had before 37 00:02:19,075 --> 00:02:21,066 on our header section. 38 00:02:21,066 --> 00:02:25,637 So, we will once again make this image darker 39 00:02:25,637 --> 00:02:28,543 and I hope you remember how we did that. 40 00:02:28,543 --> 00:02:32,139 So, it's like setting multiple backgrounds here. 41 00:02:32,139 --> 00:02:36,139 So, we have a gradient with a blank opaque color 42 00:02:37,097 --> 00:02:39,514 and then the customer images. 43 00:02:41,221 --> 00:02:44,289 So, we create a linear gradient 44 00:02:44,289 --> 00:02:48,122 so as before, I will start with complete black 45 00:02:49,795 --> 00:02:52,903 and then change it with the color picker 46 00:02:52,903 --> 00:02:53,986 and command E 47 00:02:57,495 --> 00:03:00,578 and let's set this to say 80 percent. 48 00:03:05,216 --> 00:03:08,716 Enter the same exact thing, so 80 percent. 49 00:03:12,307 --> 00:03:16,208 This looks probably way better by now. 50 00:03:16,208 --> 00:03:17,041 Right. 51 00:03:18,950 --> 00:03:21,104 So now what we have to do is of course, 52 00:03:21,104 --> 00:03:24,521 to make all the text inside of this white 53 00:03:25,533 --> 00:03:29,069 and then, believe me it will look great. 54 00:03:29,069 --> 00:03:31,152 So, color and color white 55 00:03:34,473 --> 00:03:36,056 and let's check it. 56 00:03:38,150 --> 00:03:39,983 Okay, this looks cool. 57 00:03:40,954 --> 00:03:43,839 Now, I want to show you a very cool effect 58 00:03:43,839 --> 00:03:48,756 that you can achieve with background images in CSS 59 00:03:48,756 --> 00:03:51,756 and I'm talking about this property. 60 00:03:52,888 --> 00:03:55,138 It is background attachment 61 00:03:56,403 --> 00:03:58,653 and if we set this to fixed 62 00:03:59,613 --> 00:04:03,778 then let me show you what this will look like. 63 00:04:03,778 --> 00:04:07,923 So, it's like the image always stays in the same place 64 00:04:07,923 --> 00:04:10,077 and we scroll our website 65 00:04:10,077 --> 00:04:12,779 and the image stays always in the same place. 66 00:04:12,779 --> 00:04:14,485 So, I think this is a cool effect 67 00:04:14,485 --> 00:04:16,802 and it's really easy to achieve 68 00:04:16,802 --> 00:04:20,885 and in fact, we should do the same thing up here. 69 00:04:22,427 --> 00:04:23,953 Okay? 70 00:04:23,953 --> 00:04:27,286 So, I will just copy this to the header, 71 00:04:28,301 --> 00:04:29,134 CSS block, 72 00:04:31,389 --> 00:04:34,972 just to see if it looks cool there as well. 73 00:04:35,961 --> 00:04:36,794 Okay? 74 00:04:38,826 --> 00:04:40,451 And this is the effect. 75 00:04:40,451 --> 00:04:44,576 So, the image stays in the same place and we just scroll 76 00:04:44,576 --> 00:04:47,521 and I think this is really cool 77 00:04:47,521 --> 00:04:51,524 and down here, it will look even cooler 78 00:04:51,524 --> 00:04:54,607 once we add more sections below this. 79 00:04:55,649 --> 00:04:58,595 So, the next step would be to define 80 00:04:58,595 --> 00:05:01,845 these block quotes elements right here. 81 00:05:04,731 --> 00:05:09,261 So, this is very straight forward, of course. 82 00:05:09,261 --> 00:05:11,511 Just write our block quote, 83 00:05:14,666 --> 00:05:15,499 select it. 84 00:05:18,465 --> 00:05:21,675 And the first thing is we maybe want some penning there 85 00:05:21,675 --> 00:05:23,585 because you saw that the boxes 86 00:05:23,585 --> 00:05:26,409 were very close to each other 87 00:05:26,409 --> 00:05:28,659 and I will say, two percent 88 00:05:30,269 --> 00:05:32,436 and then it is quite usual 89 00:05:33,277 --> 00:05:36,405 to show the customer testimonials 90 00:05:36,405 --> 00:05:37,988 in an italic style. 91 00:05:40,042 --> 00:05:44,209 So, in order to do that, I will say font, style, italic. 92 00:05:47,824 --> 00:05:51,991 And I can do this only because I already incorporated 93 00:05:53,492 --> 00:05:56,992 the italic style for my Google fonts here. 94 00:05:58,612 --> 00:06:02,362 So whenever you need italics on your website, 95 00:06:03,265 --> 00:06:06,313 you need to include that web font. 96 00:06:06,313 --> 00:06:09,787 Now, another thing, is I want some line height here 97 00:06:09,787 --> 00:06:13,954 as always, and I will again choose 145 percent here. 98 00:06:19,019 --> 00:06:21,165 Okay, much better right? 99 00:06:21,165 --> 00:06:25,188 And now, we can form it the side element 100 00:06:25,188 --> 00:06:29,355 and the images that are inside of the side element as well. 101 00:06:32,502 --> 00:06:34,919 So, this is, again very easy. 102 00:06:36,769 --> 00:06:40,751 We can do this because we will only use the side 103 00:06:40,751 --> 00:06:43,677 and block quote elements in this place. 104 00:06:43,677 --> 00:06:47,293 So, we don't need to make any class for those. 105 00:06:47,293 --> 00:06:49,772 So, in here, I would say that the font size 106 00:06:49,772 --> 00:06:53,855 could be a little smaller, like 90 percent maybe. 107 00:06:56,253 --> 00:07:00,703 And, let's add some margins to the top as well. 108 00:07:00,703 --> 00:07:01,536 Margin top 109 00:07:02,694 --> 00:07:04,527 of let's say 25 pixels 110 00:07:07,143 --> 00:07:09,256 and now for the image, 111 00:07:09,256 --> 00:07:12,629 so it's the image inside of the side 112 00:07:12,629 --> 00:07:16,083 and by now, you're already really familiar with all of that. 113 00:07:16,083 --> 00:07:20,250 So, the image, I will say, will have a height of 50 pixels 114 00:07:22,117 --> 00:07:25,700 and a border, a border radius of 50 percent 115 00:07:28,720 --> 00:07:31,321 and you already know as well, 116 00:07:31,321 --> 00:07:34,154 that this makes any element round. 117 00:07:35,710 --> 00:07:39,550 And we want some margins to the right side as well. 118 00:07:39,550 --> 00:07:41,883 Let me say, here, 10 pixels. 119 00:07:43,633 --> 00:07:45,624 So, we made some changes here. 120 00:07:45,624 --> 00:07:47,791 So, let me check it again. 121 00:07:49,302 --> 00:07:51,635 Okay, so what is going here? 122 00:07:53,609 --> 00:07:55,776 We need a line break here. 123 00:07:57,023 --> 00:08:00,151 So it's the text and then the text just continues 124 00:08:00,151 --> 00:08:03,484 with the image then the rest of the text. 125 00:08:03,484 --> 00:08:06,389 Now, the best way to actually do this, 126 00:08:06,389 --> 00:08:09,472 is to define this as a block element. 127 00:08:11,712 --> 00:08:15,227 So, what we can do, is to say, that the side element 128 00:08:15,227 --> 00:08:17,310 should be a block element 129 00:08:19,067 --> 00:08:23,234 and so, once more we use the display property with block. 130 00:08:25,203 --> 00:08:27,453 And this should do the job. 131 00:08:29,551 --> 00:08:30,892 Exactly. 132 00:08:30,892 --> 00:08:32,985 So, this is what I hoped for. 133 00:08:32,985 --> 00:08:37,152 Now, it's a block element and so it is aligned for itself. 134 00:08:38,206 --> 00:08:42,107 Now, I want this text here to be aligned with this 135 00:08:42,107 --> 00:08:44,524 and this is again, very easy. 136 00:08:46,272 --> 00:08:50,439 We just say that we some vertical align through the middle. 137 00:08:53,647 --> 00:08:56,390 And now it should look just as we wanted. 138 00:08:56,390 --> 00:08:59,093 I think the images are a little too big. 139 00:08:59,093 --> 00:09:01,429 Don't you think so? 140 00:09:01,429 --> 00:09:05,188 They take up too much space, I guess. 141 00:09:05,188 --> 00:09:07,362 Now, what's also missing here, 142 00:09:07,362 --> 00:09:11,195 is a big quotation mark, which we can put here 143 00:09:12,543 --> 00:09:15,204 and I will show you a great way to do this 144 00:09:15,204 --> 00:09:19,999 and we will once again use the after zero class, 145 00:09:19,999 --> 00:09:21,848 no, in fact, we will use the before 146 00:09:21,848 --> 00:09:26,015 because this time we want it to appear before our text. 147 00:09:28,431 --> 00:09:30,514 So, let's quickly do this 148 00:09:31,539 --> 00:09:34,242 and first of all, let me change this, 149 00:09:34,242 --> 00:09:38,325 said it was too big, so maybe 45 will work better 150 00:09:39,646 --> 00:09:43,852 and now, let's find the before zero class. 151 00:09:43,852 --> 00:09:45,102 So side, before 152 00:09:47,102 --> 00:09:50,739 and we want it to be a quotation mark. 153 00:09:50,739 --> 00:09:54,906 So, remember how do we put text on a website using just CSS. 154 00:09:55,889 --> 00:09:57,472 It is with content. 155 00:09:59,070 --> 00:10:02,991 The last time we used this we didn't want to see any words 156 00:10:02,991 --> 00:10:05,658 so we just leave an empty space. 157 00:10:07,379 --> 00:10:10,915 I will just to exemplify this, put an A, 158 00:10:10,915 --> 00:10:15,730 and we will then put a quotation mark in a second. 159 00:10:15,730 --> 00:10:19,468 For now, let me just show you how this looks 160 00:10:19,468 --> 00:10:22,841 and we'll also ignore that we can see it 161 00:10:22,841 --> 00:10:26,591 and change the font size here to 400 percent. 162 00:10:30,846 --> 00:10:33,228 Alright, this is not what I wanted 163 00:10:33,228 --> 00:10:37,395 because I actually wanted it before the block quote right? 164 00:10:39,161 --> 00:10:40,994 So, it is block quote. 165 00:10:54,379 --> 00:10:55,629 And here we go. 166 00:10:57,121 --> 00:11:01,368 Alright, now, in order to put the quotation mark there 167 00:11:01,368 --> 00:11:04,344 is not as easy as it may sound 168 00:11:04,344 --> 00:11:07,844 because in order to do that we need to use 169 00:11:10,343 --> 00:11:13,843 something called an ISO special character. 170 00:11:16,398 --> 00:11:20,096 So, this here is a list that I'll include into the course 171 00:11:20,096 --> 00:11:24,263 E-book and in here we can just choose some sign if you want 172 00:11:27,553 --> 00:11:31,470 and then will have to copy this very code here. 173 00:11:32,510 --> 00:11:34,774 So, in order to make it easier for me 174 00:11:34,774 --> 00:11:37,857 I will just search for quotation mark 175 00:11:40,849 --> 00:11:43,849 and this is not the one that I want. 176 00:11:45,806 --> 00:11:47,889 It's this one right here. 177 00:11:49,036 --> 00:11:50,154 I want this. 178 00:11:50,154 --> 00:11:52,154 So, I need to copy this. 179 00:11:55,416 --> 00:11:57,166 This code right here. 180 00:11:58,707 --> 00:11:59,540 Alright. 181 00:12:00,800 --> 00:12:02,800 Now, I'll paste it here. 182 00:12:05,412 --> 00:12:07,424 So, let's check this. 183 00:12:07,424 --> 00:12:09,476 Alright, here we go. 184 00:12:09,476 --> 00:12:11,264 Cool, right? 185 00:12:11,264 --> 00:12:14,697 Now, we need to have to set a new line once again. 186 00:12:14,697 --> 00:12:18,364 So, we have to make this as a block element. 187 00:12:19,899 --> 00:12:21,399 So, let's do that. 188 00:12:23,048 --> 00:12:25,381 Just plain block, very easy. 189 00:12:27,497 --> 00:12:32,455 Now, in order to position this exactly where we want it 190 00:12:32,455 --> 00:12:36,205 we need to define its top and left attributes 191 00:12:40,135 --> 00:12:43,772 because it is really the easiest way 192 00:12:43,772 --> 00:12:48,384 is to change this around using absolute positioning. 193 00:12:48,384 --> 00:12:52,051 So, position absolute and then we can change 194 00:12:55,190 --> 00:12:57,440 its top, maybe, five pixels 195 00:13:02,363 --> 00:13:03,780 and left to zero. 196 00:13:06,472 --> 00:13:07,305 Alright? 197 00:13:08,241 --> 00:13:10,700 And, before we can see how this looks 198 00:13:10,700 --> 00:13:14,032 there's a very important thing that we have to do 199 00:13:14,032 --> 00:13:15,901 and it's this. 200 00:13:15,901 --> 00:13:19,734 When we make an element with absolute position 201 00:13:20,960 --> 00:13:24,028 we have to ensure that its parent 202 00:13:24,028 --> 00:13:26,028 has a relative position, 203 00:13:29,067 --> 00:13:31,342 so in this case, we will have to say, 204 00:13:31,342 --> 00:13:35,467 that this here is relative and if we didn't do this 205 00:13:35,467 --> 00:13:38,634 this wouldn't appear where we want it. 206 00:13:40,932 --> 00:13:42,182 And here we go. 207 00:13:43,431 --> 00:13:47,312 Okay, this is way too close to the text. 208 00:13:47,312 --> 00:13:50,786 So, let us put back to zero maybe, 209 00:13:50,786 --> 00:13:54,953 but we can put the left to minus three for instance. 210 00:13:58,157 --> 00:13:59,240 You see this? 211 00:14:00,290 --> 00:14:02,058 Yeah, this looks cool. 212 00:14:02,058 --> 00:14:05,390 Maybe what I should do is to give it some space 213 00:14:05,390 --> 00:14:09,223 between this line here and those block quotes. 214 00:14:10,632 --> 00:14:14,817 So, in order to have more space for this one here, 215 00:14:14,817 --> 00:14:16,199 this quotation mark, and I should 216 00:14:16,199 --> 00:14:19,366 probably also do this a little bigger. 217 00:14:22,802 --> 00:14:26,642 So, I'll increase this to 500 percent actually 218 00:14:26,642 --> 00:14:30,888 and then, I will say that we want some margin 219 00:14:30,888 --> 00:14:33,555 to the top of this of 40 pixels. 220 00:14:35,622 --> 00:14:39,789 And this can actually be also, let's say, minus five pixels. 221 00:14:43,383 --> 00:14:47,609 And here, minus five pixels as well wouldn't hurt. 222 00:14:47,609 --> 00:14:51,023 And, this is what it looks like now. 223 00:14:51,023 --> 00:14:55,030 So, now we have one more section designed 224 00:14:55,030 --> 00:14:58,804 and I really like what we achieved here in this section. 225 00:14:58,804 --> 00:15:01,608 This background image is really cool 226 00:15:01,608 --> 00:15:04,249 and also this effect that we added to this section 227 00:15:04,249 --> 00:15:07,703 and to this one, it's really cool. 228 00:15:07,703 --> 00:15:12,396 We're starting to get a really good looking website. 229 00:15:12,396 --> 00:15:16,419 So, next up, we have the section with some pricing plans. 230 00:15:16,419 --> 00:15:19,914 Remember, we'll use some new stuff. 231 00:15:19,914 --> 00:15:22,664 So, don't wait and see you there.