WEBVTT 00:05.280 --> 00:09.120 All right now let's make sure that's our sign up and log in process works. 00:09.160 --> 00:12.240 So let's sign up. 00:12.430 --> 00:15.610 So just use a username 00:18.800 --> 00:19.300 email 00:26.110 --> 00:26.690 and fossil 00:33.930 --> 00:40.080 is to get. 00:40.150 --> 00:44.950 OK so let's check activation email. 00:44.970 --> 00:46.420 Click on the link. 00:46.870 --> 00:48.730 OK so the account has been activated. 00:48.900 --> 00:49.920 Now let's sign in 01:05.820 --> 01:06.460 OK. 01:06.790 --> 01:09.210 Perfect's that's normal. 01:09.250 --> 01:11.640 You would see that's for now going to come back to that. 01:11.830 --> 01:15.520 So now we managed to sign up and log in. 01:15.520 --> 01:17.380 Now let's look out. 01:18.010 --> 01:19.290 OK perfect. 01:19.300 --> 01:23.700 Now let's try the Fuegos password feature. 01:35.670 --> 01:37.770 OK let's reset password 01:42.060 --> 01:43.190 any that one as well. 01:43.220 --> 01:44.350 Going to come actuates in a bit 01:53.400 --> 01:53.810 OK. 01:53.820 --> 01:58.130 Perfect so password is being changed. 01:58.690 --> 01:59.480 And. 01:59.800 --> 02:00.680 OK. 02:00.700 --> 02:04.670 Looks like oh sign up and logging process works. 02:04.750 --> 02:11.040 So now we need to go to other web pages and make a few changes. 02:11.170 --> 02:14.920 So if I log in right now and 02:22.600 --> 02:29.010 they will be directed to the main page looks in so you can see that because an error has occurred. 02:29.290 --> 02:34.230 So let's have a look at this page we find 02:44.660 --> 02:46.260 OK. 02:47.150 --> 02:54.840 Now we need to go to the contents of this container and do some states because that's where we use to 02:54.840 --> 02:58.040 load the notes. 02:58.060 --> 03:01.620 OK that's the container and 03:06.970 --> 03:08.700 it's just empty. 03:09.080 --> 03:11.380 Oh this is going to take. 03:11.400 --> 03:12.510 The last message as well 03:21.440 --> 03:22.710 OK. 03:23.460 --> 03:26.920 Also we're using a jobs case file here. 03:27.110 --> 03:28.580 So instead of my notes. 03:28.700 --> 03:34.650 Yes I'm going to use another file it's called it's my trips those days. 03:35.120 --> 03:37.090 OK. 03:37.640 --> 03:38.070 Say 03:44.370 --> 03:45.560 it's the old file. 03:45.560 --> 03:48.940 My notes address is right there. 03:48.980 --> 03:51.830 It's going to rename it 03:57.610 --> 04:02.220 like ideas and also begin to empty 04:05.200 --> 04:09.980 any code that we had in the writes. 04:10.350 --> 04:12.230 OK let's try now. 04:16.010 --> 04:16.480 OK. 04:16.680 --> 04:17.470 That looks better. 04:20.340 --> 04:25.250 Right now what I saw was customizing the look of web pages for the new products. 04:25.280 --> 04:32.400 So if I go back to the learning page let's start with the navigation bar the title. 04:32.660 --> 04:33.500 OK. 04:33.500 --> 04:35.700 So let's open the index. 04:36.230 --> 04:37.330 Those BHB file 04:40.860 --> 04:46.260 and it starts with the title change to 04:49.520 --> 04:54.100 car sharing Web sites. 04:57.100 --> 04:57.940 OK. 04:58.690 --> 05:02.650 And just change the brand. 05:02.790 --> 05:06.550 You know again about two car sharing 05:11.410 --> 05:12.540 right now. 05:17.930 --> 05:22.070 And also let's empty the contents. 05:22.070 --> 05:22.420 When no 05:29.270 --> 05:32.490 it's just going to delete this whole Madrone 05:36.890 --> 05:37.540 OK. 05:42.000 --> 05:48.430 So final Web sites OK so what we need to do 05:52.310 --> 05:57.220 is change the litigation bar slightly. 05:57.590 --> 06:01.670 OK so first let's change the styling of the navigation bar. 06:02.540 --> 06:10.510 So so for this we're going to use the same navigation bar styling generator that we used before. 06:10.640 --> 06:19.630 So let's just go to Google and type with trap number generator Web sites we used earlier was this one. 06:20.000 --> 06:27.440 OK so follicular I was going to pick these up from the final Web sites using colors you know. 06:27.610 --> 06:28.220 OK. 06:28.700 --> 06:32.120 Let's click on pick color from page and 06:37.300 --> 06:39.370 go from there. 06:48.690 --> 06:49.620 And basic that 06:55.130 --> 06:56.350 looks all right. 06:56.640 --> 06:59.520 So that's the code we need for the navigation bar. 06:59.700 --> 07:10.740 So I'm just going to copy the code from that and then I'm going to go to the CSSA file replace the styling 07:11.430 --> 07:13.230 of the navigation bar. 07:22.340 --> 07:22.690 OK. 07:22.710 --> 07:23.800 Here it is. 07:23.830 --> 07:28.740 So I'm just going to delete all of that and paste in your code. 07:29.560 --> 07:30.070 OK. 07:30.220 --> 07:31.910 So save and 07:37.460 --> 07:39.340 print the page. 07:39.470 --> 07:40.430 Okay perfect. 07:40.790 --> 07:47.660 So if you remember we use the same styling for the footer that's all I need to do is select the words 07:47.810 --> 07:53.570 as well right there using the footer class. 07:53.960 --> 07:59.420 So if I save and refresh we're going to get the same signing for the footer all right. 07:59.420 --> 08:08.750 Now let's change the background picture of our landing page so you can use a website like Bicks obey 08:09.140 --> 08:12.820 dot com to download a royalty free picture. 08:12.830 --> 08:17.840 So once you've downloaded the picture and you've got it on your desktop for example you can go back 08:17.840 --> 08:21.280 to your file FTB and just upload the picture from that 08:32.160 --> 08:32.930 OK. 08:32.950 --> 08:41.740 So now I'm going to go back to the styling file and go to the woody elements and change the L of the 08:41.740 --> 08:45.880 picture to the new picture. 08:58.860 --> 09:08.170 So let's save and refresh and here we go. 09:08.170 --> 09:12.280 Now let's have a look at the navigation bar in the final website. 09:12.580 --> 09:21.370 You will notice that we've got two different navigation bars in the landing page depending on whether 09:21.550 --> 09:23.530 we are connected or not. 09:23.530 --> 09:26.770 So if we are not connected this is what we see. 09:26.980 --> 09:27.460 OK. 09:27.770 --> 09:28.930 But once we log in 09:32.830 --> 09:35.620 this is what we get. 09:35.860 --> 09:36.820 OK. 09:36.900 --> 09:40.510 Basically if I go back to the Atlantic page this is what we get. 09:40.710 --> 09:45.060 So the landing page has called two navigation bars. 09:45.220 --> 09:57.000 So the easiest way to deal with this is to go to the index that PSP file and instead of writing the 09:57.000 --> 10:00.630 navigation bar right like that we get it write some code. 10:00.840 --> 10:07.950 So inside the code we're going to say if we are connected show navigation bondable one if we are not 10:07.980 --> 10:10.570 connected showing the navigation buttons too. 10:10.800 --> 10:16.710 So the first let me get in but it's going to be this whole email code. 10:16.860 --> 10:17.650 OK. 10:18.100 --> 10:20.410 Somebody is going to copy all of that. 10:21.630 --> 10:27.300 And we're going to place these inside a PSP file though we're going to call navigation bar. 10:27.690 --> 10:28.520 Most connected 10:36.310 --> 10:36.630 OK.