Alright, let's tackle the last part of this design the profile page. So we are done with this and we are going to shift to the final screen, which is this profile page. So the sidebar on the right is exactly the same, the navigation is the same too, but there is an extra post button here. And then the feed is also the same. The only thing that changes is we have this header section.

And then the feed is also the same. The only thing that changes is we have this header section. So there is a back button, a cover image, profile image and some biography UI that we are going to build. These tabs are the same that the ones that were up here on the feed page. So because we are sharing the same application shell UI, I will start by copying the entire feed HTML page and I will create a new profile HTML page, I'll paste that.

and I will create a new profile that HTML page, I'll paste that. And so we will keep the header section the same and we will also keep the aside the same. And then for the main tag where we are going to do all of our work, we are going to remove the post prompt and we will keep the nav and the feed because we have the nav here and then the feed. And so we're going to do our work above that for the profile header, right?

And so we're going to do our work above that for the profile header, right? So I'll leave a comment here before the nav profile header. Alright, so to start us strong I will start by placing the cover image and then uh, we will add the back button and then work on this bit of UI here. So let's have a header tag inside our main. And for now I'll just have an image. The source will be images/cover.png, which is one.

And for now I'll just have an image. The source will be images/cover.png, which is one of the files that I dragged in one of the first lessons. And it's this one. Perfect. And let's just save that and go take a look. All right, so here we are on the feed page, but remember I can click on the avatar to go to the profile page and wow. Nice. This is looking great. Okay, that's definitely a good start.

Nice. This is looking great. Okay, that's definitely a good start. Next, before I forget, I will add the back navigation here. Okay, so before the profile header here, I'll have an anchor tag going back to I guess the feed. And here we will have two elements. We'll have an SVG and then we'll have another span tag that says back. All right, nice. So let's bring the SVG and that's the one I'm talking about here.

All right, nice. So let's bring the SVG and that's the one I'm talking about here. I will prepare the lands by making the anchor tag a flex container with items center. And let's go with the gap of just one and I will paste the SVG tag in here. Alright, we need to set a size based on the viewBox, which is 12 and 12. So we can go class equals size three. And yeah, that's looking nice.

So we can go class equals size three. And yeah, that's looking nice and it should take me back to feed page. Okay, very good. So I feel like the gap might be a little bigger, huh? It's six. So let's go 1.5 in here. Gap 1.5 and I wonder what happens if we align the items with baseline instead of center with here items baseline and yeah here that works better.

with baseline instead of center with here items Baseline and yeah here that works better. As you can see on the design, it seems to be aligned that way on the baseline. Okay, next is this SVG. You can see this second item here. The second carrot is a different color than the first one. And right now in our design they're both the same. Uh, pixel light. So I think we can play with the opacity here. And so directly on the path elements, the second one here,

with the opacity here. And so directly on the path elements, the second one here, let's add a class and I'll go opacity. Yep, 60. Okay, nice. So let's bring some hover styles next. So I'm thinking we can add an underline under the word back on hover, but it would also be really cool if we made the second caret here become the same color as the first when we hover anywhere on the link. Let's try that. So to make it work, I will need to give the anchor tag here a class of group.

Let's try that. So to make it work, I will need to give the anchor tag here a class of group. And the reason is, so here where we have the opacity of 60 on group hover, we can change the opacity to a hundred percent, which is going to match the color of the first one. Nice. And for the span here, also on group hover, let's go underline and let's look at the result. The underline is here and also the caret is changing color. Okay, I think that's a nice touch.

The underline is here and also the carrot is changing color. Okay, I think that's a nice touch. And if I zoom out, this is what it looks like. It's kind of subtle. Actually you know what? I kinda wanna remove the underline. I think just the carrots change is kind of cool. So I'll remove that class here and we'll go with just that. Yeah, that draws a bit more attention to the carrot. Alright, good start. So let's focus on this section now. So what I'm thinking,

Alright, good start. So let's focus on this section now. So what I'm thinking, and let me draw over the edges of the image because it's kinda hard to see. So you can see that it's cutting the avatar in half. So what I'm thinking is we build this UI below the image, we are not going to use absolute positioning, we just put that in the flow after the image. And then we are going to use a negative margin-top of half the avatar height to pull the whole section up.

