All language subtitles for 080 The Bootstrap Carousel Part 1.en_US

All right.

Welcome back.

We've already styled our title section, our features section, so it's now time to style our testimonial

section, and we're also going to learn about a Bootstrap component called the carousel, which is going

to create a sort of slideshow of all the testimonials that we got from our wonderful customers like

Pebbles over here.

But, first things first, let's style this section so that it looks nice

before we start implementing the carousel. So, similar to the feature section, we need to have a bit of

padding here.

It doesn't look very good to have long lines of text, and images and text going right up to the edge.

It feels very pure HTML.

So let's go ahead and go into Atom, and we can see that, in our testimonials section,

we’ve got a section with the id testimonials, so we can go in here and we can create a new comment.

This is going to be the Testimonial Section, and we’re going to comment that out and then we're going to target

that id called testimonials,

and I can't remember if it was testimonials.

OK.

This is really really important.

If your CSS isn't being carried out or something's not going right,

always make sure that you check you've got the right selector name and you spelled it completely correctly.

It's very very easy to make typos and none of the properties that you set inside here will work otherwise.

So firstly I'm going to add some padding and it's going to be the same as we had in features.

So it's 7 percent top and bottom and 15 percent left and right.

So now it's a little bit more squished in and it looks very uniform with the features section, which

I quite like.

Now the next thing is, we need to have this text center aligned.

It looks weird to have only one line of text that is on the left and also to have our images on the

left as well.

So let's go ahead and go into testimonials,

change the text-align to center,

and there we go. Looking pretty nice.

Now we're going to change the background color.

So I want to have the same color as this kind of orangey red color so that we keep to our uniform color

palette.

So I'm going to style the background of this section to that color.

And it's nice, when you're creating these kind of one page web sites, to have alternating white and colored

sections, because at the moment we can’t really see where the feature section ends and where the testimonial

section starts.

So if you're not going to have explicit pages on your web site and you're only going to have sections

on a one pager, then it's really really important that you have some sort of way of giving the user a

cue that this is not the same section as this one.

So I'm going to change the background color to the same one that we had before which is this

ef8172.

And now you can see that that is obviously clearly a different section than this one,

right?

It's pretty good.

And our text can't really be black,

it looks very very odd.

So in our colored sections we tend to have white text, and in our white sections we tend to have black

text.

So that works out well.

So we can easily change that by just changing the color to fff and refresh.

Nice.

Looks better. Now,

this is way too small for a piece of text that occupies the entire section,

so we have to make some changes there as well.

So that text is inside an h2, so we can go ahead and change the h2 up here, and we're going to change

the font-family to Montserrat-Bold and change the font-size to maybe 3rem,

and then the line height to 1.5 just to give it more space.

And now, voila, we have a very very proper looking heading for this section which is our testimonial text,

and that is going to draw all the attention of the user so they can see how much people love our product.

Now, the next thing I want to change is this image. Firstly,

it’s way too big,

and also I kind of want it to be a round circle profile image.

So in order to do that we need to target this image and in order to target the image we of course need

a class.

So the class is going to be called testimonial-image, and hit save.

And we're going to copy this over to our styles.css.

Now, in most situations I never recommend copy and pasting, but there's one exception. When you have long

class names or something that's a little bit difficult to spell,

then it's a good idea just to copy it over and use it as the selector, so that you know you definitely

haven't made any typos, because this is a very very common cause of your web sites not working the way

that they should do

when your selector is spelt differently from your class.

Even small adjustments, say one letter is capitalised

and it's not in the HTML, then it's not going to target the right thing.

So now that we've got the testimonial image selected we can go ahead and make it smaller by changing

the width, let's say down to 10 percent.

Looking a lot smaller. Then we can make it rounded by,

if you remember, changing the border-radius to 100 percent and that makes it a circle, and we need a little

bit of space between this image and basically everything else, too tightly packed with everything else

around.

So I'm going to give it just a, maybe, a 20 pixel margin all around.

And now it's looking a lot nicer.

Now while I'm here I'm also going to style this press section which is basically sitting at the bottom

of the testimonials. This is kind of the creds section, right?

This is when a user lands on your web site and sees how much credit you have based on how much other

users love you, how much coverage you've had in the media,

and so I'm going to group it together in the same section.

And I can do that by giving it the same background color.

So let's go ahead and check out our press section.

It's also got a id and we can use that to change some of its styling.

So I'm going to target the press section and I'm going to give it the same background color, and you

can see

now they look like they belong in the same section.

Now I need these images to be centralized and not aligned all to the left and bunched up like this.

So I'm going to add the text-align property and I'm going to change it to center.

So now they're all center aligned.

And then finally this section cannot just end so suddenly like this,

and we need to basically give it a little bit of a padding from the bottom.

Let's add maybe just padding-bottom of, say, 3 percent, and now it's lifted up a little bit and it

doesn't look like it's so sudden.

Now, the last thing we need to do is that these logos are way too big.

It's kind of stealing the show here.

And remember what we spoke about earlier on about visual hierarchy.

They can't be as important as the testimonial, so we need to make them smaller.

So in order to change the press logos we need to change these images and I want to apply the same style

to each image.

So I need to give them the same custom class.

And this is where one of those packages that we installed earlier on really comes into use.

There is a package that we saw called Sublime-Style-Column-Selection.

And this comes from the Sublime text editor, and this is a feature that I really really like, especially

when you're working with HTML and you have these large stacks of elements and you want to apply the same

class to it.

I really don't want to just write it, then copy and paste, copy and paste.

Nice feature here is that you can hold down the option key and you can click and drag, and now you have

a single cursor that is going to apply the same text to all four lines, which is really really powerful,

and I really like it.

So I'm going to add class to all four lines, and I'm going to call it press-logo.

So now I have this class press-logo that's applied to all four images.

And that didn't take very much effort from my part at all.

So let's go ahead and target the press logos and let's change their width to make them a little bit smaller,

let’s say maybe 15 percent.

Yeah that looks a lot nicer.

And finally I'm going to add a little bit of space between each of these images so they don't look all

so bunched together. So we can add a margin of, say, maybe 20 pixels from the top, 20 pixels from the left

and right and then 50 pixels from the bottom.

And this will give it a bit of space between each logo, but also separate it from the testimonial section

and also the bottom of this colored section.

So I'm quite happy with that design and we can now proceed to look at something a little bit more exciting.