The first one is that, if you notice, whenever you click on one of these elements do you notice how we have duplicate labels? We have the placeholder here and then we have the label moving down and I'm not really a fan of that. I'd rather have the entire placeholder disappear whenever this focus event occurs, so that's one item.

Then I also want to move the send button in the center and move it down a little bit, and then each one of these icons should be our gold color. Let's address each one of those items and we'll be done with the desktop version of the application.

Right here I'm going to come all the way down to the bottom, and let me take a quick note to just make sure that I'm not duplicating any selectors. This is what we're wanting to update, this form input::-webkit-input-placeholder, but we want to capture the focus area.

Let's just copy this and now we're going to say input but then we're also going to just capture it when the actual focus event is occurring. The way that you can do that is you can actually chain on your selectors just like this, so it can say input:focus, and then textarea:focus as well.

form.css

.form input:focus::-webkit-input-placeholder, .form textarea:focus::-webkit-input-placeholder {
    color: transparent;
}

Then what I want to do is I can just make this essentially disappear by making the color transparent. I'm going to make the placeholder color transparent and now if I come and refresh if you put on the name you can see that that disappears and that's working. Same thing with email, same thing with message.

This is working very nicely, and all we had to do was update the pseudo-selector so that the placeholder was listening for that focus event and changing the color. That looks really nice. Moving down, let's also now update this send button so it gets moved down here.

We want to add our spacer which, remember, in our helper file we created a spacer, so we can do that. I also want to center it. We'll use Flexbox for that. Coming to our buttons, we could either put this in buttons.css or in our helpers.css.

I think it makes sense to put it in buttons.css because this is going to be related purely to how buttons behave. Let's go and find this class name if I scroll down here. It's center-btn-wrapper, that is the name of the class. So we want to say .center-btn-wrapper.

buttons.css

.center-btn-wrapper {
    display: flex;
    justify-content: center;
}

This is going to be just a basic flex container so we've created a lot of those throughout this course. We're going to say display: flex. From there, we'll just say justify-content: center. Hit save, come back, hit refresh. It looks like we have a little issue, let's see what's going on.

Let me just double check my spelling, center-btn-wrapper. Oh centered, there we go, I kind of like center-btn-wrapper. That could be the issue and there we go, that's working. That is looking nice.

I forgot one other thing. We have to add the cool little box-shadow whenever we press on this so we'll do that. We also need to move it down just a little bit, so let's just add a really small spacer. If you open up your helpers.css you can see we have a spacer 60.

Let's just add an even smaller one. We'll add a spacer here, we'll just call this .spacer10, that should give us what we need. For this, it's just going to have a height of 10px.

helpers.css

.spacer10 {
    height: 10px;
    width: 100%;
}

Now we can call that directly in the view. Then we'll just say .spacer10.

Hit save, refresh, and that just gave a little bit more space. I like having just a little bit more room there. Before we finish out this box-shadow, let's also take care of these icons. If you come back here we'll find out where we need to select, so that's going to be in the contact.css file.

It's in the company-details-wrapper and then we can just select the icon. That should be relatively straightforward. We have the company-details-wrapper just like this. I'm going to copy that and then we can just grab that i tag. I'll just grab the i, and then say our color is going to be the #CEA135.

contact.css

.company-metadata-sidebar-wrapper > .company-details-wrapper i {
    color: #cea135;
}

Hit save, and now if you hit refresh those icons are properly set up. All of that is looking really good.

The very final piece to what we need to implement is going to be this button right here. Notice if I click on it nothing really happens? I'd like to update the status of it and add that box-shadow whenever that happens.

The way we can do that is let's go into the buttons.css class here. Right under btn, I'm going to use a button pseudo-selector called active. What this means is that a user has clicked on the button, or if they're on a phone, or something, they have pressed on the button.

buttons.css

.btn:active {

}

We just want to add a box-shadow and let's add 5px, 5px, 30px, and then rgba, and we're going to go with our same 0,0,0 and for our transparency, we'll say 0.4. Hit save now, hit refresh, and let's see if this works when you click on the button.

buttons.css

.btn:active {
    box-shadow: 5px 5px 30px rgba(0, 0, 0, 0.4);
}

That is gorgeous, I love that. When you click here you can see that it almost looks like we are having a true feeling of pressing on the button because it adds that depth. I really like that.

We have completed the entire desktop version of this entire site. Fantastic job in going through all of this. We have the about page, the home page, the menu, we've seen how to use all kinds of tools, and then we finished it up with the form.

The last thing that we need to implement in the next section, is going to be how we can make this entire website responsive. What that means is that we're going to be able to make it so that if someone accesses the site on a phone or a tablet, it's going to automatically respond and readjust the content.

We're going to learn about tools like media queries and we're going to be able to update column orders and all kinds of cool steps that you can take. Now in the modern time, if you're building a website you really have to make it responsive.

There are many times where you're actually going to be getting even more traffic from a smart phone than you might be getting from the web. A restaurant website's a great example of this.

If the website gets most of its clicks off of a site like Yelp, most of those users are on their phones. Making sure that this works in a responsive manner is definitely going to be a critical skill to have. I will see you in the next and final section.