And then we are going to use a negative margin top of half the avatar height to pull the whole section up. So we are in the profile header, this is the cover image. And below that we definitely going to need a div element to wrap the various items. But here we're going to have an img, we don't need to link to the profile because we are already on the profile here and this is going to be images/adrian.jpg. And let's give this a class of size. Hmm, let's go 40 and object-fit: cover;

And let's give this a class of size. Hmm, let's go 40 and object-fit cover. So there just like I was expecting, the image is halfway down, it just looks a little bit big. So let's go with size 32. Okay, yeah, that's better. And then we are going to have the same two elements that we have done here. So the username and handle. So I can be cheeky and go find this in the header section. So these are the two I'm talking about.

So I can be cheeky and go find this in the header section. So these are the two I'm talking about. We'll borrow those and then go place them right after the image with the wrapping tag because it's going to be a flex layout. Alright, and then we need to make the wrapping element of these three also a flex. So here div class equals flex. We want the items to align at the bottom. So items and and let's give a gap of four.

We want the items to align at the bottom. So items and and let's give a gap of four. How's that looking? Hey, pretty good. Okay, it looks like this text is bigger obviously. So it's font size 20, whereas this one is 14. So 14 is sm and 20 I guess is xl. So let's make this one text-sm. And this one can be text-xl. Is that it? Yep. 20 pixels. All right, good stuff. Okay, and before we do the button here,

20 pixels. All right, good stuff. Okay, and before we do the button here, let me offset the whole section here by half the height of the avatar. And we don't want to use translate. Why? Because then it's going to leave a gap under, we really want to pull everything that's below from half the height of the image. So negative margin here is perfect. So the image is size 32. So on the container here we can go minus

So negative margin here is perfect. So the image is size 32. So on the container here we can go minus mt-16 and that will pull the whole section by half the images height and that should achieve exactly the effect that we're trying to do. Perfect. Alright, so next we're going to have this editProfile button, which is base aligned with that.

to have this edit profile button, which is base aligned with that. So all we need to do is wrap these two elements in a flex parent that is going to be shared with the profile button. And because the parent one level up wrapper has items and the alignment will stay at the bottom like this. Perfect. And I think for these two that I'm selecting right now, we can have items center to vertically aligned the three elements. Alright, so this button looks a whole lot like this button.

to vertically align the three elements. Alright, so this button looks a whole lot like this button. So once again I'm going to do some borrowing. Let's close the feed and go in the aside. And we are going to find one of the buttons. Here it is. So the button will come after this element, but we need to wrap both the User meta and the button that I'm going to paste here. Whoops, I only have copied the opening tag. So EditProfile, close the button.

Whoops, I only have copied the opening tag. So edit profile, close the button. So let me re-explain that. We had the User meta here and the button, but we want them to be side by side. So I wrap them in a div, which is going to be a flex container. We'll have a gap of 4 just so they never touch. And then we once justify-between, so it pushes things to the edges.

And then we once justify between, so it pushes things to the edges. Let's go have a look. Alright. And it's not using the whole width of the container. So on the parent flex we have the image and then all the rest, all the rest needs a flex-grow class. And so here's the image and here's all the rest. So I think if I add the class of grow here, it'll grow to the full width. Yep. Perfect. So next you can see the button is too big.

it'll grow to the full width. Yep. Perfect. So next you can see the button is too big and it's because it's trying to use the whole height of this left section. So we have justify-between, but we need items-center or items-end. I'm honestly not sure. So that's items-center. So it'll align, it's basically in the middle here. Let me try items-end to pull it to the bottom,

So it'll align, its basically in the middle here. Let me try items and to pull it to the bottom, what's the design doing? Let's try to draw a line here. Yeah, so it's center line. Okay, so we'll go back to items center. Alright. And we should probably also decide if this is a button that triggers an action, maybe a model or if this is a link to an edit page, I think it's going to be a link. So all I want to do here is change the button tag.

I think it's going to be a link. So all I want to do here is change the button tag to an a tag and add an href of two B determined it's going to look exactly the same, but now it's a semantic a tag that links to another page. Alright, getting somewhere. The next thing we wanna hear is the biography sentence and then the user stats. Looks like the text here is maybe 18. Nope it's 16.

and then the user stats. Looks like the text here is maybe 18. Nope it's 16. So text base. So this is going to be a regular paragraph of text. We might have the same treatments that we did for the hashtags, remember with the parent element applying styles to nested anchor tags. And then here we have a simple flex layout with side by side items. So let's do that below

