1 00:00:03,260 --> 00:00:08,650 It's time to move on to the second assignment in this course. 2 00:00:08,650 --> 00:00:13,599 This week we had covered buttons, forms, 3 00:00:13,599 --> 00:00:20,095 tables, cards, images, and media and then finally we covered badge. 4 00:00:20,095 --> 00:00:23,870 So, this assignment we'll look at trying 5 00:00:23,870 --> 00:00:29,780 to explore your understanding of all these topics. 6 00:00:30,010 --> 00:00:33,920 Your second assignment consists of three tasks. 7 00:00:33,920 --> 00:00:37,120 Let's go through each one of them step by step. 8 00:00:37,120 --> 00:00:44,160 Your first task is to create a form in your index strategy table pitch. 9 00:00:44,160 --> 00:00:48,110 So, this is right after the descriptions that we have so 10 00:00:48,110 --> 00:00:53,345 use another row with the row content there. 11 00:00:53,345 --> 00:00:57,850 Create a card in there with a title. 12 00:00:57,850 --> 00:01:01,065 Reserve a table, and then inside that card, 13 00:01:01,065 --> 00:01:04,460 in the card block, include a form. 14 00:01:04,460 --> 00:01:08,095 The form will contain radio buttons. 15 00:01:08,095 --> 00:01:13,280 You can check the documentation for forms to understand how to create radio buttons. 16 00:01:13,280 --> 00:01:14,620 They are fairly straightforward. 17 00:01:14,620 --> 00:01:19,100 So, we have inline radio buttons all the way ranging from one to 18 00:01:19,100 --> 00:01:25,400 six and you will allow the user to select any one of these radio buttons. 19 00:01:25,400 --> 00:01:26,780 So clicking on one of them, 20 00:01:26,780 --> 00:01:29,455 will allow you to select the number of guests. 21 00:01:29,455 --> 00:01:32,900 And the second piece of information is date, 22 00:01:32,900 --> 00:01:35,055 and the third piece of information is time. 23 00:01:35,055 --> 00:01:40,480 So, the date and time are going to be supported by two input fields 24 00:01:40,480 --> 00:01:44,040 here and then we have a submit button here named 25 00:01:44,040 --> 00:01:47,955 "reserve" with the button being in blue color. 26 00:01:47,955 --> 00:01:52,855 So, remember all these different details here and this is in a card. 27 00:01:52,855 --> 00:01:59,980 Now, this card if it is on a small to extra large screen size, 28 00:01:59,980 --> 00:02:08,000 it will be centered in this row and it will occupy eight columns. 29 00:02:08,000 --> 00:02:11,180 So you have two columns left here and two columns left there. 30 00:02:11,180 --> 00:02:14,915 These are some clues about how you're going to position this. 31 00:02:14,915 --> 00:02:17,020 For extra small screen sizes, 32 00:02:17,020 --> 00:02:20,900 you occupy the entire screen width, 33 00:02:20,900 --> 00:02:25,670 otherwise your form cannot be accommodated meaningfully there. 34 00:02:25,670 --> 00:02:31,505 So, that's the first task in your second assignment. 35 00:02:31,505 --> 00:02:38,285 If you recall, the left the second draw of our content unstyled, 36 00:02:38,285 --> 00:02:41,980 you're going to use the media object now to style this content. 37 00:02:41,980 --> 00:02:43,790 Note in particular that, 38 00:02:43,790 --> 00:02:47,460 for the media object your image is going to appear on the right side, 39 00:02:47,460 --> 00:02:50,365 so use the right set of 40 00:02:50,365 --> 00:02:55,800 classes in order to make your image appear to the right side of the content, 41 00:02:55,800 --> 00:03:00,275 unlike the other ones where the image appears on the left side. 42 00:03:00,275 --> 00:03:02,930 And it has to be centered vertically here. 43 00:03:02,930 --> 00:03:08,665 Also, note that you need to include a badge here with the word "new." 44 00:03:08,665 --> 00:03:11,530 And so we have seen this already in 45 00:03:11,530 --> 00:03:15,025 the exercise before so this should not be very difficult to achieve. 46 00:03:15,025 --> 00:03:16,780 So, your second task, again, 47 00:03:16,780 --> 00:03:21,030 is to use the media object to style this through. 48 00:03:21,030 --> 00:03:24,545 The final task in the second assignment, 49 00:03:24,545 --> 00:03:27,455 is to create a button here. 50 00:03:27,455 --> 00:03:29,735 This would be a block button. 51 00:03:29,735 --> 00:03:32,635 So, button block class which you're going to use. 52 00:03:32,635 --> 00:03:38,430 Now, what you can do is you can reposition this content 53 00:03:38,430 --> 00:03:41,170 here to occupy half the screen and 54 00:03:41,170 --> 00:03:44,770 then these two will like the remaining part of the screen. 55 00:03:44,770 --> 00:03:47,910 And use the words reserve table in there. 56 00:03:47,910 --> 00:03:50,815 Not only that, when you click on this button, 57 00:03:50,815 --> 00:03:55,085 you'll be taken down to the form at the bottom of the page, 58 00:03:55,085 --> 00:03:57,340 which allows you to do the reservation. 59 00:03:57,340 --> 00:04:01,150 So, this is where you need to use the HTML ways of 60 00:04:01,150 --> 00:04:05,695 specifying IDs in order to achieve this action. 61 00:04:05,695 --> 00:04:12,940 So going back again, this button should be positioned vertically in 62 00:04:12,940 --> 00:04:21,610 table and should share the screen space half with your logo here. 63 00:04:21,610 --> 00:04:25,550 The wordings here can occupy the remaining half of the scripts. 64 00:04:25,550 --> 00:04:30,930 So you can use the column classes to adjust these things.