All right, let's carry on with the implementation of our logging screen. So this is where we left things at. And so we've got the background setup and now we're going to fill the content section here. Roughly speaking, I see a two column layout. The left column is that pixel logo and the word stack. And then on the right we've got the sign up sign in buttons. So at a high level, I think we can have a grid or a flex container that's going

So at a high level, I think we can have a grid or a flex container that's going to put this thing side by side. And uh, because if we look at both together, they all sit in the center of the screen. Before I have this two column split, I'm going to have one grid cell. Basically I'm gonna make the whole wrapper a grid container and so I can center align vertically and horizontally both the children here.

and so I can center a line vertically and horizontally both the children here. All right, so I will collapse the footer that we've built in the previous lesson. And I'll just add a comment here saying this is the background image. And below it is where we're going to, yep, have the main content. So I'll have a <main> tag and let me create a bit of space before and after.

So I'll have a main tag and let me create a bit of space before and after. And scroll down here. And like I said, we're gonna have two main parts, a left panel and a right panel. So maybe I'll have placeholder divs here, left panel. And then this one can be the right. And so we could apply the flex or grid classes to the main, which is the common wrapper. But I want to group these two inside a containing div,

or grid classes to the main, which is the common wrapper. But I want to group these two inside a containing div, which is now going to allow me to vertically and horizontally center this single div from the main element. So class grid and place-items-center. And yet we wanna make sure we use the full height, uh, of the container. So what it does is now this becomes a single grid cell that's going to be perfectly centered in the middle.

So what it does is now this becomes a single grid cell that's going to be perfectly centered in the middle of the screen, vertically and horizontally. And as a result, everything is right in the middle where I want it. And now we can use flex to separate these two panels inside the wrapping div, that one that I've added around. So class, yeah, let's go with flex and we'll go with a big gap of 16 for now. And this is a simple

and we'll go with a big gap of 16 for now. And this is a simple but decent starting point for our setup. So you might notice that the text is sort of transparent almost like it sits behind the image. And well, if I go back to the background image and I remove the opacity 30, you will see that the text does in fact sit behind the image. And it's because uh, our content main element has a position of static by default

And it's because uh, our content main element has a position of static by default and we need to switch that to anything else to make it come on top of the absolutely positioned background image. So here in the main class I could add position absolute, but I like to add the isolation isolate properly, which is going to create a new stacking context. And as a result the text goes back in front. Actually the whole main section is back in front.

And as a result the text goes back in front. Actually the whole main section is back in front of the uh, background image. So let's bring the transparency back up here with opacity: 30. And this is looking better now. Okay, so I've set a gap of 16 between the two columns or the two flex children just to create some separation. But what it feels like here, if I take my screenshot tool is that we have a max-width container like so,

But what it feels like here, if I take my screenshot tool is that we have a max-width container like so, and then the elements are placed as far away from each other, touching the sides. So basically we can use flex justify-between. So what we're going to do is add a max-width container and then change the justification to justify-between. Alright, so here let's go justify-between. So nothing's gonna happen, but if I was to add a width-full class.

So nothing's gonna happen, but if I was to add a width-full class to make it use the full width, now you can see that it's pushed out the two elements as far as they can from each other. Great. So on the main class let's have a maxWidth. maxWidth, and I'll go with an arbitrary value of 1000 pixels here. So you can see the main container shifted to the left. It stops right here and we can center it with mx-auto.

So you can see the main container shifted to the left. It stops right here and we can center it with mx-auto. So margin left and right will be auto and center the thing in the middle. Nice. And that's probably good enough for now. We will definitely come back to this and add some padding and some responsive behavior. But I think we got a nice starting point here. Alright, so for the left column we have this pixel logo here that I've exported as an SVG.

Alright, so for the left column we have this pixel logo here that I've exported as an SVG. So I'm going to paste that SVG inside the left panel div. That's a whole lot of uh, paths here. And because it has a view box but not a width attribute, we need to add a class to size it with width. And let's go with width 28, which is 112 pixels, which is roughly the size on the design, huh? Let's make it a bit bigger. 36. Alright, cool.

which is roughly the size on the design, huh? Let's make it a bit bigger. 36. Alright, cool. And now you can see it's a little bit offset to the bottom. So where we had justify-between, I also want to align-items with items-center so they're vertically aligned. Yes, much better. Okay, still in the left column next to our pixel logo, we have this word stack. So I'm going to keep this for later 'cause it's probably one of the trickiest implementation in this page, but we'll have a placeholder for now.

'cause it's probably one of the trickiest implementation in this page, but we'll have a placeholder for now. So there's just a little gap here. So let me collapse the SVG and I'll have a flex wrapper once again with a gap of let's go three. And so we'll have the SVG first and then let's have a placeholder div, which is going to be our wordStack. Alright, that's good enough.

to be our word stack. Alright, that's good enough. If you wanna be picky, you can see that it looks like both columns will be baseline aligned. So in the flex, maybe you go items baseline. That should do the trick. Yes, very nice and we'll come back to this later. All right, like I mentioned, we're going to tackle the right column now with all the buttons first and then we'll come back to this word stack, which is kind

