0
1
00:00:00,550 --> 00:00:01,010
All right.
1

2
00:00:01,020 --> 00:00:02,010
Welcome back.
2

3
00:00:02,010 --> 00:00:09,390
We've already styled our title section, our features section, so it's now time to style our testimonial
3

4
00:00:09,390 --> 00:00:16,080
section, and we're also going to learn about a Bootstrap component called the carousel, which is going
4

5
00:00:16,080 --> 00:00:22,650
to create a sort of slideshow of all the testimonials that we got from our wonderful customers like
5

6
00:00:22,680 --> 00:00:23,930
Pebbles over here.
6

7
00:00:23,940 --> 00:00:27,880
But, first things first, let's style this section so that it looks nice
7

8
00:00:27,930 --> 00:00:32,700
before we start implementing the carousel. So, similar to the feature section, we need to have a bit of
8

9
00:00:32,700 --> 00:00:33,650
padding here.
9

10
00:00:33,690 --> 00:00:39,180
It doesn't look very good to have long lines of text, and images and text going right up to the edge.
10

11
00:00:39,180 --> 00:00:42,080
It feels very pure HTML.
11

12
00:00:42,210 --> 00:00:48,900
So let's go ahead and go into Atom, and we can see that, in our testimonials section,
12

13
00:00:48,900 --> 00:00:56,500
we’ve got a section with the id testimonials, so we can go in here and we can create a new comment.
13

14
00:00:56,580 --> 00:01:04,460
This is going to be the Testimonial Section, and we’re going to comment that out and then we're going to target
14

15
00:01:04,460 --> 00:01:06,180
that id called testimonials,
15

16
00:01:06,520 --> 00:01:10,090
and I can't remember if it was testimonials.
16

17
00:01:10,240 --> 00:01:10,550
OK.
17

18
00:01:10,550 --> 00:01:12,270
This is really really important.
18

19
00:01:12,380 --> 00:01:17,140
If your CSS isn't being carried out or something's not going right,
19

20
00:01:17,150 --> 00:01:22,600
always make sure that you check you've got the right selector name and you spelled it completely correctly.
20

21
00:01:22,640 --> 00:01:30,460
It's very very easy to make typos and none of the properties that you set inside here will work otherwise.
21

22
00:01:30,470 --> 00:01:35,010
So firstly I'm going to add some padding and it's going to be the same as we had in features.
22

23
00:01:35,030 --> 00:01:39,940
So it's 7 percent top and bottom and 15 percent left and right.
23

24
00:01:40,130 --> 00:01:46,040
So now it's a little bit more squished in and it looks very uniform with the features section, which
24

25
00:01:46,070 --> 00:01:47,390
I quite like.
25

26
00:01:47,420 --> 00:01:50,750
Now the next thing is, we need to have this text center aligned.
26

27
00:01:50,750 --> 00:01:56,990
It looks weird to have only one line of text that is on the left and also to have our images on the
27

28
00:01:56,990 --> 00:01:57,830
left as well.
28

29
00:01:57,860 --> 00:02:00,410
So let's go ahead and go into testimonials,
29

30
00:02:00,530 --> 00:02:03,400
change the text-align to center,
30

31
00:02:04,010 --> 00:02:07,320
and there we go. Looking pretty nice.
31

32
00:02:07,370 --> 00:02:09,780
Now we're going to change the background color.
32

33
00:02:09,800 --> 00:02:16,310
So I want to have the same color as this kind of orangey red color so that we keep to our uniform color
33

34
00:02:16,310 --> 00:02:16,980
palette.
34

35
00:02:17,150 --> 00:02:21,440
So I'm going to style the background of this section to that color.
35

36
00:02:21,590 --> 00:02:28,130
And it's nice, when you're creating these kind of one page web sites, to have alternating white and colored
36

37
00:02:28,130 --> 00:02:33,680
sections, because at the moment we can’t really see where the feature section ends and where the testimonial
37

38
00:02:33,680 --> 00:02:34,890
section starts.
38

39
00:02:35,060 --> 00:02:39,650
So if you're not going to have explicit pages on your web site and you're only going to have sections
39

40
00:02:39,650 --> 00:02:44,900
on a one pager, then it's really really important that you have some sort of way of giving the user a
40

41
00:02:44,900 --> 00:02:48,710
cue that this is not the same section as this one.
41

42
00:02:48,710 --> 00:02:57,080
So I'm going to change the background color to the same one that we had before which is this 
42

43
00:02:57,080 --> 00:02:58,010
ef8172.
43

44
00:02:58,400 --> 00:03:02,450
And now you can see that that is obviously clearly a different section than this one,
44

