1 00:00:00,050 --> 00:00:00,380 All right. 2 00:00:00,380 --> 00:00:06,410 And once we have the register and login page in place, now let's set up the CSS. 3 00:00:06,440 --> 00:00:09,170 As you can see, the only difference between. 4 00:00:10,310 --> 00:00:14,340 The two pages are the amount of input fields we have. 5 00:00:14,370 --> 00:00:15,080 That's it. 6 00:00:15,090 --> 00:00:16,800 Pretty much everything else is the same. 7 00:00:16,800 --> 00:00:24,900 And therefore I decided to set up one wrapper for both pages and in order to set up the CSS, we want 8 00:00:24,900 --> 00:00:28,230 to navigate to the wrappers in the assets. 9 00:00:28,230 --> 00:00:32,940 And more specifically, we're looking for the register and login page. 10 00:00:32,940 --> 00:00:33,840 JS. 11 00:00:34,910 --> 00:00:36,050 Let's navigate over here. 12 00:00:36,050 --> 00:00:37,940 Let's remove everything from the wrapper. 13 00:00:38,050 --> 00:00:39,740 That's going to be the starting point. 14 00:00:39,830 --> 00:00:42,920 Notice this is the default look again. 15 00:00:43,100 --> 00:00:49,850 We right away have some kind of styles because we're using the global classes that I use pretty much 16 00:00:49,850 --> 00:00:51,770 in all of my projects. 17 00:00:51,800 --> 00:00:58,400 First, we want to set some height for the page, and I'm going to go with 100% of the screen height 18 00:00:58,400 --> 00:01:01,190 and therefore I'm going to use the VH units. 19 00:01:01,310 --> 00:01:03,830 Then we want to go with display grid. 20 00:01:03,830 --> 00:01:09,890 So we're setting this for the wrapper and we want to align items center. 21 00:01:09,920 --> 00:01:12,410 Then we want to style the logo. 22 00:01:12,560 --> 00:01:17,300 So remember, we have the class and we'll simply go with display block. 23 00:01:18,440 --> 00:01:20,660 Then we're going to set the margin. 24 00:01:22,040 --> 00:01:23,090 Zero auto. 25 00:01:23,540 --> 00:01:25,370 So place it in the center. 26 00:01:25,370 --> 00:01:28,670 And then let's also add some margin in the bottom. 27 00:01:28,670 --> 00:01:35,480 And I'm going to go with margin bottom equals to 1.38 Rems. 28 00:01:36,370 --> 00:01:39,660 Then we want to style the actual form. 29 00:01:40,230 --> 00:01:44,970 Remember, it's our global class and we'll just change the max width over here. 30 00:01:46,170 --> 00:01:49,200 And we'll set it equal to 400 pixels. 31 00:01:49,590 --> 00:01:52,310 And let's also add the border on the top. 32 00:01:52,320 --> 00:01:59,660 So we're looking for border top and we'll set it equal to five pixels solid and then hyphen hyphen bar. 33 00:01:59,670 --> 00:02:01,740 And we're looking for the primary color. 34 00:02:01,740 --> 00:02:07,050 And as I don't it's not hyphen hyphen war, it should be var and then hyphen hyphen. 35 00:02:07,050 --> 00:02:08,970 My bad then. 36 00:02:09,780 --> 00:02:12,750 500 and we're good to go, so let's save it. 37 00:02:12,750 --> 00:02:13,140 Yep. 38 00:02:13,140 --> 00:02:14,910 That's the look we're shooting for. 39 00:02:15,060 --> 00:02:22,050 After that, we have a heading four, so that's going to be basically our page title or something along 40 00:02:22,050 --> 00:02:22,800 those lines. 41 00:02:22,800 --> 00:02:27,240 So in this case, we're going to go with text align and we'll set it equal to center. 42 00:02:27,330 --> 00:02:35,490 Then also we want to add some margin and this is going to be again equal to a margin bottom 1.38 REM. 43 00:02:35,520 --> 00:02:38,700 So I'll just copy and paste just so we can speed this up. 44 00:02:38,710 --> 00:02:41,550 Then we're looking for the paragraph effectively. 45 00:02:41,550 --> 00:02:45,810 That's the guy all the way in the bottom and we're going to start with margin top. 46 00:02:46,350 --> 00:02:51,000 We'll set it equal to one Rems, then text align, same deal. 47 00:02:51,000 --> 00:02:53,700 We want to place everything in the center. 48 00:02:54,670 --> 00:02:56,380 So let's set that one. 49 00:02:56,620 --> 00:02:59,230 And let's also add some line height over here. 50 00:03:00,240 --> 00:03:02,700 So right after that, we're going to go with Line. 51 00:03:05,640 --> 00:03:06,000 All right. 52 00:03:06,000 --> 00:03:08,760 And we'll set it equal to 1.5. 53 00:03:08,940 --> 00:03:11,250 And now when it comes to buttons, remember? 54 00:03:12,140 --> 00:03:19,640 We're getting most of the styles from the BTN class, which is Global One, but we also can add a little 55 00:03:19,640 --> 00:03:23,060 bit of additional margin to the top. 56 00:03:23,060 --> 00:03:28,220 And therefore I'm going to go with BTN and then we're looking for one REM. 57 00:03:28,220 --> 00:03:32,290 So essentially it's just going to create some distance in between the buttons. 58 00:03:32,450 --> 00:03:35,200 So let's check out the register one. 59 00:03:35,220 --> 00:03:36,410 Looks about right. 60 00:03:36,410 --> 00:03:40,390 And now let's just style this member hyphen BTN. 61 00:03:40,400 --> 00:03:43,700 So effectively that's the link inside of the paragraph. 62 00:03:43,700 --> 00:03:45,920 So we're going to look over here for member. 63 00:03:46,570 --> 00:03:47,270 Hyphen. 64 00:03:48,270 --> 00:03:50,490 BTN and effectively in here. 65 00:03:50,490 --> 00:03:51,960 I want to start with color. 66 00:03:52,410 --> 00:03:54,810 I want to set it equal to my primary one. 67 00:03:54,810 --> 00:03:57,750 So primary 500. 68 00:03:58,120 --> 00:04:03,210 Then we want to add some letter spacing and this will be equal to my CSS variable. 69 00:04:03,210 --> 00:04:07,890 So var and then hyphen hyphen, letter hyphen spacing. 70 00:04:07,890 --> 00:04:11,210 And then lastly, let's add some margin on the left. 71 00:04:11,220 --> 00:04:18,540 So margin left is going to be equal to 0.25 Rems and once we have these styles in place. 72 00:04:19,130 --> 00:04:23,210 We're done with the CSS and we can move on to the next step.