Okay, so we've got our action buttons all set up in the login screen. Let's now focus on the left column and the vertical word stack. So this one is actually pretty tricky and I think what makes it particularly tricky is this baseline alignment between the pixel logo and the main word everyone here because if it wasn't baseline aligned, we could basically have a full height container.

because if it wasn't baseline aligned, we could basically have a full height container that you see here highlighted in blue. And so we would have just a list of words that is a hundred percent height overflow clip and that should work. But then because we want this alignment to work, it's actually a little bit more tricky. So what I'm thinking here, and I don't know if this is the best solution,

So what I'm thinking here, and I don't know if this is the best solution, but I think it'll work is to keep the element with the items baseline alignment that we have right now. The main word. So the main word is going to be its own little container and then we are going to have two sections, one above and one below. And we are going to use absolute positioning for that and we are going to offset it from 100%.

And we are going to use absolute positioning for that and we are going to offset it from a hundred percent of the middle container. So the top one will be from the media word here all the way up and it will overflow outside, but that will be clipped. And then same deal for the bottom one. It'll start here below the everyone word and flow all the way until it gets clipped out. I think that's gonna work quite well. We just need to make sure that there's enough words on the

I think that's gonna work quite well. We just need to make sure that there's enough words on the stack so that it always spreads out beyond the vertical viewport edges. So let's make sure there's enough words for even a really high monitor to show all the words because if the words stopped before the top and the bottom, that would feel sort of awkward. So let's try build this uh, and see what happens. Alright, like I said, we're going to have three sections,

So let's try build this uh, and see what happens. Alright, like I said, we're going to have three section, the middle section, the top section, and the bottom section. The first thing I wanna do is set up the font, uh, properties like the size, color, uppercase, because all of these, despite looking different, will have shared properties. Of course here we have the primary main color, but I think that these are also, as you can see, using the same color.

but I think that these are also, as you can see, using the same color. These have an opacity of 20% and then these have an opacity of 10%. But essentially all of these words, despite being hidden more and more, uh, have just a different opacity. But they all share the very same color font size and font properties like being uppercase. And so for that reason I'm going to set these uh,

and font properties like being uppercase. And so for that reason I'm going to set these uh, font properties to a common element to all three containers. So here, let's go in our left panel, which contain the SVG and then the word stack here, the placeholder we had. And so here I will set some classes so that every element inside of it inherited. And so I want the text to be uppercase. Let's go with text-xl. And I want the color to be text-pixel.

Let's go with text for xl. And I want the color to be text pixel and yes, nice, this is precisely what I want. So, uh, like I said, we want this to be its own containers so that it can maintain the baseline alignment with the logo. Alright, so let's divide our stack in three sections. And so this one will be, let's call it the anchor. This is the anchor words that's balanced leveled with the pixel logo and above it will have a top section.

This is the anchor words that's balanced leveled with the pixel logo and above it will have a top section and below it will have a bottom section. So if I just add some words to the top section, let's go 1, 2, 3 and then the bottom section as well. 1, 2, 3. It's not really going to do what I want. And basically it's going to try to maintain the baseline alignments with the first word here. So what we need to do is use absolute positioning

with the first word here. So what we need to do is use absolute positioning for the top section and the bottom section. And so before I do this, I need to give the wrapper here the position of relative so we can contextually absolutely position the other elements. And here I will wrap my top and bottom section with absolutely positioned wrappers. Let me copy that one here

and bottom section with absolutely positioned wrappers. Let me copy that one here and wrap the bottom stack with it as well like so. So we have a relative parent and then the top and bottom section are absolutely positioned and the anchor one is untouched. So the pixel logo is going to align baseline with it hopefully. Alright. And it may appear that it's broken, but it's actually doing exactly what I was expecting.

Alright. And it may appear that it's broken, but it's actually doing exactly what I was expecting. The top and the bottom word stacks are perfectly overlapping below the anchor here. So now we need to have some positioning properties to place them like we want. So I want to place the top section in a way where the bottom edge here is sitting right at the top of our anchor. So I wanna set the bottom properly to 100%.

