WEBVTT 00:00:06.630 --> 00:00:13.150 In this video we're going to learn how to create enough bonds into acquiring mobile so we don't need 00:00:13.150 --> 00:00:20.070 to create a Navar like this in each of our pages and we're going to add a third page to our documents 00:00:20.070 --> 00:00:21.290 . 00:00:21.660 --> 00:00:24.900 We're going to replace icons inside our bus. 00:00:25.560 --> 00:00:31.560 And also we're going to make sure that the active links are highlighted. 00:00:31.980 --> 00:00:43.230 So let's create a new file called It's Not Because was a simple copy the content from the previous file 00:00:45.300 --> 00:00:50.570 and change the title to us. 00:00:50.760 --> 00:00:57.340 Now let's create a third page inside our documents. 00:00:58.500 --> 00:01:07.590 So the idea is going to be page 3 and let's empty the contents. 00:01:09.810 --> 00:01:10.680 OK. 00:01:11.370 --> 00:01:18.280 Now this creates a Navar inside the header of page 1. 00:01:18.720 --> 00:01:24.270 So to create a number we're going to create a div 00:01:28.890 --> 00:01:39.690 of data row number and then inside that we're going to have an older list. 00:01:40.930 --> 00:01:42.540 OK. 00:01:43.380 --> 00:01:49.570 Each of these elements is going to be in a list item. 00:01:49.650 --> 00:01:52.710 OK so you get to have three list items. 00:01:52.770 --> 00:01:57.240 So in each list item we get to have a link. 00:01:57.820 --> 00:01:58.730 OK. 00:01:58.870 --> 00:02:02.150 And let's play some text for the first link. 00:02:02.160 --> 00:02:04.300 Whoa. 00:02:04.710 --> 00:02:07.330 So the first link is going to take us to page 1. 00:02:07.380 --> 00:02:13.190 So going to give it an A sheriff going to page one. 00:02:13.210 --> 00:02:14.360 All right. 00:02:14.380 --> 00:02:17.880 Also we want some transition there. 00:02:18.210 --> 00:02:18.680 OK. 00:02:18.930 --> 00:02:28.610 So you're going to have a pop tradition so we're going to see a better transition to pop. 00:02:29.160 --> 00:02:30.650 OK. 00:02:31.950 --> 00:02:46.140 And to make sure that this element is active for page one we are going to use a glass. 00:02:46.730 --> 00:02:50.910 You are a button X-C. 00:02:52.060 --> 00:02:53.410 OK. 00:02:53.700 --> 00:03:00.340 We're going to use another class which is you or the state persists. 00:03:01.740 --> 00:03:06.400 So the first class is going to make the link Occy when you go to this page. 00:03:06.510 --> 00:03:09.690 The second class is going to keep it active. 00:03:09.720 --> 00:03:12.850 He's going to keep the styling for the active States. 00:03:13.280 --> 00:03:14.580 OK. 00:03:15.000 --> 00:03:21.000 Now let's move to the other list items. 00:03:21.420 --> 00:03:26.520 So the second one is going to page one page two. 00:03:26.960 --> 00:03:28.520 And this. 00:03:28.770 --> 00:03:31.690 Some text there abouts. 00:03:31.950 --> 00:03:34.850 We don't need to be selective. 00:03:36.570 --> 00:03:37.490 OK. 00:03:37.530 --> 00:03:47.420 The last one is going to be the same as this one we're just going to change the text to context. 00:03:48.070 --> 00:03:54.830 So now if we save and refresh the page you can see our other. 00:03:55.110 --> 00:03:56.290 OK. 00:03:57.060 --> 00:03:59.160 Now let's add the icons 00:04:04.170 --> 00:04:14.610 so to an icon you can go to the query mobile demo page where you find plenty of demos there illustrating 00:04:14.610 --> 00:04:21.860 the different features of D'Qwell immobile that you can go to icons. 00:04:21.910 --> 00:04:22.590 OK. 00:04:22.880 --> 00:04:25.270 So you've got plenty of icons we can choose from. 00:04:25.590 --> 00:04:35.780 So to use an icon we need the data attribute called Data icon. 00:04:37.180 --> 00:04:42.310 It is playsets the data icon. 00:04:44.190 --> 00:04:47.230 And then we can send it to any of these icons. 00:04:47.310 --> 00:04:48.260 OK. 00:04:48.270 --> 00:04:52.440 So for the home icon there's going to be 00:05:02.490 --> 00:05:05.580 for the about icon that's going to be info 00:05:11.500 --> 00:05:19.770 and what the contacts iPhone is going to go for mail. 00:05:19.820 --> 00:05:21.270 So if we save and refresh 00:05:24.680 --> 00:05:28.890 like see our icons. 00:05:30.050 --> 00:05:41.250 OK now let's copy the number to the other pages and highlight the writing. 00:05:42.200 --> 00:05:45.210 So for Page 2 going inside the header 00:05:48.030 --> 00:05:57.190 and active item is going to be the second one. 00:06:02.070 --> 00:06:03.010 OK. 00:06:03.020 --> 00:06:08.010 And copy this in Page 3 00:06:24.510 --> 00:06:27.240 the active item is going to be the title 00:06:38.490 --> 00:06:43.680 and it's save and refresh 00:06:54.030 --> 00:06:57.830 said Link is supposed to go to the third page. 00:06:57.920 --> 00:07:05.220 OK so they just change that quickly. 00:07:09.620 --> 00:07:10.420 OK. 00:07:10.550 --> 00:07:11.760 They save and refresh 00:07:13.800 --> 00:07:17.010 . 00:07:17.660 --> 00:07:19.590 Now it's working perfectly OK. 00:07:20.040 --> 00:07:32.700 So I'm just going to take over the data theme B from page 2 and page 3. 00:07:34.980 --> 00:07:45.030 And let's say that a day they save and refresh. 00:07:45.050 --> 00:07:48.860 Perfect. 00:07:48.990 --> 00:07:49.700 All right. 00:07:50.040 --> 00:07:55.540 So in the next video we're going to get introduced to the decoding mobile grid system 00:07:55.550 --> 00:08:03.410 .