WEBVTT 00:02.490 --> 00:09.150 It's finally time to start working on the front end of our application before writing any new code from 00:09.150 --> 00:10.570 scratch using Juju. 00:10.570 --> 00:14.580 Yes we can improve the authentication layout. 00:14.700 --> 00:21.870 That's as you probably remember is a shared by both the registration page and the log in page. 00:22.050 --> 00:24.240 And that's why you are invisible to your code. 00:24.240 --> 00:31.020 I have already opened these three HDMI templates one really useful thing that we can add right away 00:31.260 --> 00:36.570 is a link to the registration page in the log in page and a link to the log in page. 00:36.570 --> 00:40.700 You are in the registration page and thanks to Django template system. 00:40.700 --> 00:41.910 Is this really easy. 00:42.090 --> 00:48.000 So let's go to the logging that HMO file and yeah we can create a paragraph. 00:48.090 --> 00:49.790 Let's also add a bit of margin. 00:49.920 --> 00:53.230 So plus empty too. 00:53.410 --> 01:04.260 And yet we can add something like or add a linker so a something like create a new account or just create 01:05.220 --> 01:08.010 an account which remove this link. 01:08.090 --> 01:08.390 Yeah. 01:08.460 --> 01:10.190 Inside Of course. 01:10.210 --> 01:14.400 So yeah we can use the URL templates tag. 01:14.490 --> 01:17.360 Let's also close it right away. 01:20.060 --> 01:26.340 And here of course we need to pass the name of the EU a relevant point we're using to register new accounts 01:26.660 --> 01:29.700 the browser and that is django registration. 01:29.700 --> 01:40.540 Register Yeah we can also change this each one to something like Question Time simply and we can add 01:40.540 --> 01:50.440 the slogan of our start up let's the class something like lead text mutate which are both classes provided 01:50.440 --> 01:53.100 by bootstrap of course yeah we can write. 01:53.110 --> 02:02.050 Share your knowledge and if you now go back to Chrome and refresh the page we see that it's already 02:02.050 --> 02:09.190 much better and we can click on Create an account to be redirected to the registration page. 02:09.250 --> 02:14.580 Let's improve this page by adding a logging link first of all as we did here. 02:15.190 --> 02:25.340 So I'm just going to copy this line of code so let's go to the registration form and of course we need 02:25.340 --> 02:34.760 to change the name of the URL path which in this case is just logging and yet of course logging. 02:34.890 --> 02:38.840 And I think that the rest of the code is all right. 02:38.850 --> 02:39.550 The way it is. 02:39.570 --> 02:42.110 So let's go back to Chrome. 02:42.140 --> 02:49.250 Let's refresh much whether we can add a bit of margin on top. 02:49.250 --> 02:52.690 Same thing for the registration template. 02:52.690 --> 03:01.670 So in the awfully outdoors dot HMO file we can just create and then the we can move the off box deep 03:02.270 --> 03:13.510 inside and we can add something like plus margin top to let's see how it is well even a bit more in 03:13.510 --> 03:13.990 fact. 03:14.020 --> 03:21.030 So let's see how we can make it look like by using 5 fresh. 03:21.280 --> 03:24.130 I think this is still not enough. 03:24.190 --> 03:30.280 It would be better looking by year we need to have more centers so we can just create a custom CSF class 03:31.280 --> 03:39.520 something like outer area Martin Thorpe let's see a hundred pixels 03:43.960 --> 03:44.250 so 03:47.350 --> 03:50.740 yes I think this looks much better. 03:50.740 --> 04:00.530 Let's now add a bit of style for these off box glasses and let's also change the font family. 04:01.270 --> 04:09.210 Yeah I have a link to one of the font glasses provided by Google fonts which is called a play fair display. 04:09.210 --> 04:14.970 You can find this link in the Google fonts Web site or just copy and pasted from the downloadable resources 04:15.000 --> 04:17.180 or the repository of this project. 04:17.490 --> 04:21.240 So yeah now age them out buddy 04:24.140 --> 04:24.790 in Europe. 04:24.820 --> 04:26.650 First of all it's a little bit of height. 04:26.670 --> 04:39.010 100 percent down font family play fair display are safe. 04:39.310 --> 04:43.210 So we make get fresh paint. 04:43.230 --> 04:46.300 Yes I think that it now looks much more professional. 04:47.810 --> 04:54.050 Let's now define the CSX code for the off box and we can just add a bit of board there maybe with rounded 04:54.170 --> 05:00.680 corners nothing super fancy also because this is not of course about CSX. 05:01.370 --> 05:09.730 So here let's define off voxel which is the class again we're using the arrow. 05:10.580 --> 05:19.710 So we are a border three pixels solid light gray border. 05:19.950 --> 05:29.310 Produce something like 10 pixels padding top some 25 pixels. 05:29.330 --> 05:43.010 And same thing for padding bottom then with the 600 pixels merging automatic this is of course with 05:44.750 --> 05:45.670 like so. 05:45.700 --> 05:50.480 So let's go back one last time to Chrome refresh. 05:50.500 --> 05:55.980 This is the registration page and this is the log in page. 05:56.290 --> 06:03.970 You can do any out of course add a bit of a background VM age maybe even just improve DC SS but now 06:04.090 --> 06:09.170 what we really want to do is to actually focus on using beauty. 06:09.190 --> 06:12.460 Yes to build a single page application.