Voiceover: Hi, let's continue working
on the sign-up section.
Let's write some more CSS code.
So, back here.
Let's start with the background color
and I will show you why.
So the first section we had was white, completely white.
And the second one had these
very subtle gray background color
then the next one was white again.
So now as you can guess, it's again time for a gray one.
So that will be the first thing to do.
And then of course, starting to build a structure
for each of these pricing plan columns.
So give here some white space,
and starting to make this look better.
So let's do that.
So this section is called section-plans.
I'll put some white space here
so we can see what's going on.
So the first thing here is a background color.
And I don't remember, so I will just copy
this one.
Now, let me check our HTML code.
So I'll start to format the plan-box here.
Let's make this plan-box white
so that it looks different than the background color
of the rest of the section.
And I will say, #fff.
And I also want to give this some rounded corners.
So, border-radius
of, let's say five pixels here.
I don't want it to be 100% of the parent width,
so I will say width,
ninety percent.
And then I will use the same technique as we used before
to center it inside of its parent.
Just to show you again, the parent of this one
is the call box.
So margin-left,
five percent,
which is half of the remaining 10%
from 90 to 100.
And now let me see this.
So this has already these rounded corners,
and it's white.
Now let's divide this into the three sections.
But first let me explain you why I put this box
into the column, such as I promised you I would explain you.
So this situation here, why I created this div
inside of the column, because if I hadn't,
I wouldn't be able to make the plan-box as wide
as I wanted it, only 90% with the white background color.
It would not have been possible to do this
by just formatting this column or adding some box here.
So this was the solution that I had to use.
So now let's section each of those subsections.
And in order to do that, I will do it like this.
Because, as we defined it, we have three divs:
this one, this one, and this one.
So I want them to have a padding
of 15 pixels each, let's say.
And what's also important is to make a
little separation between them.
We will have some border at the bottom of each of them.
So a nice little border with a very light color,
very subtle gray.
So only one pixel in a solid color,
and let's again start with white
and then use the color picker to adjust the color.
So a very subtle color here which we almost won't notice.
So for example, this one.
We will then check it, but for now we can just
format some other things as well.
Let me see what we got here.
For example, this, let's start at the beginning.
Now the HTree is already defined,
so let's continue with the plan-price.
And a plan-price, I want it to be really big.
So font size, for instance 300%.
And maybe a margin to the bottom, to that paragraph
of ten pixels.
And the next paragraph is plan-price-meal,
if you remember.
I don't know yet what to put here
so let's just look at our website.
Not bad, right?
But this looks a little bit overwhelming here.
And such as I told you, when you choose to use
very big font sizes, the best thing to do
is to actually reduce the font weight,
which is what we're gonna do.
And also we will reduce this text
so we only want this to be this big.
And there is actually an easy way to do this.
Also I think this text is a little too big here,
so let's make those changes.
So first thing I will just decrease this here
to let's say 80%.
Then we should totally decrease the font weight here
to 100.
And let me show you this,
so these are the options we have
which we included at the beginning,
100, 300, 400 and 300 italic.
So I will use this font weight which is
the lowest that we have available.
And now we want to style this per-month text
in a different way.
And I will now show you another HTML element
for doing that,
which is this one.
This is called span, and span...
has only one purpose, basically.
Its purpose is just to appear inside a paragraph,
for example, and style some text in a different way
than the rest, which is exactly what we want here.
So the same thing goes for this here,
and down here,
with the difference that it's per-meal here.
So we can now go ahead and
format this in a different way.
So we can say plan-price
and then the span inside of it
can have a different font size.
Now the thing is that this span here
is a child of this plan-price,
which has a font size of 300%.
Now if we would say font size equals 100%,
then this 100% would not be the base size of 20 pixels,
but this 300% because it is the parent font size.
So if we want a smaller font size,
we have to choose a very small number
like for instance 30%.
So, we have 30% of these 300,
and not of the initial 20 pixels.
And another thing is we want the font weight
back to 300 here, because once again,
this is the parent element, and it says
font weight is 100.
So this element will inherit that value
and so in order to put it back to 300
we have to specifically say, yeah,
we want it to be 300.
Another thing we can do here is to make this orange
to stand out even more, this plan-price.
As you remember, color should be used
to draw attention to important element,
and I think the price is pretty important here.
So I will make it orange and it will stand out this way.
Alright, so I think this first part here
really looks quite nice, isn't it?
So next let's take care of these lists here.
So we just say, plan-box ul.
And we want of course no list-style.
And now let's add some white space
between those list elements.
So this is pretty straightforward as well.
So for instance we can say we want a five pixel padding
at the top and at the bottom of each of those elements
and none on the sides.
Now as for the icons, one thing that I should have done
right from the beginning is to say that
these are small icons
with this class that we defined before.
I hope you remember that.
Since I forgot it, I will do this right now.
So all of these are small icons.
And let's check that out.
Alright, this looks nice actually.
So now let's center these one.
And I also notice one strange thing
which is since we don't have this paragraph here,
we left it empty,
this line completely disappeared.
So what we have to do is to put a space there.
So I will do that,
and where is it?
Here is the space.
And in fact adding just a simple space, just like this
will not do anything.
We have to use a special character
such as I told you before, there are those special
HTML special characters.
And for a space, it's &nbsp,
which you can find all of these
in the course ebook.
And hopefully this will solve that problem.
Let's check this, yeah it does.
So it's now an empty line.
And now let's center this button.
Should be pretty easy,
maybe a good way to doing that
is to simply select the last plan-box
and then center its content.
So we already learned that as well,
so plan-box and then the div, and then simply
select the last child.
And we say text-align: center.
Pretty easy.
And that's it.
Now you don't see those borders here
because the box is selected, let me deselect it.
Now you notice, maybe you don't see it,
but here is a gray line and it's obvious because we
define it that way, we said that
all those three divs should have these lines,
but of course the last one shouldn't,
and so we will take that away.
Another thing that we should do here, I think,
is to maybe highlight this box here
with a little gray background,
something between this darker gray and this white here.
So let's do those two things.
So first thing we want no border at all,
so border: none here in the last child.
And the first child should have a nice background color.
The secret here is to be very subtle.
We want to make a difference, but a difference that
doesn't pop out so much.
We want to be subtle because that's a great way
of doing beautiful design.
So just say, background-color,
again starting like this,
and let's choose a great background color.
This should be good, okay.
It's actually hard to see, but it makes a difference
believe me.
So now these rounded buttons are gone.
You probably don't see it because the video may be too small
but these rounded borders are really gone.
And I'm going to fix that in a moment.
And now I wanted to show you another CSS property
which is box-shadow, and we can add a nice effect here.
Once again a very subtle box shadow,
just so that I can show you how this works
because the box shadow is a very much used CSS property.
So I think it's important that you learn this as well.
So fixing those border radius,
I can say border-top-left-radius
should have also those five pixels
and border-top-right, five pixels.
And now let's add a nice box shadow to the entire box
and we will do this right here.
So it's box-shadow, and now the first value here
is for the x-axis offset.
And we don't want any of that.
Then the second one is for the y-axis offset,
and I will say two pixels here,
and now the blur I also want two pixels,
and the last value is the color.
And I will want a very subtle gray here again
which is not so visible.
I don't know, something like this maybe.
So let's see.
Now this was too dark, this was already too dark.
So once again this is designing in a browser.
We'll change the color until it looks good.
You will not see this in this video
because it's really subtle, but in your browser
you will notice it, I'm sure.
Alright, so we have one more section completed.
Our website is almost done here.
So we only have one more section and then the footer.
This is great.
So take a break now to digest all the things you learned
so far, or come with me right to the next section
where we'll build our simple HTML form.