1 00:00:00,270 --> 00:00:01,530 Hello, everyone, and welcome. 2 00:00:01,860 --> 00:00:06,840 So now that we have completed the menu page and rendering the menu data like double mapping the data, 3 00:00:07,380 --> 00:00:13,110 and now we'll create about page and the contact page or the contact us page for that. 4 00:00:13,110 --> 00:00:15,660 First of all, we'll create the page door. 5 00:00:15,670 --> 00:00:22,080 Just like in the Pages folder, we'll create the file, which will be about our tests. 6 00:00:23,230 --> 00:00:29,280 OK, and then we'll use our trick to just import the boilerplate code. 7 00:00:30,030 --> 00:00:30,750 So. 8 00:00:31,960 --> 00:00:37,510 So we'll remove this, Dave, from here, and we'll create our own day with another class name. 9 00:00:37,600 --> 00:00:39,850 So that will be about. 10 00:00:40,860 --> 00:00:42,180 The next two will be. 11 00:00:43,620 --> 00:00:45,150 About stop. 12 00:00:45,360 --> 00:00:49,860 So this will be the top part, and here will be basically around the image. 13 00:00:50,190 --> 00:00:52,590 Next, we have about. 14 00:00:54,900 --> 00:00:55,320 Bottom. 15 00:00:58,640 --> 00:01:04,280 It's about top will be having an image, so we'll use that method to import that made, first of all, 16 00:01:04,280 --> 00:01:08,240 will import damage before are maybe. 17 00:01:10,100 --> 00:01:10,610 About. 18 00:01:12,160 --> 00:01:12,780 Image. 19 00:01:13,610 --> 00:01:14,090 From. 20 00:01:15,230 --> 00:01:16,300 From the SARS. 21 00:01:17,640 --> 00:01:23,730 Then when we go to about dark EPG, let me check what's the name? 22 00:01:24,280 --> 00:01:25,950 OK, that's about our jpg. 23 00:01:26,860 --> 00:01:27,520 We were right. 24 00:01:28,000 --> 00:01:32,470 Okay, so let's save this and wondering that's say, weird, so OK. 25 00:01:32,470 --> 00:01:35,260 So in the amount of we'll be providing the story, Doug. 26 00:01:37,360 --> 00:01:42,370 And inside the storage tank will be providing the source of the. 27 00:01:44,250 --> 00:01:46,740 You know, the source of the image, right? 28 00:01:47,070 --> 00:01:52,380 So it would be something like this and then we have a dollar sign here, then collaborators and then 29 00:01:52,380 --> 00:01:55,170 the name of the image. 30 00:01:57,090 --> 00:01:57,780 How about image? 31 00:01:59,000 --> 00:01:59,330 OK. 32 00:02:00,280 --> 00:02:00,850 So. 33 00:02:02,170 --> 00:02:04,210 This is something like this and. 34 00:02:07,150 --> 00:02:10,090 We made a mistake, we did not provide the background image. 35 00:02:11,030 --> 00:02:12,170 Back down. 36 00:02:13,130 --> 00:02:13,730 Image. 37 00:02:15,420 --> 00:02:18,720 Yeah, that's why it was green, right? 38 00:02:19,350 --> 00:02:22,860 OK, now in about what time we'll be having an H1. 39 00:02:25,750 --> 00:02:29,290 Which basically tells about. 40 00:02:30,550 --> 00:02:36,130 US next will be having tag in the bag. 41 00:02:36,640 --> 00:02:45,970 We'll be posting the some some dummy text, so that will just be some kind of thing. 42 00:02:46,720 --> 00:02:54,190 So we just save it and now we'll create the CSIS file for about. 43 00:02:56,000 --> 00:03:03,840 Or we can just first see if you're rendering open opener, so we'll go to afterwards and we'll read. 44 00:03:05,000 --> 00:03:06,440 You can just copy this. 45 00:03:08,160 --> 00:03:08,680 Downhill. 46 00:03:09,090 --> 00:03:10,010 We'll see. 47 00:03:11,900 --> 00:03:14,150 About and have will say. 48 00:03:20,950 --> 00:03:23,900 Found and it auto imports, OK? 49 00:03:23,920 --> 00:03:26,360 That's a very good thing, you're not on board today. 50 00:03:28,030 --> 00:03:35,980 So let's just go to the browser and see if this works, so let's just, you know, you talk about. 51 00:03:37,190 --> 00:03:38,740 OK, it works about. 52 00:03:39,050 --> 00:03:40,640 And this is working. 53 00:03:41,000 --> 00:03:44,320 We can't see the image exactly now, so we'll figure it out. 54 00:03:44,330 --> 00:03:45,530 Why even are seeing that image? 55 00:03:46,460 --> 00:03:56,240 Let's just go to the about again, why we're not seeing the image about image and there is the link 56 00:03:56,660 --> 00:04:03,890 to it to why we are not able to see about a site about of fear and bring it. 57 00:04:05,180 --> 00:04:11,300 So then take it on an image is fine, but the way it's not, then maybe there's some issue. 58 00:04:12,020 --> 00:04:14,000 Maybe it will render once we. 59 00:04:15,450 --> 00:04:22,880 Once we forward the CSV file, so there's no issue with that, so let's create this file for this scope 60 00:04:22,890 --> 00:04:28,530 of styles, and we'll click on the file, which will be about to CSIS. 61 00:04:30,310 --> 00:04:39,630 So in about CSIS will be providing the CSIS to the about section, which will be important inside the 62 00:04:40,540 --> 00:04:43,810 about election, who will be asked to CSIS who? 63 00:04:45,130 --> 00:04:49,190 It's a very small CSIS, and it's nothing great in it. 64 00:04:49,240 --> 00:04:50,830 So we'll just have a look at this. 65 00:04:51,220 --> 00:04:53,140 There's a basic normal course. 66 00:04:53,140 --> 00:04:54,870 There's nothing new here. 67 00:04:54,890 --> 00:04:58,800 We are more focusing on reactor rather than see us as the Moon. 68 00:04:58,810 --> 00:05:02,360 The main motive is to learn, react to the concept of reactor. 69 00:05:02,440 --> 00:05:03,970 So we'll just import this year. 70 00:05:06,040 --> 00:05:06,670 Import. 71 00:05:07,830 --> 00:05:09,140 And just provide the. 72 00:05:10,300 --> 00:05:10,720 But. 73 00:05:12,870 --> 00:05:13,520 To the. 74 00:05:14,930 --> 00:05:18,380 Satisfied about our costs, we could save. 75 00:05:21,580 --> 00:05:23,800 And we go to the browser. 76 00:05:26,290 --> 00:05:32,830 And you can see we are seeing that image as well as the text as well as the information, or you can 77 00:05:32,830 --> 00:05:35,020 aggregate and put any information you want. 78 00:05:35,660 --> 00:05:40,810 So, OK, so we are done with about page right now this link to our blog, what will make them work? 79 00:05:41,380 --> 00:05:46,570 Now let's go back to accord and let's create a contact page. 80 00:05:47,440 --> 00:05:54,220 So in the contact page, we'll be having an image and we'll be having a form. 81 00:05:54,700 --> 00:05:57,670 So first of all, let's create a contact page in this. 82 00:05:58,240 --> 00:05:58,960 That will be. 83 00:06:00,410 --> 00:06:02,410 Contact don't miss. 84 00:06:03,350 --> 00:06:04,340 We lose our trick. 85 00:06:06,380 --> 00:06:07,370 Are AFC? 86 00:06:07,980 --> 00:06:09,950 And that's it. 87 00:06:10,470 --> 00:06:17,240 The first there will be contact who will create their own lives, so that will be on tap. 88 00:06:18,530 --> 00:06:22,400 And that will be having a left side and a right side. 89 00:06:22,640 --> 00:06:26,070 So on the left side will be having the image. 90 00:06:26,080 --> 00:06:34,610 So we'll create a a left side and we'll just name it left side just to see if it's around. 91 00:06:34,880 --> 00:06:40,950 Later on, we'll forget it and then we will have the right side of the. 92 00:06:42,860 --> 00:06:46,940 Who in the right side will be having life in each one? 93 00:06:48,780 --> 00:06:49,580 Would you be seeing? 94 00:06:51,300 --> 00:06:53,340 Contact us. 95 00:06:54,060 --> 00:06:55,740 And after that, we'll be having fun. 96 00:06:56,400 --> 00:07:00,720 So let's work with the form, so. 97 00:07:02,690 --> 00:07:05,630 One patient is really, really easy in rehab. 98 00:07:05,780 --> 00:07:06,800 So you need to. 99 00:07:08,540 --> 00:07:12,410 Right, the form tag, and then you need to provide an ID. 100 00:07:13,250 --> 00:07:17,540 So whatever ID you need to provide, so here we are providing a contact. 101 00:07:19,110 --> 00:07:19,490 From. 102 00:07:21,420 --> 00:07:26,970 Then we'll give it a method you can give it or you can leave it blank, so we'll give it a method. 103 00:07:27,720 --> 00:07:33,390 For example, if we connect it to a backend so it will be fully functional right now, it will just 104 00:07:33,900 --> 00:07:35,070 be shown in the UI. 105 00:07:35,070 --> 00:07:39,420 It is not fully functioning because to make it fully functional, you need to implement the back end, 106 00:07:39,420 --> 00:07:42,060 and that's a little critical task. 107 00:07:43,000 --> 00:07:45,430 Next, we will be having naval. 108 00:07:49,630 --> 00:07:50,170 Label. 109 00:07:50,590 --> 00:07:54,550 And this is the HD email for. 110 00:07:56,980 --> 00:08:02,680 Then be providing the this for the men name, women providing name. 111 00:08:06,820 --> 00:08:08,470 We'll close it, so it is settled. 112 00:08:08,560 --> 00:08:12,970 It requires a closing tax, so here it will be full name. 113 00:08:13,750 --> 00:08:16,060 Next, we'll have another labor. 114 00:08:19,070 --> 00:08:20,750 Maybe we can just cooperate on it. 115 00:08:22,570 --> 00:08:25,090 Then we'll be calling it for. 116 00:08:26,340 --> 00:08:26,950 Immediately. 117 00:08:28,860 --> 00:08:31,860 Below, the label will be providing input. 118 00:08:33,950 --> 00:08:38,630 OK, input type is text and name is name. 119 00:08:40,330 --> 00:08:43,330 So name will be equal to. 120 00:08:46,220 --> 00:08:47,960 No name will be called name. 121 00:08:49,130 --> 00:08:55,760 OK, so then we'll provide a placeholder holder, so it will say, please enter your name. 122 00:08:56,310 --> 00:08:57,110 Where could it be? 123 00:08:58,100 --> 00:08:59,380 Please, Paula? 124 00:09:00,420 --> 00:09:01,140 It will see. 125 00:09:03,690 --> 00:09:06,300 Enter your name. 126 00:09:09,210 --> 00:09:13,350 So then we'll provide type tax, and it is a self-closing tax on only. 127 00:09:13,950 --> 00:09:21,300 Next level is for the email, so we'll provide the name as image. 128 00:09:23,970 --> 00:09:29,210 And will write your email or you can write like enter your email address. 129 00:09:29,640 --> 00:09:30,750 It totally depends on you. 130 00:09:30,750 --> 00:09:31,470 We had a will, right? 131 00:09:32,100 --> 00:09:40,470 You mean email and after that, we'll write in bookbag. 132 00:09:42,380 --> 00:09:47,570 Just as we did for the name, so input type is. 133 00:09:49,910 --> 00:09:51,740 The e-mail so. 134 00:09:53,080 --> 00:09:55,920 We will write the name as a name. 135 00:09:58,760 --> 00:10:01,100 Name is required to name. 136 00:10:01,820 --> 00:10:07,460 Next, we'll provide a placeholder so that we'll be seeing. 137 00:10:08,600 --> 00:10:11,560 And our e-mail. 138 00:10:13,290 --> 00:10:13,470 And. 139 00:10:15,090 --> 00:10:20,250 This is a time of closing and will provide I is equal to. 140 00:10:21,150 --> 00:10:21,420 Yes. 141 00:10:22,140 --> 00:10:22,500 Yes. 142 00:10:23,160 --> 00:10:25,470 Next, we'll be providing one for the message. 143 00:10:26,630 --> 00:10:31,870 Any message you want to give that will have a label, so let me just copy the label. 144 00:10:32,980 --> 00:10:33,610 You'll use it. 145 00:10:33,840 --> 00:10:34,090 Yeah. 146 00:10:35,550 --> 00:10:37,410 OK, so this will be for the message. 147 00:10:42,560 --> 00:10:43,670 Should be for the. 148 00:10:45,740 --> 00:10:50,480 Message and hell will ride the heading, which is the message. 149 00:10:51,650 --> 00:10:54,590 OK, so next we'll provide an input field. 150 00:10:58,560 --> 00:11:04,950 Input and type is text, and we provide a name that is the message, actually. 151 00:11:06,090 --> 00:11:12,300 All we can provide a text editor for this or it's like it will be a longer message, so that will be 152 00:11:12,330 --> 00:11:15,230 a good choice to provide text editing. 153 00:11:16,020 --> 00:11:16,280 Okay. 154 00:11:16,770 --> 00:11:20,760 Exteriores name will be message. 155 00:11:21,530 --> 00:11:24,110 And it will be having rules. 156 00:11:25,130 --> 00:11:26,690 The rules will be six. 157 00:11:28,230 --> 00:11:33,270 Or it you can provide Alperovitch seven columns we don't need to provide now. 158 00:11:33,660 --> 00:11:38,940 And it is also not needed right now because we are not using the backend. 159 00:11:39,420 --> 00:11:45,000 So next we'll provide a placeholder course. 160 00:11:47,010 --> 00:11:51,150 Place Holder will be entered into your message. 161 00:11:52,480 --> 00:11:52,780 OK. 162 00:11:54,860 --> 00:12:01,820 And then we will provide bottom of the deck, so there will be a bottom. 163 00:12:04,420 --> 00:12:07,720 And it will have a type of summit. 164 00:12:09,710 --> 00:12:14,900 And it goes it itself goes, then will provide. 165 00:12:16,390 --> 00:12:16,900 Signed. 166 00:12:18,720 --> 00:12:21,780 Message, then we'll save it. 167 00:12:23,030 --> 00:12:33,740 So now will create the costs for this in that studies or CSIS, and we'll name it going back dark CSIS 168 00:12:34,520 --> 00:12:35,090 and. 169 00:12:38,240 --> 00:12:44,600 We'll provide the services here for the contact or CSIS, and we'll imported inside the. 170 00:12:46,060 --> 00:12:48,190 CST like contact gorgeous. 171 00:12:48,370 --> 00:12:49,810 So here we pasted. 172 00:12:50,770 --> 00:12:57,370 And just let me just show you from the beginning, what is we are using really, really simple and really, 173 00:12:57,370 --> 00:13:03,540 really easy, so I don't want to waste your time like tapping on the CSO because if we sit down tapping 174 00:13:03,560 --> 00:13:06,850 CSOs, the things will take like seven to eight hours long. 175 00:13:07,030 --> 00:13:09,460 So it's really, really simple and really, really easy. 176 00:13:10,030 --> 00:13:10,780 Let me just show you. 177 00:13:12,320 --> 00:13:13,610 Well, this is all the CSIS to the. 178 00:13:14,840 --> 00:13:15,170 Yes. 179 00:13:15,260 --> 00:13:18,470 So let me just save it and let me it's important here. 180 00:13:20,310 --> 00:13:23,730 Import and that will be part. 181 00:13:25,690 --> 00:13:31,540 The boss will be stoned, and then we'll provide the name of the file that this content of CSIS. 182 00:13:32,680 --> 00:13:33,640 And let me just say it. 183 00:13:35,810 --> 00:13:37,670 So now if we go to the browser. 184 00:13:39,770 --> 00:13:40,840 Let me just drop. 185 00:13:43,020 --> 00:13:43,950 Contact here. 186 00:13:46,300 --> 00:13:54,760 So it doesn't show up OK, because we have not yet important it inside out or just we will do it. 187 00:13:55,360 --> 00:13:55,960 We'll just. 188 00:13:57,610 --> 00:14:03,880 So that will be contact and how will write the name of the component. 189 00:14:04,300 --> 00:14:06,040 And it will be important, I guess. 190 00:14:08,520 --> 00:14:08,920 OK. 191 00:14:09,940 --> 00:14:10,800 Importing. 192 00:14:12,060 --> 00:14:15,810 Yeah, it's clear, and you see it, it is important. 193 00:14:16,320 --> 00:14:17,070 Let me just save. 194 00:14:18,280 --> 00:14:22,210 And let me just go back to the browser and let me show you. 195 00:14:22,930 --> 00:14:28,180 OK, so we are seeing the form, it's a burning phone, but we are not able to see the image OK because 196 00:14:28,180 --> 00:14:29,740 we have not yet important damage. 197 00:14:30,170 --> 00:14:36,580 But let me just go back to the content audience and let me provide an image. 198 00:14:38,190 --> 00:14:44,570 So image will be inside the first inside the left side. 199 00:14:45,950 --> 00:14:47,580 Of the dim the lights. 200 00:14:47,610 --> 00:14:53,690 Looks like it will be passed lightning port damage, so import. 201 00:14:55,170 --> 00:14:55,950 Contact. 202 00:14:57,040 --> 00:15:01,800 Image from now, let me provide the source for it. 203 00:15:02,440 --> 00:15:06,310 It will be an asset, but it will be. 204 00:15:07,810 --> 00:15:11,240 On deck, let me just a check of what's the normal thing? 205 00:15:11,980 --> 00:15:14,230 So it is contact or DuPage. 206 00:15:14,800 --> 00:15:17,410 I thought it Fiji. 207 00:15:18,680 --> 00:15:19,160 It seems. 208 00:15:21,410 --> 00:15:26,900 And we have to render inside the state out of the left hand side. 209 00:15:26,960 --> 00:15:28,490 So how will provide a starting? 210 00:15:29,860 --> 00:15:30,790 And that will be. 211 00:15:34,240 --> 00:15:34,870 Style. 212 00:15:36,350 --> 00:15:37,160 Is equal to. 213 00:15:42,410 --> 00:15:45,270 Background ground image Kunlun. 214 00:15:45,650 --> 00:15:49,160 And then we'll provide the tactics and the new order and then. 215 00:15:50,240 --> 00:15:51,560 This and this is. 216 00:15:52,480 --> 00:15:53,950 And then we'll provide the dollar sign. 217 00:15:55,420 --> 00:15:59,320 And the name of them, so that is the contact. 218 00:16:00,440 --> 00:16:06,770 Image right now will deliver this text, let's I do don't need it anymore, but we just see it. 219 00:16:08,150 --> 00:16:17,030 And now let's go back to the browser and see, OK, so the image is rendered and that we have a beautiful 220 00:16:17,030 --> 00:16:21,530 form, a sign button and the image is also there. 221 00:16:21,890 --> 00:16:24,990 But the only problem here is that the links are not yet working. 222 00:16:25,010 --> 00:16:29,480 So let us just try to configure the links. 223 00:16:29,840 --> 00:16:33,440 So for that, we need to go to the next board of Dart. 224 00:16:33,710 --> 00:16:35,020 Guess where it is? 225 00:16:35,030 --> 00:16:36,290 It's inside the components. 226 00:16:37,010 --> 00:16:37,850 It's never dropped. 227 00:16:37,850 --> 00:16:38,210 Yes. 228 00:16:38,330 --> 00:16:38,780 Yes. 229 00:16:39,560 --> 00:16:44,020 So hey, we'll provide the links, so the menu will be left. 230 00:16:44,090 --> 00:16:50,000 Menu about will be splash about and the contact will be slash. 231 00:16:50,960 --> 00:16:52,850 Contact me to see what. 232 00:16:57,320 --> 00:16:59,780 And then when we go back to the browser. 233 00:17:01,010 --> 00:17:05,090 And when we click on home, so we are at home when we click on menu. 234 00:17:06,150 --> 00:17:10,770 For so many who does invoke that ministry fresh. 235 00:17:12,790 --> 00:17:16,510 Menu doesn't work, so let's try to debug what's the problem? 236 00:17:19,630 --> 00:17:25,480 OK, because we have done it in the mobile view, so we have to do same hill for the menu. 237 00:17:26,110 --> 00:17:33,460 Menu for about, we have to write about and for the contact we have to write contact. 238 00:17:33,770 --> 00:17:34,540 Let me just say it. 239 00:17:36,470 --> 00:17:36,860 OK. 240 00:17:37,310 --> 00:17:38,690 Let's go back to the browser. 241 00:17:41,450 --> 00:17:43,900 And let's see, we are at home, OK? 242 00:17:44,020 --> 00:17:50,640 Let me go to the menu, whom we are the menu page and let's go to the about. 243 00:17:51,410 --> 00:17:52,730 We are about page. 244 00:17:53,300 --> 00:17:56,600 Let's go to the contact via the contact page. 245 00:17:57,200 --> 00:18:03,050 So let me just decrease the size and let me show you if the website is responsive. 246 00:18:03,080 --> 00:18:08,060 The website is fully responsive and the this thing is also working. 247 00:18:08,060 --> 00:18:09,680 So we are at home the art menu. 248 00:18:11,290 --> 00:18:12,460 We are about. 249 00:18:14,230 --> 00:18:18,940 We are in the contact page, so everything works really, really fine. 250 00:18:19,340 --> 00:18:24,910 Well, let me just maximize it and take you to the home and the home button is also working and the 251 00:18:24,910 --> 00:18:25,210 order. 252 00:18:25,440 --> 00:18:25,850 OK. 253 00:18:25,870 --> 00:18:28,990 So this should take us to this. 254 00:18:28,990 --> 00:18:32,530 Should the order now should take us to the menu page. 255 00:18:32,540 --> 00:18:34,120 So let me just configure this button. 256 00:18:34,120 --> 00:18:37,630 Also, the autonomic select just configured this button. 257 00:18:37,930 --> 00:18:39,220 So this is in the home page. 258 00:18:39,340 --> 00:18:42,610 So where it is, where it is homologous? 259 00:18:45,000 --> 00:18:45,540 Link. 260 00:18:47,500 --> 00:18:47,730 So. 261 00:18:51,130 --> 00:18:54,640 And here will provide menu and then. 262 00:18:56,450 --> 00:18:57,740 And I provided the menu. 263 00:18:59,040 --> 00:19:05,440 At the link, we provide an agreement that is to invest in the destination to this link. 264 00:19:05,660 --> 00:19:07,660 So let me take you back to the browser. 265 00:19:09,450 --> 00:19:15,830 When you click on this, we are on the menu now, our website is fully functional, every feature which 266 00:19:15,840 --> 00:19:19,050 we'll discuss in the introduction video is now achieved. 267 00:19:19,230 --> 00:19:24,600 We have achieved every single goal, which we have discussed in the introduction video and I hope you 268 00:19:25,080 --> 00:19:28,710 learn a lot and you learn a new concept. 269 00:19:29,030 --> 00:19:33,870 Even if you're an intermediate level, you brushed up your concepts and you learn something new. 270 00:19:34,170 --> 00:19:37,110 You will learn reaction after you've learned the mapping of the data. 271 00:19:37,120 --> 00:19:44,460 You learn how to use material way and you learn how to use the component structure and that he adjusts 272 00:19:44,730 --> 00:19:46,830 how to import and export things. 273 00:19:47,160 --> 00:19:51,300 So excited for this for this project. 274 00:19:51,900 --> 00:19:52,620 Thank you so much.