Original subtitles

1 1

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.