1 00:00:04,070 --> 00:00:07,320 Hello everyone and welcome back to our bootstrap course. 2 00:00:07,320 --> 00:00:12,710 In the previous lecture we set up a few more pages of our Web site showing different services and in 3 00:00:12,710 --> 00:00:18,740 this lecture we're going to be combining are careful with those pages in that we're going to add links 4 00:00:18,800 --> 00:00:26,270 to the carousel and these buttons here are going to go not to the homepage as by default but they're 5 00:00:26,270 --> 00:00:28,520 going to go to each of these services here. 6 00:00:28,910 --> 00:00:33,120 Let's go ahead and open up the HMO tab to see how we would build this. 7 00:00:33,230 --> 00:00:39,560 So we have a feature for each of the products and we have an idea for all the services but we want to 8 00:00:39,560 --> 00:00:45,890 go ahead and add an idea for each service so we can do that right here in the do for each feature set. 9 00:00:46,160 --> 00:00:54,150 So we're going to add an idea and we can call this something like service 1. 10 00:00:54,170 --> 00:01:00,080 Now typically you want to avoid having things like one here but because we don't have a service name 11 00:01:00,080 --> 00:01:05,210 specifically we just have the template here for the title and the subtitle. 12 00:01:05,210 --> 00:01:06,970 We're gonna stick with service one. 13 00:01:07,100 --> 00:01:09,320 We're also going to do the same for the second feature set. 14 00:01:09,440 --> 00:01:18,030 We're going to add service to Heidi equals service 2 and let's do the same for the third feature set. 15 00:01:18,050 --> 00:01:21,760 We're going to add a equals service three. 16 00:01:21,770 --> 00:01:22,950 Now why are we adding an idea. 17 00:01:22,970 --> 00:01:31,970 Well because an anchor must link to an I.D. If you are linking to something on the same Web site or 18 00:01:31,970 --> 00:01:39,200 rather on the same page of the same Web site if you want to link to an external link then you can just 19 00:01:39,230 --> 00:01:40,070 enter the URL. 20 00:01:40,400 --> 00:01:46,490 But because we want to link to a different page or a portion of the page we need to set an I.D. we cannot 21 00:01:46,490 --> 00:01:50,810 use the class ideas are reserved for one element only. 22 00:01:50,840 --> 00:01:57,200 So now that we've used service to for this div we cannot use the service to I.D. again unless of course 23 00:01:57,200 --> 00:01:58,610 we delete it from this one. 24 00:01:58,780 --> 00:01:59,020 Okay. 25 00:01:59,060 --> 00:02:05,450 So now up the ideas we're going to do is go back to our carousel which is a bit higher up and in here 26 00:02:06,260 --> 00:02:13,310 we are going to assign each of the links that we have in all the buttons of the carousel to link to 27 00:02:13,310 --> 00:02:15,830 each of those ideas. 28 00:02:15,830 --> 00:02:17,920 So here we have the first draft. 29 00:02:17,930 --> 00:02:23,660 Right now it's just going back to the home booking changes to go to service one and now scroll down 30 00:02:23,660 --> 00:02:29,230 to the next carousel item and change this a draft to link to service two. 31 00:02:29,510 --> 00:02:33,600 And that way whenever anyone clicks on the button it will take them to this anchor. 32 00:02:33,620 --> 00:02:38,960 Notice how because it's an idea we're calling it by it's by a hashtag so we use a hash tag of an I.D. 33 00:02:38,960 --> 00:02:41,110 name. 34 00:02:41,230 --> 00:02:44,590 Now go down to the third cancel item and here type service three. 35 00:02:44,950 --> 00:02:52,930 OK now that we have added the third service link we can go ahead and test the output to test our new 36 00:02:52,930 --> 00:02:53,770 links. 37 00:02:53,770 --> 00:02:59,590 Now if you're ever having stalling with Jesse Benton what you can do is go file save snapshot to save 38 00:03:00,100 --> 00:03:06,110 the current code and then just refresh the page so copy the GST. 39 00:03:06,110 --> 00:03:14,740 Ben you are a link which is a unique link to this pin and paste it in a new tab to refresh the compiler 40 00:03:15,100 --> 00:03:18,990 or just refresh the page by hitting command or control. 41 00:03:18,990 --> 00:03:20,230 Ah OK. 42 00:03:20,260 --> 00:03:26,410 Let's go ahead and test the output and let's test it on mobile first because that is how we are designing. 43 00:03:26,440 --> 00:03:31,750 So here we have the company name scrolling down and here is our Carousel and let's go ahead and test 44 00:03:31,750 --> 00:03:32,890 by clicking the learn more button. 45 00:03:32,890 --> 00:03:36,840 And as you can see it takes us to this first service button. 46 00:03:36,960 --> 00:03:42,400 The first service page rather and we click learn more and I'll take us to the second icon and you can 47 00:03:42,400 --> 00:03:47,480 scroll back up and test product 3 and it will take us down to the third page here. 48 00:03:47,560 --> 00:03:55,870 And again we can open this on the web view and we can go ahead and test this again by clicking and it'll 49 00:03:55,900 --> 00:03:56,800 take us there. 50 00:03:56,800 --> 00:04:03,520 Congratulations everyone you have now made quite a large web page especially for a beginner project 51 00:04:04,030 --> 00:04:11,260 with a very nice template that you can use to fill in with your own company name or your client's company 52 00:04:11,260 --> 00:04:14,110 name and add images to a carousel. 53 00:04:14,110 --> 00:04:16,450 Thank you all for watching and we'll see you in the next lecture.