Hello, everyone, and welcome.
So now that we have completed the menu page and rendering the menu data like double mapping the data,
and now we'll create about page and the contact page or the contact us page for that.
First of all, we'll create the page door.
Just like in the Pages folder, we'll create the file, which will be about our tests.
OK, and then we'll use our trick to just import the boilerplate code.
So.
So we'll remove this, Dave, from here, and we'll create our own day with another class name.
So that will be about.
The next two will be.
About stop.
So this will be the top part, and here will be basically around the image.
Next, we have about.
Bottom.
It's about top will be having an image, so we'll use that method to import that made, first of all,
will import damage before are maybe.
About.
Image.
From.
From the SARS.
Then when we go to about dark EPG, let me check what's the name?
OK, that's about our jpg.
We were right.
Okay, so let's save this and wondering that's say, weird, so OK.
So in the amount of we'll be providing the story, Doug.
And inside the storage tank will be providing the source of the.
You know, the source of the image, right?
So it would be something like this and then we have a dollar sign here, then collaborators and then
the name of the image.
How about image?
OK.
So.
This is something like this and.
We made a mistake, we did not provide the background image.
Back down.
Image.
Yeah, that's why it was green, right?
OK, now in about what time we'll be having an H1.
Which basically tells about.
US next will be having tag in the bag.
We'll be posting the some some dummy text, so that will just be some kind of thing.
So we just save it and now we'll create the CSIS file for about.
Or we can just first see if you're rendering open opener, so we'll go to afterwards and we'll read.
You can just copy this.
Downhill.
We'll see.
About and have will say.
Found and it auto imports, OK?
That's a very good thing, you're not on board today.
So let's just go to the browser and see if this works, so let's just, you know, you talk about.
OK, it works about.
And this is working.
We can't see the image exactly now, so we'll figure it out.
Why even are seeing that image?
Let's just go to the about again, why we're not seeing the image about image and there is the link
to it to why we are not able to see about a site about of fear and bring it.
So then take it on an image is fine, but the way it's not, then maybe there's some issue.
Maybe it will render once we.
Once we forward the CSV file, so there's no issue with that, so let's create this file for this scope
of styles, and we'll click on the file, which will be about to CSIS.
So in about CSIS will be providing the CSIS to the about section, which will be important inside the
about election, who will be asked to CSIS who?
It's a very small CSIS, and it's nothing great in it.
So we'll just have a look at this.
There's a basic normal course.
There's nothing new here.
We are more focusing on reactor rather than see us as the Moon.
The main motive is to learn, react to the concept of reactor.
So we'll just import this year.
Import.
And just provide the.
But.
To the.
Satisfied about our costs, we could save.
And we go to the browser.
And you can see we are seeing that image as well as the text as well as the information, or you can
aggregate and put any information you want.
So, OK, so we are done with about page right now this link to our blog, what will make them work?
Now let's go back to accord and let's create a contact page.
So in the contact page, we'll be having an image and we'll be having a form.
So first of all, let's create a contact page in this.
That will be.
Contact don't miss.
We lose our trick.
Are AFC?
And that's it.
The first there will be contact who will create their own lives, so that will be on tap.
And that will be having a left side and a right side.
So on the left side will be having the image.
So we'll create a a left side and we'll just name it left side just to see if it's around.
Later on, we'll forget it and then we will have the right side of the.
Who in the right side will be having life in each one?
Would you be seeing?
Contact us.
And after that, we'll be having fun.
So let's work with the form, so.
One patient is really, really easy in rehab.
So you need to.
Right, the form tag, and then you need to provide an ID.
So whatever ID you need to provide, so here we are providing a contact.
From.
Then we'll give it a method you can give it or you can leave it blank, so we'll give it a method.
For example, if we connect it to a backend so it will be fully functional right now, it will just
be shown in the UI.
It is not fully functioning because to make it fully functional, you need to implement the back end,
and that's a little critical task.
Next, we will be having naval.
Label.
And this is the HD email for.
Then be providing the this for the men name, women providing name.
We'll close it, so it is settled.
It requires a closing tax, so here it will be full name.
Next, we'll have another labor.
Maybe we can just cooperate on it.
Then we'll be calling it for.
Immediately.
Below, the label will be providing input.
OK, input type is text and name is name.
So name will be equal to.
No name will be called name.
OK, so then we'll provide a placeholder holder, so it will say, please enter your name.
Where could it be?
Please, Paula?
It will see.
Enter your name.
So then we'll provide type tax, and it is a self-closing tax on only.
Next level is for the email, so we'll provide the name as image.
And will write your email or you can write like enter your email address.
It totally depends on you.
We had a will, right?
You mean email and after that, we'll write in bookbag.
Just as we did for the name, so input type is.
The e-mail so.
We will write the name as a name.
Name is required to name.
Next, we'll provide a placeholder so that we'll be seeing.
And our e-mail.
And.
This is a time of closing and will provide I is equal to.
Yes.
Next, we'll be providing one for the message.
Any message you want to give that will have a label, so let me just copy the label.
You'll use it.
Yeah.
OK, so this will be for the message.
Should be for the.
Message and hell will ride the heading, which is the message.
OK, so next we'll provide an input field.
Input and type is text, and we provide a name that is the message, actually.
All we can provide a text editor for this or it's like it will be a longer message, so that will be
a good choice to provide text editing.
Okay.
Exteriores name will be message.
And it will be having rules.
The rules will be six.
Or it you can provide Alperovitch seven columns we don't need to provide now.
And it is also not needed right now because we are not using the backend.
So next we'll provide a placeholder course.
Place Holder will be entered into your message.
OK.
And then we will provide bottom of the deck, so there will be a bottom.
And it will have a type of summit.
And it goes it itself goes, then will provide.
Signed.
Message, then we'll save it.
So now will create the costs for this in that studies or CSIS, and we'll name it going back dark CSIS
and.
We'll provide the services here for the contact or CSIS, and we'll imported inside the.
CST like contact gorgeous.
So here we pasted.
And just let me just show you from the beginning, what is we are using really, really simple and really,
really easy, so I don't want to waste your time like tapping on the CSO because if we sit down tapping
CSOs, the things will take like seven to eight hours long.
So it's really, really simple and really, really easy.
Let me just show you.
Well, this is all the CSIS to the.
Yes.
So let me just save it and let me it's important here.
Import and that will be part.
The boss will be stoned, and then we'll provide the name of the file that this content of CSIS.
And let me just say it.
So now if we go to the browser.
Let me just drop.
Contact here.
So it doesn't show up OK, because we have not yet important it inside out or just we will do it.
We'll just.
So that will be contact and how will write the name of the component.
And it will be important, I guess.
OK.
Importing.
Yeah, it's clear, and you see it, it is important.
Let me just save.
And let me just go back to the browser and let me show you.
OK, so we are seeing the form, it's a burning phone, but we are not able to see the image OK because
we have not yet important damage.
But let me just go back to the content audience and let me provide an image.
So image will be inside the first inside the left side.
Of the dim the lights.
Looks like it will be passed lightning port damage, so import.
Contact.
Image from now, let me provide the source for it.
It will be an asset, but it will be.
On deck, let me just a check of what's the normal thing?
So it is contact or DuPage.
I thought it Fiji.
It seems.
And we have to render inside the state out of the left hand side.
So how will provide a starting?
And that will be.
Style.
Is equal to.
Background ground image Kunlun.
And then we'll provide the tactics and the new order and then.
This and this is.
And then we'll provide the dollar sign.
And the name of them, so that is the contact.
Image right now will deliver this text, let's I do don't need it anymore, but we just see it.
And now let's go back to the browser and see, OK, so the image is rendered and that we have a beautiful
form, a sign button and the image is also there.
But the only problem here is that the links are not yet working.
So let us just try to configure the links.
So for that, we need to go to the next board of Dart.
Guess where it is?
It's inside the components.
It's never dropped.
Yes.
So hey, we'll provide the links, so the menu will be left.
Menu about will be splash about and the contact will be slash.
Contact me to see what.
And then when we go back to the browser.
And when we click on home, so we are at home when we click on menu.
For so many who does invoke that ministry fresh.
Menu doesn't work, so let's try to debug what's the problem?
OK, because we have done it in the mobile view, so we have to do same hill for the menu.
Menu for about, we have to write about and for the contact we have to write contact.
Let me just say it.
OK.
Let's go back to the browser.
And let's see, we are at home, OK?
Let me go to the menu, whom we are the menu page and let's go to the about.
We are about page.
Let's go to the contact via the contact page.
So let me just decrease the size and let me show you if the website is responsive.
The website is fully responsive and the this thing is also working.
So we are at home the art menu.
We are about.
We are in the contact page, so everything works really, really fine.
Well, let me just maximize it and take you to the home and the home button is also working and the
order.
OK.
So this should take us to this.
Should the order now should take us to the menu page.
So let me just configure this button.
Also, the autonomic select just configured this button.
So this is in the home page.
So where it is, where it is homologous?
Link.
So.
And here will provide menu and then.
And I provided the menu.
At the link, we provide an agreement that is to invest in the destination to this link.
So let me take you back to the browser.
When you click on this, we are on the menu now, our website is fully functional, every feature which
we'll discuss in the introduction video is now achieved.
We have achieved every single goal, which we have discussed in the introduction video and I hope you
learn a lot and you learn a new concept.
Even if you're an intermediate level, you brushed up your concepts and you learn something new.
You will learn reaction after you've learned the mapping of the data.
You learn how to use material way and you learn how to use the component structure and that he adjusts
how to import and export things.
So excited for this for this project.
Thank you so much.