Voiceover: Hello, and welcome back 2 2
to building the customer testimonial section. 3 3
This is getting easier and easier. 4 4
Don't you think so? 5 5
So, let's have some more fun with CSS. 6 6
So, this is where we left our website in the last lecture 7 7
and now, let's start by adding a beautiful background image 8 8
that is actually in the folder of our contents. 9 9
In our project folder, so right here. 10 10
So, it will be a background image. 11 11
So, this image, right now, is here. 12 12
It is called back customers, 13 13
but since it will be a background image 14 14
it should be here inside our CSS folder. 15 15
So as you remember, all our background images 16 16
go right here into this folder. 17 17
So, now we are ready to use that image. 18 18
So, let's go back to our CSS file. 19 19
Let's create some space down here. 20 20
You are already used to this by now. 21 21
Let's start to define the code for this section. 22 22
Section testimonials. 23 23
So, let's start by defining again a background image. 24 24
Background image 25 25
and this is how we do it again and make customers. 26 26
Alright, so as before, we want this image to fill 27 27
the whole width of the browser, 28 28
so we say 29 29
background 30 30
size 31 31
cover. 32 32
So, this is probably what you will always want to do 33 33
with your images. 34 34
So, let's see the result of this. 35 35
Alright, so this is way too bright 36 36
and it's the same situation as we had before 37 37
on our header section. 38 38
So, we will once again make this image darker 39 39
and I hope you remember how we did that. 40 40
So, it's like setting multiple backgrounds here. 41 41
So, we have a gradient with a blank opaque color 42 42
and then the customer images. 43 43
So, we create a linear gradient 44 44
so as before, I will start with complete black 45 45
and then change it with the color picker 46 46
and command E 47 47
and let's set this to say 80 percent. 48 48
Enter the same exact thing, so 80 percent. 49 49
This looks probably way better by now. 50 50
Right. 51 51
So now what we have to do is of course, 52 52
to make all the text inside of this white 53 53
and then, believe me it will look great. 54 54
So, color and color white 55 55
and let's check it. 56 56
Okay, this looks cool. 57 57
Now, I want to show you a very cool effect 58 58
that you can achieve with background images in CSS 59 59
and I'm talking about this property. 60 60
It is background attachment 61 61
and if we set this to fixed 62 62
then let me show you what this will look like. 63 63
So, it's like the image always stays in the same place 64 64
and we scroll our website 65 65
and the image stays always in the same place. 66 66
So, I think this is a cool effect 67 67
and it's really easy to achieve 68 68
and in fact, we should do the same thing up here. 69 69
Okay? 70 70
So, I will just copy this to the header, 71 71
CSS block, 72 72
just to see if it looks cool there as well. 73 73
Okay? 74 74
And this is the effect. 75 75
So, the image stays in the same place and we just scroll 76 76
and I think this is really cool 77 77
and down here, it will look even cooler 78 78
once we add more sections below this. 79 79
So, the next step would be to define 80 80
these block quotes elements right here. 81 81
So, this is very straight forward, of course. 82 82
Just write our block quote, 83 83
select it. 84 84
And the first thing is we maybe want some penning there 85 85
because you saw that the boxes 86 86
were very close to each other 87 87
and I will say, two percent 88 88
and then it is quite usual 89 89
to show the customer testimonials 90 90
in an italic style. 91 91
So, in order to do that, I will say font, style, italic. 92 92
And I can do this only because I already incorporated 93 93
the italic style for my Google fonts here. 94 94
So whenever you need italics on your website, 95 95
you need to include that web font. 96 96
Now, another thing, is I want some line height here 97 97
as always, and I will again choose 145 percent here. 98 98
Okay, much better right? 99 99
And now, we can form it the side element 100 100
and the images that are inside of the side element as well. 101 101
So, this is, again very easy. 102 102
We can do this because we will only use the side 103 103
and block quote elements in this place. 104 104
So, we don't need to make any class for those. 105 105
So, in here, I would say that the font size 106 106
could be a little smaller, like 90 percent maybe. 107 107
And, let's add some margins to the top as well. 108 108
Margin top 109 109
of let's say 25 pixels 110 110
and now for the image, 111 111
so it's the image inside of the side 112 112
and by now, you're already really familiar with all of that. 113 113
So, the image, I will say, will have a height of 50 pixels 114 114
and a border, a border radius of 50 percent 115 115
and you already know as well, 116 116
that this makes any element round. 117 117
And we want some margins to the right side as well. 118 118
Let me say, here, 10 pixels. 119 119
So, we made some changes here. 120 120
So, let me check it again. 121 121
Okay, so what is going here? 122 122
We need a line break here. 123 123
So it's the text and then the text just continues 124 124
with the image then the rest of the text. 125 125
Now, the best way to actually do this, 126 126
is to define this as a block element. 127 127
So, what we can do, is to say, that the side element 128 128
should be a block element 129 129
and so, once more we use the display property with block. 130 130
And this should do the job. 131 131
Exactly. 132 132
So, this is what I hoped for. 133 133
Now, it's a block element and so it is aligned for itself. 134 134
Now, I want this text here to be aligned with this 135 135
and this is again, very easy. 136 136
We just say that we some vertical align through the middle. 137 137
And now it should look just as we wanted. 138 138
I think the images are a little too big. 139 139
Don't you think so? 140 140
They take up too much space, I guess. 141 141
Now, what's also missing here, 142 142
is a big quotation mark, which we can put here 143 143
and I will show you a great way to do this 144 144
and we will once again use the after zero class, 145 145
no, in fact, we will use the before 146 146
because this time we want it to appear before our text. 147 147
So, let's quickly do this 148 148
and first of all, let me change this, 149 149
said it was too big, so maybe 45 will work better 150 150
and now, let's find the before zero class. 151 151
So side, before 152 152
and we want it to be a quotation mark. 153 153
So, remember how do we put text on a website using just CSS. 154 154
It is with content. 155 155
The last time we used this we didn't want to see any words 156 156
so we just leave an empty space. 157 157
I will just to exemplify this, put an A, 158 158
and we will then put a quotation mark in a second. 159 159
For now, let me just show you how this looks 160 160
and we'll also ignore that we can see it 161 161
and change the font size here to 400 percent. 162 162
Alright, this is not what I wanted 163 163
because I actually wanted it before the block quote right? 164 164
So, it is block quote. 165 165
And here we go. 166 166
Alright, now, in order to put the quotation mark there 167 167
is not as easy as it may sound 168 168
because in order to do that we need to use 169 169
something called an ISO special character. 170 170
So, this here is a list that I'll include into the course 171 171
E-book and in here we can just choose some sign if you want 172 172
and then will have to copy this very code here. 173 173
So, in order to make it easier for me 174 174
I will just search for quotation mark 175 175
and this is not the one that I want. 176 176
It's this one right here. 177 177
I want this. 178 178
So, I need to copy this. 179 179
This code right here. 180 180
Alright. 181 181
Now, I'll paste it here. 182 182
So, let's check this. 183 183
Alright, here we go. 184 184
Cool, right? 185 185
Now, we need to have to set a new line once again. 186 186
So, we have to make this as a block element. 187 187
So, let's do that. 188 188
Just plain block, very easy. 189 189
Now, in order to position this exactly where we want it 190 190
we need to define its top and left attributes 191 191
because it is really the easiest way 192 192
is to change this around using absolute positioning. 193 193
So, position absolute and then we can change 194 194
its top, maybe, five pixels 195 195
and left to zero. 196 196
Alright? 197 197
And, before we can see how this looks 198 198
there's a very important thing that we have to do 199 199
and it's this. 200 200
When we make an element with absolute position 201 201
we have to ensure that its parent 202 202
has a relative position, 203 203
so in this case, we will have to say, 204 204
that this here is relative and if we didn't do this 205 205
this wouldn't appear where we want it. 206 206
And here we go. 207 207
Okay, this is way too close to the text. 208 208
So, let us put back to zero maybe, 209 209
but we can put the left to minus three for instance. 210 210
You see this? 211 211
Yeah, this looks cool. 212 212
Maybe what I should do is to give it some space 213 213
between this line here and those block quotes. 214 214
So, in order to have more space for this one here, 215 215
this quotation mark, and I should 216 216
probably also do this a little bigger. 217 217
So, I'll increase this to 500 percent actually 218 218
and then, I will say that we want some margin 219 219
to the top of this of 40 pixels. 220 220
And this can actually be also, let's say, minus five pixels. 221 221
And here, minus five pixels as well wouldn't hurt. 222 222
And, this is what it looks like now. 223 223
So, now we have one more section designed 224 224
and I really like what we achieved here in this section. 225 225
This background image is really cool 226 226
and also this effect that we added to this section 227 227
and to this one, it's really cool. 228 228
We're starting to get a really good looking website. 229 229
So, next up, we have the section with some pricing plans. 230 230
Remember, we'll use some new stuff. 231 231
So, don't wait and see you there.