All right. 1
Welcome back. 2
We've already styled our title section, our features section, so it's now time to style our testimonial 3
section, and we're also going to learn about a Bootstrap component called the carousel, which is going 4
to create a sort of slideshow of all the testimonials that we got from our wonderful customers like 5
Pebbles over here. 6
But, first things first, let's style this section so that it looks nice 7
before we start implementing the carousel. So, similar to the feature section, we need to have a bit of 8
padding here. 9
It doesn't look very good to have long lines of text, and images and text going right up to the edge. 10
It feels very pure HTML. 11
So let's go ahead and go into Atom, and we can see that, in our testimonials section, 12
we’ve got a section with the id testimonials, so we can go in here and we can create a new comment. 13
This is going to be the Testimonial Section, and we’re going to comment that out and then we're going to target 14
that id called testimonials, 15
and I can't remember if it was testimonials. 16
OK. 17
This is really really important. 18
If your CSS isn't being carried out or something's not going right, 19
always make sure that you check you've got the right selector name and you spelled it completely correctly. 20
It's very very easy to make typos and none of the properties that you set inside here will work otherwise. 21
So firstly I'm going to add some padding and it's going to be the same as we had in features. 22
So it's 7 percent top and bottom and 15 percent left and right. 23
So now it's a little bit more squished in and it looks very uniform with the features section, which 24
I quite like. 25
Now the next thing is, we need to have this text center aligned. 26
It looks weird to have only one line of text that is on the left and also to have our images on the 27
left as well. 28
So let's go ahead and go into testimonials, 29
change the text-align to center, 30
and there we go. Looking pretty nice. 31
Now we're going to change the background color. 32
So I want to have the same color as this kind of orangey red color so that we keep to our uniform color 33
palette. 34
So I'm going to style the background of this section to that color. 35
And it's nice, when you're creating these kind of one page web sites, to have alternating white and colored 36
sections, because at the moment we can’t really see where the feature section ends and where the testimonial 37
section starts. 38
So if you're not going to have explicit pages on your web site and you're only going to have sections 39
on a one pager, then it's really really important that you have some sort of way of giving the user a 40
cue that this is not the same section as this one. 41
So I'm going to change the background color to the same one that we had before which is this 42
ef8172. 43
And now you can see that that is obviously clearly a different section than this one, 44
right? 45
It's pretty good. 46
And our text can't really be black, 47
it looks very very odd. 48
So in our colored sections we tend to have white text, and in our white sections we tend to have black 49
text. 50
So that works out well. 51
So we can easily change that by just changing the color to fff and refresh. 52
Nice. 53
Looks better. Now, 54
this is way too small for a piece of text that occupies the entire section, 55
so we have to make some changes there as well. 56
So that text is inside an h2, so we can go ahead and change the h2 up here, and we're going to change 57
the font-family to Montserrat-Bold and change the font-size to maybe 3rem, 58
and then the line height to 1.5 just to give it more space. 59
And now, voila, we have a very very proper looking heading for this section which is our testimonial text, 60
and that is going to draw all the attention of the user so they can see how much people love our product. 61
Now, the next thing I want to change is this image. Firstly, 62
it’s way too big, 63
and also I kind of want it to be a round circle profile image. 64
So in order to do that we need to target this image and in order to target the image we of course need 65
a class. 66
So the class is going to be called testimonial-image, and hit save. 67
And we're going to copy this over to our styles.css. 68
Now, in most situations I never recommend copy and pasting, but there's one exception. When you have long 69
class names or something that's a little bit difficult to spell, 70
then it's a good idea just to copy it over and use it as the selector, so that you know you definitely 71
haven't made any typos, because this is a very very common cause of your web sites not working the way 72
that they should do 73
when your selector is spelt differently from your class. 74
Even small adjustments, say one letter is capitalised 75
and it's not in the HTML, then it's not going to target the right thing. 76
So now that we've got the testimonial image selected we can go ahead and make it smaller by changing 77
the width, let's say down to 10 percent. 78
Looking a lot smaller. Then we can make it rounded by, 79
if you remember, changing the border-radius to 100 percent and that makes it a circle, and we need a little 80
bit of space between this image and basically everything else, too tightly packed with everything else 81
around. 82
So I'm going to give it just a, maybe, a 20 pixel margin all around. 83
And now it's looking a lot nicer. 84
Now while I'm here I'm also going to style this press section which is basically sitting at the bottom 85
of the testimonials. This is kind of the creds section, right? 86
This is when a user lands on your web site and sees how much credit you have based on how much other 87
users love you, how much coverage you've had in the media, 88
and so I'm going to group it together in the same section. 89
And I can do that by giving it the same background color. 90
So let's go ahead and check out our press section. 91
It's also got a id and we can use that to change some of its styling. 92
So I'm going to target the press section and I'm going to give it the same background color, and you 93
can see 94
now they look like they belong in the same section. 95
Now I need these images to be centralized and not aligned all to the left and bunched up like this. 96
So I'm going to add the text-align property and I'm going to change it to center. 97
So now they're all center aligned. 98
And then finally this section cannot just end so suddenly like this, 99
and we need to basically give it a little bit of a padding from the bottom. 100
Let's add maybe just padding-bottom of, say, 3 percent, and now it's lifted up a little bit and it 101
doesn't look like it's so sudden. 102
Now, the last thing we need to do is that these logos are way too big. 103
It's kind of stealing the show here. 104
And remember what we spoke about earlier on about visual hierarchy. 105
They can't be as important as the testimonial, so we need to make them smaller. 106
So in order to change the press logos we need to change these images and I want to apply the same style 107
to each image. 108
So I need to give them the same custom class. 109
And this is where one of those packages that we installed earlier on really comes into use. 110
There is a package that we saw called Sublime-Style-Column-Selection. 111
And this comes from the Sublime text editor, and this is a feature that I really really like, especially 112
when you're working with HTML and you have these large stacks of elements and you want to apply the same 113
class to it. 114
I really don't want to just write it, then copy and paste, copy and paste. 115
Nice feature here is that you can hold down the option key and you can click and drag, and now you have 116
a single cursor that is going to apply the same text to all four lines, which is really really powerful, 117
and I really like it. 118
So I'm going to add class to all four lines, and I'm going to call it press-logo. 119
So now I have this class press-logo that's applied to all four images. 120
And that didn't take very much effort from my part at all. 121
So let's go ahead and target the press logos and let's change their width to make them a little bit smaller, 122
let’s say maybe 15 percent. 123
Yeah that looks a lot nicer. 124
And finally I'm going to add a little bit of space between each of these images so they don't look all 125
so bunched together. So we can add a margin of, say, maybe 20 pixels from the top, 20 pixels from the left 126
and right and then 50 pixels from the bottom. 127
And this will give it a bit of space between each logo, but also separate it from the testimonial section 128
and also the bottom of this colored section. 129
So I'm quite happy with that design and we can now proceed to look at something a little bit more exciting.