It's finally time to start working on the front end of our application before writing any new code from
scratch using Juju.
Yes we can improve the authentication layout.
That's as you probably remember is a shared by both the registration page and the log in page.
And that's why you are invisible to your code.
I have already opened these three HDMI templates one really useful thing that we can add right away
is a link to the registration page in the log in page and a link to the log in page.
You are in the registration page and thanks to Django template system.
Is this really easy.
So let's go to the logging that HMO file and yeah we can create a paragraph.
Let's also add a bit of margin.
So plus empty too.
And yet we can add something like or add a linker so a something like create a new account or just create
an account which remove this link.
Yeah.
Inside Of course.
So yeah we can use the URL templates tag.
Let's also close it right away.
And here of course we need to pass the name of the EU a relevant point we're using to register new accounts
the browser and that is django registration.
Register Yeah we can also change this each one to something like Question Time simply and we can add
the slogan of our start up let's the class something like lead text mutate which are both classes provided
by bootstrap of course yeah we can write.
Share your knowledge and if you now go back to Chrome and refresh the page we see that it's already
much better and we can click on Create an account to be redirected to the registration page.
Let's improve this page by adding a logging link first of all as we did here.
So I'm just going to copy this line of code so let's go to the registration form and of course we need
to change the name of the URL path which in this case is just logging and yet of course logging.
And I think that the rest of the code is all right.
The way it is.
So let's go back to Chrome.
Let's refresh much whether we can add a bit of margin on top.
Same thing for the registration template.
So in the awfully outdoors dot HMO file we can just create and then the we can move the off box deep
inside and we can add something like plus margin top to let's see how it is well even a bit more in
fact.
So let's see how we can make it look like by using 5 fresh.
I think this is still not enough.
It would be better looking by year we need to have more centers so we can just create a custom CSF class
something like outer area Martin Thorpe let's see a hundred pixels
so
yes I think this looks much better.
Let's now add a bit of style for these off box glasses and let's also change the font family.
Yeah I have a link to one of the font glasses provided by Google fonts which is called a play fair display.
You can find this link in the Google fonts Web site or just copy and pasted from the downloadable resources
or the repository of this project.
So yeah now age them out buddy
in Europe.
First of all it's a little bit of height.
100 percent down font family play fair display are safe.
So we make get fresh paint.
Yes I think that it now looks much more professional.
Let's now define the CSX code for the off box and we can just add a bit of board there maybe with rounded
corners nothing super fancy also because this is not of course about CSX.
So here let's define off voxel which is the class again we're using the arrow.
So we are a border three pixels solid light gray border.
Produce something like 10 pixels padding top some 25 pixels.
And same thing for padding bottom then with the 600 pixels merging automatic this is of course with
like so.
So let's go back one last time to Chrome refresh.
This is the registration page and this is the log in page.
You can do any out of course add a bit of a background VM age maybe even just improve DC SS but now
what we really want to do is to actually focus on using beauty.
Yes to build a single page application.