1 00:00:01,025 --> 00:00:02,864 Welcome to yet another lecture 2 00:00:02,864 --> 00:00:05,230 on our killer website project. 3 00:00:05,230 --> 00:00:09,103 Now it's time to build the sign-up section. 4 00:00:09,103 --> 00:00:10,416 So in this section 5 00:00:10,416 --> 00:00:13,328 we have three pricing plans side by side 6 00:00:13,328 --> 00:00:14,915 and each of these plans 7 00:00:14,915 --> 00:00:16,257 has three parts: 8 00:00:16,257 --> 00:00:18,456 the price, the description and 9 00:00:18,456 --> 00:00:20,389 a sign-up button. 10 00:00:20,389 --> 00:00:22,748 We want a user to choose the first plan 11 00:00:22,748 --> 00:00:26,430 because it's the most profitable for the company. 12 00:00:26,430 --> 00:00:27,600 So it appears 13 00:00:27,600 --> 00:00:29,015 as the first plan 14 00:00:29,015 --> 00:00:32,598 and also at the full call-to-action button. 15 00:00:33,894 --> 00:00:35,231 So the new things 16 00:00:35,231 --> 00:00:37,039 we'll learn in this lecture 17 00:00:37,039 --> 00:00:40,034 are how to design with CSS border radius 18 00:00:40,034 --> 00:00:42,553 and how create box shadows. 19 00:00:42,553 --> 00:00:45,119 All the other things we'll do in this lecture 20 00:00:45,119 --> 00:00:46,191 use concepts 21 00:00:46,191 --> 00:00:48,186 that you are already familiar with, 22 00:00:48,186 --> 00:00:50,690 which is pretty cool. 23 00:00:50,690 --> 00:00:53,843 So here we are, back in our html file 24 00:00:53,843 --> 00:00:57,671 which already has more than 250 lines of code. 25 00:00:57,671 --> 00:01:00,165 This is quite impressive. 26 00:01:00,165 --> 00:01:03,214 So, yet another section here 27 00:01:03,214 --> 00:01:04,605 which I'll call, 28 00:01:04,605 --> 00:01:05,938 "section plans". 29 00:01:09,218 --> 00:01:10,051 Okay. 30 00:01:14,225 --> 00:01:15,058 And I will 31 00:01:16,536 --> 00:01:18,178 add a url here 32 00:01:18,178 --> 00:01:20,222 in which I will add 33 00:01:20,222 --> 00:01:21,222 the h2 title 34 00:01:22,580 --> 00:01:25,830 such as the many of the other sections. 35 00:01:26,772 --> 00:01:30,244 So let me get the text for this section 36 00:01:30,244 --> 00:01:31,494 in our document 37 00:01:32,421 --> 00:01:33,671 and here it is. 38 00:01:38,534 --> 00:01:40,451 And paste it down here. 39 00:01:42,544 --> 00:01:46,711 So the title here is "Start eating healthy today". 40 00:01:47,844 --> 00:01:49,927 It's actually right here. 41 00:01:50,903 --> 00:01:51,736 Alright. 42 00:01:53,642 --> 00:01:55,699 So I'm speeding things up a little bit 43 00:01:55,699 --> 00:01:59,189 because by now you are already familiar 44 00:01:59,189 --> 00:02:01,214 with most of this stuff. 45 00:02:01,214 --> 00:02:05,721 So, as you saw in the sketch that I showed you before, 46 00:02:05,721 --> 00:02:07,971 we have three columns here. 47 00:02:10,297 --> 00:02:12,372 Where each column is a pricing plan. 48 00:02:12,372 --> 00:02:14,789 So col and span one of three. 49 00:02:19,438 --> 00:02:20,504 Now the question is 50 00:02:20,504 --> 00:02:22,979 how are we gonna organise our codes 51 00:02:22,979 --> 00:02:25,479 inside of each of these boxes. 52 00:02:27,553 --> 00:02:29,239 I will now actually create 53 00:02:29,239 --> 00:02:31,989 another div inside of this column 54 00:02:32,984 --> 00:02:34,512 and you will later understand why 55 00:02:34,512 --> 00:02:36,384 I'm doing this. 56 00:02:36,384 --> 00:02:39,226 I'll call this one "plan box". 57 00:02:39,226 --> 00:02:42,636 But it has a pretty good reason actually. 58 00:02:42,636 --> 00:02:45,025 And as I said I will explain to you later 59 00:02:45,025 --> 00:02:47,775 the importance of doing it this way. 60 00:02:47,775 --> 00:02:51,860 So I as I said, each of these pricing plans 61 00:02:51,860 --> 00:02:53,798 will have three sections. 62 00:02:53,798 --> 00:02:56,131 So I create three divs here. 63 00:02:57,134 --> 00:02:59,717 The first one is for the price. 64 00:03:00,767 --> 00:03:01,600 And another one 65 00:03:01,600 --> 00:03:03,529 for the details 66 00:03:03,529 --> 00:03:05,379 and yet another one 67 00:03:05,379 --> 00:03:07,296 for the sign-up button. 68 00:03:08,952 --> 00:03:11,759 So lemme check the text here. 69 00:03:11,759 --> 00:03:14,403 So the first one is the premium. 70 00:03:14,403 --> 00:03:15,903 So let's copy this 71 00:03:16,823 --> 00:03:19,240 and let's reuse our h3 title. 72 00:03:21,651 --> 00:03:23,713 So this one is the premium. 73 00:03:23,713 --> 00:03:25,744 And now we need to put the price of 74 00:03:25,744 --> 00:03:27,161 399 dollars here. 75 00:03:28,592 --> 00:03:31,656 So I will make a paragraph with this 76 00:03:31,656 --> 00:03:33,997 and call this paragraph 77 00:03:33,997 --> 00:03:35,080 "plan price". 78 00:03:36,337 --> 00:03:37,670 And in this case 79 00:03:39,287 --> 00:03:42,345 we have to attribute a class name to this paragraph 80 00:03:42,345 --> 00:03:44,931 because we will have multiple paragraphs 81 00:03:44,931 --> 00:03:47,054 and then with a class name, 82 00:03:47,054 --> 00:03:49,554 it's the easiest way to select 83 00:03:50,661 --> 00:03:52,325 those paragraphs later for 84 00:03:52,325 --> 00:03:53,813 the CSS code. 85 00:03:53,813 --> 00:03:54,980 So 399 dollars 86 00:03:56,421 --> 00:03:57,254 per month 87 00:03:59,829 --> 00:04:00,662 and 88 00:04:02,478 --> 00:04:06,008 then the other text we have down there 89 00:04:06,008 --> 00:04:09,258 and this one will be "plan price month" 90 00:04:12,818 --> 00:04:13,985 for this text. 91 00:04:15,254 --> 00:04:18,461 So that's the price per month. 92 00:04:18,461 --> 00:04:20,786 Actually it's the price per meal so 93 00:04:20,786 --> 00:04:23,119 let's change this to "meal". 94 00:04:25,204 --> 00:04:26,037 Okay. 95 00:04:26,037 --> 00:04:26,870 Nice. 96 00:04:28,141 --> 00:04:30,667 Now we have some details here 97 00:04:30,667 --> 00:04:32,241 and 98 00:04:32,241 --> 00:04:33,447 as before, 99 00:04:33,447 --> 00:04:36,052 I will use an unordered list 100 00:04:36,052 --> 00:04:38,635 in order to show these details. 101 00:04:39,501 --> 00:04:41,623 In our A-list element, 102 00:04:41,623 --> 00:04:42,879 I think we should use, 103 00:04:42,879 --> 00:04:44,091 an icon here 104 00:04:44,091 --> 00:04:45,424 like a checkmark 105 00:04:46,273 --> 00:04:50,158 and you already know where to find him. 106 00:04:50,158 --> 00:04:52,954 We will again use our icon font here 107 00:04:52,954 --> 00:04:54,531 and let's find, 108 00:04:54,531 --> 00:04:56,906 here in our iOS-inspired icons, 109 00:04:56,906 --> 00:04:58,914 a checkmark and 110 00:04:58,914 --> 00:05:01,163 it's easy to find actually. 111 00:05:01,163 --> 00:05:03,163 So I will take this code 112 00:05:04,210 --> 00:05:05,043 and 113 00:05:07,604 --> 00:05:09,271 create an icon here. 114 00:05:12,598 --> 00:05:14,515 So a checkmark and then 115 00:05:15,466 --> 00:05:17,716 the text that we want here. 116 00:05:18,792 --> 00:05:20,625 So one meal every day. 117 00:05:23,137 --> 00:05:26,103 And now we'll actually just duplicate this 118 00:05:26,103 --> 00:05:27,353 with command D. 119 00:05:31,410 --> 00:05:33,410 So order 24/7 120 00:05:42,405 --> 00:05:43,905 and free delivery. 121 00:05:48,136 --> 00:05:49,136 Okay. Great. 122 00:05:50,264 --> 00:05:52,181 So this is the html for 123 00:05:53,097 --> 00:05:54,978 the second section 124 00:05:54,978 --> 00:05:57,085 of this pricing plan. 125 00:05:57,085 --> 00:05:57,985 And now the last one. 126 00:05:57,985 --> 00:06:00,853 And this one should be pretty easy because it's just 127 00:06:00,853 --> 00:06:02,186 a sign-up button 128 00:06:03,164 --> 00:06:06,102 and we already had that before. 129 00:06:06,102 --> 00:06:07,519 So href, 130 00:06:07,519 --> 00:06:09,358 again points to nowhere. 131 00:06:09,358 --> 00:06:11,108 And then our class is 132 00:06:11,944 --> 00:06:14,180 the button class we used before 133 00:06:14,180 --> 00:06:16,746 and we want a full button 134 00:06:16,746 --> 00:06:18,579 for this pricing plan. 135 00:06:20,948 --> 00:06:24,007 And the text that should go here is sign-up. 136 00:06:24,007 --> 00:06:25,820 Simple as that. 137 00:06:25,820 --> 00:06:26,820 Sign up now. 138 00:06:28,726 --> 00:06:30,220 Okay. Great. 139 00:06:30,220 --> 00:06:31,803 So, I think this is 140 00:06:33,639 --> 00:06:35,472 a good html structure. 141 00:06:36,981 --> 00:06:38,481 So let's copy this 142 00:06:40,250 --> 00:06:42,917 and paste it here two more times 143 00:06:45,793 --> 00:06:48,015 for the other two. 144 00:06:48,015 --> 00:06:50,932 This is pro and it's 149 per month. 145 00:06:52,044 --> 00:06:54,377 So the pro is 149 per month. 146 00:06:56,846 --> 00:06:59,429 And that's only 14.90 per meal. 147 00:07:08,575 --> 00:07:09,854 Per meal. 148 00:07:09,854 --> 00:07:10,687 Alright. 149 00:07:18,540 --> 00:07:19,707 Then one meal, 150 00:07:21,583 --> 00:07:22,416 ten days 151 00:07:29,937 --> 00:07:32,864 or 24/7. It's the same. 152 00:07:32,864 --> 00:07:35,281 And the rest is all the same. 153 00:07:37,065 --> 00:07:38,732 So now here, Starter 154 00:07:41,795 --> 00:07:43,795 and we have 19 per meal. 155 00:07:47,757 --> 00:07:50,257 So this is a little different. 156 00:07:54,017 --> 00:07:55,767 All good. Write this. 157 00:07:59,301 --> 00:08:03,134 And we actually gonna have this paragraph here 158 00:08:04,094 --> 00:08:08,094 because it's the price per meal is already 19 so 159 00:08:10,559 --> 00:08:12,017 delete this. 160 00:08:12,017 --> 00:08:14,385 Or actually not delete it. 161 00:08:14,385 --> 00:08:16,552 We'll just leave to empty. 162 00:08:19,707 --> 00:08:22,957 And now, right here it's just one meal. 163 00:08:24,899 --> 00:08:26,149 Order from h12. 164 00:08:31,856 --> 00:08:34,048 Free deliveries here. 165 00:08:34,048 --> 00:08:36,298 And this one will be empty. 166 00:08:39,054 --> 00:08:40,493 And since it's empty 167 00:08:40,493 --> 00:08:42,481 it shouldn't have a checkmark 168 00:08:42,481 --> 00:08:45,314 but we can put like a cross there, 169 00:08:46,800 --> 00:08:48,050 like this here. 170 00:08:52,954 --> 00:08:54,621 This will be better. 171 00:08:55,911 --> 00:08:58,244 Alright, so this is our text 172 00:08:59,799 --> 00:09:02,203 and I've one more thing to change here 173 00:09:02,203 --> 00:09:03,536 because we had a 174 00:09:05,630 --> 00:09:09,213 full button for the first pricing plan 175 00:09:09,213 --> 00:09:11,630 but here want a ghost button. 176 00:09:13,821 --> 00:09:15,744 I hope you remembered those. 177 00:09:15,744 --> 00:09:18,440 We had them in the first section. 178 00:09:18,440 --> 00:09:20,440 So let's check this out. 179 00:09:23,195 --> 00:09:24,445 And here it is. 180 00:09:26,162 --> 00:09:26,995 Okay. 181 00:09:28,252 --> 00:09:29,620 So as you would expect 182 00:09:29,620 --> 00:09:31,689 this is not yet formatted. 183 00:09:31,689 --> 00:09:33,434 The only formatted things are the buttons 184 00:09:33,434 --> 00:09:35,775 because we already did that before. 185 00:09:35,775 --> 00:09:37,790 Such as the h3 elements 186 00:09:37,790 --> 00:09:39,790 and the title as always. 187 00:09:41,269 --> 00:09:42,366 So in the next lecture, 188 00:09:42,366 --> 00:09:44,316 it's then time to format 189 00:09:44,316 --> 00:09:46,088 the whole thing. 190 00:09:46,088 --> 00:09:48,255 I,m waiting for you there.