7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 18Length: 1.9 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

5.3 Call to Action and Gallery

In this lesson we'll build the next elements in line: the call to action area and the screenshot gallery.

5.3 Call to Action and Gallery

Welcome back. In the previous lesson I added some testimonials and some features to our product page. Now is time for the next section, which is the Gallery. But before that, I wanna add a small call to area section, right here which will basically ask for a name and password for a 30 day trial subscription. So, jumping back to the code editor, after my container ends right here, I'm gonna do another section called trial section. I'm gonna use a well. Now a well is very much like a panel but it has a darker background. So, div class well and inside I'm gonna do container because I want to properly position my content. And text-center, to center all of my content on the page. Now, I'm gonna start with an h3 and a paragraph, something like that. Next, I need a form, and I'm gonna use the inline form. So, form class form-inline, our role's gonna be form. I'm gonna create a form group with a label, with a class of sr-only, so only screen readers will will see it, plus an input. So the label is going to be for subscribe-name, name here, and the input is gonna be type-text. Let's give it a class of form-control and let's give it an ID of subscribe-name. So whenever we click on the label this input will be selected. And also, we need to add a placeholder, of course, of name. All right. So this is ending the form group. Next, I'm gonna duplicate this. And I'm gonna ask for the email. So, subscribe name. I'm gonna change this to email. Email here and email address here. And finally, I need a button. Type is gonna be submit because I have a form. Class is going to be btn. And let's do btn-default. It's gonna say subscribe. All right, let's check it out. And there it is. Now, I'm just gonna add a small text under the button. A small text with em. And this will say something like this. So basically a text saying that, you know, we're not gonna use your email address to spam you. ' Kay. Let's refresh. And there's the well. Now, let's move on to the gallery. So, for the gallery, I'm gonna do another div with a class of container. And I'm gonna say gallery. Next, a section with a div with a class of page-header. With an ID of section. [BLANK_AUDIO] Gallery. And that div will contain an h2 and a small. So the h2 is gonna say gallery and the smaller text is gonna say something like this. Okay. Let's check it out. Good. Now, for the Gallery section, I'm gonna use a carousel. So I'm gonna start with a div class carousel slide, and this particular markup should be very fami, familiar to you by now. I'm gonna say, gallery-carousel and also data-ride equals carousel. Okay, inside I'm gonna start with the carousel indicators. [BLANK_AUDIO] Set the data-target and also data-slide-to. Okay, let's do it times 3 since we have three slides. I'm gonna change this to one and two, and also add the hash sign which I forgot. And also the class active on the first indicator. Okay. Next. It's gonna be the actual slides, so div with a class of carousel-inner. I'm gonna have a div with a class of item, which will have an image that points to images slider.jpg. And the Alt is going to be slider image. Plus, it's gonna have a div with a class of carousel-caption. That's gonna say, this is a caption. Okay? So I'm gonna do this times 3 because we have three slides. So expand that. Oops. I forgot to put the source here. [BLANK_AUDIO] Okay. So slider one, two, three, carousel caption, div item. I'm gonna set this one to active, and let's check it out. [BLANK_AUDIO] Okay. Now finally, add the left and right controls. So for that a class left carousel-control. Href is going to be gallery-carousel, which is the ID of our carousel, and data slide equals prev. Inside, do a span with a class of glyphicon and glyphicon-chevron-left [BLANK_AUDIO] Okay. [BLANK_AUDIO] Add the second one. It's gonna be right here and next here. [BLANK_AUDIO] Okay. So that is the working carousel, and the Gallery section is complete. Now, in the next lesson, I'm gonna take care of the FAQ and the Contact area. So I'll see you there.

Back to the top