All right, Let's start building. Uh, like I mentioned, we're going to start with the login screen. So let's take a look at the design and jump right in. So we are going to draw our attention to this OAuth login screen. And so while we're going to try our best to do a really good implementation, we are not necessarily here going

to do a really good implementation, we are not necessarily here going for a pixel perfect representation of every font size and spacing. I'd draw the focus on the CSS concepts and layouts as we go through the build. Uh, and we can make decisions, educated decisions on what font size and spacing to use based on what's available in the tailwind theme. Alright, with that statement out of the way,

to use based on what's available in the tailwind theme. Alright, with that statement out of the way, when I look at this, I sort of imagine that this screen is using the full viewport height and width. There is not going to be any vertical up and down scrolling. It's basically a window that has the dimensions of the viewport. So we're going to start by setting our body to respect that. And so in the index.html file, which is

So we're going to start by setting our body to respect that. And so in the index.html file, which is where we are going to do our work, I will remove the placeholder contents that we had and I will also remove the p-2 class. But I'll keep the background and text color. And so we're going to tell our body elements to have a height of 100vh, which is a hundred percent dynamic viewport height. So it's always going to use the full height.

which is a hundred percent dynamic viewport height. So it's always going to use the full height of the view ports, but it's going to factor in things like the URL address bar. And we also have a width of full and to make sure that it does not expand beyond that, we're going to set overflow of clip. So it's going to clip out anything that tries to bleed out of this view ports. Alright, next, it looks like there's a full screen

to bleed out of this view ports. Alright, next, it looks like there's a full screen background image and if I zoom out a little bit, it also looks like that image is offset to the right a little bit as you can see with the blue rectangle of got selected here. So let's do this. I'm going to give a class of relative to the body tag and inside of it I'm going to not immediately have the image,

and inside of it I'm going to not immediately have the image, but I'm going to have another div with a position of absolute and inset zero. So it's basically once again occupying the whole space available. And also that one will clip everything with overflow clip. And the reason I have that extra div here is so that we have this window that is exactly the viewport and it's clipping everything.

that we have this window that is exactly the viewport and it's clipping everything and then the image going to be inside it and offsets to the site. Alright, so inside of here we'll have an img tag. And to make things simple, we're going to have the image available in the project. So in the public directory I will have another folder called images. And so I'm going to drag the image right there

called images. And so I'm going to drag the image right there inside this images folder. There it is, official login_bg. And let me quickly copy the path to that image. And so I'll paste this, but we don't want the entire path, we just want images/official_bg. So let's go take a look at what we have so far. Alright, that's definitely a good start.

So let's go take a look at what we have so far. Alright, that's definitely a good start. But we might get tricked into thinking that this image is using the full viewport. But if I open the sidebar, you will see that it kinda resizes and reveals that it was just a bit of luck that the aspect ratio was matching our display. So we're going to give some classes to that image and we also going to make it absolute and inset zero.

So we're going to give some classes to that image and we also going to make it absolute and inset-0. We need to also give you the h-full and w-full to make sure it uses at least that space. So now the image should be using the whole space, but when I resize the viewport it'll get distorted 'cause it tries to squish to the right dimensions. And we can fix that with one more class object-fit-cover, which will basically crop the image in its center and make it use all of the space.

which will basically crop the image in its center and make it use all of the space. So this time as we get more space available, more of the image reveals, but it's always using the full surface. Okay, we're getting somewhere. So now we're going to try to offset that image to the side. Uh, let's go with about uh, 15%. Again, I'm eyeballing here. And so what I can do is instead of having inset: 0, I can say insetY: 0.

And so what I can do is instead of having inset zero, I can say inset-y zero. So it uses the full vertical space. And then I'm going to set the left positioning to like I said, 15%. This is just an estimation. And so you can see the offset here on the left and I think that works kinda right. The plant is sort of in the middle of the screen, which is what happens in the design.

The plant is sort of in the middle of the screen, which is what happens in the design. And also you can see here the image is much more tame, like there was an overlay on top of it. And if we inspect the image, you can see that the opacity is set to 30% here. So we can do the same. So I can give an opacity of 30% and yeah, it's starting to look pretty good. Obviously there's that harsh uh, stop here because of the offset.

Obviously there's that harsh uh, stop here because of the offset. And if you look at the design, uh, if I zoom in a little bit, it looks like there's this gradual uh, gradient that fades into the side. Maybe we can inspect that and find it. All right, there it is. There's a linear-gradient that goes from black or the dark color to transparent. And so here we could have uh, div

that goes from black or the dark color to transparent. And so here we could have uh, div and elements that has a background gradient that goes from the dark color to transparent, basically what's done in Figma. But I think we can try the fancy mask utilities in Tailwind. And because we already have the background behind the image that has the background color, we should be able to mask the left side of the image and it'll blend into the background.

This is just a simple explanation with no code.

And then we want to mask from about 80%. Yeah, let's try that starting from the right. So the last 20% of the image basically, and check this out, this actually works really well. So let me demonstrate by changing the 80% to 20%. So it should start masking from that line here roughly. So mask L from 20% and there now you can see actually, I don't know if you can see, but the image starts fading from

I don't know if you can see, but the image starts fading from that point all the way there. But I think 80% works really well and I'm going to go back to 30% opacity and that should sell the trick really well. Alright, I'm super happy with that. Okay, so we've set the stage literally for our login page. I think before we tackle all of the content, we might wanna add the footer here, which seems

I think before we tackle all of the content, we might wanna add the footer here, which seems to be fixed at the bottom. So this is in my head sort of part of the overall page layouts. Basically the view ports dimensions will dictate where the footer goes. So we are going to add this now. So there is one line of text, another line of text, and this fancy uh, white noise bar.

