Voiceover: Welcome to yet another lecture
on our killer website project.
Now it's time to build the sign-up section.
So in this section
we have three pricing plans side by side
and each of these plans
has three parts:
the price, the description and
a sign-up button.
We want a user to choose the first plan
because it's the most profitable for the company.
So it appears
as the first plan
and also at the full call-to-action button.
So the new things
we'll learn in this lecture
are how to design with CSS border radius
and how create box shadows.
All the other things we'll do in this lecture
use concepts
that you are already familiar with,
which is pretty cool.
So here we are, back in our html file
which already has more than 250 lines of code.
This is quite impressive.
So, yet another section here
which I'll call,
"section plans".
Okay.
And I will
add a url here
in which I will add
the h2 title
such as the many of the other sections.
So let me get the text for this section
in our document
and here it is.
And paste it down here.
So the title here is "Start eating healthy today".
It's actually right here.
Alright.
So I'm speeding things up a little bit
because by now you are already familiar
with most of this stuff.
So, as you saw in the sketch that I showed you before,
we have three columns here.
Where each column is a pricing plan.
So col and span one of three.
Now the question is
how are we gonna organise our codes
inside of each of these boxes.
I will now actually create
another div inside of this column
and you will later understand why
I'm doing this.
I'll call this one "plan box".
But it has a pretty good reason actually.
And as I said I will explain to you later
the importance of doing it this way.
So I as I said, each of these pricing plans
will have three sections.
So I create three divs here.
The first one is for the price.
And another one
for the details
and yet another one
for the sign-up button.
So lemme check the text here.
So the first one is the premium.
So let's copy this
and let's reuse our h3 title.
So this one is the premium.
And now we need to put the price of
399 dollars here.
So I will make a paragraph with this
and call this paragraph
"plan price".
And in this case
we have to attribute a class name to this paragraph
because we will have multiple paragraphs
and then with a class name,
it's the easiest way to select
those paragraphs later for
the CSS code.
So 399 dollars
per month
and
then the other text we have down there
and this one will be "plan price month"
for this text.
So that's the price per month.
Actually it's the price per meal so
let's change this to "meal".
Okay.
Nice.
Now we have some details here
and
as before,
I will use an unordered list
in order to show these details.
In our A-list element,
I think we should use,
an icon here
like a checkmark
and you already know where to find him.
We will again use our icon font here
and let's find,
here in our iOS-inspired icons,
a checkmark and
it's easy to find actually.
So I will take this code
and
create an icon here.
So a checkmark and then
the text that we want here.
So one meal every day.
And now we'll actually just duplicate this
with command D.
So order 24/7
and free delivery.
Okay. Great.
So this is the html for
the second section
of this pricing plan.
And now the last one.
And this one should be pretty easy because it's just
a sign-up button
and we already had that before.
So href,
again points to nowhere.
And then our class is
the button class we used before
and we want a full button
for this pricing plan.
And the text that should go here is sign-up.
Simple as that.
Sign up now.
Okay. Great.
So, I think this is
a good html structure.
So let's copy this
and paste it here two more times
for the other two.
This is pro and it's 149 per month.
So the pro is 149 per month.
And that's only 14.90 per meal.
Per meal.
Alright.
Then one meal,
ten days
or 24/7. It's the same.
And the rest is all the same.
So now here, Starter
and we have 19 per meal.
So this is a little different.
All good. Write this.
And we actually gonna have this paragraph here
because it's the price per meal is already 19 so
delete this.
Or actually not delete it.
We'll just leave to empty.
And now, right here it's just one meal.
Order from h12.
Free deliveries here.
And this one will be empty.
And since it's empty
it shouldn't have a checkmark
but we can put like a cross there,
like this here.
This will be better.
Alright, so this is our text
and I've one more thing to change here
because we had a
full button for the first pricing plan
but here want a ghost button.
I hope you remembered those.
We had them in the first section.
So let's check this out.
And here it is.
Okay.
So as you would expect
this is not yet formatted.
The only formatted things are the buttons
because we already did that before.
Such as the h3 elements
and the title as always.
So in the next lecture,
it's then time to format
the whole thing.
I,m waiting for you there.