Original subtitles

1 1

So welcome back to Part 2 2

2

of Building the cities section. 3

3

Without further ado, let's go back to our website, 4

4

and this is where we left. 5

5

Now formatting this shouldn't be so hard, right? 6

6

We will start with the images now. 7

7

And, yeah, you should probably do this 8

8

on your own now. 9

9

So I will give you some time to do that. 10

10

All right. 11

11

So maybe you paused the video and did it by yourself. 12

12

So now let's see how I would do it. 13

13

Okay, 14

14

so this is a box class, 15

15

and I want to select the image inside of the box. 16

16

Now this could be a problem if we had other boxes 17

17

with images inside of them, 18

18

but, as you know, the other box that we have 19

19

is this image up here. 20

20

Sorry, it's this box up here, 21

21

and there is no image inside of this. 22

22

So we can just use 23

23

the selector that we're already used to. 24

24

Okay. 25

25

Let's add another code section here. 26

26

This one is the cities. 27

27

I really like some consistency here. 28

28

And now, box and image. 29

29

And what we want here is the image 30

30

to be exactly as wide as the box. 31

31

So what we say is 32

32

width, 100%. 33

33

And obviously the height will then be set automatically. 34

34

And we can maybe have some margin 35

35

between the box and H3 heading. 36

36

So let's just add some margin to the bottom here 37

37

of maybe 15 pixels. 38

38

And let's check this out. 39

39

Okay, cool, this is great. 40

40

And now let's add some 41

41

margin to 42

42

these lines here. 43

43

And if you remember each of those is a DIV element called 44

44

city-feature. 45

45

All right, 46

46

city-feature. 47

47

And maybe a margin to the bottom of each 48

48

of them of five pixels. 49

49

Okay, great. 50

50

And now comes the most difficult part 51

51

which is to format those icons right here. 52

52

I would like to make them a little bigger 53

53

and maybe aligned 54

54

to one each other 55

55

and have an orange color. 56

56

So let's try to do that. 57

57

So if you remember the other icons that we used, 58

58

we actually gave them a class name. 59

59

As you can see here we called them 60

60

icon-big. 61

61

So now let's call these ones icon-small. 62

62

I should have done this before I started to copy 63

63

but, all right. 64

64

Now we have to copy it all, in all classes here, 65

65

in all icons, 66

66

but it doesn't take so long, so... 67

67

Person, star, and twitter. 68

68

Right. 69

69

So let's go back here to 70

70

the reusable section where we have our icons. 71

71

So, icon-small. 72

72

All right, so the first thing is 73

73

to make them kind of aligned to each other. 74

74

So what I will start doing 75

75

is to say that I want to see these as inline-blocks 76

76

so that I can assign them some width 77

77

which I will say should be 30 pixels. 78

78

And this way, I can now say text-align 79

79

and then I can center them 80

80

inside of this inline-block, 81

81

and this should work. 82

82

Now I will also want to 83

83

give them this nice orange color that we used before. 84

84

We get it here. 85

85

and 86

86

paste it right here, 87

87

and we obviously also want those 88

88

icons to be a little bigger. 89

89

And if you remember, this is an icon font. 90

90

So I can just adjust the font-size 91

91

and let's say for instance 120% here. 92

92

So let's see what it looks like. 93

93

Okay, so you can see that these icons 94

94

are not quite aligned with the text, right? 95

95

So what can we do about this? 96

96

Let me use a nice technique, 97

97

and I will say that the line-height 98

98

should also be 120% 99

99

and that the vertical-align should be to the middle. 100

100

And maybe that solves our problem. 101

101

Okay, this doesn't quite look like I would like to 102

102

because now it's the other way. 103

103

They are now too way down here, right? 104

104

They're still not aligned. 105

105

So let me tell you another technique you can use. 106

106

So there are three secrets essentially to align those. 107

107

Let me write it here so you can remember it. 108

108

Secrets 109

109

to align text and icons. 110

110

So comments are a great way to do exactly that, right, 111

111

to comment our code. 112

112

So we can now set another margin 113

113

to the top, and this is a new thing 114

114

because now we will set a negative margin. 115

115

So negative margin does exactly 116

116

the opposite thing than a positive margin. 117

117

So a positive margin gives us space, 118

118

and a negative margin is kind of, takes space away. 119

119

So this will pull our icons 120

120

to the top two pixels, hopefully. 121

121

Well, let's see if this works. 122

122

Two was maybe not enough. 123

123

Let me use four pixels 124

124

and four pixels actually looks great. 125

125

So this is nicely aligned here, 126

126

and I think this looks quite good. 127

127

Maybe five pixels would also be okay. 128

128

And another thing we can do is 129

129

to add some margin to the right, 130

130