So there is one line of text, another line of text, and this fancy uh, white noise bar that goes all the way to the bottom. And we want all of this to be fixed to the bottom of the viewport. Okay, so I'll collapse the div that contains the background image and here we'll have a footer tag and we want our footer to be fixed at the bottom. So bottom: 0 and then spread over the full width.

and we want our footer to be fixed at the bottom. So bottom: 0 and then spread over the full width. So inset-x: 0 and inside we are going to have like I mentioned, two lines of text. Let's have some gibberish for now. Alright, this is what I was expecting. Good. So we will copy the first sentence here. So our first paragraph will say this and we'll do the same for the second line.

So our first paragraph will say this and we'll do the same for the second line. Okay, so we want the text to be center line, use that uh, pixel fancy color and this is actually the same color with an opacity of 50%. And then we want a little gap between the two. So I think here I'll have a wrapper of flex flex-col and let's go with the gap of 1.5 and I'll wrap these two. Whoops, I want 1.5 for the gap.

and let's go with the gap of 1.5 and I'll wrap these two. Whoops, I want 1.5 for the gap. I want to center these two paragraphs. So because we're in flex, I can use items-center. There it is. Nice. And so I'll just add some padding-bottom to our footer so it's not right on the edge. And like I mentioned, we want both of these to have the text-pixel-color. Nice. Then we are going

This is just a simple explanation with no code.

let's then add this white noise sort of band here and you can't see it here, but if I go in prototype mode you will see that the band is actually an animated white noise. And so I have a gif image that I can use for that. And so we're going to have this image repeat over itself. Uh, so it's not a huge file because gifs are pretty heavy. We're gonna have a small little square gif and then we repeat it as a tile in both axial and so we can have that pinned.

and then we repeat it as a tile in both axis and so we can have that pinned to the bottom of the view ports. Alright, through the magic of the dual screen, a GIF will appear. This is our white noise, I'll put it in the image and you can see it here. And so after our content div, let's have a comment that says white noise. And here so that I can repeat the image pattern, I needed

white noise. And here so that I can repeat the image pattern, I needed to set it as a background image. So I'll have a div that is positioned absolutely a lot of these in this build at the bottom 0 and inset-x 0. So just like the footer before really. And then we are going to have a background image and we can pass an arbitrary value with the url of the image, which is located in,

and we can pass an arbitrary value with the URL of the image, which is located in, you can see it right here, images/white_noise.gif, not fig. All right? And ooh, I cannot see it. Oh, okay. So we've set a width of full technically with inset-x-0, but we've only pinned it to the bottom without setting a vertical dimension. So let's add a height of 4 and that should now reveal our noise machine.

So let's add a height of four and that should now reveal our noise machine. Very cool. Uh, but obviously it's overlapping the fuller because it competes with the bottom zero fixed space. And if you look at the design, there is a little bit of spacing here. So what we can do is add some padding around this contents div here on the div that wraps the content p-4 to offset the h-4, which means that our content will once again be pb-3.

that wraps the content p-4 to offset the h4, which means that our content will once again be pb-3. The pb-3 will basically pretend that it's the bottom of the viewport, but it's going to be the top of the white noise image if it makes sense. And so now that's exactly what I wanted. We have the full stage ready to accommodate our content. We have the full screen cropped, clipped, uh, viewport height wrapper, and then this fixed footer.

We have the full screen cropped, clipped, uh, viewport height wrapper, and then this fixed footer. And now we can go about bringing all of the content, which we are going to do in another lesson. So this lesson doesn't drag into a marathon. But just before we wrap this up, I'm going to create a git repo and push the code we have so far so I can let the team show, let the team know that I'm progressing and if they're curious about the start of the build.

let the team know that I'm progressing and if they're curious about the start of the build where things are at, they can check out the repo. So let's do that and then we'll move on to the next part of the build. Alright, so here I am on the RAAs GitHub organization and I'm going to create a new repository. I want this thing to go in laracasts and we'll call that aptly Laravel workshop for the description team building exercise.

and we'll call that aptly Laravel workshop for the description team building exercise. Jeffrey and Jeremy can go and change that later if they want. I guess this repo is gonna be public. I can't make it private. We will not add a README and a .gitignore, I'll do that myself. But let's create the repo. So now we should have the instruction to move our code. Before I do that, I want to for sure have a .gitignore file.

So now we should have the instruction to move our code. Before I do that, I want to for sure have a .gitignore file that .gitignore. We definitely don't want to commit all the node_modules to the repo. And I'm not exactly sure what we'll need here, but I'll have node_modules, the Mac .DS_Store files and a few other just in case. And now let's go and actually create a GitHub repo with git in it.

And now let's go and actually create a GitHub repo with Git in it. We'll change the branch name with git branch -M main and just to check the node_modules should be grayed out. Yep, it is because it's in the .gitignore. That's a good sign. Uh, yeah, we want to add a README file, README.md. And here I'll just give a title of Laravel workshop. And because we have a little bit server and I am a kind colleague.

And because we have a little bit server and I am a kind colleague and coworker, I will leave some instructions on how to set up the VT app so you can install with npm install and then npm run dev. That's enough for now. They can work it out. I will commit what I have so far with git add . and git commit. Yes, I no, I need an alias. I've been saying that for years. LogPageScaffold. That'll do.

Yes, I no, I need an alias. I've been saying that for years. Log page scaffold. That'll do. And so now we've done all of this. I just need to add the remote to my local repo like so. And then I can push all my work with git push -u origin main. Alright, so we should have everything on the repo. Let's refresh the page to validate that and yep, there it is. Here's our index.html file.

and yep, there it is. Here's our index.html file with the UI work that we've done so far. Excellent. That lets the team know we are on our way. And so now in the next lesson we can continue the build and we are going to put the content inside of this nice login screen frame that we've built. See there.