All right.
And once we have the register and login page in place, now let's set up the CSS.
As you can see, the only difference between.
The two pages are the amount of input fields we have.
That's it.
Pretty much everything else is the same.
And therefore I decided to set up one wrapper for both pages and in order to set up the CSS, we want
to navigate to the wrappers in the assets.
And more specifically, we're looking for the register and login page.
JS.
Let's navigate over here.
Let's remove everything from the wrapper.
That's going to be the starting point.
Notice this is the default look again.
We right away have some kind of styles because we're using the global classes that I use pretty much
in all of my projects.
First, we want to set some height for the page, and I'm going to go with 100% of the screen height
and therefore I'm going to use the VH units.
Then we want to go with display grid.
So we're setting this for the wrapper and we want to align items center.
Then we want to style the logo.
So remember, we have the class and we'll simply go with display block.
Then we're going to set the margin.
Zero auto.
So place it in the center.
And then let's also add some margin in the bottom.
And I'm going to go with margin bottom equals to 1.38 Rems.
Then we want to style the actual form.
Remember, it's our global class and we'll just change the max width over here.
And we'll set it equal to 400 pixels.
And let's also add the border on the top.
So we're looking for border top and we'll set it equal to five pixels solid and then hyphen hyphen bar.
And we're looking for the primary color.
And as I don't it's not hyphen hyphen war, it should be var and then hyphen hyphen.
My bad then.
500 and we're good to go, so let's save it.
Yep.
That's the look we're shooting for.
After that, we have a heading four, so that's going to be basically our page title or something along
those lines.
So in this case, we're going to go with text align and we'll set it equal to center.
Then also we want to add some margin and this is going to be again equal to a margin bottom 1.38 REM.
So I'll just copy and paste just so we can speed this up.
Then we're looking for the paragraph effectively.
That's the guy all the way in the bottom and we're going to start with margin top.
We'll set it equal to one Rems, then text align, same deal.
We want to place everything in the center.
So let's set that one.
And let's also add some line height over here.
So right after that, we're going to go with Line.
All right.
And we'll set it equal to 1.5.
And now when it comes to buttons, remember?
We're getting most of the styles from the BTN class, which is Global One, but we also can add a little
bit of additional margin to the top.
And therefore I'm going to go with BTN and then we're looking for one REM.
So essentially it's just going to create some distance in between the buttons.
So let's check out the register one.
Looks about right.
And now let's just style this member hyphen BTN.
So effectively that's the link inside of the paragraph.
So we're going to look over here for member.
Hyphen.
BTN and effectively in here.
I want to start with color.
I want to set it equal to my primary one.
So primary 500.
Then we want to add some letter spacing and this will be equal to my CSS variable.
So var and then hyphen hyphen, letter hyphen spacing.
And then lastly, let's add some margin on the left.
So margin left is going to be equal to 0.25 Rems and once we have these styles in place.
We're done with the CSS and we can move on to the next step.