Original subtitles

1 1

Welcome back to building the footer. 2

2

Let's write some more CSS to format our footer. 3

3

So, here we are again as I said before we want 4

4

to, of course, have these links side by side. 5

5

And we want to get rid of these bullet points 6

6

and we want to format the whole thing. 7

7

And we also want a very dark background 8

8

for this footer in order to make it, kind of, stand out. 9

9

So let's go to our CSS. 10

10

And the thing's we're going to 11

11

do are, actually, quite easy to do. 12

12

It's just to repeat some things we already did before. 13

13

So to start, 14

14

let's make a darker background color here. 15

15

Of course, not black, but we want it kind of deep. 16

16

And I like to use this color, actually. 17

17

Let's just check this. 18

18

Okay, this makes a great contrast between this 19

19

white and this gray and now I will make the text, like 20

20

white or a very light gray. 21

21

But first, let's format those navigations. 22

22

So we have Footer Nav. 23

23

And we want it to have no bullet points as always. 24

24

And we want this one to float on 25

25

the left side, inside of its container. 26

26

And then we have to social icons. 27

27

And we also want no bullet points. 28

28

And this one we want to float all the way to the right side. 29

29

On the list elements inside of these navigations 30

30

of these unordered lists, we want to have them 31

31

side by side and so one thing that we 32

32

can do is to display them as in line blocks. 33

33

And this way they will not cause a line break 34

34

so they will be side by side and we can 35

35

also assign them some margin. 36

36

So what we can do here is Footer Nav LI. 37

37

And we can actually do the same thing for the social icons. 38

38

Because we want them to behave in the same way. 39

39

So we use our very much used property display 40

40

and in line block and then we can set a nice margin 41

41

to the right side of each of them 42

42

in order to give them some spacing. 43

43

So margin right, let's say 20 pixels. 44

44

Okay, let's check this. 45

45

Okay, they are already side by side, at least these ones. 46

46

There must be something wrong with this here. 47

47

So, let me check what's happening here. 48

48

Maybe it's not the right name. 49

49

Oh, alright, it's social links here. 50

50

Of course it's not social icons, 51

51

social links and social links. 52

52

And now these are side by side as well. 53

53

Now there's only one tiny problem left with these 54

54

LI elements and let me show you what I'm talking about 55

55

and for that I will use inspect element. 56

56

So you will see again how useful this is. 57

57

So where do we have our footer? 58

58

Okay, it's right here and so with the blue highlighting 59

59

you see the row class and so you can see that 60

60

here we have some space between the last icon 61

61

and the end of the row, right? 62

62

So the icon is not all the way to the right side of the row. 63

63

And that's because of the margin right we defined 64

64

of 20 pixels so what we need to do 65

65

is to get rid of that for the last LI element. 66

66

So let's do that. 67

67

And as you know the connection between brackets 68

68

and the browser was lost 69

69

because we that. 70

70

So let's go back here. 71

71

And now what we do is, of course, 72

72

such as we did it before 73

73

we use the last child pseudo class. 74

74

So last child 75

75

and last child. 76

76

And then we say we want margin zero. 77

77

We can say we want margin right but 78

78

it's actually the same thing. 79

79

So you see that now this is better 80

80

now we'll inspect it again, actually. 81

81

So to prove to you that this worked, 82

82

Okay, right this is better now. 83

83

So then, let's now format this text here, these links. 84

84

And you see we have to get rid of this text in the html. 85

85

It's down here still. 86

86

Okay so these are links and so I hope 87

87

that you can do this on your own by now. 88

88

So Footer Nav LI 89

89

and then the links inside of it. 90

90

And I will use the links state. 91

91

And then Footer Nav LI A visited. 92

92

And we want this to happen as well 93

93

for the social links. 94

94

We want of course now text decoration so now underlining. 95

95

And we also want no border because, if you remember, 96

96

we defined that those links should have a border. 97

97

We defined it all the way up here. 98

98

So all the usual links have this border. 99

99

So we just get rid of this. 100

100

And as I said, I also want a nice text color for them 101

101

because that orange really doesn't look great. 102

102

So I will start with white and then use the color picker 103

103

to go with something else. 104

104

So we want something a little bit dark. 105

105

Okay, this color looks good. 106

106

I really like those colors where 107

107

we only need those three digits. 108

108

And up here it's, of course, visited 109

109

and not vistad or whatever that is. 110

110

I think now we should be good to check this. 111

111

It looks a little dark, but it's on purpose 112

112

because I will then, with the 113

113

hover effect make the color look lighter 114

114

because we don't want to stand this out to much. 115

115

And so this is good and we will now add 116

116

some hover effect to these links here. 117

117

So let's do that. 118

118

So Footer Nav L A I and hover. 119

119

And, of course, active. 120

120

So if we want to change this to color, 121

121

not too white, but something like that. 122

122

Let's say, this one. 123

