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.2 Testimonials and Features

In this lesson we'll build the next two sections of our page: the testimonials and the features section.

5.2 Testimonials and Features

Hey welcome back. This is the exercise part, and in the previous lesson, I did the header, and also the banner of our page. Now, I wanna add some testimonials. So, jumping back, I'm gonna do this. I'm gonna start with a div of class of container, because pretty much all of the content from now on will be centered in the page, and then testimonials, I'm gonna do a separate section for this. And then on each of these sections, I'm gonna do a div with a class of page-header, and an ID of section-testimonials. Right? This is the element, to which my navigation items point to. And inside, I'm gonna place an h2. That's gonna say testimonials. And I can also place a smaller text, which is a description of that section. Something like that. Let's see. Refresh, and this is how it looks like. Now, for the testimonials, there are lots of ways to show them. You can either create a slider, or you can display 'em one by one. Personally, for this page, I'm gonna divide them into, into three columns. Each one containing a testimonial. So, I'll do a div with a class of row, and then I'm gonna do an under div with a class of col-lg-4 times 3, and each column will contain a blockquote. Each block quote will contain a paragraph, which will be the actual quote, plus, a footer, in which I'm gonna put the source. The paragraph, I'm just gonna say lorem20, and then in the footer, I'm gonna say something like cite author. Okay, I'm gonna copy this, and paste it right here. Refresh. And there it is. Now,we have three testimonials. And also, below this, I wanna add let me just close the row here. I wanna add a button that will direct them to the contact form. And that area, will be something like this. Paragraph, let's do an em, I'm gonna say, Wanna tell us about the product? Head over to the contact form. And then i'm gonna have another paragraph, which will contain a button, so btn btn-default, section-contact. And this is going to say, Go to Contact Form, or simply Contact Us, I think would be better. So, Contact Us. Let's see it refresh, and let's align it on the center, so p class align sorry, text-center. [BLANK_AUDIO] Okay. Cool. And that's basically it for the testimonials. Moving on, it's the features. So for the features, I'm gonna say this features. I'm gonna do another section, and another div with a class of page-header, andID of section-features. And inside, I'm gonna have an h2 with a small tag. So the h2 is gonna say features, and small, What it's all about. Okay. Nice. Now, for features, I'm gonna do something like this. I'm gonna have three main features, which will occupy one row. And then I'm gonna have three smaller features, each organized into three columns. So, let's start with the large ones. I'm gonna do a div with a class of row. And then, each feature is gonna have a title, a description and an image. So I'm gonna place the image on the right side, and the other two elements on the left. So I'm gonna do a col-lg-8 for these first two elements. Plus, a col-lg-4 for the image. Okay, inside the col-lg-8, it's simple, I'm just gonna put an h3 plus a paragraph. This is a feature title, and some lorem ipsum. On this one, i'm gonna put an image. Source is going to be images, feature-1.jpg. I've already prepared some images. Alt is going to be feature image. And also, I'm gonna add a class of img-responsive. Now, img-responsive will apply max width 100%, and height auto to an image, making it resize according to it's parent, okay? So let's have a look, and there it is. This is the first feature, now, for the other features, I'm simply gonna copy this row, and change the image sources. And there we go. Now we have three main features. So let's add the other three. So for that, after this row is finished, I'm gonna do an hr, to separate things a little bit. And then, I'm gonna have a row, which contains a col-lg-4, because I want my features to be organized in three columns. And then for each feature, I'm gonna use a panel component. So I'm gonna do panel, panel-default. I'm also gonna align the text in the center, and then, I'm gonna have a div with a class of panel-body. So, closing the row here. Okay now, inside, I'm gonna have an icon, a heading, and a text. So, I'm gonna start with a span, with a class of glyphicon, glyphicon-search, for example, is just a random icon. And then an h4, and a paragraph. This is a smaller feature. And the paragraph. [BLANK_AUDIO] And just some lorem ipsum text. Let's see it. Okay. Perfect. Now, I'm just gonna copy, this col-lg-4, and paste it two more times. And I'm just gonna change the icon to ok. And let's see, maybe time here, to have different icons. And those are the smaller features. All right now, I'm gonna close this lesson right here, because next time, I'm gonna start working on the gallery. So, see you in the next lesson.

Back to the top