Hey, everyone, I'm super excited to be starting this section because now we are going to work in our
first project.
So far we've been interacting with the course material, which is very good for learning.
But now we will have a chance to apply some of the things we've learned in a real website or at least
a simulated one.
So this is the website we are going to be working and I'm going to show you what we need to do here.
So the first thing is the mobile menu.
So we have this menu here.
And if we go to the inspector to make the screen a bit smaller, you will see that when we reach this
point, we don't have the menu anymore.
We just have this hamburger icon.
So when we click it, we need to be able to see this menu and we also need to be able to close it.
So that's the first thing we are going to do.
So going down, we have this element which is very common in Web design.
This is called an accordion.
So maybe we don't want to show all the information at once.
So we are just showing mission.
And if we click on the other option, so vision, we need to show that this has been selected by using
a different background and we should also change the content down here.
So if we click values, you can see that we are changing the content of this element going down.
We also have this services slider.
So here we have a service and a short description of the service.
If we click this arrow, we are just going to the next one.
Next one when we reach the last one, which is this, if we click here again, it's just going back
to the first one.
We can also do the same thing, going backwards.
It's just going to be looping forever.
So this is what we need to do in the services section.
Then going down here, we have this contact form.
I haven't talked about this during the course and actually we are not going to use JavaScript for this.
But I wanted to include this in this project because this is something that many students asked me how
to do this.
So I just wanted to show you a very simple way of implementing this.
You probably want to implement this on your own website or for a customer.
So I thought it would be interesting to include it here.
So going down this year in this message is now dynamic.
But if you go to the original project, the one I'm including in this lesson, so you download if you
go to the original one and you go down, you can see that this was actually outdated.
We had to 2018 because we just had a static year.
So the last thing we are going to do in the project is just making the user dynamic.
So no matter what year we are at, this is always going to be up to date.
So that's all we need to do in our project.
And before moving on, I'm just going to give you a few tips to make your life easier.
So for this first job that we have to do with this menu, if you go inside here, you see that there's
a hidden element with the idea of sliding had their menu outer.
And as you can see, it has a width of three hundred and twenty and it has the right property said to
minus three hundred and twenty.
So what you need to do here is just setting it to zero.
When you click that button and when you click the close button, you just need to go back to minus three
hundred and twenty pixels.
So this is how this element works for the about us section if you go to the code.
You will see that I've left an object here and two variables, one for the unselected color and another
one for the selected color.
So this is all you need to solve that.
So when you click anything here, so let's say I click this one, you just need to make it selected.
And the way you are going to do this is using these selected color for the background.
And here's the content that you need to use for each of those options.
So the next one is going to be similar, but instead of clicking options, we just have a slider.
So here you just need to go to the next one and here to the previous one and going to the code, you
will see that in this case, I just left an array.
So here we are, starting from the first element, which has an index of zero.
So you just have to control it.
And every time we click those arrows, you just have to update the index and then just get the information
from these objects.
So here's the title for the service.
Here's the text.
And you just have to send to that age HTML element.
So now this one, like I said, we are not going to use JavaScript.
This is a service I'm going to show you again, if you want to try to do it by yourself, you can just
go to post mail in votes, dot com.
This is the service that we are going to use.
So if you want to give it a try before seeing the solution, just go ahead.
It's pretty much self-explanatory.
And here this is very simple.
If you go here, let's go to the inspector.
You will see that there's a span with an idea of current here.
All you need to do is using a date object to show the current ear inside this element.
So that's it.
We have a lot of work to do.
This is going to be a lot of fun.
So in the next video, I'm going to be back here to start working on this.
So I'll see you in the next video.