with side by side items. So let's do that below that section here we're gonna go div mt-8. And here we'll have our paragraph that says I design at LaraCasts with an uppercase L. So hit me up whenever and I think it had the funky smiley face like this I designed at Lara. So hit me up whenever. Perfect.

this I designed at Larga. So hit me up whenever. Perfect. So we're going to make this a anchor tag link and like I said, we're not going to apply classes directly here, but on the par, let's quickly take a look first. Whoops, it looks like we are in the wrong div nesting, we gotta go down one level. So let's move all of this after that. Closing div. Aha, much better. Alright, so this is an anchor tag.

So let's move all of this after that. Closing div. Aha, much better. Alright, so this is an anchor tag and let me search in the template for the, and _a classes that we've done. And there they are. So we want, I'll copy all of them and then remove what's in between. All right, so here I will add all these classes, but really we just want to keep the two anchor tag children selectors like so. And Tara, we now have styled nested anchor tags. Cool.

to keep the two anchor tag children selectors like so. And Tara, we now have styled nested anchor tags. Cool. Next we have these following and follower section that's pretty easy honestly, let's just check the margin 24 and then the gap 24 as well. So it's level six. Alright, so div empty dash six flex gap dash six should do the trick. And actually we might be fancy here.

flex gap dash six should do the trick. And actually we might be fancy here and make that a description list dl in HTML because as you can see it's kind of like a name value group. The name is follower or following and the value is the number. So a dl needs a dt definition term and dd definition description. But we are allowed to have wrapping divs for styling purposes, which we are going to need here.

But we are allowed to have wrapping divs for styling purposes, which we are going to need here. And these are going to be a flex container with a small gap of 1. Okay, so here we have the value first and then the term. So I guess we will go DD. The DD stands for the value. So we got 100 and then DT the term or the name Yep is going to be followers I believe. Nope, following. So what does it look like?

or the name Yep is going to be followers I believe. Nope, following. So what does it look like? Okay, I guess we need to put the second one before we really see what's happening. And so for the other one we're going to have 2190 followers. I will duplicate this whole thing and go 2190. That's a lot of followers Adrian. And while I'm here, let's make the two dts a different color with text-pixel-light. 60%. Isn't that cool that with only two

with text pixel light. 60%. Isn't that cool that with only two or three colors in the theme we can do a whole UI and look at this, this is pretty, pretty good. Is the font size also 16 it looks like? Yep, it is. And so I think we good here might want to increase the gap just a little bit between the term and the value or the value and the term. So for both I'll go gap 1.5. Yep, subtle but a bit nicer. So what is left?

So for both I'll go gap 1.5. Yep, subtle but a bit nicer. So what is left? Looks like all we've got left is this navigation or these tabs here that we have already done in the previous section here. There's just a horizontal rule below them or a bottom. Bottom. And I have a funny feeling that I had kept the navigation here but it's not showing. I wonder why. So this is the header we've worked on and here's the navigation here.

I wonder why. So this is the header we've worked on and here's the navigation here. What's going on? P tag. Hello? Uh, it is not showing, wonder if it's because of the classes here. The overflow x auto. Ooh. Yes it is. Wait, let's go find the nav. Here it is. With a height of zero if I change the value. Yep. So something is not right. Okay. I think that has to do with the fact that we are

So something is not right. Okay. I think that has to do with the fact that we are inside a overflow-y scroll already. And so when we try to scroll horizontally, it loses its height. But if I go back to the classes ahead initially, so it does not show, I think I can explicitly give a height of full, giving it straight to the nav will probably not work. Yep, still not showing.

to the nav will probably not work. Yep, still not showing. But if I wrap the nav in an HFull class, I feel like this is going to work again. Ah, hey there we are. Okay, so let's remove the hello here, which is there and then verify that it still works with the horizontal scroll when we don't have sufficient space. Okay, yep, it works. Uh,

have sufficient space. Okay, yep, it works. Uh, and so speaking of which, I feel like this is also going to be a problem in the feed page and yep it is. It's not showing here anymore. So let's quickly go in the feed one more time and in main we're gonna find the nav here. So again, wrap this in h-full. So I'll collapse this and close the div after it and our navigation is back.