is sitting right at the top of our anchor. So I wanna set the bottom properly to 100% of the height of the relative parent, which is this anchor basically. So let me try this here at the top section I can go bottom-full, which is bottom-100%. And look at this, it's doing exactly what I was hoping it to do to make it clearer. Let me give some colors. So bg-pixel-20% for the top one and the bottom one.

Let me give some colors. So BG pixel 20% for the top one and the bottom one. Let's go with another color. BG green 500 at 20% opacity. So now it should be pretty clear what's happening. We have our anchor word here and then the top section sits a hundred percent of its height, so perfectly above it. And then the bottom one does the same. And what I'm thinking is that if we add sufficient amount of words, it'll spread all the way to the top edge.

And what I'm thinking is that if we add sufficient amount of words, it'll spread all the way to the top edge and all the way to the bottom edge. And it should look a lot like the design has here. And of course the other thing we need to factor in is the transparency and the spacing between the words. But I think we off to a good start. Uh, in my mind the proof of concept of having these absolutely positioned uh, top

Uh, in my mind the proof of concept of having these absolutely positioned uh, top and bottom containers seems to be holding up. So let's go and add some spacing with flex and the transparency layer and see what happens. Okay, before I add extra words and deal with the transparency, I wanna set a gap between each one of these words because as you can see, the words are not uh, touching each other.

because as you can see, the words are not uh, touching each other. So we're going to have a flex container on the container parent. So we're going to set the container as a flex, flex-col parent and then add a gap and we'll do the same for the bottom and we might need to play with some margin or padding top and bottom between the top and bottom containers to respect the gap here as well.

and bottom between the top and bottom containers to respect the gap here as well. Okay, I will try to select both the top and bottom containers like this and set them to flex flex and let's go with the gap of 2, which should match the designs eight pixels gap. Okay? So it works, but as you can see, like I mentioned, the center anchor is now too close. So we cannot add a gap between these three sections because of the absolute positioning.

So we cannot add a gap between these three sections because of the absolute positioning. But we can add a margin-bottom to the top one and a margin-top, uh, to the bottom one to recreate that gap of two. And actually since I'm expecting these uh, elements to span out of the vertical viewport lines, I can have both the top and bottom containers have a margin-top margin-bottom of two. And I think that will work. And yeah, nice.

and bottom containers have a margin top bottom of two. And I think that will work. And yeah, nice. So now we have a consistent spacing between all the words. Uh, there will be some margin top here, but like I mentioned it'll be way outside of the viewport and the same with the bottom. Okay, uh, I think it's time to take off the training wheels. So I will remove the background colors, so this class here and this class down here. Okay. And let's go fill up the whole word stack, top

and this class down here. Okay. And let's go fill up the whole word stack, top and bottom and see what happens. So I will add another five, let's say another six words, both at the top and at the bottom. So I can copy these three and duplicate them. And then once again, so we got nine total and here the same paste, paste and go take a look at what happens to the ui. Alright, perfect. This is what I was hoping for.

and go take a look at what happens to the ui. Alright, perfect. This is what I was hoping for because our body has an overflow: clip and actually our main tag also has an overflow: clip. Whatever bleeds out of the container just gets clipped out. And if I was to zoom out in the UI, we would eventually find the edges of the word stack. But like I said, if we make it big enough, that shouldn't be a problem. Uh, now for recording purposes,

that shouldn't be a problem. Uh, now for recording purposes, I think we have plenty enough at a hundred percent zoom level for my 1280 pixel uh, resolution. Okay, great. Uh, the next obvious thing is this is very aggressive and screamy and completely conflicts and competes with the fuller text. And this is where the opacity transparency comes into play. So on the design, the main anchor word is a hundred percent and like I mentioned before, these top one words

So on the design, the main anchor word is a hundred percent and like I mentioned before, these top one words and then the bottom two here, uh, have an opacity of 20%. I can show you once again, the opacity here is of 20%. So if that was a hundred percent it would show up just like the anchor word. So we are gonna set an opacity of 20% and then we have a next tier of opacity here, which is 10%. So here we got a couple ways to solve this.

