Right now we have this gigantic logo, we have our sidebar content and then we have what's going to be the form, kind of all sitting on top of each other. Let's start with that. I'm going to create a dedicated page just for the contact page, or I should say dedicated stylesheet for that.

We know we're going to need that anyway. We might as well create it now. In styles.css, I'm going to create a file called contact.CSS. Let's make sure that we import it here at the top. Duplicate that line and now we want contact.CSS.

contact.html

<link rel="stylesheet" href="styles/contact.css">

Now with all of this in place, we can start adding the styles. If I look at this. Let me just make sure I have all of the names. We went with this company-metadata-sidebar-wrapper here, and then we have the contact-grid-wrapper. We're going to start with this and then we're going to move down and add this later on.

Let's just grab the content-grid-wrapper. I'm just going to copy this, give us a little bit more room, and then paste it in. Now let's add a width here for our content and this is going to be 1000px wide.

I want to use the grid for this so I'm going to say display is going to be grid. I want to use grid-template-columns and this is a perfect example of a situation where grid is a better option than Flexbox because we want two columns.

contact.css

.contact-grid-wrapper {
    width: 1000px;
    display: grid;
    grid-template-columns:
}

We want one of them to just be the normal size and then we want the other column to be three times that size, which is exactly what we're looking for with the form and then the sidebar right next to it. I want to have a decent amount of grid-gap between them, so I'm going to say grid-gap: 100px.

contact.css

.contact-grid-wrapper {
    width: 1000px;
    display: grid;
    grid-template-columns: 1fr 3fr;
    grid-gap: 100px;
}

Now if I go and switch, let's see what that does. Okay, I hit refresh and we still have the issue where this image is too big. Let's fix that first before we do anything else.

We have the next class here, which is going to be this company-metadata-sidebar-wrapper. I'm going to copy this, come down and paste that in. I want to grab the logo and then from there or I should say I need to grab the class of logo and then the image.

The way that you can have an image, and this is a very cool part of CSS grid. The way you can have an image fit inside perfectly, whatever size container that you want to give it or whatever size column you want to give it is by just saying that you want the width to be 100%.

contact.css

.company-metadata-sidebar-wrapper > .logo img {
    width: 100%;
}

It's only going to take up 100% of whatever div it is inside. Let's see if that works. Now, if I hit refresh it still doesn't work. We might have an issue with where that item is. We have the content-grid-wrapper here and that is at 1000px, and then we have the company-metadata-sidebar-wrapper.

It looks like I selected the right thing, but obviously, I did not. So let's go and see what the issue is here when we inspect it. I'm going to inspect the image and that is at 100 width. Now let's look at the content-grid-wrapper. Oh, here is the issue. I have display grid and then I have the grid template columns here.

It is saying that the issue is that we cannot use 1FR and 3RF. If you hover over here it says that this is an invalid property value. Let's go take a look at the code and see what could be the issue because it looks like...oh, I found it. It's supposed to be 1FR.

You were probably watching me as I was doing that and yes, it doesn't matter how long you do this you will have typos, and walking through the process like I just did is the best way of fixing them. Now, this is working perfectly. There we go.

We have our image here. Let's add a little bit of margin here at the bottom. Let me select this image and I'm just going to add margin-bottom here. Let's go for 20px. That looks good. Let me copy this, and we could have this apply to either the logo class or the image in this case. Either one of those will work fine.

contact.css

.company-metadata-sidebar-wrapper > .logo img {
    width: 100%;
    margin-bottom: 20px;
}

I'm just going to add it directly to the image. Now if I hit refresh, everything is working. This is looking really good. We now have the grid layout that we're wanting. Now let's work on each one of these content wrappers because these are all going to be identical.

If you look at the final version, we're going to have an icon on the left and then the content itself, the text content, is going to be on the right-hand side. So let's see what we need to do in order to implement that.

We have this company-details-wrapper so we have the identical class for each one of these divs. So I'm going to grab this and then let's come down here and I'm going to grab that sidebar wrapper and then that's going to be all we need is the company-details-wrapper.

contact.css

.company-metadata-sidebar-wrapper > .company-details-wrapper {

}

Once we're inside here, we can add a custom font-family. We're going to want that Ubuntu Condensed, you saw that was a little bit of a different font. That was the one we used in the navbar. Then we want sans-serif as a backup, and let's make it bold.

We're going to have a font-weight: 900, and then the display it's going to be a Flexbox container. We're going to use Flexbox and then let's justify-content: space-between. If you notice we have those two columns and it's separated by whatever available space that we have.

contact.css

.company-metadata-sidebar-wrapper > .company-details-wrapper {
    font-family: "Ubuntu Condensed", sans-serif;
    font-weight: 900;
    display: flex;
    justify-content: space-between;
}

Right here you can see we have this column here and then on the right-hand side we have the rest of it. So let's come back. That is the space-between property that we're wanting, and let's just see what that gives us.

Let's take a look at this. Again, I'm going to hit refresh and that's looking better. It's not perfect yet obviously but it is almost where we want it to be.

Let's just add a few more style elements. Let's do it right here inside of the devtools just so we can see it all happening. This way we don't have to keep on switching back and forth.

For company-details-wrapper here let's go and let's add a margin to the top and bottom. So I'll say margin-top of 20px, margin-bottom of 20px, and then I want the text-align: right. There we go. From there, let's increase the font-size a little bit, so let's go with 1.25em. That's looking much better.

I also just want to make sure, I can't see from here or not, if the entire component itself is aligned in the center or not, so let me take a look. This is a Flexbox item, so I'm going to say align-items: center.

Yes, that did fix it. Did you see how that moved up for those icons? It moved each one of those items into the center. That's what I didn't notice. This icon and this icon were perfectly aligned but this one wasn't. So that is what we need to do.

Now that we have that, we can just copy all of these values and paste them directly into the code. Let's paste that in. I'm going to move the align items up here and the only reason for that is because whenever I'm using a tool like Flexbox or CSS grid, I don't like to have the rules that are specific to them be in different spots.

It would be really confusing if I had display: flex there, and then align-items here, and justify-content here. If I wanted to go make a change then it would take me a little while to see where everything is. So I like to have all of those items together.

Now if we come back, hit refresh, that is working very nicely. Let me close this and take a look. This is perfect. We have our sidebar now. It is 100% done.

In the next guide, we're going to start building out our form.