to tackle the right column now with all the buttons first and then we'll come back to this word stack, which is kind of a like CSS trickery. Okay, so we'll collapse the left panel for now and put our attention and focus on the right panel. So here we have a container that has seemingly a specific max width or set width and then we have some text and some buttons. Um, the spacing between each of these elements is very consistent,

Um, the spacing between each of these elements is very consistent, so this is definitely going to be a grid or a flex with flex-direction. So we can have a gap and follow the same gap between each element. That seems pretty straightforward. So let's go ahead and start by setting a container with a set width. All right, so I can directly on here, I think put a width.

and start by setting a container with a set width. All right, so I can directly on here, I think put a width of 120, but we also don't want it to be bigger than the containers, so let's go max with full as well. And just so I can see the width, let's add a bg of pixel, maybe at 50% opacity. I just need an element inside of it so it actually shows up. And yeah, that might be a little too big. So maybe let's go with 100 and yeah, that sort of works.

And yeah, that might be a little too big. So maybe let's go with 100 and yeah, that sort of works. Uh, our max width container might be a bit too wide, but uh, we'll go and fix that maybe in the future. Let's make sure we get the rough layout first and then we can tweak things. Alright, so to me this text here is the H1 of the page, the main headline for SEO purposes. So we're going to have a H1 with the pixel highlight color.

So we're going to have a h1 with the pixel highlight color and we're gonna bump up the font size as well. h1, we'll paste this and let's go and add textPixel. And maybe let's go with text-3xl. How does that look? Not too bad. So I'll make the max-w container a bit smaller. Yeah, that's great. And let's remove the background now like so and so a quick note here. I am working uh,

so and so a quick note here. I am working uh, to make it work best at a 1280 pixel width resolution, which is what I'm recording at. So there's chances that it might not look as good on wider screens or as you can see here on narrow screens, it's starting to touch the edges. So we will do some responsive work, but uh, because I'm recording at 1280, I think that I'm trying

So we will do some responsive work, but uh, because I'm recording at 1280, I think that I'm trying to optimize this for the screen casting. And then we might have a lesson where we zoom out to create a wider uh, display view port and then do some tweaks. So as you can see here, there's a little non-gap, so we should need to add a little bit of gutter or padding on the sides. Let's do that real quick and then keep going.

of gutter or padding on the sides. Let's do that real quick and then keep going. So this has to deal with the main container here where we have the max width and um, mx-auto will add px-8. And so now the pixel logo and the other sides will never touch the edges, which looks much nicer. Alright, I like where this is going. Let's carry on with our right column.

Alright, I like where this is going. Let's carry on with our right column. Okay, I think all of these elements will be within the same flex container, which has the flex-direction column. Uh, and we can add some margin-top here or some self-aligned last-end. So let's start with the flex container and then we'll create one button. This is the same and this is a variation of the button,

and then we'll create one button. This is the same and this is a variation of the button, so we'll try to do some copy and paste but reuse some style. Alright, below our <h1> tag, flex flex-col and we'll have a gap of 3 and to create separation from the headline above mt-16. And inside of there we'll have a series of <a> tags because they are links to another page. So we have sign in with Google, we have sign in with Apple I believe,

So we have sign in with Google, we have sign in with Apple I believe, and then we have a little bit of text that can be a span or a p tag that says or, and then one more button that says create an account. Something like that. Yep, that's exactly it. Okay, that's a good starting point. I like the spacing between uh, each element. And so let's start with the first button. So it looks like it has a border of the pixel color,

And so let's start with the first button. So it looks like it has a border of the pixel color, yap and the background of the pixel dark color. But uh, you can see that the overall appearance is 50% where the text is full opacity. So I think we can set a border color of pixel 50% and a background color of pixel dark 50% and then the text color of pixel and that should work for the padding. We have 18 and as you can see approximately 7.

and that should work for the padding. We have 18 and as you can see approximately seven. So we'll go with probably PX 4, which is 16 and PY 1.5. All right, let's try that. So we'll work with the first button here. class equals bg, pixel dark at 50% opacity border, 1 pixel, border pixel at 50% opacity PX 4 PY 1.5 and text pixel.

border pixel at 50% opacity px four py 1.5 and text pixel. How did I do? What do you think? Did I cook? Hey, I think I did cook. Uh, obviously this is taking the whole width of the container, but if we look here, um, the buttons do not expand as wide as the text above. So we'll have a max width container to a flex container, which is another argument to wrap all of these together inside the same container.

which is another argument to wrap all of these together inside the same container. So we got W 80 here, so in the container, maybe let's go W 64, that might be a bit small, but let's try that, huh? Actually I think that works quite good, maybe even a bit smaller W 60. Yeah, now we're talking. So let's make the text center inside the button and maybe have a subtle hover style because it's 50% opacity background, maybe we can crank it up to 75 on hover or go the other way.

