Original subtitles

0 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.