Original subtitles

1 1

Hi, let's continue working 2

2

on the sign-up section. 3

3

Let's write some more CSS code. 4

4

So, back here. 5

5

Let's start with the background color 6

6

and I will show you why. 7

7

So the first section we had was white, completely white. 8

8

And the second one had these 9

9

very subtle gray background color 10

10

then the next one was white again. 11

11

So now as you can guess, it's again time for a gray one. 12

12

So that will be the first thing to do. 13

13

And then of course, starting to build a structure 14

14

for each of these pricing plan columns. 15

15

So give here some white space, 16

16

and starting to make this look better. 17

17

So let's do that. 18

18

So this section is called section-plans. 19

19

I'll put some white space here 20

20

so we can see what's going on. 21

21

So the first thing here is a background color. 22

22

And I don't remember, so I will just copy 23

23

this one. 24

24

Now, let me check our HTML code. 25

25

So I'll start to format the plan-box here. 26

26

Let's make this plan-box white 27

27

so that it looks different than the background color 28

28

of the rest of the section. 29

29

And I will say, #fff. 30

30

And I also want to give this some rounded corners. 31

31

So, border-radius 32

32

of, let's say five pixels here. 33

33

I don't want it to be 100% of the parent width, 34

34

so I will say width, 35

35

ninety percent. 36

36

And then I will use the same technique as we used before 37

37

to center it inside of its parent. 38

38

Just to show you again, the parent of this one 39

39

is the call box. 40

40

So margin-left, 41

41

five percent, 42

42

which is half of the remaining 10% 43

43

from 90 to 100. 44

44

And now let me see this. 45

45

So this has already these rounded corners, 46

46

and it's white. 47

47

Now let's divide this into the three sections. 48

48

But first let me explain you why I put this box 49

49

into the column, such as I promised you I would explain you. 50

50

So this situation here, why I created this div 51

51

inside of the column, because if I hadn't, 52

52

I wouldn't be able to make the plan-box as wide 53

53

as I wanted it, only 90% with the white background color. 54

54

It would not have been possible to do this 55

55

by just formatting this column or adding some box here. 56

56

So this was the solution that I had to use. 57

57

So now let's section each of those subsections. 58

58

And in order to do that, I will do it like this. 59

59

Because, as we defined it, we have three divs: 60

60

this one, this one, and this one. 61

61

So I want them to have a padding 62

62

of 15 pixels each, let's say. 63

63

And what's also important is to make a 64

64

little separation between them. 65

65

We will have some border at the bottom of each of them. 66

66

So a nice little border with a very light color, 67

67

very subtle gray. 68

68

So only one pixel in a solid color, 69

69

and let's again start with white 70

70

and then use the color picker to adjust the color. 71

71

So a very subtle color here which we almost won't notice. 72

72

So for example, this one. 73

73

We will then check it, but for now we can just 74

74

format some other things as well. 75

75

Let me see what we got here. 76

76

For example, this, let's start at the beginning. 77

77

Now the HTree is already defined, 78

78

so let's continue with the plan-price. 79

79

And a plan-price, I want it to be really big. 80

80

So font size, for instance 300%. 81

81

And maybe a margin to the bottom, to that paragraph 82

82

of ten pixels. 83

83

And the next paragraph is plan-price-meal, 84

84

if you remember. 85

85

I don't know yet what to put here 86

86

so let's just look at our website. 87

87

Not bad, right? 88

88

But this looks a little bit overwhelming here. 89

89

And such as I told you, when you choose to use 90

90

very big font sizes, the best thing to do 91

91

is to actually reduce the font weight, 92

92

which is what we're gonna do. 93

93

And also we will reduce this text 94

94

so we only want this to be this big. 95

95

And there is actually an easy way to do this. 96

96

Also I think this text is a little too big here, 97

97

so let's make those changes. 98

98

So first thing I will just decrease this here 99

99

to let's say 80%. 100

100

Then we should totally decrease the font weight here 101

101

to 100. 102

102

And let me show you this, 103

103

so these are the options we have 104

104

which we included at the beginning, 105

105

100, 300, 400 and 300 italic. 106

106

So I will use this font weight which is 107

107

the lowest that we have available. 108

108

And now we want to style this per-month text 109

109

in a different way. 110

110

And I will now show you another HTML element 111

111

for doing that, 112

112

which is this one. 113

113

This is called span, and span... 114

114

has only one purpose, basically. 115

115

Its purpose is just to appear inside a paragraph, 116

116

for example, and style some text in a different way 117

117

than the rest, which is exactly what we want here. 118

118

So the same thing goes for this here, 119

119

and down here, 120

120

with the difference that it's per-meal here. 121

121

So we can now go ahead and 122

122

format this in a different way. 123

123

So we can say plan-price 124

124

and then the span inside of it 125

125

can have a different font size. 126

126

Now the thing is that this span here 127

127

is a child of this plan-price, 128

128

which has a font size of 300%. 129

129

Now if we would say font size equals 100%, 130

130

then this 100% would not be the base size of 20 pixels, 131

131

but this 300% because it is the parent font size. 132

132

So if we want a smaller font size, 133

133

we have to choose a very small number 134

134

like for instance 30%. 135

135

So, we have 30% of these 300, 136

