Voiceover: 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.