WEBVTT 0 00:00.550 --> 00:01.010 All right. 1 00:01.020 --> 00:02.010 Welcome back. 2 00:02.010 --> 00:09.390 We've already styled our title section, our features section, so it's now time to style our testimonial 3 00:09.390 --> 00:16.080 section, and we're also going to learn about a Bootstrap component called the carousel, which is going 4 00:16.080 --> 00:22.650 to create a sort of slideshow of all the testimonials that we got from our wonderful customers like 5 00:22.680 --> 00:23.930 Pebbles over here. 6 00:23.940 --> 00:27.880 But, first things first, let's style this section so that it looks nice 7 00:27.930 --> 00:32.700 before we start implementing the carousel. So, similar to the feature section, we need to have a bit of 8 00:32.700 --> 00:33.650 padding here. 9 00:33.690 --> 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 00:39.180 --> 00:42.080 It feels very pure HTML. 11 00:42.210 --> 00:48.900 So let's go ahead and go into Atom, and we can see that, in our testimonials section, 12 00:48.900 --> 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 00:56.580 --> 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 01:04.460 --> 01:06.180 that id called testimonials, 15 01:06.520 --> 01:10.090 and I can't remember if it was testimonials. 16 01:10.240 --> 01:10.550 OK. 17 01:10.550 --> 01:12.270 This is really really important. 18 01:12.380 --> 01:17.140 If your CSS isn't being carried out or something's not going right, 19 01:17.150 --> 01:22.600 always make sure that you check you've got the right selector name and you spelled it completely correctly. 20 01:22.640 --> 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 01:30.470 --> 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 01:35.030 --> 01:39.940 So it's 7 percent top and bottom and 15 percent left and right. 23 01:40.130 --> 01:46.040 So now it's a little bit more squished in and it looks very uniform with the features section, which 24 01:46.070 --> 01:47.390 I quite like. 25 01:47.420 --> 01:50.750 Now the next thing is, we need to have this text center aligned. 26 01:50.750 --> 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 01:56.990 --> 01:57.830 left as well. 28 01:57.860 --> 02:00.410 So let's go ahead and go into testimonials, 29 02:00.530 --> 02:03.400 change the text-align to center, 30 02:04.010 --> 02:07.320 and there we go. Looking pretty nice. 31 02:07.370 --> 02:09.780 Now we're going to change the background color. 32 02:09.800 --> 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 02:16.310 --> 02:16.980 palette. 34 02:17.150 --> 02:21.440 So I'm going to style the background of this section to that color. 35 02:21.590 --> 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 02:28.130 --> 02:33.680 sections, because at the moment we can’t really see where the feature section ends and where the testimonial 37 02:33.680 --> 02:34.890 section starts. 38 02:35.060 --> 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 02:39.650 --> 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 02:44.900 --> 02:48.710 cue that this is not the same section as this one. 41 02:48.710 --> 02:57.080 So I'm going to change the background color to the same one that we had before which is this 42 02:57.080 --> 02:58.010 ef8172. 43 02:58.400 --> 03:02.450 And now you can see that that is obviously clearly a different section than this one, 44 03:02.450 --> 03:02.930 right? 45 03:03.160 --> 03:03.890 It's pretty good. 46 03:03.990 --> 03:06.110 And our text can't really be black, 47 03:06.110 --> 03:08.020 it looks very very odd. 48 03:08.030 --> 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 03:14.150 --> 03:14.530 text. 50 03:14.630 --> 03:16.010 So that works out well. 51 03:16.010 --> 03:22.280 So we can easily change that by just changing the color to fff and refresh. 52 03:22.280 --> 03:22.910 Nice. 53 03:22.910 --> 03:24.240 Looks better. Now, 54 03:24.260 --> 03:30.440 this is way too small for a piece of text that occupies the entire section, 55 03:30.440 --> 03:34.150 so we have to make some changes there as well. 56 03:34.340 --> 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 03:43.160 --> 03:54.430 the font-family to Montserrat-Bold and change the font-size to maybe 3rem, 58 03:54.860 --> 03:59.310 and then the line height to 1.5 just to give it more space. 59 03:59.460 --> 04:08.460 And now, voila, we have a very very proper looking heading for this section which is our testimonial text, 60 04:09.560 --> 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 04:16.610 --> 04:19.360 Now, the next thing I want to change is this image. Firstly, 62 04:19.400 --> 04:20.710 it’s way too big, 63 04:20.750 --> 04:24.940 and also I kind of want it to be a round circle profile image. 64 04:24.950 --> 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 04:30.530 --> 04:31.570 a class. 66 04:31.790 --> 04:38.430 So the class is going to be called testimonial-image, and hit save. 67 04:38.480 --> 04:42.970 And we're going to copy this over to our styles.css. 68 04:43.040 --> 04:49.820 Now, in most situations I never recommend copy and pasting, but there's one exception. When you have long 69 04:49.820 --> 04:53.730 class names or something that's a little bit difficult to spell, 70 04:53.810 --> 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 04:59.300 --> 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 05:07.220 --> 05:08.300 that they should do 73 05:08.510 --> 05:11.990 when your selector is spelt differently from your class. 74 05:11.990 --> 05:15.820 Even small adjustments, say one letter is capitalised 75 05:15.980 --> 05:20.910 and it's not in the HTML, then it's not going to target the right thing. 76 05:20.930 --> 05:27.350 So now that we've got the testimonial image selected we can go ahead and make it smaller by changing 77 05:27.350 --> 05:30.400 the width, let's say down to 10 percent. 78 05:30.680 --> 05:35.230 Looking a lot smaller. Then we can make it rounded by, 79 05:35.450 --> 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 05:42.920 --> 05:49.460 bit of space between this image and basically everything else, too tightly packed with everything else 81 05:49.550 --> 05:50.340 around. 82 05:50.360 --> 05:55.440 So I'm going to give it just a, maybe, a 20 pixel margin all around. 83 05:55.640 --> 05:58.850 And now it's looking a lot nicer. 84 05:58.850 --> 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 06:05.800 --> 06:09.010 of the testimonials. This is kind of the creds section, right? 86 06:09.010 --> 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 06:13.810 --> 06:17.210 users love you, how much coverage you've had in the media, 88 06:17.470 --> 06:20.640 and so I'm going to group it together in the same section. 89 06:20.680 --> 06:24.880 And I can do that by giving it the same background color. 90 06:25.090 --> 06:29.220 So let's go ahead and check out our press section. 91 06:29.230 --> 06:34.900 It's also got a id and we can use that to change some of its styling. 92 06:34.900 --> 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 06:41.350 --> 06:41.960 can see 94 06:41.980 --> 06:45.260 now they look like they belong in the same section. 95 06:45.310 --> 06:51.000 Now I need these images to be centralized and not aligned all to the left and bunched up like this. 96 06:51.130 --> 06:56.250 So I'm going to add the text-align property and I'm going to change it to center. 97 06:56.440 --> 06:58.620 So now they're all center aligned. 98 06:58.810 --> 07:05.230 And then finally this section cannot just end so suddenly like this, 99 07:05.260 --> 07:11.290 and we need to basically give it a little bit of a padding from the bottom. 100 07:11.290 --> 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 07:19.660 --> 07:22.030 doesn't look like it's so sudden. 102 07:22.030 --> 07:26.730 Now, the last thing we need to do is that these logos are way too big. 103 07:26.920 --> 07:28.580 It's kind of stealing the show here. 104 07:28.600 --> 07:32.220 And remember what we spoke about earlier on about visual hierarchy. 105 07:32.230 --> 07:37.740 They can't be as important as the testimonial, so we need to make them smaller. 106 07:37.870 --> 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 07:43.570 --> 07:44.850 to each image. 108 07:44.920 --> 07:47.530 So I need to give them the same custom class. 109 07:47.540 --> 07:53.870 And this is where one of those packages that we installed earlier on really comes into use. 110 07:53.920 --> 07:57.650 There is a package that we saw called Sublime-Style-Column-Selection. 111 07:57.680 --> 08:03.160 And this comes from the Sublime text editor, and this is a feature that I really really like, especially 112 08:03.160 --> 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 08:08.050 --> 08:09.030 class to it. 114 08:09.040 --> 08:13.280 I really don't want to just write it, then copy and paste, copy and paste. 115 08:13.300 --> 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 08:21.490 --> 08:29.630 a single cursor that is going to apply the same text to all four lines, which is really really powerful, 117 08:29.650 --> 08:30.880 and I really like it. 118 08:31.060 --> 08:38.700 So I'm going to add class to all four lines, and I'm going to call it press-logo. 119 08:39.310 --> 08:43.560 So now I have this class press-logo that's applied to all four images. 120 08:43.630 --> 08:49.540 And that didn't take very much effort from my part at all. 121 08:49.590 --> 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 08:56.100 --> 08:58.150 let’s say maybe 15 percent. 123 08:58.350 --> 09:00.410 Yeah that looks a lot nicer. 124 09:00.690 --> 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 09:06.240 --> 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 09:16.440 --> 09:21.150 and right and then 50 pixels from the bottom. 127 09:21.420 --> 09:28.830 And this will give it a bit of space between each logo, but also separate it from the testimonial section 128 09:28.890 --> 09:31.520 and also the bottom of this colored section. 129 09:31.530 --> 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.