Let's build this simple yet beautiful navbar using HTML and CSS.

Let's build this simple yet beautiful navbar using HTML and CSS. So the first thing we need to do is create an index.html file, set everything up, while also connecting a CSS file which we will get into. And then we're going to create a nav card. Then we're going to add the logo, which is just a text saying MyWebsite, and then the rest of the items. And if you don't know what this is, it's just a list of items stating the different pages, so we have a home page, an about page, a services page. That's all. However, as of now, this is what everything looks like, and it looks like absolute crap. So let's actually design this using CSS. So the first thing we're going to do is make sure there's no padding on the entire page. Then we're going to design the body by giving it a darker color and a specific font. Then we're going to design the navbar. Essentially here we're giving it some color and some padding. Then we're going to make the text logo a little bit thicker. We're then going to design the navbar links. I'm going to pause so you can see this. And then the hover state for the nav item. And if we go back to our page, this is what the final product will look like, simple, yet beautiful.