123

And we want of course to have a transition there 124

124

for the color property of zero point two seconds interval. 125

125

Now, of course, we also need some 126

126

padding here in this footer, right? 127

127

And also we want to format this text here, this paragraph. 128

128

So let's do these two things and then we 129

129

will worry about these icons here. 130

130

So we want a heading for this footer. 131

131

Not quite as big as we had with the other sections 132

132

so let's say 60 pixels, for instance, 133

133

and we will then see if it looks great. 134

134

And now let's just format the 135

135

paragraph inside of the footer 136

136

to have the same color as the links 137

137

which is 8888. 138

138

And we can also center the text. The text align, centerer. 139

139

And we can maybe even decrease the font size a little bit 140

140

because it's not necessary that it's 141

141

as big as the main text on the website. 142

142

Yeah, probably 60 pixels was still a little too much. 143

143

We will decrease this to 50 pixels or 40 144

144

and also some distance between this paragraph 145

145

and these navigations so the best 146

146

way of doing that is to add a margin 147

147

to the top of the paragraph. 148

148

So margin top, 30 pixels, let's say 149

149

and here we change that to 50. 150

150

So, of course, this looks a little empty here right now 151

151

because you could actually add some more text here 152

152

or, I don't know, something else. 153

153

In this case we will not worry about this 154

154

because it's just a photo to show you what we can do 155

155

and how all of this works. 156

156

So now let's worry about these icons 157

157

and what I want to do here is to, of course, 158

158

make those a little bit bigger but then 159

159

the hover effect, we will do something cool 160

160

which is, in each of these icons, we will 161

161

change the color of the icon to the color 162

162

of the corresponding social network 163

163

and I have a great site where we can see all of these colors 164

164

so with Facebook we will change to this color. 165

165

The Twitter button we will change to this color. 166

166

The Google Plus and the Instagram so we have 167

167

those colors here and then we will just have to copy them. 168

168

So let's do that. 169

169

Back in the CSS, 170

170

actually put this right here. 171

171

So, do social links LI, 172

172

write link 173

173

and social links 174

174

the visited state, 175

175

let's make them a little bit bigger 176

176

font size, say 180 percent 177

177

and we will then target each of the specific icons. 178

178

We will use these classes here so it's just 179

179

ion social and then the name of each of the social networks. 180

180

We will then, the best way of doing this is 181

181

to, actually put the hover effect right 182

182

on each of these classes. 183

183

So let's see 184

184

which color value we're going to use. 185

185

So this is for Facebook. 186

186

And that should work. 187

187

I'll just copy this. 188

188

So Twitter, 189

189

Google plus, 190

190

and Instagram. 191

191

So this is for Twitter. 192

192

For Google Plus. 193

193

And then, the last one is for Instagram. 194

194

And let's check this out. 195

195

Whoa, these are way too big, of course, 196

196

but the color effect works actually and this is pretty great 197

197

and this looks really cool, right? 198

198

Now what we have to do is to 199

199

also add that transition 200

200

that we want and we're going to do that back here. 201

201

So we have to do it this way. 202

202

So Twitter, Google Plus, and Instagram. 203

203

And then we just say that we want a transition 204

204

for the color of zero point two seconds. 205

205

Let's check this out. 206

206

And here we go. 207

207

Here we have our effect. 208

208

So actually I think that the entire text here is a little 209

209

too big so I'll just reduce all of the text 210

210

because, as I said, I don't want to make all of this 211

211

stand out too much and all of these links 212

212

are a little too big now, this doesn't look natural I think. 213

213

So I will reduce the text for all elements 214

214

in the footer element so I can say that 215

215

I want font size to be 80 percent here, for instance, 216

216

and then everything will get effected inside of this element 217

217

and just delete this from here. 218

218

And maybe here we can change it to 170. 219

219

And so, let's see. 220

220

These are still a little bit too big 221

221

but the rest looks good actually the padding here 222

222

or the margin here is too big as well 223

223

so let's change that and let's also 224

224

make these icons a little bit smaller. 225

225

So maybe 20 pixels is enough here and then 160. 226

226

And now we're almost at the end of this. 227

227

So, yeah, I think this was our last change 228

228

because this looks great now. 229

229

So let's revisit our whole web page to see what we got here. 230

230

So this is very cool, we designed all those section 231

231

and I think you can really be proud of yourself 232

232

for what you achieved with this. 233

233

Don't you think so? 234

234

So we built all of this with our own hands 235

235

and I think this is really powerful. 236

236

This is really great stuff. 237

237

In the next lecture, we will start 238

238

to make this website be responsive. 239

239

Because as you see now when we reduce this 240

240

it starts looking a little bit weird, right? 241

241

So that is what we are going to 242

242

be working on in the next lecture. 243

243

So you can take a break and revisit everything 244

244

we've done here or you can come with me 245

245

to the next lecture.