Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated: 1 1 00:00:01,531 --> 00:00:04,007 Hi, let's continue working 2 2 00:00:04,007 --> 00:00:06,178 on the sign-up section. 3 3 00:00:06,178 --> 00:00:08,761 Let's write some more CSS code. 4 4 00:00:10,542 --> 00:00:11,709 So, back here. 5 5 00:00:12,798 --> 00:00:14,860 Let's start with the background color 6 6 00:00:14,860 --> 00:00:17,271 and I will show you why. 7 7 00:00:17,271 --> 00:00:22,189 So the first section we had was white, completely white. 8 8 00:00:22,189 --> 00:00:24,522 And the second one had these 9 9 00:00:25,435 --> 00:00:28,514 very subtle gray background color 10 10 00:00:28,514 --> 00:00:31,244 then the next one was white again. 11 11 00:00:31,244 --> 00:00:35,368 So now as you can guess, it's again time for a gray one. 12 12 00:00:35,368 --> 00:00:37,960 So that will be the first thing to do. 13 13 00:00:37,960 --> 00:00:42,488 And then of course, starting to build a structure 14 14 00:00:42,488 --> 00:00:45,738 for each of these pricing plan columns. 15 15 00:00:47,893 --> 00:00:50,707 So give here some white space, 16 16 00:00:50,707 --> 00:00:53,874 and starting to make this look better. 17 17 00:00:55,319 --> 00:00:56,736 So let's do that. 18 18 00:01:00,947 --> 00:01:04,280 So this section is called section-plans. 19 19 00:01:07,370 --> 00:01:10,421 I'll put some white space here 20 20 00:01:10,421 --> 00:01:12,921 so we can see what's going on. 21 21 00:01:22,166 --> 00:01:25,999 So the first thing here is a background color. 22 22 00:01:29,689 --> 00:01:33,106 And I don't remember, so I will just copy 23 23 00:01:34,520 --> 00:01:35,353 this one. 24 24 00:01:41,417 --> 00:01:44,084 Now, let me check our HTML code. 25 25 00:01:47,533 --> 00:01:51,033 So I'll start to format the plan-box here. 26 26 00:02:03,095 --> 00:02:05,595 Let's make this plan-box white 27 27 00:02:06,606 --> 00:02:10,773 so that it looks different than the background color 28 28 00:02:11,802 --> 00:02:14,052 of the rest of the section. 29 29 00:02:17,361 --> 00:02:19,111 And I will say, #fff. 30 30 00:02:21,179 --> 00:02:25,346 And I also want to give this some rounded corners. 31 31 00:02:26,486 --> 00:02:27,903 So, border-radius 32 32 00:02:32,436 --> 00:02:35,019 of, let's say five pixels here. 33 33 00:02:38,566 --> 00:02:42,733 I don't want it to be 100% of the parent width, 34 34 00:02:44,013 --> 00:02:45,680 so I will say width, 35 35 00:02:49,426 --> 00:02:50,676 ninety percent. 36 36 00:02:52,324 --> 00:02:55,528 And then I will use the same technique as we used before 37 37 00:02:55,528 --> 00:02:58,361 to center it inside of its parent. 38 38 00:02:59,318 --> 00:03:02,312 Just to show you again, the parent of this one 39 39 00:03:02,312 --> 00:03:03,645 is the call box. 40 40 00:03:07,147 --> 00:03:08,397 So margin-left, 41 41 00:03:09,836 --> 00:03:11,021 five percent, 42 42 00:03:11,021 --> 00:03:14,271 which is half of the remaining 10% 43 43 00:03:15,520 --> 00:03:16,770 from 90 to 100. 44 44 00:03:20,815 --> 00:03:22,815 And now let me see this. 45 45 00:03:25,704 --> 00:03:29,204 So this has already these rounded corners, 46 46 00:03:30,190 --> 00:03:32,267 and it's white. 47 47 00:03:32,267 --> 00:03:36,100 Now let's divide this into the three sections. 48 48 00:03:38,521 --> 00:03:42,438 But first let me explain you why I put this box 49 49 00:03:43,886 --> 00:03:48,053 into the column, such as I promised you I would explain you. 50 50 00:03:50,253 --> 00:03:52,816 So this situation here, why I created this div 51 51 00:03:52,816 --> 00:03:56,913 inside of the column, because if I hadn't, 52 52 00:03:56,913 --> 00:04:00,340 I wouldn't be able to make the plan-box as wide 53 53 00:04:00,340 --> 00:04:04,507 as I wanted it, only 90% with the white background color. 54 54 00:04:06,386 --> 00:04:10,580 It would not have been possible to do this 55 55 00:04:10,580 --> 00:04:14,747 by just formatting this column or adding some box here. 56 56 00:04:18,033 --> 00:04:21,616 So this was the solution that I had to use. 57 57 00:04:24,694 --> 00:04:28,611 So now let's section each of those subsections. 58 58 00:04:31,390 --> 00:04:35,390 And in order to do that, I will do it like this. 59 59 00:04:37,967 --> 00:04:41,800 Because, as we defined it, we have three divs: 60 60 00:04:43,414 --> 00:04:46,164 this one, this one, and this one. 61 61 00:04:48,388 --> 00:04:51,815 So I want them to have a padding 62 62 00:04:51,815 --> 00:04:54,232 of 15 pixels each, let's say. 63 63 00:04:57,387 --> 00:05:01,289 And what's also important is to make a 64 64 00:05:01,289 --> 00:05:03,894 little separation between them. 65 65 00:05:03,894 --> 00:05:08,061 We will have some border at the bottom of each of them. 66 66 00:05:09,383 --> 00:05:13,383 So a nice little border with a very light color, 67 67 00:05:14,747 --> 00:05:16,976 very subtle gray. 68 68 00:05:16,976 --> 00:05:19,893 So only one pixel in a solid color, 69 69 00:05:20,849 --> 00:05:22,897 and let's again start with white 70 70 00:05:22,897 --> 00:05:26,965 and then use the color picker to adjust the color. 71 71 00:05:26,965 --> 00:05:31,758 So a very subtle color here which we almost won't notice. 72 72 00:05:31,758 --> 00:05:34,392 So for example, this one. 73 73 00:05:34,392 --> 00:05:37,944 We will then check it, but for now we can just 74 74 00:05:37,944 --> 00:05:40,694 format some other things as well. 75 75 00:05:42,123 --> 00:05:44,456 Let me see what we got here. 76 76 00:05:45,467 --> 00:05:49,104 For example, this, let's start at the beginning. 77 77 00:05:49,104 --> 00:05:51,542 Now the HTree is already defined, 78 78 00:05:51,542 --> 00:05:54,709 so let's continue with the plan-price. 79 79 00:05:55,999 --> 00:05:59,749 And a plan-price, I want it to be really big. 80 80 00:06:02,673 --> 00:06:05,756 So font size, for instance 300%. 81 81 00:06:12,426 --> 00:06:16,159 And maybe a margin to the bottom, to that paragraph 82 82 00:06:16,159 --> 00:06:17,326 of ten pixels. 83 83 00:06:19,781 --> 00:06:23,281 And the next paragraph is plan-price-meal, 84 84 00:06:26,274 --> 00:06:28,378 if you remember. 85 85 00:06:28,378 --> 00:06:30,453 I don't know yet what to put here 86 86 00:06:30,453 --> 00:06:33,286 so let's just look at our website. 87 87 00:06:39,416 --> 00:06:40,735 Not bad, right? 88 88 00:06:40,735 --> 00:06:44,568 But this looks a little bit overwhelming here. 89 89 00:06:45,626 --> 00:06:48,886 And such as I told you, when you choose to use 90 90 00:06:48,886 --> 00:06:52,868 very big font sizes, the best thing to do 91 91 00:06:52,868 --> 00:06:56,035 is to actually reduce the font weight, 92 92 00:06:57,816 --> 00:06:59,307 which is what we're gonna do. 93 93 00:06:59,307 --> 00:07:02,057 And also we will reduce this text 94 94 00:07:03,653 --> 00:07:06,621 so we only want this to be this big. 95 95 00:07:06,621 --> 00:07:09,672 And there is actually an easy way to do this. 96 96 00:07:09,672 --> 00:07:13,838 Also I think this text is a little too big here, 97 97 00:07:13,838 --> 00:07:16,986 so let's make those changes. 98 98 00:07:16,986 --> 00:07:19,550 So first thing I will just decrease this here 99 99 00:07:19,550 --> 00:07:21,383 to let's say 80%. 100 100 00:07:25,942 --> 00:07:30,109 Then we should totally decrease the font weight here 101 101 00:07:33,980 --> 00:07:34,813 to 100. 102 102 00:07:36,210 --> 00:07:38,293 And let me show you this, 103 103 00:07:40,163 --> 00:07:42,016 so these are the options we have 104 104 00:07:42,016 --> 00:07:43,186 which we included at the beginning, 105 105 00:07:43,186 --> 00:07:45,603 100, 300, 400 and 300 italic. 106 106 00:07:47,101 --> 00:07:48,773 So I will use this font weight which is 107 107 00:07:48,773 --> 00:07:51,606 the lowest that we have available. 108 108 00:07:52,869 --> 00:07:57,271 And now we want to style this per-month text 109 109 00:07:57,271 --> 00:07:59,542 in a different way. 110 110 00:07:59,542 --> 00:08:03,117 And I will now show you another HTML element 111 111 00:08:03,117 --> 00:08:04,367 for doing that, 112 112 00:08:09,341 --> 00:08:10,636 which is this one. 113 113 00:08:10,636 --> 00:08:13,303 This is called span, and span... 114 114 00:08:15,108 --> 00:08:18,201 has only one purpose, basically. 115 115 00:08:18,201 --> 00:08:22,896 Its purpose is just to appear inside a paragraph, 116 116 00:08:22,896 --> 00:08:27,341 for example, and style some text in a different way 117 117 00:08:27,341 --> 00:08:31,508 than the rest, which is exactly what we want here. 118 118 00:08:32,468 --> 00:08:35,551 So the same thing goes for this here, 119 119 00:08:39,837 --> 00:08:41,004 and down here, 120 120 00:08:41,983 --> 00:08:45,650 with the difference that it's per-meal here. 121 121 00:08:47,082 --> 00:08:49,249 So we can now go ahead and 122 122 00:08:50,259 --> 00:08:52,842 format this in a different way. 123 123 00:08:55,051 --> 00:08:57,051 So we can say plan-price 124 124 00:09:01,572 --> 00:09:04,072 and then the span inside of it 125 125 00:09:05,612 --> 00:09:08,195 can have a different font size. 126 126 00:09:13,219 --> 00:09:16,219 Now the thing is that this span here 127 127 00:09:17,119 --> 00:09:19,725 is a child of this plan-price, 128 128 00:09:19,725 --> 00:09:22,642 which has a font size of 300%. 129 129 00:09:23,695 --> 00:09:27,612 Now if we would say font size equals 100%, 130 130 00:09:29,296 --> 00:09:33,782 then this 100% would not be the base size of 20 pixels, 131 131 00:09:33,782 --> 00:09:37,949 but this 300% because it is the parent font size. 132 132 00:09:41,585 --> 00:09:44,299 So if we want a smaller font size, 133 133 00:09:44,299 --> 00:09:47,355 we have to choose a very small number 134 134 00:09:47,355 --> 00:09:50,037 like for instance 30%. 135 135 00:09:50,037 --> 00:09:52,870 So, we have 30% of these 300, 136 136 00:09:56,246 --> 00:09:58,996 and not of the initial 20 pixels. 137 137 00:10:03,291 --> 00:10:07,060 And another thing is we want the font weight 138 138 00:10:07,060 --> 00:10:10,593 back to 300 here, because once again, 139 139 00:10:10,593 --> 00:10:13,150 this is the parent element, and it says 140 140 00:10:13,150 --> 00:10:14,733 font weight is 100. 141 141 00:10:17,306 --> 00:10:21,375 So this element will inherit that value 142 142 00:10:21,375 --> 00:10:23,666 and so in order to put it back to 300 143 143 00:10:23,666 --> 00:10:26,364 we have to specifically say, yeah, 144 144 00:10:26,364 --> 00:10:28,114 we want it to be 300. 145 145 00:10:29,593 --> 00:10:34,183 Another thing we can do here is to make this orange 146 146 00:10:34,183 --> 00:10:37,889 to stand out even more, this plan-price. 147 147 00:10:37,889 --> 00:10:39,790 As you remember, color should be used 148 148 00:10:39,790 --> 00:10:43,854 to draw attention to important element, 149 149 00:10:43,854 --> 00:10:48,583 and I think the price is pretty important here. 150 150 00:10:48,583 --> 00:10:52,750 So I will make it orange and it will stand out this way. 151 151 00:10:55,561 --> 00:10:59,348 Alright, so I think this first part here 152 152 00:10:59,348 --> 00:11:02,675 really looks quite nice, isn't it? 153 153 00:11:02,675 --> 00:11:06,342 So next let's take care of these lists here. 154 154 00:11:09,003 --> 00:11:11,336 So we just say, plan-box ul. 155 155 00:11:16,220 --> 00:11:19,220 And we want of course no list-style. 156 156 00:11:23,241 --> 00:11:26,265 And now let's add some white space 157 157 00:11:26,265 --> 00:11:28,598 between those list elements. 158 158 00:11:30,728 --> 00:11:34,228 So this is pretty straightforward as well. 159 159 00:11:38,379 --> 00:11:43,304 So for instance we can say we want a five pixel padding 160 160 00:11:43,304 --> 00:11:47,471 at the top and at the bottom of each of those elements 161 161 00:11:49,524 --> 00:11:51,357 and none on the sides. 162 162 00:11:53,988 --> 00:11:58,155 Now as for the icons, one thing that I should have done 163 163 00:11:59,211 --> 00:12:02,543 right from the beginning is to say that 164 164 00:12:02,543 --> 00:12:04,293 these are small icons 165 165 00:12:06,195 --> 00:12:09,390 with this class that we defined before. 166 166 00:12:09,390 --> 00:12:11,926 I hope you remember that. 167 167 00:12:11,926 --> 00:12:16,396 Since I forgot it, I will do this right now. 168 168 00:12:16,396 --> 00:12:19,063 So all of these are small icons. 169 169 00:12:27,303 --> 00:12:29,386 And let's check that out. 170 170 00:12:31,545 --> 00:12:33,934 Alright, this looks nice actually. 171 171 00:12:33,934 --> 00:12:36,892 So now let's center these one. 172 172 00:12:36,892 --> 00:12:39,250 And I also notice one strange thing 173 173 00:12:39,250 --> 00:12:43,378 which is since we don't have this paragraph here, 174 174 00:12:43,378 --> 00:12:44,795 we left it empty, 175 175 00:12:45,978 --> 00:12:49,218 this line completely disappeared. 176 176 00:12:49,218 --> 00:12:53,520 So what we have to do is to put a space there. 177 177 00:12:53,520 --> 00:12:55,020 So I will do that, 178 178 00:12:56,462 --> 00:12:57,925 and where is it? 179 179 00:12:57,925 --> 00:12:59,669 Here is the space. 180 180 00:12:59,669 --> 00:13:03,029 And in fact adding just a simple space, just like this 181 181 00:13:03,029 --> 00:13:04,784 will not do anything. 182 182 00:13:04,784 --> 00:13:07,775 We have to use a special character 183 183 00:13:07,775 --> 00:13:11,985 such as I told you before, there are those special 184 184 00:13:11,985 --> 00:13:13,985 HTML special characters. 185 185 00:13:15,122 --> 00:13:17,455 And for a space, it's &nbsp, 186 186 00:13:21,477 --> 00:13:22,972 which you can find all of these 187 187 00:13:22,972 --> 00:13:25,427 in the course ebook. 188 188 00:13:25,427 --> 00:13:28,857 And hopefully this will solve that problem. 189 189 00:13:28,857 --> 00:13:30,498 Let's check this, yeah it does. 190 190 00:13:30,498 --> 00:13:32,665 So it's now an empty line. 191 191 00:13:34,171 --> 00:13:36,921 And now let's center this button. 192 192 00:13:38,085 --> 00:13:39,918 Should be pretty easy, 193 193 00:13:41,469 --> 00:13:43,969 maybe a good way to doing that 194 194 00:13:44,813 --> 00:13:47,896 is to simply select the last plan-box 195 195 00:13:51,531 --> 00:13:53,864 and then center its content. 196 196 00:13:55,822 --> 00:13:59,381 So we already learned that as well, 197 197 00:13:59,381 --> 00:14:02,172 so plan-box and then the div, and then simply 198 198 00:14:02,172 --> 00:14:04,005 select the last child. 199 199 00:14:09,052 --> 00:14:11,552 And we say text-align: center. 200 200 00:14:12,433 --> 00:14:14,075 Pretty easy. 201 201 00:14:14,075 --> 00:14:15,242 And that's it. 202 202 00:14:18,106 --> 00:14:21,243 Now you don't see those borders here 203 203 00:14:21,243 --> 00:14:25,225 because the box is selected, let me deselect it. 204 204 00:14:25,225 --> 00:14:27,256 Now you notice, maybe you don't see it, 205 205 00:14:27,256 --> 00:14:30,871 but here is a gray line and it's obvious because we 206 206 00:14:30,871 --> 00:14:33,255 define it that way, we said that 207 207 00:14:33,255 --> 00:14:37,042 all those three divs should have these lines, 208 208 00:14:37,042 --> 00:14:38,927 but of course the last one shouldn't, 209 209 00:14:38,927 --> 00:14:41,427 and so we will take that away. 210 210 00:14:43,348 --> 00:14:46,063 Another thing that we should do here, I think, 211 211 00:14:46,063 --> 00:14:49,769 is to maybe highlight this box here 212 212 00:14:49,769 --> 00:14:52,269 with a little gray background, 213 213 00:14:55,019 --> 00:14:59,186 something between this darker gray and this white here. 214 214 00:15:02,886 --> 00:15:05,303 So let's do those two things. 215 215 00:15:07,063 --> 00:15:10,346 So first thing we want no border at all, 216 216 00:15:10,346 --> 00:15:14,337 so border: none here in the last child. 217 217 00:15:14,337 --> 00:15:18,504 And the first child should have a nice background color. 218 218 00:15:21,903 --> 00:15:24,986 The secret here is to be very subtle. 219 219 00:15:26,828 --> 00:15:30,355 We want to make a difference, but a difference that 220 220 00:15:30,355 --> 00:15:32,355 doesn't pop out so much. 221 221 00:15:33,557 --> 00:15:36,694 We want to be subtle because that's a great way 222 222 00:15:36,694 --> 00:15:39,651 of doing beautiful design. 223 223 00:15:39,651 --> 00:15:42,151 So just say, background-color, 224 224 00:15:44,658 --> 00:15:46,741 again starting like this, 225 225 00:15:48,689 --> 00:15:52,189 and let's choose a great background color. 226 226 00:15:55,368 --> 00:15:57,535 This should be good, okay. 227 227 00:16:00,619 --> 00:16:03,237 It's actually hard to see, but it makes a difference 228 228 00:16:03,237 --> 00:16:04,154 believe me. 229 229 00:16:05,951 --> 00:16:09,118 So now these rounded buttons are gone. 230 230 00:16:10,551 --> 00:16:13,899 You probably don't see it because the video may be too small 231 231 00:16:13,899 --> 00:16:17,399 but these rounded borders are really gone. 232 232 00:16:19,344 --> 00:16:21,018 And I'm going to fix that in a moment. 233 233 00:16:21,018 --> 00:16:23,701 And now I wanted to show you another CSS property 234 234 00:16:23,701 --> 00:16:28,391 which is box-shadow, and we can add a nice effect here. 235 235 00:16:28,391 --> 00:16:31,280 Once again a very subtle box shadow, 236 236 00:16:31,280 --> 00:16:33,996 just so that I can show you how this works 237 237 00:16:33,996 --> 00:16:38,163 because the box shadow is a very much used CSS property. 238 238 00:16:39,961 --> 00:16:44,090 So I think it's important that you learn this as well. 239 239 00:16:44,090 --> 00:16:46,590 So fixing those border radius, 240 240 00:16:48,166 --> 00:16:50,833 I can say border-top-left-radius 241 241 00:16:54,395 --> 00:16:57,206 should have also those five pixels 242 242 00:16:57,206 --> 00:17:00,039 and border-top-right, five pixels. 243 243 00:17:03,465 --> 00:17:07,918 And now let's add a nice box shadow to the entire box 244 244 00:17:07,918 --> 00:17:10,501 and we will do this right here. 245 245 00:17:11,380 --> 00:17:15,380 So it's box-shadow, and now the first value here 246 246 00:17:18,116 --> 00:17:20,199 is for the x-axis offset. 247 247 00:17:24,025 --> 00:17:26,253 And we don't want any of that. 248 248 00:17:26,253 --> 00:17:30,414 Then the second one is for the y-axis offset, 249 249 00:17:30,414 --> 00:17:32,803 and I will say two pixels here, 250 250 00:17:32,803 --> 00:17:36,136 and now the blur I also want two pixels, 251 251 00:17:37,805 --> 00:17:40,472 and the last value is the color. 252 252 00:17:42,539 --> 00:17:46,289 And I will want a very subtle gray here again 253 253 00:17:47,936 --> 00:17:49,936 which is not so visible. 254 254 00:17:53,413 --> 00:17:56,746 I don't know, something like this maybe. 255 255 00:17:58,971 --> 00:18:00,054 So let's see. 256 256 00:18:02,402 --> 00:18:06,790 Now this was too dark, this was already too dark. 257 257 00:18:06,790 --> 00:18:09,927 So once again this is designing in a browser. 258 258 00:18:09,927 --> 00:18:13,510 We'll change the color until it looks good. 259 259 00:18:18,791 --> 00:18:21,109 You will not see this in this video 260 260 00:18:21,109 --> 00:18:24,170 because it's really subtle, but in your browser 261 261 00:18:24,170 --> 00:18:26,201 you will notice it, I'm sure. 262 262 00:18:26,201 --> 00:18:29,468 Alright, so we have one more section completed. 263 263 00:18:29,468 --> 00:18:32,183 Our website is almost done here. 264 264 00:18:32,183 --> 00:18:36,246 So we only have one more section and then the footer. 265 265 00:18:36,246 --> 00:18:38,240 This is great. 266 266 00:18:38,240 --> 00:18:42,407 So take a break now to digest all the things you learned 267 267 00:18:43,772 --> 00:18:47,684 so far, or come with me right to the next section 268 268 00:18:47,684 --> 00:18:50,934 where we'll build our simple HTML form. 22524