Voiceover: Welcome to yet another lecture 2 2
on our killer website project. 3 3
Now it's time to build the sign-up section. 4 4
So in this section 5 5
we have three pricing plans side by side 6 6
and each of these plans 7 7
has three parts: 8 8
the price, the description and 9 9
a sign-up button. 10 10
We want a user to choose the first plan 11 11
because it's the most profitable for the company. 12 12
So it appears 13 13
as the first plan 14 14
and also at the full call-to-action button. 15 15
So the new things 16 16
we'll learn in this lecture 17 17
are how to design with CSS border radius 18 18
and how create box shadows. 19 19
All the other things we'll do in this lecture 20 20
use concepts 21 21
that you are already familiar with, 22 22
which is pretty cool. 23 23
So here we are, back in our html file 24 24
which already has more than 250 lines of code. 25 25
This is quite impressive. 26 26
So, yet another section here 27 27
which I'll call, 28 28
"section plans". 29 29
Okay. 30 30
And I will 31 31
add a url here 32 32
in which I will add 33 33
the h2 title 34 34
such as the many of the other sections. 35 35
So let me get the text for this section 36 36
in our document 37 37
and here it is. 38 38
And paste it down here. 39 39
So the title here is "Start eating healthy today". 40 40
It's actually right here. 41 41
Alright. 42 42
So I'm speeding things up a little bit 43 43
because by now you are already familiar 44 44
with most of this stuff. 45 45
So, as you saw in the sketch that I showed you before, 46 46
we have three columns here. 47 47
Where each column is a pricing plan. 48 48
So col and span one of three. 49 49
Now the question is 50 50
how are we gonna organise our codes 51 51
inside of each of these boxes. 52 52
I will now actually create 53 53
another div inside of this column 54 54
and you will later understand why 55 55
I'm doing this. 56 56
I'll call this one "plan box". 57 57
But it has a pretty good reason actually. 58 58
And as I said I will explain to you later 59 59
the importance of doing it this way. 60 60
So I as I said, each of these pricing plans 61 61
will have three sections. 62 62
So I create three divs here. 63 63
The first one is for the price. 64 64
And another one 65 65
for the details 66 66
and yet another one 67 67
for the sign-up button. 68 68
So lemme check the text here. 69 69
So the first one is the premium. 70 70
So let's copy this 71 71
and let's reuse our h3 title. 72 72
So this one is the premium. 73 73
And now we need to put the price of 74 74
399 dollars here. 75 75
So I will make a paragraph with this 76 76
and call this paragraph 77 77
"plan price". 78 78
And in this case 79 79
we have to attribute a class name to this paragraph 80 80
because we will have multiple paragraphs 81 81
and then with a class name, 82 82
it's the easiest way to select 83 83
those paragraphs later for 84 84
the CSS code. 85 85
So 399 dollars 86 86
per month 87 87
and 88 88
then the other text we have down there 89 89
and this one will be "plan price month" 90 90
for this text. 91 91
So that's the price per month. 92 92
Actually it's the price per meal so 93 93
let's change this to "meal". 94 94
Okay. 95 95
Nice. 96 96
Now we have some details here 97 97
and 98 98
as before, 99 99
I will use an unordered list 100 100
in order to show these details. 101 101
In our A-list element, 102 102
I think we should use, 103 103
an icon here 104 104
like a checkmark 105 105
and you already know where to find him. 106 106
We will again use our icon font here 107 107
and let's find, 108 108
here in our iOS-inspired icons, 109 109
a checkmark and 110 110
it's easy to find actually. 111 111
So I will take this code 112 112
and 113 113
create an icon here. 114 114
So a checkmark and then 115 115
the text that we want here. 116 116
So one meal every day. 117 117
And now we'll actually just duplicate this 118 118
with command D. 119 119
So order 24/7 120 120
and free delivery. 121 121
Okay. Great. 122 122
So this is the html for 123 123
the second section 124 124
of this pricing plan. 125 125
And now the last one. 126 126
And this one should be pretty easy because it's just 127 127
a sign-up button 128 128
and we already had that before. 129 129
So href, 130 130
again points to nowhere. 131 131
And then our class is 132 132
the button class we used before 133 133
and we want a full button 134 134
for this pricing plan. 135 135
And the text that should go here is sign-up. 136 136
Simple as that. 137 137
Sign up now. 138 138
Okay. Great. 139 139
So, I think this is 140 140
a good html structure. 141 141
So let's copy this 142 142
and paste it here two more times 143 143
for the other two. 144 144
This is pro and it's 149 per month. 145 145
So the pro is 149 per month. 146 146
And that's only 14.90 per meal. 147 147
Per meal. 148 148
Alright. 149 149
Then one meal, 150 150
ten days 151 151
or 24/7. It's the same. 152 152
And the rest is all the same. 153 153
So now here, Starter 154 154
and we have 19 per meal. 155 155
So this is a little different. 156 156
All good. Write this. 157 157
And we actually gonna have this paragraph here 158 158
because it's the price per meal is already 19 so 159 159
delete this. 160 160
Or actually not delete it. 161 161
We'll just leave to empty. 162 162
And now, right here it's just one meal. 163 163
Order from h12. 164 164
Free deliveries here. 165 165
And this one will be empty. 166 166
And since it's empty 167 167
it shouldn't have a checkmark 168 168
but we can put like a cross there, 169 169
like this here. 170 170
This will be better. 171 171
Alright, so this is our text 172 172
and I've one more thing to change here 173 173
because we had a 174 174
full button for the first pricing plan 175 175
but here want a ghost button. 176 176
I hope you remembered those. 177 177
We had them in the first section. 178 178
So let's check this out. 179 179
And here it is. 180 180
Okay. 181 181
So as you would expect 182 182
this is not yet formatted. 183 183
The only formatted things are the buttons 184 184
because we already did that before. 185 185
Such as the h3 elements 186 186
and the title as always. 187 187
So in the next lecture, 188 188
it's then time to format 189 189
the whole thing. 190 190
I,m waiting for you there.