Hello everyone and welcome back to our bootstrap course.
In the previous lecture we set up a few more pages of our Web site showing different services and in
this lecture we're going to be combining are careful with those pages in that we're going to add links
to the carousel and these buttons here are going to go not to the homepage as by default but they're
going to go to each of these services here.
Let's go ahead and open up the HMO tab to see how we would build this.
So we have a feature for each of the products and we have an idea for all the services but we want to
go ahead and add an idea for each service so we can do that right here in the do for each feature set.
So we're going to add an idea and we can call this something like service 1.
Now typically you want to avoid having things like one here but because we don't have a service name
specifically we just have the template here for the title and the subtitle.
We're gonna stick with service one.
We're also going to do the same for the second feature set.
We're going to add service to Heidi equals service 2 and let's do the same for the third feature set.
We're going to add a equals service three.
Now why are we adding an idea.
Well because an anchor must link to an I.D. If you are linking to something on the same Web site or
rather on the same page of the same Web site if you want to link to an external link then you can just
enter the URL.
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
use the class ideas are reserved for one element only.
So now that we've used service to for this div we cannot use the service to I.D. again unless of course
we delete it from this one.
Okay.
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
we are going to assign each of the links that we have in all the buttons of the carousel to link to
each of those ideas.
So here we have the first draft.
Right now it's just going back to the home booking changes to go to service one and now scroll down
to the next carousel item and change this a draft to link to service two.
And that way whenever anyone clicks on the button it will take them to this anchor.
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.
name.
Now go down to the third cancel item and here type service three.
OK now that we have added the third service link we can go ahead and test the output to test our new
links.
Now if you're ever having stalling with Jesse Benton what you can do is go file save snapshot to save
the current code and then just refresh the page so copy the GST.
Ben you are a link which is a unique link to this pin and paste it in a new tab to refresh the compiler
or just refresh the page by hitting command or control.
Ah OK.
Let's go ahead and test the output and let's test it on mobile first because that is how we are designing.
So here we have the company name scrolling down and here is our Carousel and let's go ahead and test
by clicking the learn more button.
And as you can see it takes us to this first service button.
The first service page rather and we click learn more and I'll take us to the second icon and you can
scroll back up and test product 3 and it will take us down to the third page here.
And again we can open this on the web view and we can go ahead and test this again by clicking and it'll
take us there.
Congratulations everyone you have now made quite a large web page especially for a beginner project
with a very nice template that you can use to fill in with your own company name or your client's company
name and add images to a carousel.
Thank you all for watching and we'll see you in the next lecture.