WEBVTT 00:00:07.560 --> 00:00:09.950 Now we are going to set up our scrawls pi. 00:00:10.140 --> 00:00:14.880 So since we are spying on the body elements they're are going to do a couple of things to the body element 00:00:14.880 --> 00:00:15.000 . 00:00:15.000 --> 00:00:20.340 So first we will need to set the position of the body elements 00:00:23.580 --> 00:00:25.480 to relative. 00:00:26.150 --> 00:00:27.940 OK. 00:00:28.590 --> 00:00:34.410 And we're going to go to the index those Ishbel file and add a couple of these attributes to the body 00:00:34.410 --> 00:00:37.260 . 00:00:37.260 --> 00:00:45.580 So the first one is going to be dieter's by Plus we need to said to scroll. 00:00:46.170 --> 00:00:55.980 And the second one is Dator targets and we need to say that the ID of the navigation bar that we use 00:00:55.980 --> 00:01:03.580 to spy on the body which is my love box. 00:01:05.860 --> 00:01:06.510 OK. 00:01:06.870 --> 00:01:09.060 Is this one. 00:01:09.450 --> 00:01:15.060 If we save and refresh. 00:01:17.550 --> 00:01:24.000 So if we scroll down now we can see that's the navigation about gets updated. 00:01:24.000 --> 00:01:27.190 So the ablated are the highlights link. 00:01:27.300 --> 00:01:30.890 Now is the one corresponding to the section. 00:01:31.260 --> 00:01:32.380 We are in. 00:01:33.160 --> 00:01:34.840 OK. 00:01:35.290 --> 00:01:38.360 I was close by is working. 00:01:39.180 --> 00:01:39.630 OK. 00:01:39.810 --> 00:01:41.620 So we've got one thing missing. 00:01:41.910 --> 00:01:48.560 Before we finish is the future so going to add a nice food to our website. 00:01:48.710 --> 00:01:51.890 OK. 00:01:52.890 --> 00:01:59.320 So again that's going to be a death of glass. 00:01:59.460 --> 00:02:02.930 What's inside the. 00:02:03.060 --> 00:02:05.790 We're going to have a container 00:02:10.800 --> 00:02:12.680 which is a div of glass container 00:02:16.860 --> 00:02:20.660 and are going to have a paragraph inside. 00:02:22.530 --> 00:02:27.210 OK so inside the paragraph we're going to raise this 00:02:32.040 --> 00:02:39.970 then before then we're going to have an issue and see where the copyrights list talk. 00:02:41.010 --> 00:02:41.550 OK. 00:02:41.910 --> 00:02:49.870 Now let's go to the his file style of words. 00:02:51.060 --> 00:02:55.810 What's the what's that section. 00:03:00.720 --> 00:03:04.260 So you can select stuff without using the class. 00:03:05.280 --> 00:03:06.360 OK. 00:03:06.730 --> 00:03:09.270 I'm going to start by setting the background color 00:03:13.770 --> 00:03:19.850 so I'm going to use the IDBI function because I'm going to be using transparency. 00:03:20.890 --> 00:03:26.170 OK so we'll use the same value we used before for the button link. 00:03:26.370 --> 00:03:26.710 OK. 00:03:26.710 --> 00:03:31.590 And for the transparency I'm going to go for 0.1. 00:03:33.310 --> 00:03:33.630 OK 00:03:38.160 --> 00:03:41.080 let's have a look. 00:03:41.580 --> 00:03:45.690 Let's change the color to white. 00:03:46.470 --> 00:03:47.790 OK. 00:03:47.910 --> 00:03:50.850 So let's add some padding. 00:03:51.520 --> 00:03:58.800 So the top and bottom we're going to go for zero pixels OK and 0 for left and right. 00:03:59.130 --> 00:04:10.430 And also let's have some marching top of 100 or 150 pixels. 00:04:13.070 --> 00:04:14.350 OK. 00:04:15.000 --> 00:04:25.020 Also let's increase the font size a little bit to 15. 00:04:25.410 --> 00:04:31.940 Now you will notice a small difference between the file Web site and our current Web sites. 00:04:32.160 --> 00:04:42.600 So in small devices on a computer we still see the background video in the final Web sites. 00:04:42.900 --> 00:04:46.300 Whilst we don't see it in our current Web sites. 00:04:46.470 --> 00:04:58.910 So the reason why is because when we use the media query we used the property max width and this property 00:04:58.910 --> 00:05:09.780 is looking out the width of the window if we want to look at the width of the device screen. 00:05:10.410 --> 00:05:15.870 Then we should change this to mux device with. 00:05:17.480 --> 00:05:30.780 OK so now we are looking at the screen with rather than the window or the web page width. 00:05:30.900 --> 00:05:37.110 So if we open our Web sites in a small device and there's seven hundred sixty eight pixels an iPhone 00:05:37.110 --> 00:05:43.590 for example then the background video is going to disappear and we're going to see a background image 00:05:43.670 --> 00:05:44.630 . 00:05:45.410 --> 00:05:50.790 OK so now our Web sites is complete 00:05:50.800 --> 00:05:56.990 . 00:06:02.010 --> 00:06:07.810 Congratulations you have just created a highly professional web sites from scratch using a Sharmell 00:06:07.930 --> 00:06:11.340 CSSA bootstrap and a little bit of jay Querrey. 00:06:11.340 --> 00:06:17.610 You had a chance to proxies the skills you have learned in the complete web development course including 00:06:17.610 --> 00:06:23.570 advanced skills like including a nice background video in your web sites. 00:06:23.810 --> 00:06:29.010 Also you managed to create a navigation bar using the scroll spy blogging 00:06:31.950 --> 00:06:37.370 and you managed to create a beautiful responsive carousel slider. 00:06:39.060 --> 00:06:45.660 If you change the design or if you created something completely different then please share with me 00:06:45.690 --> 00:06:47.200 and other secrets. 00:06:47.540 --> 00:06:52.530 I look forward to seeing you finishing other projects and becoming a highly skilled and professional 00:06:52.620 --> 00:06:53.220 web developer 00:06:53.270 --> 00:07:01.800 .