because it's 50% opacity background, maybe we can crank it up to 75 on hover or go the other way and go 25%. And you know what we want the text center in the buttons but also for the O here. So we might put text-center to the flex container. Uh, this just one gonna have to be left aligned, but we can tackle all the other centering in one class. So right here in the flex-wrapper I will also have text-center and that's gonna take care of all of our buttons

So right here in the flex wrapper I will also have text-center and that's gonna take care of all of our buttons and texts, which is great. Okay, I'll just add the hover styles and then we'll add the missing two elements that I for sure wants to leave inside the flex parent here. So I will copy the background color class and on hover I will change it to 75% opacity. And I'll do the same for the border color. On hover, the border color will also be 75% opacity.

And I'll do the same for the border color. On hover, the border color will also be 75% opacity. That should give a nice hover effect, huh? That's almost a little bit too much. So I'll reuse it to 60. And then on active on click, we'll go to 75 so it feels pressed. So I'll select the two 70 fives and change them to 60. And then we'll one more time duplicate this class, but for active and we'll go to 75. And let's do the same for the border active.

but for active and we'll go to 75. And let's do the same for the border active. Whoops, forgot the column. 75. So now on hover it's a little bit more subtle and then on click we have an extra layer of opacity. Very nice. Okay, we're getting there. Let me add the missing two elements and I mean those two here. So after the create an account, we have a <p> tag that says already have an account question mark.

So after the create an account, we have a P tag that says already have an account question mark and then another button that says sign in. So like I said, this one will need a lot more spacing so I can get a class of mt-16. That's going to add up to the gap of three and oops, the width container might be just too small. And also we need to left align this one. So let's go text-left. So maybe 64 will be just enough. Yeah, that works.

So let's go text left. So maybe 64 will be just enough. Yeah, that works. Although it still seems center aligned because it's almost the full width. What about 68? Okay, that might be a little too much, but we'll go with that. So we clearly see it's left aligned. Alright, that might be a little bit too wide, but at least we'll see that it's left aligned.

Alright, that might be a little bit too wide, but at least we'll see that it's left aligned. So let's keep going. I'm going to replicate the button styles on this one and then create the secondary button so we can copy the entire class attribute here from the first button and add it to the apple button. And then this button has very similar properties in terms of padding, fontSize, et cetera. So we'll change the backgroundColor to pixel.

of padding, font size, et cetera. So we'll change the background color to pixel and there is no border, but instead of just removing the border, we will make the border transparent. If I was to just remove the border, uh, the yellow button would have actually two pixels less in height, which is very subtle, but if suddenly they're side by side for a reason, you would notice.

but if suddenly they're side by side for a reason, you would notice. So with a transparent border, we keep the exact same dimensions for both buttons. Okay, so as a starting point, I am going to copy the classes one more time because the baseline is quite similar. And for the background, instead of pixel-dark-50, we'll have pixel. And I'm not quite sure what to do here for hover,

of pixel dark 50, we'll have pixel. And I'm not quite sure what to do here for hover, but maybe let's go the opposite way and have pixel 90 opacity. And then on active pixel 95. So again, we play with the opacity a little bit on hover so we don't have to work out different colors and we will keep the border but make that border transparent, which means that we can remove the hovering active border effect.

but make that border transparent, which means that we can remove the hovering active border effect because the border is transparent. I think that's all we need to do. And the text of course should change to pixel dark. I feel like I have a good chance of one shutting this secondary button and yep, I think that's looking pretty damn nice. Let's add the same style to the signIn button. And I've just realized that the already have an account text

Let's add the same style to the sign in button. And I've just realized that the already have an account text is smaller, so we might recover some of the container width that we've added. So I'll copy these classes to the sign in button. All right, and let's um, compare this with the design. It's definitely not pixel perfect like I mentioned at the start, but I think the essence is really there. Uh, I'll make that text a little bit smaller.

This is just a simple explanation with no code.

and yeah, it's a little bit too big, but it also exposes another potential issue where we are vertically centered, but because we have this footer, maybe the vertical perception should be shifted a little bit higher up. Do you know what I mean? Here it feels like the space to the top is the same as the space to the footer, uh, but because we've absolutely fixed position of footer, we can get away with adding some padding-bottom

because we've absolutely fixed position of footer, we can get away with adding some padding bottom to the whole column and that might work. So I'll change this to T 20, so it's not overwhelming. And what I was saying is the right panel here, I will add a class of pb, um, 16 and that should visually offset for the fixed footer. And look at this, I think this works really well. Okay, I feel like our logging screen is starting to look decent, at least at the 1280 pixel.

Okay, I feel like our logging screen is starting to look decent, at least at the 1280 pixel or this squished version you're looking at now. It's looking pretty good. I can guarantee you though, that it's going to be broken when we squish the window narrower or make it super wide. But for now this is a really good baseline. And so we're going to shift our focus to the left column once again in the next lesson.

And so we're going to shift our focus to the left column once again in the next lesson. See you right there. Take a break if you need and then jump back in.