So I'll collapse this and close the div after it and our navigation is back. Whew. Alright, happy I fixed this. So we are very, very close. I feel like we just need a border-bottom on the navigation. Remember this is what it looks like. And by the way, there's a couple more items here and I wanna check the margin-top 36. So it would be empty-nine, but I think empty-eight is more within the values.

So it would be empty nine, but I think empty eight is more within the values we've been using so far. And also we are within a flex container that has a gap of four already. So we only need to add an additional four. So here I'll go empty dash four. And in conjunction with the flex gap of four, it'll give us a spacing of level eight. And so if I open the elements we have for you ideas, streams

it'll give us a spacing of level eight. And so if I open the elements we have for you ideas, streams and following, and here the text are going to say posts, replies, highlights, inspiration streams. So posts, replies, highlights, and I'll duplicate it one more time. And this one says inspiration streams and then dammit, I just realized I'm in the feed instead of the other one. So I'll copy the li items.

of the other one. So I'll copy the li items and then I'll control z, ZZ to go back to what we had following Idea streams and for you. And now I will go back to the actual profile and here paste the li items. That's what I wanted to do. Alright, and I need to pull over the margin-top as well. And so we can do it on the parent most here, empty-4.

And so we can do it on the parent most here, empty dash four. And let's go in the feed and remove that empty dash four that I added here. Alright, this time we should be good. Nice, very good. And so the last decision we need to do is whether we have a border bottom on the navigation or a border top on the ol feed or just a separator. And so here I think I'm going to go just with an HR separator and

And so here I think I'm going to go just with an HR separator and because we have this flex stack layout, just having the HR by itself might work. So let's collapse this. And so this is our whole profile header and this is the navigation slash tabs. And so down here I think I want to HR and I will give it a border color of pixel lights at 10% precisely.

and I will give it a border color of pixel lights at 10% precisely and I think it's going to look really nice. Let's compare with the design. Okay, so I think the spacing here is a bit less less and I kinda want a bit more spacing than we have. That feels a bit too close here. And yeah, this is a bit too big. So for the navigation, let's go all the way to empty eight. That might be too much and yeah it is.

So for the navigation, let's go all the way to empty 8. That might be too much and yeah it is. So we'll go with empty 6. Okay, that's great. And then if by any chance we have a bit of margin-top on our feed, we can remove that for that page and yep, here's the feed. So I'll remove the margin-top class here. And you know what, alternatively this could be the border-top here if we kept the margin, huh? I am conflicted. Usually HR are within text.

top here if we kept the margin, huh? I am conflicted. Usually HR are within text to break down sections of paragraphs. Uh, and so let's try to bring back the class of empty-4 and bring this here and we need to add the border-top class. If I keep both we will have two separators and I just realized that it needs to be padding-top-4. So now if I remove that we should have the exact same visuals but we have now turned this into the border-top of our feed.

that we should have the exact same visuals but we have now turned this into the board top of our feed. So I think I prefer that. Alright, I think that our profile header is looking great, at least on desktop and it looks like it's holding up so far. But let's see what happens when we squish it pretty narrow. So, so far so good. It's holding up. It's still holding up because we have broken down to the next ui.

It's still holding up because we have broken down to the next ui. We might get lucky and get away with keeping it but uh, I mean that makes me think that we should have some tation here. But to be safer, I think we are going to collapse the edit button. So we have all the space here and then the edit button below. And outside of that I guess the real problems,

and then the edit button below. And outside of that I guess the real problems, let me go back full and bring the dev tools so I can go really small. I think that here once again, yep we're gonna want to collapse and 320 is basically the lowest that I care about. So maybe we'll make the image smaller and then collapsing that under should work. Alright, so we have our profile header, the image,

and then collapsing that under should work. Alright, so we have our profile header, the image, and then we kinda want the image to first of all get smaller. So let's go size 20 and then MD maybe size 32. So the image will start small and then grow up. Yeah, here. Okay. And then the way I built it, it's going to be hard to have the button go under while the text stays here. We're gonna have to rejig the flex structure.

to have the button go under while the text stays here. We're gonna have to rejig the flex structure. 'cause right now we have this element and then these two together. But I think I wanna make these two together and then the button on the side. Okay, let's try that. Alright, so here I wanna wrap the image and the two section with div flex gap four and items end.

and the two section with div flex gap four and items end. So it goes to the bottom. So I will move the image here and I will move these two as well. So this is my first section and then the second section is just the link. So I can remove the flex that was wrapping them around. So that's step one. And then I think I'm going to have to set just justify between here, let's take a first look.

