Okay, let's continue. So the next thing I want to work on is the container, and this container houses the file explorer and also the sidebar. So I'm just going to make use of Flex here. You can use Grid too if you like, but since it's only two items, I'm just going to stick with Flex. So let's do that. So that's going to be after our UL here, and let me end this comment. So let's end RepoNav, and let's go ahead and make that container. So it's going to be container, center it, let's give it some breathing room, and let's give it some padding as well. And like I said, it's going to be Flex. And the first Flex item, I'm going to name FileExplorerContainer, FileExplorerContainer, and let's end that here. Oops, forgot the dash here. And I'm going to give it a width of three-fourths, and the sidebar is going to be one-fourth. Actually, let me add the sidebar right now.

here. Oops, forgot the dash here. And I'm going to give it a width of three-fourths, and the sidebar is going to be one-fourth. Actually, let me add the sidebar right now. So sidebar width, one-fourth, and let's go ahead and end this sidebar. And with the FileExplorerContainer, I'm also going to give it a margin right. So there's this gutter here. I'll say margin right of eight. And now I'm just going to populate this with some lorem text to see if it looks okay. And same with the sidebar here. Okay, see how that looks. And it looks pretty good to me. Okay, now the next section is going to be this section with the buttons. So again, Flex and JustifyBetween, we have this and this. Let's do that. So say Flex. Actually, I'm going to put it in another div here. So let's do that. I'm going to name it BranchNavigation. And let's end that here. And that's just going to be FlexItemCenter

Actually, I'm going to put it in another div here. So let's do that. I'm going to name it BranchNavigation. And let's end that here. And that's just going to be FlexItemCenter and JustifyBetween. And the FlexItems are going to be Flex as well. So say FlexItemCenter and say one. And this one's going to be the same, and two, because they have things next to each other. Okay. And I'm going to give it some spacing. So let's say, space-x-2 here. Okay, so let's start with this one. And this is going to be these buttons here. So I'm going to make this a button and I'll make these two anchor tags or links. So let's stick with the button for the first one. It's going to be border, border-grey-400, rounded-medium. Let's give it some padding. Let's give it a hover. Say bg-grey-200. And it's going to be Flex as well, because it has three items, just like this button here. So FlexItemsCenter

put it after this button here. So it's going to be a link. Let's give it a class of, it's going to be flex. So flexItemsCenter, because there's an icon. Let's give it some spacing and let's give it some padding. So px-3 and py-1 is what I have. And what does it say? It says 25 branches. So let's do that. So I'm going to say span because this is going to be the second flex item. But I also want two spans in here because the 25 is bold. So let's say font-semi-bold, 25. And I'm going to wrap this in a span as well. And let's put a space here. Okay, see how that looks. Okay, it looks good. We just have to add the icon which I'll paste in. Okay, pasted the icon in, it looks pretty good. And if you look at the actual GitHub, there is a hover effect on the entire thing. So we can do that on the anchor tag here. Say hover:text-600. Okay, so that only works for the text here and not the

navigation. And let's name it commitsContainer. And let's end that. Let's give it some classes here. So it's blue. So bg-blue-100 works nice, rounded-md. And we want the rounded-b-none. Say border, border-blue-200. And we don't want a border on the bottom. And we want this to be flex as well, because it has these items here. So left and right. Let's do that. flex-items-center, justify-between. And let's finish it off with some px-4, py-4, and some margin on the top. And let me just put some gibberish in here. Actually, let's give it the two items, say one and two. And check this out in your browser. Okay, it looks pretty good. So let me just scroll up here and compare. Yeah, I'm happy with that. So let's start with this first section here. And it's going to be flex as well. So let's go ahead and do that. So it's going to be flex-items-center, and space-x-2. And the flex-items are going to be the avatar,

So let's do that. So that's going to be after our commits container, we can name this file Explorer. And let's end that here. So this is going to be the container. So let's give it some styles. So this whole thing here. So it's going to be rounded medium. And the top is not going to be rounded. None. Okay. It's going to have a border. Border we've been using as border-gray-400. Even though it's slightly darker than what's on GitHub, say text-gray-700 is the default for everything in this file Explorer. And looks good for now. Let's say lorem-100. See how that looks. Okay. And I'm not giving a padding because the padding belongs on each of the items here, because you'll see that, or you can see that the border is full width. So I'm just going to do one of these, because it's basically the same thing for each.

So one more thing I didn't show you was using the truncate class to truncate the text if it's too long. So it stays on one line. So you can see I added to this div here. Okay. One more thing that I just noticed that GitHub has is there is a hover whenever I hover over one of these files. So I added that to here as well. So all we have to do is add hover:bg-gray-200 to each of these flex items and we get the same effect. Okay. Let's move on to the next section. And that's going to be the readme container. And like I said earlier, I'm making use of the tailwind typography plugin, but for now we'll just put a placeholder in there. So let's do that. So after all of these, let's make a readme container right here, say readme-container. And let's end that. And let's go ahead and give it some styles, say rounded-md border,

let's make a readme container right here, say readme container. And let's end that. And let's go ahead and give it some styles, say rounded-md border, border-gray-400 px-4 and py-4. Let's give it a margin top. And let's give them the readme heading. Let's make it font-semibold, say readme.md. And here is where our readme goes. And it's going to put some alert text in here, say 400. That's too much. 200. Okay. Oh, it's only 20 alert. 200. Okay. That looks good. And that's fine for now. And now I just want to quickly do the footer. So let's work on that. So back here and back to our code, it's going to be after everything. So after this div, so let's make a footer element. And I want this to be within a container as well. Make it mx-auto. And I want it to be text-xs, make a border on the top, border

this div, so let's make a footer element. And I want this to be within a container as well. Make it mx-auto. And I want it to be extra-small text, make a border on the top, border gray-400, like we've been doing padding-10. Let's make it flex items-center and justify-between. Okay. And let's just see if that's in the right place. Okay. It looks good. And now we're just going to have three flex items. So we did justify-between. So this will be the first flex item, and that will be an unordered list. And this will be just a logo and the same for this. So let's do that. So the first flex item is a ul, say flex items-center and skip some spacing. So there's a lot of spacing here. So we'll give it 12. And the first one is not a link, just the copyright. So say © 2020 GitHub Inc. And then the rest of them are links. So let's do this and say class =, they are blue,

Same thing. We said to change the content out, which I'll do in a second. I just want to see if it's laid out correctly. And we don't need that first one. But yeah, looks pretty good. Now let me just add the correct content. Okay, so I added in the rest of the content, and it looks pretty good. I'm pretty happy with our progress in this video. And we'll take another break here. So again, I'm going to commit this, git add, git commit, say github, say file explorer, complete.