Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,025 --> 00:00:02,705 So welcome back to Part 2 2 2 00:00:02,705 --> 00:00:05,206 of Building the cities section. 3 3 00:00:05,206 --> 00:00:10,106 Without further ado, let's go back to our website, 4 4 00:00:10,106 --> 00:00:12,099 and this is where we left. 5 5 00:00:12,099 --> 00:00:15,444 Now formatting this shouldn't be so hard, right? 6 6 00:00:15,444 --> 00:00:18,876 We will start with the images now. 7 7 00:00:18,876 --> 00:00:22,702 And, yeah, you should probably do this 8 8 00:00:22,702 --> 00:00:24,110 on your own now. 9 9 00:00:24,110 --> 00:00:27,443 So I will give you some time to do that. 10 10 00:00:30,525 --> 00:00:32,091 All right. 11 11 00:00:32,091 --> 00:00:35,169 So maybe you paused the video and did it by yourself. 12 12 00:00:35,169 --> 00:00:38,086 So now let's see how I would do it. 13 13 00:00:40,589 --> 00:00:42,247 Okay, 14 14 00:00:42,247 --> 00:00:44,164 so this is a box class, 15 15 00:00:46,791 --> 00:00:51,631 and I want to select the image inside of the box. 16 16 00:00:51,631 --> 00:00:55,613 Now this could be a problem if we had other boxes 17 17 00:00:55,613 --> 00:00:57,669 with images inside of them, 18 18 00:00:57,669 --> 00:01:01,372 but, as you know, the other box that we have 19 19 00:01:01,372 --> 00:01:03,205 is this image up here. 20 20 00:01:04,054 --> 00:01:06,471 Sorry, it's this box up here, 21 21 00:01:07,409 --> 00:01:11,136 and there is no image inside of this. 22 22 00:01:11,136 --> 00:01:13,434 So we can just use 23 23 00:01:13,434 --> 00:01:16,767 the selector that we're already used to. 24 24 00:01:22,257 --> 00:01:23,090 Okay. 25 25 00:01:25,626 --> 00:01:28,626 Let's add another code section here. 26 26 00:01:30,269 --> 00:01:32,186 This one is the cities. 27 27 00:01:38,290 --> 00:01:41,264 I really like some consistency here. 28 28 00:01:41,264 --> 00:01:43,181 And now, box and image. 29 29 00:01:46,381 --> 00:01:49,220 And what we want here is the image 30 30 00:01:49,220 --> 00:01:52,329 to be exactly as wide as the box. 31 31 00:01:52,329 --> 00:01:53,746 So what we say is 32 32 00:01:55,596 --> 00:01:57,013 width, 100%. 33 33 00:01:59,225 --> 00:02:03,392 And obviously the height will then be set automatically. 34 34 00:02:04,728 --> 00:02:07,523 And we can maybe have some margin 35 35 00:02:07,523 --> 00:02:10,106 between the box and H3 heading. 36 36 00:02:11,447 --> 00:02:15,444 So let's just add some margin to the bottom here 37 37 00:02:15,444 --> 00:02:17,027 of maybe 15 pixels. 38 38 00:02:20,634 --> 00:02:22,717 And let's check this out. 39 39 00:02:25,614 --> 00:02:28,250 Okay, cool, this is great. 40 40 00:02:28,250 --> 00:02:31,000 And now let's add some 41 41 00:02:31,000 --> 00:02:31,833 margin to 42 42 00:02:33,733 --> 00:02:35,150 these lines here. 43 43 00:02:36,446 --> 00:02:40,613 And if you remember each of those is a DIV element called 44 44 00:02:43,368 --> 00:02:44,451 city-feature. 45 45 00:02:45,716 --> 00:02:46,549 All right, 46 46 00:02:47,791 --> 00:02:48,874 city-feature. 47 47 00:02:53,130 --> 00:02:55,541 And maybe a margin to the bottom of each 48 48 00:02:55,541 --> 00:02:57,458 of them of five pixels. 49 49 00:03:01,454 --> 00:03:02,454 Okay, great. 50 50 00:03:04,252 --> 00:03:07,584 And now comes the most difficult part 51 51 00:03:07,584 --> 00:03:11,084 which is to format those icons right here. 52 52 00:03:12,252 --> 00:03:14,690 I would like to make them a little bigger 53 53 00:03:14,690 --> 00:03:16,107 and maybe aligned 54 54 00:03:17,406 --> 00:03:19,595 to one each other 55 55 00:03:19,595 --> 00:03:22,491 and have an orange color. 56 56 00:03:22,491 --> 00:03:24,491 So let's try to do that. 57 57 00:03:25,766 --> 00:03:30,091 So if you remember the other icons that we used, 58 58 00:03:30,091 --> 00:03:33,136 we actually gave them a class name. 59 59 00:03:33,136 --> 00:03:35,969 As you can see here we called them 60 60 00:03:36,811 --> 00:03:37,806 icon-big. 61 61 00:03:37,806 --> 00:03:41,139 So now let's call these ones icon-small. 62 62 00:03:42,497 --> 00:03:46,497 I should have done this before I started to copy 63 63 00:03:47,530 --> 00:03:48,780 but, all right. 64 64 00:03:52,145 --> 00:03:56,404 Now we have to copy it all, in all classes here, 65 65 00:03:56,404 --> 00:03:57,487 in all icons, 66 66 00:04:00,108 --> 00:04:02,941 but it doesn't take so long, so... 67 67 00:04:07,607 --> 00:04:09,774 Person, star, and twitter. 68 68 00:04:12,525 --> 00:04:13,358 Right. 69 69 00:04:14,408 --> 00:04:16,491 So let's go back here to 70 70 00:04:18,313 --> 00:04:22,248 the reusable section where we have our icons. 71 71 00:04:22,248 --> 00:04:23,498 So, icon-small. 72 72 00:04:27,587 --> 00:04:29,695 All right, so the first thing is 73 73 00:04:29,695 --> 00:04:33,394 to make them kind of aligned to each other. 74 74 00:04:33,394 --> 00:04:36,211 So what I will start doing 75 75 00:04:36,211 --> 00:04:40,378 is to say that I want to see these as inline-blocks 76 76 00:04:41,346 --> 00:04:44,346 so that I can assign them some width 77 77 00:04:46,327 --> 00:04:49,868 which I will say should be 30 pixels. 78 78 00:04:49,868 --> 00:04:53,035 And this way, I can now say text-align 79 79 00:04:54,781 --> 00:04:57,852 and then I can center them 80 80 00:04:57,852 --> 00:05:00,185 inside of this inline-block, 81 81 00:05:02,628 --> 00:05:03,565 and this should work. 82 82 00:05:03,565 --> 00:05:05,565 Now I will also want to 83 83 00:05:08,579 --> 00:05:12,333 give them this nice orange color that we used before. 84 84 00:05:12,333 --> 00:05:13,583 We get it here. 85 85 00:05:15,294 --> 00:05:16,127 and 86 86 00:05:17,277 --> 00:05:18,944 paste it right here, 87 87 00:05:20,890 --> 00:05:23,653 and we obviously also want those 88 88 00:05:23,653 --> 00:05:26,312 icons to be a little bigger. 89 89 00:05:26,312 --> 00:05:30,167 And if you remember, this is an icon font. 90 90 00:05:30,167 --> 00:05:33,231 So I can just adjust the font-size 91 91 00:05:33,231 --> 00:05:36,731 and let's say for instance 120% here. 92 92 00:05:39,456 --> 00:05:42,123 So let's see what it looks like. 93 93 00:05:44,064 --> 00:05:47,570 Okay, so you can see that these icons 94 94 00:05:47,570 --> 00:05:51,251 are not quite aligned with the text, right? 95 95 00:05:51,251 --> 00:05:53,944 So what can we do about this? 96 96 00:05:53,944 --> 00:05:56,277 Let me use a nice technique, 97 97 00:05:57,729 --> 00:05:59,888 and I will say that the line-height 98 98 00:05:59,888 --> 00:06:01,888 should also be 120% 99 99 00:06:04,730 --> 00:06:08,897 and that the vertical-align should be to the middle. 100 100 00:06:10,129 --> 00:06:12,962 And maybe that solves our problem. 101 101 00:06:14,888 --> 00:06:19,055 Okay, this doesn't quite look like I would like to 102 102 00:06:20,612 --> 00:06:23,387 because now it's the other way. 103 103 00:06:23,387 --> 00:06:25,964 They are now too way down here, right? 104 104 00:06:25,964 --> 00:06:28,286 They're still not aligned. 105 105 00:06:28,286 --> 00:06:32,369 So let me tell you another technique you can use. 106 106 00:06:33,592 --> 00:06:37,865 So there are three secrets essentially to align those. 107 107 00:06:37,865 --> 00:06:41,532 Let me write it here so you can remember it. 108 108 00:06:42,451 --> 00:06:43,284 Secrets 109 109 00:06:46,942 --> 00:06:48,942 to align text and icons. 110 110 00:06:52,033 --> 00:06:55,704 So comments are a great way to do exactly that, right, 111 111 00:06:55,704 --> 00:06:57,371 to comment our code. 112 112 00:06:58,913 --> 00:07:01,580 So we can now set another margin 113 113 00:07:03,946 --> 00:07:06,087 to the top, and this is a new thing 114 114 00:07:06,087 --> 00:07:09,513 because now we will set a negative margin. 115 115 00:07:09,513 --> 00:07:12,096 So negative margin does exactly 116 116 00:07:13,788 --> 00:07:17,365 the opposite thing than a positive margin. 117 117 00:07:17,365 --> 00:07:21,134 So a positive margin gives us space, 118 118 00:07:21,134 --> 00:07:25,582 and a negative margin is kind of, takes space away. 119 119 00:07:25,582 --> 00:07:27,832 So this will pull our icons 120 120 00:07:29,248 --> 00:07:31,998 to the top two pixels, hopefully. 121 121 00:07:33,007 --> 00:07:35,507 Well, let's see if this works. 122 122 00:07:37,908 --> 00:07:39,839 Two was maybe not enough. 123 123 00:07:39,839 --> 00:07:41,672 Let me use four pixels 124 124 00:07:46,694 --> 00:07:49,532 and four pixels actually looks great. 125 125 00:07:49,532 --> 00:07:52,115 So this is nicely aligned here, 126 126 00:07:55,488 --> 00:07:57,764 and I think this looks quite good. 127 127 00:07:57,764 --> 00:08:00,847 Maybe five pixels would also be okay. 128 128 00:08:03,209 --> 00:08:04,753 And another thing we can do is 129 129 00:08:04,753 --> 00:08:07,133 to add some margin to the right, 130 130 00:08:07,133 --> 00:08:11,313 so we have some space between icon and the text, right? 131 131 00:08:11,313 --> 00:08:13,229 So let me do that as well. 132 132 00:08:13,229 --> 00:08:16,351 So five pixels here can be better 133 133 00:08:16,351 --> 00:08:20,518 and the margin to the right of, let's say, 10 pixels, 134 134 00:08:22,528 --> 00:08:25,945 and, with this, I think we're good to go. 135 135 00:08:27,765 --> 00:08:28,598 Yeah, that's it. 136 136 00:08:28,598 --> 00:08:30,515 This looks cool, right? 137 137 00:08:31,932 --> 00:08:35,468 Now there's only one thing left to do in this section, 138 138 00:08:35,468 --> 00:08:39,809 which is to turn this Twitter user names here into links 139 139 00:08:39,809 --> 00:08:42,892 and then format those links with CSS. 140 140 00:08:43,949 --> 00:08:45,366 So let's do that. 141 141 00:08:46,287 --> 00:08:48,787 So back here in the HTML file, 142 142 00:08:51,414 --> 00:08:53,793 let me just go here. 143 143 00:08:53,793 --> 00:08:56,876 So we want a want an A-element 144 144 00:08:56,876 --> 00:08:58,293 for a link right? 145 145 00:08:59,993 --> 00:09:00,826 Href, 146 146 00:09:03,001 --> 00:09:06,334 and once again we have nowhere to point. 147 147 00:09:07,412 --> 00:09:08,329 this thing. 148 148 00:09:09,595 --> 00:09:12,095 So we just use the hash symbol 149 149 00:09:14,332 --> 00:09:16,582 and let's do the same thing 150 150 00:09:18,173 --> 00:09:19,006 for each 151 151 00:09:22,198 --> 00:09:23,781 of the four cities. 152 152 00:09:30,888 --> 00:09:32,471 So, Berlin is next. 153 153 00:09:36,948 --> 00:09:37,781 Nowhere, 154 154 00:09:41,406 --> 00:09:42,239 and now 155 155 00:09:44,439 --> 00:09:45,939 the last one here. 156 156 00:09:54,048 --> 00:09:56,298 So, what does it look like? 157 157 00:09:58,705 --> 00:10:00,888 Okay, these are just some normal links 158 158 00:10:00,888 --> 00:10:03,055 as you are used to seeing. 159 159 00:10:04,127 --> 00:10:07,330 So what I want to do now is to have links 160 160 00:10:07,330 --> 00:10:08,997 in the orange color, 161 161 00:10:10,733 --> 00:10:14,900 and I also want a more beautiful underlining than this one. 162 162 00:10:16,275 --> 00:10:18,164 So, first of all, I will change the color 163 163 00:10:18,164 --> 00:10:21,217 and I will get rid of this underlining, 164 164 00:10:21,217 --> 00:10:23,900 and we have already done this before. 165 165 00:10:23,900 --> 00:10:27,108 So this will be not different 166 166 00:10:27,108 --> 00:10:28,691 from the last time. 167 167 00:10:29,798 --> 00:10:31,881 So I will just open a new 168 168 00:10:34,689 --> 00:10:36,226 code section here 169 169 00:10:36,226 --> 00:10:39,559 for generic links because we will use these links 170 170 00:10:39,559 --> 00:10:41,392 in more places, maybe. 171 171 00:10:44,530 --> 00:10:48,013 So now I have to format all links at the same time, 172 172 00:10:48,013 --> 00:10:49,346 and so I just use the A 173 173 00:10:49,346 --> 00:10:52,772 because that's for the most generic links, 174 174 00:10:52,772 --> 00:10:56,825 and I will here, such as I did the last time, 175 175 00:10:56,825 --> 00:10:58,158 specify the link 176 176 00:10:59,508 --> 00:11:01,258 and the active state. 177 177 00:11:03,233 --> 00:11:05,983 So I want the color to be orange. 178 178 00:11:10,301 --> 00:11:11,134 So orange, 179 179 00:11:14,484 --> 00:11:16,771 and I want no text underlined. 180 180 00:11:16,771 --> 00:11:19,354 So, it's text-decoration, none. 181 181 00:11:23,528 --> 00:11:24,778 Simple as that. 182 182 00:11:25,931 --> 00:11:27,514 And now what I want 183 183 00:11:29,189 --> 00:11:31,748 is instead of this underline, 184 184 00:11:31,748 --> 00:11:34,452 I actually want an underline 185 185 00:11:34,452 --> 00:11:37,892 because that's what most users are used to 186 186 00:11:37,892 --> 00:11:39,642 when they see a link, 187 187 00:11:40,594 --> 00:11:43,531 but we will do that in a more beautiful way 188 188 00:11:43,531 --> 00:11:46,406 and that's with a border-bottom. 189 189 00:11:46,406 --> 00:11:48,573 So a border at the bottom. 190 190 00:11:49,464 --> 00:11:51,964 The simple one pixel and solid 191 191 00:11:53,130 --> 00:11:55,047 and, also, this orange. 192 192 00:11:56,314 --> 00:11:58,529 And to make it even more stand out, 193 193 00:11:58,529 --> 00:12:01,867 we'll add a padding at the bottom. 194 194 00:12:01,867 --> 00:12:03,284 One pixel, maybe. 195 195 00:12:04,291 --> 00:12:08,458 So we have some space between the text and the border. 196 196 00:12:09,375 --> 00:12:12,042 So let's see what it looks like. 197 197 00:12:12,949 --> 00:12:15,831 Have to get rid of these blue boxes 198 198 00:12:15,831 --> 00:12:19,414 what comes every time we select an element. 199 199 00:12:21,981 --> 00:12:24,512 Okay, this is what it looks like. 200 200 00:12:24,512 --> 00:12:26,233 Cool, right? 201 201 00:12:26,233 --> 00:12:30,424 And now one thing left to do is to say what should happen 202 202 00:12:30,424 --> 00:12:33,007 when we hover this link, right? 203 203 00:12:34,964 --> 00:12:37,295 Okay, so let's do that. 204 204 00:12:37,295 --> 00:12:38,928 And as you already know, 205 205 00:12:38,928 --> 00:12:40,511 we now say a, hover 206 206 00:12:43,637 --> 00:12:44,804 and a, active, 207 207 00:12:48,801 --> 00:12:50,927 and up here its actually not active. 208 208 00:12:50,927 --> 00:12:53,010 Of course, it is visited. 209 209 00:12:54,234 --> 00:12:58,123 So what we want to happen when we hover a link, 210 210 00:12:58,123 --> 00:13:02,994 we want it to become the color of the normal text 211 211 00:13:02,994 --> 00:13:07,495 which is, if you remember from the beginning, 212 212 00:13:07,495 --> 00:13:10,394 was like the first thing we set. 213 213 00:13:10,394 --> 00:13:11,561 Color is this, 214 214 00:13:13,552 --> 00:13:14,385 grey. 215 215 00:13:15,423 --> 00:13:18,991 And we also want the border to disappear, 216 216 00:13:18,991 --> 00:13:21,908 and do you remember how we do that? 217 217 00:13:22,959 --> 00:13:26,004 So, instead of saying we want it to zero pixels, 218 218 00:13:26,004 --> 00:13:28,075 we simply make it transparent, 219 219 00:13:28,075 --> 00:13:31,325 because that's a much cleaner solution. 220 220 00:13:32,683 --> 00:13:33,766 Transparent. 221 221 00:13:35,701 --> 00:13:38,002 Oh, and, again, we want this to happen 222 222 00:13:38,002 --> 00:13:39,919 with a nice transition. 223 223 00:13:41,634 --> 00:13:43,938 So, like an animation. 224 224 00:13:43,938 --> 00:13:45,938 So we choose transition, 225 225 00:13:48,238 --> 00:13:49,321 border-bottom 226 226 00:13:52,987 --> 00:13:55,468 and, again, an interval of 0.2 seconds 227 227 00:13:55,468 --> 00:13:58,635 and we also want to animate the color. 228 228 00:14:01,156 --> 00:14:01,989 So 229 229 00:14:04,072 --> 00:14:05,072 0.2 seconds, 230 230 00:14:07,406 --> 00:14:09,645 and that should do the job. 231 231 00:14:09,645 --> 00:14:11,228 What it looks like? 232 232 00:14:14,351 --> 00:14:15,434 Okay, great. 233 233 00:14:15,434 --> 00:14:19,151 This is exactly what we wanted the links to do here, right? 234 234 00:14:19,151 --> 00:14:23,318 Now one thing, what did we notice here is this one, 235 235 00:14:24,566 --> 00:14:26,549 because this is also a link. 236 236 00:14:26,549 --> 00:14:28,549 This now also have this 237 237 00:14:30,820 --> 00:14:34,903 annoying underline which we actually don't want. 238 238 00:14:35,748 --> 00:14:37,697 This one don't have it. 239 239 00:14:37,697 --> 00:14:40,180 And it's, of course, not because in this ones 240 240 00:14:40,180 --> 00:14:43,580 we specified the border specifically 241 241 00:14:43,580 --> 00:14:46,413 which we didn't do on this images. 242 242 00:14:47,754 --> 00:14:49,708 Actually, on this links. 243 243 00:14:49,708 --> 00:14:51,625 So, we need to fix that 244 244 00:14:53,208 --> 00:14:54,174 and it's quite easy. 245 245 00:14:54,174 --> 00:14:57,091 We just have to go down here to the 246 246 00:14:59,741 --> 00:15:02,074 How it Works section, right? 247 247 00:15:02,959 --> 00:15:04,292 And where is it? 248 248 00:15:09,865 --> 00:15:12,291 So down here we just create some code 249 249 00:15:12,291 --> 00:15:13,874 for the button-app, 250 250 00:15:16,447 --> 00:15:18,530 because, as you remember, 251 251 00:15:19,905 --> 00:15:21,738 this here is the class 252 252 00:15:22,598 --> 00:15:24,598 of the links button-app. 253 253 00:15:26,165 --> 00:15:27,665 So button-app link 254 254 00:15:29,556 --> 00:15:31,389 and button-app visited 255 255 00:15:35,963 --> 00:15:37,763 should have no border at all. 256 256 00:15:37,763 --> 00:15:39,346 So, border is zero. 257 257 00:15:41,153 --> 00:15:43,820 And this will solve our problem. 258 258 00:15:45,251 --> 00:15:47,918 Yeah, so the border disappeared. 259 259 00:15:50,767 --> 00:15:53,854 All right, so now we have five 260 260 00:15:53,854 --> 00:15:56,432 of our nine sections designed. 261 261 00:15:56,432 --> 00:15:58,266 So we already have more than half 262 262 00:15:58,266 --> 00:16:00,994 of our website completely built. 263 263 00:16:00,994 --> 00:16:02,655 All right, this is great. 264 264 00:16:02,655 --> 00:16:06,822 So, next up we have a customer testimonial section 265 265 00:16:08,009 --> 00:16:12,176 which will also be very beautiful as you will see. 20797