Voiceover: Hi, let's continue working 2 2
on the sign-up section. 3 3
Let's write some more CSS code. 4 4
So, back here. 5 5
Let's start with the background color 6 6
and I will show you why. 7 7
So the first section we had was white, completely white. 8 8
And the second one had these 9 9
very subtle gray background color 10 10
then the next one was white again. 11 11
So now as you can guess, it's again time for a gray one. 12 12
So that will be the first thing to do. 13 13
And then of course, starting to build a structure 14 14
for each of these pricing plan columns. 15 15
So give here some white space, 16 16
and starting to make this look better. 17 17
So let's do that. 18 18
So this section is called section-plans. 19 19
I'll put some white space here 20 20
so we can see what's going on. 21 21
So the first thing here is a background color. 22 22
And I don't remember, so I will just copy 23 23
this one. 24 24
Now, let me check our HTML code. 25 25
So I'll start to format the plan-box here. 26 26
Let's make this plan-box white 27 27
so that it looks different than the background color 28 28
of the rest of the section. 29 29
And I will say, #fff. 30 30
And I also want to give this some rounded corners. 31 31
So, border-radius 32 32
of, let's say five pixels here. 33 33
I don't want it to be 100% of the parent width, 34 34
so I will say width, 35 35
ninety percent. 36 36
And then I will use the same technique as we used before 37 37
to center it inside of its parent. 38 38
Just to show you again, the parent of this one 39 39
is the call box. 40 40
So margin-left, 41 41
five percent, 42 42
which is half of the remaining 10% 43 43
from 90 to 100. 44 44
And now let me see this. 45 45
So this has already these rounded corners, 46 46
and it's white. 47 47
Now let's divide this into the three sections. 48 48
But first let me explain you why I put this box 49 49
into the column, such as I promised you I would explain you. 50 50
So this situation here, why I created this div 51 51
inside of the column, because if I hadn't, 52 52
I wouldn't be able to make the plan-box as wide 53 53
as I wanted it, only 90% with the white background color. 54 54
It would not have been possible to do this 55 55
by just formatting this column or adding some box here. 56 56
So this was the solution that I had to use. 57 57
So now let's section each of those subsections. 58 58
And in order to do that, I will do it like this. 59 59
Because, as we defined it, we have three divs: 60 60
this one, this one, and this one. 61 61
So I want them to have a padding 62 62
of 15 pixels each, let's say. 63 63
And what's also important is to make a 64 64
little separation between them. 65 65
We will have some border at the bottom of each of them. 66 66
So a nice little border with a very light color, 67 67
very subtle gray. 68 68
So only one pixel in a solid color, 69 69
and let's again start with white 70 70
and then use the color picker to adjust the color. 71 71
So a very subtle color here which we almost won't notice. 72 72
So for example, this one. 73 73
We will then check it, but for now we can just 74 74
format some other things as well. 75 75
Let me see what we got here. 76 76
For example, this, let's start at the beginning. 77 77
Now the HTree is already defined, 78 78
so let's continue with the plan-price. 79 79
And a plan-price, I want it to be really big. 80 80
So font size, for instance 300%. 81 81
And maybe a margin to the bottom, to that paragraph 82 82
of ten pixels. 83 83
And the next paragraph is plan-price-meal, 84 84
if you remember. 85 85
I don't know yet what to put here 86 86
so let's just look at our website. 87 87
Not bad, right? 88 88
But this looks a little bit overwhelming here. 89 89
And such as I told you, when you choose to use 90 90
very big font sizes, the best thing to do 91 91
is to actually reduce the font weight, 92 92
which is what we're gonna do. 93 93
And also we will reduce this text 94 94
so we only want this to be this big. 95 95
And there is actually an easy way to do this. 96 96
Also I think this text is a little too big here, 97 97
so let's make those changes. 98 98
So first thing I will just decrease this here 99 99
to let's say 80%. 100 100
Then we should totally decrease the font weight here 101 101
to 100. 102 102
And let me show you this, 103 103
so these are the options we have 104 104
which we included at the beginning, 105 105
100, 300, 400 and 300 italic. 106 106
So I will use this font weight which is 107 107
the lowest that we have available. 108 108
And now we want to style this per-month text 109 109
in a different way. 110 110
And I will now show you another HTML element 111 111
for doing that, 112 112
which is this one. 113 113
This is called span, and span... 114 114
has only one purpose, basically. 115 115
Its purpose is just to appear inside a paragraph, 116 116
for example, and style some text in a different way 117 117
than the rest, which is exactly what we want here. 118 118
So the same thing goes for this here, 119 119
and down here, 120 120
with the difference that it's per-meal here. 121 121
So we can now go ahead and 122 122
format this in a different way. 123 123
So we can say plan-price 124 124
and then the span inside of it 125 125
can have a different font size. 126 126
Now the thing is that this span here 127 127
is a child of this plan-price, 128 128
which has a font size of 300%. 129 129
Now if we would say font size equals 100%, 130 130
then this 100% would not be the base size of 20 pixels, 131 131
but this 300% because it is the parent font size. 132 132
So if we want a smaller font size, 133 133
we have to choose a very small number 134 134
like for instance 30%. 135 135
So, we have 30% of these 300, 136 136
and not of the initial 20 pixels. 137 137
And another thing is we want the font weight 138 138
back to 300 here, because once again, 139 139
this is the parent element, and it says 140 140
font weight is 100. 141 141
So this element will inherit that value 142 142
and so in order to put it back to 300 143 143
we have to specifically say, yeah, 144 144
we want it to be 300. 145 145
Another thing we can do here is to make this orange 146 146
to stand out even more, this plan-price. 147 147
As you remember, color should be used 148 148
to draw attention to important element, 149 149
and I think the price is pretty important here. 150 150
So I will make it orange and it will stand out this way. 151 151
Alright, so I think this first part here 152 152
really looks quite nice, isn't it? 153 153
So next let's take care of these lists here. 154 154
So we just say, plan-box ul. 155 155
And we want of course no list-style. 156 156
And now let's add some white space 157 157
between those list elements. 158 158
So this is pretty straightforward as well. 159 159
So for instance we can say we want a five pixel padding 160 160
at the top and at the bottom of each of those elements 161 161
and none on the sides. 162 162
Now as for the icons, one thing that I should have done 163 163
right from the beginning is to say that 164 164
these are small icons 165 165
with this class that we defined before. 166 166
I hope you remember that. 167 167
Since I forgot it, I will do this right now. 168 168
So all of these are small icons. 169 169
And let's check that out. 170 170
Alright, this looks nice actually. 171 171
So now let's center these one. 172 172
And I also notice one strange thing 173 173
which is since we don't have this paragraph here, 174 174
we left it empty, 175 175
this line completely disappeared. 176 176
So what we have to do is to put a space there. 177 177
So I will do that, 178 178
and where is it? 179 179
Here is the space. 180 180
And in fact adding just a simple space, just like this 181 181
will not do anything. 182 182
We have to use a special character 183 183
such as I told you before, there are those special 184 184
HTML special characters. 185 185
And for a space, it's &nbsp, 186 186
which you can find all of these 187 187
in the course ebook. 188 188
And hopefully this will solve that problem. 189 189
Let's check this, yeah it does. 190 190
So it's now an empty line. 191 191
And now let's center this button. 192 192
Should be pretty easy, 193 193
maybe a good way to doing that 194 194
is to simply select the last plan-box 195 195
and then center its content. 196 196
So we already learned that as well, 197 197
so plan-box and then the div, and then simply 198 198
select the last child. 199 199
And we say text-align: center. 200 200
Pretty easy. 201 201
And that's it. 202 202
Now you don't see those borders here 203 203
because the box is selected, let me deselect it. 204 204
Now you notice, maybe you don't see it, 205 205
but here is a gray line and it's obvious because we 206 206
define it that way, we said that 207 207
all those three divs should have these lines, 208 208
but of course the last one shouldn't, 209 209
and so we will take that away. 210 210
Another thing that we should do here, I think, 211 211
is to maybe highlight this box here 212 212
with a little gray background, 213 213
something between this darker gray and this white here. 214 214
So let's do those two things. 215 215
So first thing we want no border at all, 216 216
so border: none here in the last child. 217 217
And the first child should have a nice background color. 218 218
The secret here is to be very subtle. 219 219
We want to make a difference, but a difference that 220 220
doesn't pop out so much. 221 221
We want to be subtle because that's a great way 222 222
of doing beautiful design. 223 223
So just say, background-color, 224 224
again starting like this, 225 225
and let's choose a great background color. 226 226
This should be good, okay. 227 227
It's actually hard to see, but it makes a difference 228 228
believe me. 229 229
So now these rounded buttons are gone. 230 230
You probably don't see it because the video may be too small 231 231
but these rounded borders are really gone. 232 232
And I'm going to fix that in a moment. 233 233
And now I wanted to show you another CSS property 234 234
which is box-shadow, and we can add a nice effect here. 235 235
Once again a very subtle box shadow, 236 236
just so that I can show you how this works 237 237
because the box shadow is a very much used CSS property. 238 238
So I think it's important that you learn this as well. 239 239
So fixing those border radius, 240 240
I can say border-top-left-radius 241 241
should have also those five pixels 242 242
and border-top-right, five pixels. 243 243
And now let's add a nice box shadow to the entire box 244 244
and we will do this right here. 245 245
So it's box-shadow, and now the first value here 246 246
is for the x-axis offset. 247 247
And we don't want any of that. 248 248
Then the second one is for the y-axis offset, 249 249
and I will say two pixels here, 250 250
and now the blur I also want two pixels, 251 251
and the last value is the color. 252 252
And I will want a very subtle gray here again 253 253
which is not so visible. 254 254
I don't know, something like this maybe. 255 255
So let's see. 256 256
Now this was too dark, this was already too dark. 257 257
So once again this is designing in a browser. 258 258
We'll change the color until it looks good. 259 259
You will not see this in this video 260 260
because it's really subtle, but in your browser 261 261
you will notice it, I'm sure. 262 262
Alright, so we have one more section completed. 263 263
Our website is almost done here. 264 264
So we only have one more section and then the footer. 265 265
This is great. 266 266
So take a break now to digest all the things you learned 267 267
so far, or come with me right to the next section 268 268
where we'll build our simple HTML form.