So that's step one. And then I think I'm going to have to set just justify between here, let's take a first look. Yeah, okay, that sort of works. So let's justify between these two. So on the common parent, which is this one, I'll go justify-between and okay we back to what we had, but now what it means is it's going to be easier to collapse the button below the User. And also I've realized that we've changed the size of the image, so we need to change the negativeMarginTop.

And also I've realized that we've changed the size of the image, so we need to change the negative margin top. So that sits under, we went from 32 to 20. Uh, this is here, we went from 32 to 20. And so at the MD breakpoint is when we went minus mt-16, the half offset. But before that we want minus mt-10. Hopefully you follow along. We want to offset by half the height and so we adjust responsibly.

We want to offset by half the height and so we adjust responsibly and I think we can make these texts a little bit smaller. Also on small screens it'll help not go past halfway through the image. Let's go once again md text-xl. So it's gonna be text based by default and maybe text-lg and we can probably make the gap only happen at the md breakpoint. Okay, so that works a bit better.

the MD breakpoint. Okay, so that works a bit better. Let's look at what point it grows. It's here. Yeah. Okay, that works. And so the last thing we wanna do is collapse this button and make it go under whenever there's not enough space. So we could decide on a breakpoint, but I think there's a smarter way here and it's going to work based on the length of the username is we can use flex-wrap.

and it's going to work based on the length of the username is we can use flex-wrap. So whenever it needs to wrap is when it'll wrap. Check this out on the shared element here. Instead of switching to flex-col and then back to flex-row, I will add flex-wrap. And based on the gap and the available space, it should intelligently decide of when to wrap below. And so there might be more scenarios when we

of when to wrap below. And so there might be more scenarios when we switch breakpoint here. No, just not. But here, if the username was extremely long, I think that our button would wrap down. We would have other problems, but we'll cross that road when we need to. Uh, I think having a maxLength year is going to make sense. Alright, let's make a final inspection of our design.

year is going to make sense. Alright, let's make a final inspection of our design. I'll refresh the page. So we just have Adrian and so this is looking really good and let's look at how it handles the responsive breakdown. That still looks good. Looks great. Yep. You know what? I'm happy with this. Okay, and I believe I almost forgot the last thing that's missing is the post button that we have above here, as you can see down here in the user controls.

that's missing is the post button that we have above here, as you can see down here in the user controls. So that should be really quick. I will go in the feed page and still that button which has the same visuals. So I'll copy that and then we will go in the header section. So we have the logo, then we have the navigation, and then we have the user controls. So this is going to leave inside the user controls and I've just realized that we have this H12 class.

So this is going to leave inside the User controls and I've just realized that we have this H12 class that we were using to test out, but this will set the height so I can get rid of that. And basically I want to have the button above that. But we need to do two things. Remove the type submit 'cause we are not inside the form and we need to wrap this. And the below in a flex flex col gap 2 probably container.

And the below in a flex flex call gap two probably container. So we're going to wrap vertically the button. And then user controls like so and so here. This is the feed page. So there is no button, but let me go in the feed and find the H12 class and we want to remove that like we did on the other page. All right, and it still works. And now if I go to the profile,

All right, and it still works. And now if I go to the profile, we should have the post button. So the gap needs to be a bit bigger and we want more vertical padding here. So the gap is 24, so 6. And then what do we have here? 12. So py 3. So let's do that. Increase the gap to 6 between the button and the controls. And maybe I can move the comment here. Alright. And then the button here will have py

And maybe I can move the comment here. Alright. And then the button here will have py of three instead of one. And with that I think it's looking really good. Uh, let's try once again to verify that the scroll is working correctly and yep, it does. And with that, I have a funny feeling we are done with implementing the HTML and CSS from the Figma design. Now I am sure that some task will come back my way.

with implementing the HTML and CSS from the Figma design. Now I am sure that some task will come back my way to fix up some things that I may have omitted or have done wrong. And that's completely fine. That's part of a project. I'm not going to pull gold especially on camera while recording Screencast on the first try. But I think I've done pretty good. So I'm going to let the team know that it's time for them to make the implementation in Laravel.

So I'm going to let the team know that it's time for them to make the implementation in Laravel. I'm super excited to see what comes back out of it. And then when needed I'll jump back on. But from here, over to you guys.