136

and not of the initial 20 pixels. 137

137

And another thing is we want the font weight 138

138

back to 300 here, because once again, 139

139

this is the parent element, and it says 140

140

font weight is 100. 141

141

So this element will inherit that value 142

142

and so in order to put it back to 300 143

143

we have to specifically say, yeah, 144

144

we want it to be 300. 145

145

Another thing we can do here is to make this orange 146

146

to stand out even more, this plan-price. 147

147

As you remember, color should be used 148

148

to draw attention to important element, 149

149

and I think the price is pretty important here. 150

150

So I will make it orange and it will stand out this way. 151

151

Alright, so I think this first part here 152

152

really looks quite nice, isn't it? 153

153

So next let's take care of these lists here. 154

154

So we just say, plan-box ul. 155

155

And we want of course no list-style. 156

156

And now let's add some white space 157

157

between those list elements. 158

158

So this is pretty straightforward as well. 159

159

So for instance we can say we want a five pixel padding 160

160

at the top and at the bottom of each of those elements 161

161

and none on the sides. 162

162

Now as for the icons, one thing that I should have done 163

163

right from the beginning is to say that 164

164

these are small icons 165

165

with this class that we defined before. 166

166

I hope you remember that. 167

167

Since I forgot it, I will do this right now. 168

168

So all of these are small icons. 169

169

And let's check that out. 170

170

Alright, this looks nice actually. 171

171

So now let's center these one. 172

172

And I also notice one strange thing 173

173

which is since we don't have this paragraph here, 174

174

we left it empty, 175

175

this line completely disappeared. 176

176

So what we have to do is to put a space there. 177

177

So I will do that, 178

178

and where is it? 179

179

Here is the space. 180

180

And in fact adding just a simple space, just like this 181

181

will not do anything. 182

182

We have to use a special character 183

183

such as I told you before, there are those special 184

184

HTML special characters. 185

185

And for a space, it's &nbsp, 186

186

which you can find all of these 187

187

in the course ebook. 188

188

And hopefully this will solve that problem. 189

189

Let's check this, yeah it does. 190

190

So it's now an empty line. 191

191

And now let's center this button. 192

192

Should be pretty easy, 193

193

maybe a good way to doing that 194

194

is to simply select the last plan-box 195

195

and then center its content. 196

196

So we already learned that as well, 197

197

so plan-box and then the div, and then simply 198

198

select the last child. 199

199

And we say text-align: center. 200

200

Pretty easy. 201

201

And that's it. 202

202

Now you don't see those borders here 203

203

because the box is selected, let me deselect it. 204

204

Now you notice, maybe you don't see it, 205

205

but here is a gray line and it's obvious because we 206

206

define it that way, we said that 207

207

all those three divs should have these lines, 208

208

but of course the last one shouldn't, 209

209

and so we will take that away. 210

210

Another thing that we should do here, I think, 211

211

is to maybe highlight this box here 212

212

with a little gray background, 213

213

something between this darker gray and this white here. 214

214

So let's do those two things. 215

215

So first thing we want no border at all, 216

216

so border: none here in the last child. 217

217

And the first child should have a nice background color. 218

218

The secret here is to be very subtle. 219

219

We want to make a difference, but a difference that 220

220

doesn't pop out so much. 221

221

We want to be subtle because that's a great way 222

222

of doing beautiful design. 223

223

So just say, background-color, 224

224

again starting like this, 225

225

and let's choose a great background color. 226

226

This should be good, okay. 227

227

It's actually hard to see, but it makes a difference 228

228

believe me. 229

229

So now these rounded buttons are gone. 230

230

You probably don't see it because the video may be too small 231

231

but these rounded borders are really gone. 232

232

And I'm going to fix that in a moment. 233

233

And now I wanted to show you another CSS property 234

234

which is box-shadow, and we can add a nice effect here. 235

235

Once again a very subtle box shadow, 236

236

just so that I can show you how this works 237

237

because the box shadow is a very much used CSS property. 238

238

So I think it's important that you learn this as well. 239

239

So fixing those border radius, 240

240

I can say border-top-left-radius 241

241

should have also those five pixels 242

242

and border-top-right, five pixels. 243

243

And now let's add a nice box shadow to the entire box 244

244

and we will do this right here. 245

245

So it's box-shadow, and now the first value here 246

246

is for the x-axis offset. 247

247

And we don't want any of that. 248

248

Then the second one is for the y-axis offset, 249

249

and I will say two pixels here, 250

250

and now the blur I also want two pixels, 251

251

and the last value is the color. 252

252

And I will want a very subtle gray here again 253

253

which is not so visible. 254

254

I don't know, something like this maybe. 255

255

So let's see. 256

256

Now this was too dark, this was already too dark. 257

257

So once again this is designing in a browser. 258

258

We'll change the color until it looks good. 259

259

You will not see this in this video 260

260

because it's really subtle, but in your browser 261

261

you will notice it, I'm sure. 262

262

Alright, so we have one more section completed. 263

263

Our website is almost done here. 264

264

So we only have one more section and then the footer. 265

265

This is great. 266

266

So take a break now to digest all the things you learned 267

267

so far, or come with me right to the next section 268

268

where we'll build our simple HTML form.