45
00:03:02,450 --> 00:03:02,930
right?
45

46
00:03:03,160 --> 00:03:03,890
It's pretty good.
46

47
00:03:03,990 --> 00:03:06,110
And our text can't really be black,
47

48
00:03:06,110 --> 00:03:08,020
it looks very very odd.
48

49
00:03:08,030 --> 00:03:14,150
So in our colored sections we tend to have white text, and in our white sections we tend to have black
49

50
00:03:14,150 --> 00:03:14,530
text.
50

51
00:03:14,630 --> 00:03:16,010
So that works out well.
51

52
00:03:16,010 --> 00:03:22,280
So we can easily change that by just changing the color to fff and refresh.
52

53
00:03:22,280 --> 00:03:22,910
Nice.
53

54
00:03:22,910 --> 00:03:24,240
Looks better. Now,
54

55
00:03:24,260 --> 00:03:30,440
this is way too small for a piece of text that occupies the entire section,
55

56
00:03:30,440 --> 00:03:34,150
so we have to make some changes there as well.
56

57
00:03:34,340 --> 00:03:43,160
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

58
00:03:43,160 --> 00:03:54,430
the font-family to Montserrat-Bold and change the font-size to maybe 3rem,
58

59
00:03:54,860 --> 00:03:59,310
and then the line height to 1.5 just to give it more space.
59

60
00:03:59,460 --> 00:04:08,460
And now, voila, we have a very very proper looking heading for this section which is our testimonial text,
60

61
00:04:09,560 --> 00:04:16,590
and that is going to draw all the attention of the user so they can see how much people love our product.
61

62
00:04:16,610 --> 00:04:19,360
Now, the next thing I want to change is this image. Firstly,
62

63
00:04:19,400 --> 00:04:20,710
it’s way too big,
63

64
00:04:20,750 --> 00:04:24,940
and also I kind of want it to be a round circle profile image.
64

65
00:04:24,950 --> 00:04:30,470
So in order to do that we need to target this image and in order to target the image we of course need
65

66
00:04:30,530 --> 00:04:31,570
a class.
66

67
00:04:31,790 --> 00:04:38,430
So the class is going to be called testimonial-image, and hit save.
67

68
00:04:38,480 --> 00:04:42,970
And we're going to copy this over to our styles.css.
68

69
00:04:43,040 --> 00:04:49,820
Now, in most situations I never recommend copy and pasting, but there's one exception. When you have long
69

70
00:04:49,820 --> 00:04:53,730
class names or something that's a little bit difficult to spell,
70

71
00:04:53,810 --> 00:04:59,300
then it's a good idea just to copy it over and use it as the selector, so that you know you definitely
71

72
00:04:59,300 --> 00:05:07,220
haven't made any typos, because this is a very very common cause of your web sites not working the way
72

73
00:05:07,220 --> 00:05:08,300
that they should do
73

74
00:05:08,510 --> 00:05:11,990
when your selector is spelt differently from your class.
74

75
00:05:11,990 --> 00:05:15,820
Even small adjustments, say one letter is capitalised
75

76
00:05:15,980 --> 00:05:20,910
and it's not in the HTML, then it's not going to target the right thing.
76

77
00:05:20,930 --> 00:05:27,350
So now that we've got the testimonial image selected we can go ahead and make it smaller by changing
77

78
00:05:27,350 --> 00:05:30,400
the width, let's say down to 10 percent.
78

79
00:05:30,680 --> 00:05:35,230
Looking a lot smaller. Then we can make it rounded by,
79

80
00:05:35,450 --> 00:05:42,920
if you remember, changing the border-radius to 100 percent and that makes it a circle, and we need a little
80

81
00:05:42,920 --> 00:05:49,460
bit of space between this image and basically everything else, too tightly packed with everything else
81

82
00:05:49,550 --> 00:05:50,340
around.
82

83
00:05:50,360 --> 00:05:55,440
So I'm going to give it just a, maybe, a 20 pixel margin all around.
83

84
00:05:55,640 --> 00:05:58,850
And now it's looking a lot nicer.
84

85
00:05:58,850 --> 00:06:05,500
Now while I'm here I'm also going to style this press section which is basically sitting at the bottom
85

86
00:06:05,800 --> 00:06:09,010
of the testimonials. This is kind of the creds section, right?
86

87
00:06:09,010 --> 00:06:13,810
This is when a user lands on your web site and sees how much credit you have based on how much other
87

88
00:06:13,810 --> 00:06:17,210
users love you, how much coverage you've had in the media,
88