which is 10%. So here we got a couple ways to solve this. We could set the opacity, uh, individually to each word. So 20%, 20%, 10%, 10% or I think what I wanna do is set the whole top and bottom containers to 20% opacity. And then if we want to achieve the 10% for a few words, we can have a sub level of container and set the opacity to 50% or why 50%? Because 50% of 20% is 10% effectively.

and set the opacity to 50% or why 50%? Because 50% of 20% is 10% effectively. So we are going to, I think that's what's gonna be the most logical and simple. We're going to have 20% opacity, uh, for the top and bottom container as the baseline. And then we are going to have a sub container somewhere here that sets the opacity to 50% of each 20%. So 10%, hopefully you follow along and that makes sense. So let's give it a go.

So 10%, hopefully you follow along and that makes sense. So let's give it a go. Once again, I will select both and give them an opacity of 20%. So right away with just that extra utility class added, it should look much nicer. And yeah, look at this. This is really, really taking shape. Now we are going to have one word on top and two at the bottom here. If we look at the design, one of the top words,

and two at the bottom here. If we look at the design, one of the top words, the word media here, and then two of the bottom words, coder and art have 20% opacity and then we drop to 10%. Okay? So as of now, all the words inside of here are 20% opacity because of this class. So what I wanna do is keep that one to 20% opacity. Remember the first one on top. And so I wanna wrap all the other words here inside a div that has an opacity.

And so I wanna wrap all the other words here inside a div that has an opacity of 50% that is going to work for the opacity, but that is going to mess up the spacing because of the gap within the flex children. And exactly like I predicted, the transparency seems to work, but now we lost the gap of 2. So we need to also make our sub container a flex parent and then have the flex col and gap-2 classes. So let's go and do this.

and then have the flex call and gap two classes. So let's go and do this. This is a flex, flex call gap two element. And now look at this. I'm starting to be very happy with the state of things. Let's do the same for the bottom. And actually I can copy this wrapper class here and we are going to scroll down to the bottom. We are going to keep the first two words at 20% opacity and wrap the rest of the stack

We are going to keep the first two words at 20% opacity and wrap the rest of the stack or the substack in our 50% opacity flex container. Alright? So I am very happy with this, but what I'm going to do is change the words so it doesn't say words stack attack. We are going to match some of the words from the design and at this point I think we're going to be in a very good place. Okay, so here when Jeffrey

to be in a very good place. Okay, so here when Jeffrey and Jeremy do the Laravel implementation, uh, maybe, maybe the words on the word stack could come from the User's, uh, roles, uh, profile or preferences. But here I'm just going to copy manually the words from the design. Uh, and so you don't have to really look at me do this. I will copy and paste the different roles, uh, instead of just typing and you watching me type them.

I will copy and paste the different roles, uh, instead of just typing and you watching me type them. Alright, so for the top stack I will paste a bunch of words that I prepared earlier. And this one here, which is the 20% opacity I'm gonna set to media as per the design. And I will paste the same uh, amount of words at the bottom, the 10% opacity bottom elements. And once again, we will just change these two words at 20% opacity to match the design.

And once again, we will just change these two words at 20% opacity to match the design. So it's coder and art. And check it out. This is looking pretty darn nice. I forgot the most obvious and flashy word instead of word stack. We are gonna have that say everyone. And with that, I think we are in a really nice place. We quite lucky that it's still works kind of nice with the squish format with my face next to it,

We quite lucky that it's still works kind of nice with the squish format with my face next to it, but I guarantee you that if I make it any squishier or whiter, it's going to look terrible. So we are almost wrapping up with the login screen and moving on. But before we do that, we are going to do one more lesson where we do a quick responsive pass. We are going to change the width and see what breaks and make some modifications.

We are going to change the width and see what breaks and make some modifications. Nothing major, but I do think we are going to have to hide the word stack. In my mind, this word stack is a decorative element. It's very nice, but if on the mobile screen it's not there, I don't think it's the end of the world. So we are going to decide at what, uh, viewport width we should start showing it and do a few decisions like this.

viewport width we should start showing it and do a few decisions like this. And after that, I think we can move on to the profile and feed views. I hope you're as excited as I am. Let's do a quick cleanup, responsive pass, and then we're gonna move on.