Original subtitles

1 1

Welcome back to Part 2 of Building the Header. 2

2

In this video, we'll format the content 3

3

of the hero text blocks, 4

4

so this heading and those buttons. 5

5

Let's start by looking at the main heading. 6

6

We should probably make it wide, right? 7

7

So let's go back to the h1 style here, 8

8

and continue to define how it should look like. 9

9

So color, I will make it right, 10

10

and I will specify its font size, as well. 11

11

Now, the basic font size 12

12

of our html document is 20 pixels. 13

13

Now, in responsive web design, 14

14

we want everything to be relative. 15

15

So we can say that our font size should be 200%, 16

16

and then, this means 17

17

that our heading element 18

18

will be 40 pixels, 19

19

which is exactly 200% of 20 pixels, right? 20

20

So, if we later want to change this size, 21

21

we can just change the 22

22

html global font size, 23

23

let's say to 18, 24

24

and then this size will automatically decrease as well. 25

25

And we will use this method 26

26

for all other elements on the webpage, 27

27

so it will all be defined relatively to this 28

28

base size of 20 pixels. 29

29

Then, by adjusting this, all other elements 30

30

will automatically adjust their size. 31

31

And 200% looks good to start with. 32

32

Or maybe 240% 33

33

because we really want this to be big. 34

34

So let's check how it looks like. 35

35

Okay, much better. 36

36

Now, you probably remember that I said 37

37

in the design section, 38

38

that when we use very big headlines, 39

39

we should decrease the font weight. 40

40

And we will do that right now. 41

41

And we should also 42

42

maybe set this to upper case 43

43

because I think it looks much better. 44

44

So let's go back here and do that. 45

45

And with this, I can show you many ways to format text. 46

46

So let's decrease the font weight 47

47

to 300, 48

48

'cause usually the h1 elements come with bold formatting, 49

49

and that's not what we want. 50

50

And we will make it an upper case. 51

51

For that, we use the text transform property. 52

52

So, let's say upper case. 53

53

And another thing we can do is the letter spacing, 54

54

so it's not so compressed. 55

55

And also, a word spacing, 56

56

so some space between different words. 57

57

All of this makes a big headline like this 58

58

look much better. 59

59

I can go with three pixels here, for example, or maybe four. 60

60

Let's see how it looks like. 61

61

Okay, much better now. 62

62

But now we have this ugly line break here, healthy meals, 63

63

and we don't want that. 64

64

So let's just break it here, 65

65

so that we have goodbye junk food, 66

66

and then on the next line, hello super healthy meals. 67

67

Right, this will be much better. 68

68

So you remember how we do that? 69

69

Easy as this. 70

70

Just a br element. 71

71

Much better now, right? 72

72

So now let's format these buttons here. 73

73

First, we should 74

74

attribute some class to this one. 75

75

And I usually call them button, 76

76

and now we will have two kinds of buttons. 77

77

The first one will be a orange button 78

78

with a full orange color, 79

79

and the other one will be a so-called ghost button, 80

80

which will have just an outline, 81

81

an orange outline, 82

82

and then be transparent in the inside. 83

83

And what I'll do now is to 84

84

create a class for each of those buttons. 85

85

Let me just show you. 86

86

Button one will be called full 87

87

and button ghost. 88

88

So I will put the common styles, 89

89

like the font size and the font color and the button size, 90

90

I will put these inside this button class, 91

91

and then I will create a button full class, 92

92

which is specifically designed for the full button, 93

93

and a button ghost class, 94

94

which will be specifically designed for the ghost button. 95

95

All right. 96

96

So let's go back to the style file down here. 97

97

So button. 98

98

Now, in the lecture about the box model, 99

99

I told you that there were 100

100

block elements and inline elements, right? 101

101

Now there is also a mix between those two elements, 102

102

which is called the inline block, 103

103

and the inline block is just like an inline element, 104

104

but that can have heading and margin. 105

105

So the difference is that 106

106

it doesn't force a line break, 107

107

but you can attribute it some heading and some margin 108

108

unlike a normal inline element. 109

109

And so, a normal a 110

110

element like this 111

111

is an inline element, 112

112

but we want it be an inline block. 113

113

So we can change that by using display, 114

114

and then say inline block. 115

115

And now, we can 116

116