89
00:06:17,470 --> 00:06:20,640
and so I'm going to group it together in the same section.
89

90
00:06:20,680 --> 00:06:24,880
And I can do that by giving it the same background color.
90

91
00:06:25,090 --> 00:06:29,220
So let's go ahead and check out our press section.
91

92
00:06:29,230 --> 00:06:34,900
It's also got a id and we can use that to change some of its styling.
92

93
00:06:34,900 --> 00:06:41,350
So I'm going to target the press section and I'm going to give it the same background color, and you
93

94
00:06:41,350 --> 00:06:41,960
can see
94

95
00:06:41,980 --> 00:06:45,260
now they look like they belong in the same section.
95

96
00:06:45,310 --> 00:06:51,000
Now I need these images to be centralized and not aligned all to the left and bunched up like this.
96

97
00:06:51,130 --> 00:06:56,250
So I'm going to add the text-align property and I'm going to change it to center.
97

98
00:06:56,440 --> 00:06:58,620
So now they're all center aligned.
98

99
00:06:58,810 --> 00:07:05,230
And then finally this section cannot just end so suddenly like this,
99

100
00:07:05,260 --> 00:07:11,290
and we need to basically give it a little bit of a padding from the bottom.
100

101
00:07:11,290 --> 00:07:19,660
Let's add maybe just padding-bottom of, say, 3 percent, and now it's lifted up a little bit and it
101

102
00:07:19,660 --> 00:07:22,030
doesn't look like it's so sudden.
102

103
00:07:22,030 --> 00:07:26,730
Now, the last thing we need to do is that these logos are way too big.
103

104
00:07:26,920 --> 00:07:28,580
It's kind of stealing the show here.
104

105
00:07:28,600 --> 00:07:32,220
And remember what we spoke about earlier on about visual hierarchy.
105

106
00:07:32,230 --> 00:07:37,740
They can't be as important as the testimonial, so we need to make them smaller.
106

107
00:07:37,870 --> 00:07:43,570
So in order to change the press logos we need to change these images and I want to apply the same style
107

108
00:07:43,570 --> 00:07:44,850
to each image.
108

109
00:07:44,920 --> 00:07:47,530
So I need to give them the same custom class.
109

110
00:07:47,540 --> 00:07:53,870
And this is where one of those packages that we installed earlier on really comes into use.
110

111
00:07:53,920 --> 00:07:57,650
There is a package that we saw called Sublime-Style-Column-Selection.
111

112
00:07:57,680 --> 00:08:03,160
And this comes from the Sublime text editor, and this is a feature that I really really like, especially
112

113
00:08:03,160 --> 00:08:08,050
when you're working with HTML and you have these large stacks of elements and you want to apply the same
113

114
00:08:08,050 --> 00:08:09,030
class to it.
114

115
00:08:09,040 --> 00:08:13,280
I really don't want to just write it, then copy and paste, copy and paste.
115

116
00:08:13,300 --> 00:08:21,400
Nice feature here is that you can hold down the option key and you can click and drag, and now you have
116

117
00:08:21,490 --> 00:08:29,630
a single cursor that is going to apply the same text to all four lines, which is really really powerful,
117

118
00:08:29,650 --> 00:08:30,880
and I really like it.
118

119
00:08:31,060 --> 00:08:38,700
So I'm going to add class to all four lines, and I'm going to call it press-logo.
119

120
00:08:39,310 --> 00:08:43,560
So now I have this class press-logo that's applied to all four images.
120

121
00:08:43,630 --> 00:08:49,540
And that didn't take very much effort from my part at all.
121

122
00:08:49,590 --> 00:08:56,040
So let's go ahead and target the press logos and let's change their width to make them a little bit smaller,
122

123
00:08:56,100 --> 00:08:58,150
let’s say maybe 15 percent.
123

124
00:08:58,350 --> 00:09:00,410
Yeah that looks a lot nicer.
124

125
00:09:00,690 --> 00:09:06,240
And finally I'm going to add a little bit of space between each of these images so they don't look all
125

126
00:09:06,240 --> 00:09:16,320
so bunched together. So we can add a margin of, say, maybe 20 pixels from the top, 20 pixels from the left
126

127
00:09:16,440 --> 00:09:21,150
and right and then 50 pixels from the bottom.
127

128
00:09:21,420 --> 00:09:28,830
And this will give it a bit of space between each logo, but also separate it from the testimonial section
128

129
00:09:28,890 --> 00:09:31,520
and also the bottom of this colored section.
129

130
00:09:31,530 --> 00:09:39,160
So I'm quite happy with that design and we can now proceed to look at something a little bit more exciting.