And we just need an href here. And this will be the Google Fonts import. So I'm just going to paste that in. Okay. And now in Tailwind, we have to specify that we want to use this font. So let's go to our Tailwind config. And in our theme, we want to define a new font family with that font on top. So if you go into the default config of Tailwind, so just go into your node_modules folder, and you can go to font family, and we can grab this whole thing and just override it. So I'm going to grab this and then put it in our Tailwind config, put it right here.

Okay. Let's start from the top, and that's going to be our navigation. So let's go into our navigation main or main navigation, and let's add that border-top. So I'm going to say border-top, say 4, and let's make it border-green-700. Let's give that a look, and it looks like it works. And if you look at the border, I have a really thick one, which is a custom border. So I'm going to add that to my Tailwind config. So let's go to that. And within theme, I'm going to add a extend key, and it's going to paste that in. And that's going to extend our current config, and I'm adding this border-width.

And within theme, I'm going to add a extend key, and it's going to paste that in. And that's going to extend our current config, and I'm adding this borderWidth. So now we have 14. That should rebuild, and it is. Let's go back to our nav, and let's use 14 here. Okay. Let's check that out. Okay. And let's start working on the navigation here. So I'm going to make a container, and let's center it.

And let's start working on the navigation here. So I'm going to make a container, and let's center it. Let's make it flex, justify-between items, center, give it some padding. Okay. And the first flex item is going to be the logo, so let me just say logo for now. And the second flex item is going to be this unordered list. So let's do flex, space-x-6, font-semibold. I don't know why my Tailwind IntelliSense is not working, but I guess we'll have to do without it. Okay.

do without it. Okay. And the flex doesn't look like it's working. Oh, sorry. This should be after this. Cool. There we go. And I'm going to go back to my homepage because it's just a one-page layout here, so I'm just going to work with the homepage. And let's give the container some padding on the left and right too, so px-4.

What's next? Next is this section here, so we can move on to the index page. And let's remove all this stuff. Okay. And let's name this HeroContainer. Okay. And it's a container as well, mx-auto, give it a margin top. And it's going to be flex as well because we have these two items, so this on the left and then this on the right. flex, justify-between, items-center, and let's give it some padding.

Okay, looking good. Okay, what's next? Next is this image. So I already have this in the project. If you go into assets/image, you'll see the images here. Okay. So that's going to be the second flex item. And I'll put it in its own container and say, assets/image/developer.svg, okay, cool. Next we can work on this copy section here. So I'm just going to grab this, or just this actually.

Next we can work on this copy section here. So I'm just going to grab this, or just this actually. And let's do it here. So I don't need this. I'm not going to name this one. And I don't need flex for this one. And I don't need this py-12, just the 64. Okay, let's close that. And it's just going to be some copy. So let me just say lorem(50), is that enough?

And it's just going to be some copy. So let me just say lorem 50, is that enough? And what's my error here? So I need one root element. This isn't V3, so we need to wrap this in a div. Okay. There we go. So the text is bigger. So I'm going to wrap this in a p tag and make it text-xl, okay. Looks good.

here. And there we go. Now we can move on to this projects section here. So let's do that. So again, I'm going to wrap this container, and that ends here. So let's put it here. Close it out. Let's call it projects, okay. And I'm going to give this a margin-top and a margin-bottom of 16. And if you look, it has a border on the top and the bottom.

And now we can just add a heading. So let's do that. Let's make it an H3, and I made it bold. Here are some projects I've worked on. Okay. So this is going to be an unordered list, and each list item is going to be flex, and the check mark is going to be the first flex item, and the second flex item is going to be the content. So let's do that. Let's make an unordered list, make it large, spaceY of six, and marginTop of six.

five checks. Okay. So the first flex item, like I said, is going to be the check. So let me just paste that in. And I guess I'll show you where I got the icons from, heroicons.dev. Actually I'll show you this once, and I'll just paste the rest in. So I look for a check, and it's this one, and I copied that, and I can paste that in. And the width and height I went with is 8, so let's change that. And I also changed the color to green-700. Okay.

And let's see what that gives us. So I also have some classes here, which I'll explain in a second, these classes, but let's see what we get first. Okay. We get nothing. That's because we have to add some classes on this to give it the correct aspect ratio. And this is pretty well known when you embed YouTube videos and you want to make it responsive. You have to do a little trick here. So I'm going to name it responsiveContainer and let's give it overflow hidden, relative, marginTop of 16.

So let's work on that. So I'm going to grab this container again and let's put it underneath here. End it. And let's change it to contact. Change this to contact. And I'm not going to put the container on this because we want the background to span the entire width. So I'll remove the container mx-auto and also the px-64. We'll leave that in. Now we can add a bg-gray-100 border-t. There's a slight border on it.

And next is the form here. So let's work on that. So let's make a form here. And it's, don't put it, or don't put an action on it. Class equals margin-top of 12. And then we have these two form elements, which are next to each other. So we have name and email address. So I'm using grid to give it that one half. And this is different from the final version, which you'll see where I'm just using flex. And I think grid is a bit easier.

Actually, I like using margin-top instead of margin-bottom. So I'll put that on the next element. Okay. And for name, and a name here. And the input is going to be the next element. Name is name. ID is name. And we have a placeholder here. Let's make it John Smith. And I have a bunch of classes here.

Let's make it John Smith. And I have a bunch of classes here. So let me just go through this quickly. Make a block with full bg background, actually with full. And let's give it an outline, none, and a focus outline. border, green, 700. And margin-top, and let's give it a padding, px-4 and py-4. See if that looks good. And it does, but there's no border around it. So yeah, let me just add border.

Okay, let's check how that looks. Looks good. And now we just have to add the message box. So that's going to be full width. So we can go outside of this div here. And the label is going to be pretty much the same. So I'm just going to grab this and say message. Okay, and it's going to be almost the same as an input, but it's now a textarea. So let's try this.

This is just a simple explanation with no code.

So let's save this. And now it's not as dark. It's gray-900, cool. Okay, moving on. Let's work on this, join my newsletter section, which is the last section. And then we have the footer. So back to our index. So I'm gonna do the same thing here since it's a darker gray background.

You can see this in the finished Nuxt portfolio starter. So let's do this form. So that's gonna go after the <p> tag. form. I'm gonna make it flex because we have the input and the button next to each other. class equals flex. And let's give it a margin-top. Okay. So let's put an input.

Okay. So let's put an input. Type equals email. Name is email. And placeholder. Let's just say email or your email address. And for classes, let's put rounded, rounded-right none, because it's against the button.

But I'm gonna put a button next to it. Okay, cool. So let's make the button right next to it. button. Type equals submit. Let's give it a class. Let's make it uppercase. bg-green-700. Text white. Rounded,

And now for the footer. Let's work on that. Again, it's gonna be flex. So after the newsletter, let's make a footer here. bg-green-700. text-white. And the container goes here. mx-auto, flex,