so we have some space between icon and the text, right? 131

131

So let me do that as well. 132

132

So five pixels here can be better 133

133

and the margin to the right of, let's say, 10 pixels, 134

134

and, with this, I think we're good to go. 135

135

Yeah, that's it. 136

136

This looks cool, right? 137

137

Now there's only one thing left to do in this section, 138

138

which is to turn this Twitter user names here into links 139

139

and then format those links with CSS. 140

140

So let's do that. 141

141

So back here in the HTML file, 142

142

let me just go here. 143

143

So we want a want an A-element 144

144

for a link right? 145

145

Href, 146

146

and once again we have nowhere to point. 147

147

this thing. 148

148

So we just use the hash symbol 149

149

and let's do the same thing 150

150

for each 151

151

of the four cities. 152

152

So, Berlin is next. 153

153

Nowhere, 154

154

and now 155

155

the last one here. 156

156

So, what does it look like? 157

157

Okay, these are just some normal links 158

158

as you are used to seeing. 159

159

So what I want to do now is to have links 160

160

in the orange color, 161

161

and I also want a more beautiful underlining than this one. 162

162

So, first of all, I will change the color 163

163

and I will get rid of this underlining, 164

164

and we have already done this before. 165

165

So this will be not different 166

166

from the last time. 167

167

So I will just open a new 168

168

code section here 169

169

for generic links because we will use these links 170

170

in more places, maybe. 171

171

So now I have to format all links at the same time, 172

172

and so I just use the A 173

173

because that's for the most generic links, 174

174

and I will here, such as I did the last time, 175

175

specify the link 176

176

and the active state. 177

177

So I want the color to be orange. 178

178

So orange, 179

179

and I want no text underlined. 180

180

So, it's text-decoration, none. 181

181

Simple as that. 182

182

And now what I want 183

183

is instead of this underline, 184

184

I actually want an underline 185

185

because that's what most users are used to 186

186

when they see a link, 187

187

but we will do that in a more beautiful way 188

188

and that's with a border-bottom. 189

189

So a border at the bottom. 190

190

The simple one pixel and solid 191

191

and, also, this orange. 192

192

And to make it even more stand out, 193

193

we'll add a padding at the bottom. 194

194

One pixel, maybe. 195

195

So we have some space between the text and the border. 196

196

So let's see what it looks like. 197

197

Have to get rid of these blue boxes 198

198

what comes every time we select an element. 199

199

Okay, this is what it looks like. 200

200

Cool, right? 201

201

And now one thing left to do is to say what should happen 202

202

when we hover this link, right? 203

203

Okay, so let's do that. 204

204

And as you already know, 205

205

we now say a, hover 206

206

and a, active, 207

207

and up here its actually not active. 208

208

Of course, it is visited. 209

209

So what we want to happen when we hover a link, 210

210

we want it to become the color of the normal text 211

211

which is, if you remember from the beginning, 212

212

was like the first thing we set. 213

213

Color is this, 214

214

grey. 215

215

And we also want the border to disappear, 216

216

and do you remember how we do that? 217

217

So, instead of saying we want it to zero pixels, 218

218

we simply make it transparent, 219

219

because that's a much cleaner solution. 220

220

Transparent. 221

221

Oh, and, again, we want this to happen 222

222

with a nice transition. 223

223

So, like an animation. 224

224

So we choose transition, 225

225

border-bottom 226

226

and, again, an interval of 0.2 seconds 227

227

and we also want to animate the color. 228

228

So 229

229

0.2 seconds, 230

230

and that should do the job. 231

231

What it looks like? 232

232

Okay, great. 233

233

This is exactly what we wanted the links to do here, right? 234

234

Now one thing, what did we notice here is this one, 235

235

because this is also a link. 236

236

This now also have this 237

237

annoying underline which we actually don't want. 238

238

This one don't have it. 239

239

And it's, of course, not because in this ones 240

240

we specified the border specifically 241

241

which we didn't do on this images. 242

242

Actually, on this links. 243

243

So, we need to fix that 244

244

and it's quite easy. 245

245

We just have to go down here to the 246

246

How it Works section, right? 247

247

And where is it? 248

248

So down here we just create some code 249

249

for the button-app, 250

250

because, as you remember, 251

251

this here is the class 252

252

of the links button-app. 253

253

So button-app link 254

254

and button-app visited 255

255

should have no border at all. 256

256

So, border is zero. 257

257

And this will solve our problem. 258

258

Yeah, so the border disappeared. 259

259

All right, so now we have five 260

260

of our nine sections designed. 261

261

So we already have more than half 262

262

of our website completely built. 263

263

All right, this is great. 264

264

So, next up we have a customer testimonial section 265

265

which will also be very beautiful as you will see.