give it some heading. 117

117

And, let's say we want the top 118

118

to have 10 pixels, 119

119

and on the right and the left sides, 30 pixels. 120

120

Now, do you remember if we just put 30 and 10, 121

121

then this will mean that we have 122

122

10 pixels of heading 123

123

on top and bottom 124

124

and 30 pixels left and right, okay? 125

125

Now another thing is we also want 126

126

the font weight 127

127

to be 300 here. 128

128

So let me check. 129

129

All right, so you see, we have some heading here now, 130

130

and it looks good. 131

131

We also have this text underline here 132

132

that we need to get rid of because 133

133

it's kind of ugly, you know. 134

134

So we use text decoration, 135

135

and we want none of it. 136

136

Very well, so this is the common button style. 137

137

So both buttons have this in common. 138

138

And now let's start with the, 139

139

sorry, now let's start 140

140

with the full button. 141

141

And now let's choose a color. 142

142

As I told you before we will use the Flat UI tool. 143

143

Right here. 144

144

Flat UI colors. 145

145

Okay, that's the one we want. 146

146

So we have some oranges down here, 147

147

and to me, it looks like 148

148

this one is the best to use in this case. 149

149

So I'll just click here. 150

150

And now the color is selected. 151

151

So I will say that we want 152

152

the background color of this button to be this color. 153

153

Here we see, it's a nice orange, 154

154

and 155

155

let me go back here. 156

156

And here it is. 157

157

Now it's a nice orange button. 158

158

Very well, now, we maybe want some 159

159

border-radius here, right? 160

160

So we want this to be round 161

161

on both sides. 162

162

So we can just put a ridiculously high 163

163

border-radius here. 164

164

Like, I don't know, 200 pixels. 165

165

Very well, now, the text should probably be white 166

166

for this button, right? 167

167

Actually, for both of the buttons, 168

168

so put it right here, 169

169

color FFF is white. 170

170

So very well. 171

171

Now, the style for the ghost button. 172

172

We want the border to be orange, 173

173

so we did this before, at this border, 174

174

we want it to be one pixel, solid line, and then the color. 175

175

And we will use this color here. 176

176

Now you see this button is slightly 177

177

bigger than this one. 178

178

And there's a reason for that. 179

179

If you remember from the box model, 180

180

the height and the width of an element 181

181

is the content plus the heading plus the border. 182

182

So this element is higher 183

183

because it has that one pixel border. 184

184

So in order to make these two the same height and width, 185

185

we just add that border to this button as well. 186

186

And we also want some distance between this, right? 187

187

And probably the best way of doing this 188

188

is to add some 189

189

button margin to this h1 element. 190

190

Let's go back, and as I said, 191

191

we will add this border here 192

192

so that they look the same 193

193

and then some margin bottom. 194

194

So this one is the margin top, right? 195

195

And here we want margin bottom, like 20 pixels maybe. 196

196

Now, I actually don't like this white color here so much 197

197

because of the color of the line. 198

198

So let's make this text here orange 199

199

because it looks kind of weird, 200

200

the orange line and the white text. 201

201

So this here 202

202

will go to the full button 203

203

so that the full button is actually white, 204

204

and this button down here will be orange, 205

205

like the line color. 206

206

All right. 207

207

So we defined how the buttons look like. 208

208

Now, buttons or links in general in CSS 209

209

can have different states, 210

210

link, visited, active, and hover. 211

211

Now link is just how the element looks in the normal state. 212

212

And how do we specify this? 213

213

We just put it here. 214

214

This is called pseudo-classes. 215

215

So I just write link here, 216

216

so this means the, 217

217

the a element in its normal state. 218

218

Then, we have the visited state, 219

219

which is how the element will look like 220

220

after it has been visited. 221

221

And maybe sometimes you notice that some links 222

222

in some internet websites 223

223

look different after you have clicked them. 224

224

Now, we don't want this to happen, 225

225

so we say that the visited links should look 226

226

just like the normal links in their normal state. 227

227

So, we do this here. 228

228

So we say button visited. 229

229

So button link and button visited 230

230

have both the same style, 231

231

which means they will both look the same. 232

232

And we have to do the same thing down here. 233

233

Button link 234

234

and button full visited. 235

235

And the same thing down here. 236

236

Button ghost link. 237

237

All right. 238

238

Now there are two different states, which is hover, 239

239

when we put our mouse over a button 240

240

and the active state, 241

241

which is when we click on a button. 242

242

And we can specify that in CSS here. 243

243

So we can say what will happen 244

244

when we put the mouse on the button. 245

245

And in order to do so, we say button and then hover, 246

246

and we want the button to look exactly the same 247

247

when we hover it or when we click on it, 248

248

so when it's active. 249

249

So we say button hover and button 250

250

active. 251

251

And what we want our buttons to do 252

252

is to have a darker orange tone, 253

253

so that we can see some change there, right? 254

254

Do you remember the tool that we use 255

255

to get darker shades of a color? 256

256

It is the 0to255 tool. 257

257

Let me just copy this. 258

258

And we'll use this tool, 0to255. 259

259

So this is how it looks like. 260

260

And I will paste our orange tone here. 261

261

And this. 262

262

Alright, this is our original orange tone 263

263

that we're using on our website. 264

264

And now we want a darker shade. 265

265

And this is very similar, so let's use this. 266

266

I'll just click here, and now it's copied. 267

267

So what I do now is 268

268

that I say that 269

269

when I put I put my mouse on the button, 270

270

I want it background color to be 271

271

this one. 272

272

All right. 273

273

Let's just put this code 274

274

down here. 275

275

So that we have the normal declarations 276

276

like link and visited before 277

277

and then the hover and active states. 278

278

Here, it's actually visited. 279

279

And now, let's check this out. 280

280

Okay, so now our buttons change their color. 281

281

Now we have some problems here, as you see. 282

282

First is the text color here, 283

283

and second is the border color. 284

284

You see in both, 285

285

that there is still the lighter orange color 286

286

still showing here. 287

287

So we have to change that as well. 288

288

And in order to do so, 289

289

we will have to change these classes. 290

290

We'll just copy these and change the things that I want, 291

291

so that I don't have to write everything again. 292

292

So it's hover here and active... 293

293

and hover and 294

294

active. 295

295

So I don't need this and this. 296

296

So the button full should not only 297

297

have this background color here, 298

298

but also its border should have that color. 299

299

All right, and same thing here for the ghost button. 300

300

Difference with the ghost button 301

301

is that we also want the 302

302

font color to be white, 303

303

so FFF here. 304

304

And now it should work as we want. 305

305

Great, now this looks great, right? 306

306

Now, one thing, and this is a little more advanced, 307

307

is we want to have a little transition 308

308

from one color to the other. 309

309

So this gets just orange instantaneously, 310

310

but we want to see a nice transition. 311

311

And we can actually do this using just CSS, 312

312

and I will just show you how. 313

313

So all we need to do here is, 314

314

in the button class, 315

315

just add the transition property. 316

316

And this is actually CSF three already, 317

317

so what we want to say here is 318

318

that the background color 319

319

should change 320

320

with a transition. 321

321

We just write it, background-color. 322

322

Now we'll say, 323

323

0.2 seconds. 324

324

So what happens now is that when we hover over a link, 325

325

over one of these buttons, 326

326

the background color will not change instantaneously, 327

327

but over a period of 0.2 seconds. 328

328

And we want not only the background color to change, 329

329

but also the border 330

330

and also the font color. 331

331

So that is all a nice, smooth transition 332

332

from one state to the other. 333

333

So we can specify more than one property here. 334

334

So we want background color to change. 335

335

We want border to change. 336

336

0.2 seconds as well, 337

337

and we want color to change over a period of 0.2 seconds. 338

338

Right, let's see how this works. 339

339

But last thing, we also want 340

340

some margins between the buttons 341

341

'cause they are glued together right now. 342

342

So let me just change here the full button. 343

343

I will add a margin to the right. 344

344

So when I say, for example, 15 pixels to the right 345

345

then 346

346

the button will show this nice distance. 347

347

And as you see, the transition works 348

348

exactly as we planned it, right? 349

349

In both buttons. 350

350

So this looks much better than it did before, 351

351

and yeah, you just learned how to do this. 352

352

Great, right? 353

353

And this closes part two of Building the Header. 354

354

In the next and last part of building the header, 355

355

we'll just add a simple navigation and the Omnifood logo. 356

356

See you there.