WEBVTT 0 00:01.230 --> 00:08.160 Now, the next step is applying what we learned here to our TinDog web site. 1 00:08.350 --> 00:13.940 And we need to make this section a six unit column, so that it takes up half of the screen, 2 00:14.160 --> 00:20.580 and this image to be another six unit column, so it takes up the right side 50 percent of the screen. 3 00:20.640 --> 00:26.880 But when it goes on to a smaller size, a tablet or mobile, we want it to take up 100 percent of the width, 4 00:27.150 --> 00:31.670 so that we can see the image and the text and the buttons more easily. 5 00:31.770 --> 00:34.050 So let's go ahead and do that now. 6 00:34.050 --> 00:40.680 So, the first thing that I'm going to do is, I want to add a background color to our first section, just 7 00:40.680 --> 00:46.530 so that we can see it more easily, and visually divide it from the rest of the content, so that we know 8 00:46.530 --> 00:48.560 exactly what we're working on. 9 00:48.570 --> 00:53.540 So, in order to do that, you can see that we've got a number of these sections inside our body, 10 00:53.550 --> 00:54.200 right? 11 00:54.270 --> 01:00.720 And the first section includes the navigation bar as well as the title section, and this section has 12 01:00.720 --> 01:02.970 an id called title. 13 01:02.970 --> 01:09.980 So let's go ahead into our styles.css and target that title section. 14 01:10.080 --> 01:16.800 I want you to see if you remember what the selector was in order to change the background color of that 15 01:16.800 --> 01:23.070 title section. And the background color is going to be the hash tag or the pound sign and then followed 16 01:23.070 --> 01:26.200 by ff4c68. 17 01:26.200 --> 01:35.030 So, see if you can change the background color of this title section by using the right selector. 18 01:35.040 --> 01:36.930 So, pause the video and give that a go. 19 01:40.720 --> 01:48.310 What you should remember from our CSS section is that in order to target the actual elements, we simply 20 01:48.310 --> 01:50.650 add in the name of the element, 21 01:50.650 --> 01:52.600 so for example body. 22 01:52.600 --> 01:58.740 Now, in order to target classes, we simply add a dot in front of the class name. 23 01:58.990 --> 02:06.880 But, in order to target ids, as we've got over here, we need to use the pound sign or the hash tag sign. 24 02:06.880 --> 02:15.700 So we have to say #title, which is the name of that id, and then we can start specifying our background 25 02:15.700 --> 02:24.760 color property, and we're going to change it to #ff4c68, and let's check to make sure if 26 02:24.760 --> 02:26.050 that works. 27 02:26.200 --> 02:26.710 Brilliant. 28 02:26.710 --> 02:33.520 So that first section now has this kind of reddish color, which means that it's working exactly as we 29 02:33.520 --> 02:34.290 want it to. 30 02:34.540 --> 02:39.560 Now I want this navigation bar to not have its own color. 31 02:39.730 --> 02:44.400 I want it to just be a light colored navigation bar. 32 02:44.650 --> 02:51.040 So we can go ahead and remove the Bootstrap class that gives this background a dark color, which is of 33 02:51.040 --> 02:54.400 course the bg-dark class. 34 02:54.400 --> 02:57.390 So now let's hit save and refresh. 35 02:57.490 --> 02:59.880 And you can see that our nav bar 36 03:00.070 --> 03:04.570 now looks like it's a part of that first header title section. 37 03:04.570 --> 03:06.320 Now here comes a challenge. 38 03:06.430 --> 03:13.330 I want you to use what you learned just now about the Bootstrap grid system to make the title and the 39 03:13.330 --> 03:19.870 download buttons take up 50 percent of the width on the left, and the image of the phone take up 50 percent 40 03:19.960 --> 03:22.090 of the width on the right. 41 03:22.240 --> 03:24.550 And this is on the large desk top size. 42 03:24.580 --> 03:30.940 When we get to the tablet sized, then they should each take up 100 percent of the width of the screen, 43 03:31.120 --> 03:33.730 and the same for the mobile sized. 44 03:34.060 --> 03:37.570 So pause the video, and see if you can complete this challenge. 45 03:40.760 --> 03:41.110 All right. 46 03:41.120 --> 03:43.240 So how did that go? 47 03:43.610 --> 03:50.240 Well, the first thing that we need in order to use the Bootstrap grid system is to have that div that 48 03:50.240 --> 03:54.500 encloses the entire row that we're going to use the grid system on. 49 03:54.530 --> 04:02.870 So, we've got this div here already which includes the heading, the buttons, as well as the images, so we 50 04:02.870 --> 04:06.820 can simply give that one a class of row. 51 04:07.160 --> 04:13.460 Now the next thing that we need is to separate the other parts of the content into two separate divs. 52 04:13.640 --> 04:20.810 So that means that our h1 and buttons will have a div and the image will have a div. 53 04:20.990 --> 04:26.960 So let's create a div here and put our heading and button inside. 54 04:27.380 --> 04:36.590 And now we should have two divs that are going to help us separate out the content using the grids. 55 04:36.910 --> 04:45.640 So the first one we're going to give a class of col-lg-6, which means that on any size 56 04:45.640 --> 04:50.200 that's the large size, which means the laptop size or bigger, 57 04:50.200 --> 04:52.750 so a laptop or desktop, 58 04:52.750 --> 04:59.860 then we're going have a six unit column that's going to contain this content, but any size smaller than 59 04:59.860 --> 05:04.450 that will take up 100 percent of the width of the screen, 60 05:04.450 --> 05:07.050 so that's tablet and mobile. 61 05:07.060 --> 05:13.090 So we're going to do the same thing over here to the div that contains the image. 62 05:13.210 --> 05:19.800 So it's also going to take up 50 percent on the large sizes and 100 percent on the smaller sizes. 63 05:19.840 --> 05:21.150 So let's hit save. 64 05:21.190 --> 05:26.070 And once you refresh your page you should have something that looks like this. 65 05:26.070 --> 05:35.170 Now, remember, from our previous code, that you don't have to specify the medium 12 unit or the small 12 66 05:35.170 --> 05:43.360 unit, because it's by default 100 percent, and you should read this code as on any screen size that's 67 05:43.420 --> 05:46.370 on the large size or bigger, 68 05:46.480 --> 05:54.340 so laptop or bigger, it should be a six unit column, and anything smaller than that will take up the full 69 05:54.340 --> 05:55.330 width of the row. 70 05:55.420 --> 06:05.170 And now we have this responsive title section, where we're using the screen real estate with the maximum 71 06:05.230 --> 06:06.060 efficiency. 72 06:06.100 --> 06:11.950 So the last thing that I want to do before we finish off this lesson is, I want to add some text styling, 73 06:12.280 --> 06:15.150 namely to change our fonts here. 74 06:15.280 --> 06:24.280 So, I want you to go over to the Google fonts and to embed the Ubuntu and the Montserrat typefaces into 75 06:24.280 --> 06:25.300 our web site. 76 06:25.600 --> 06:28.140 So pause the video and do that now. 77 06:29.870 --> 06:33.010 All right. So, you've done this before, so it shouldn't be too difficult. 78 06:33.050 --> 06:38.480 So we're just going to go to fonts.google.com, and we're going to search for those two fonts 79 06:38.500 --> 06:39.280 I mentioned. 80 06:39.410 --> 06:45.320 So one is the Ubuntu font which we're going to use for our logo, 81 06:45.620 --> 06:51.650 and the other one is the Montserrat font, which we're going to use for the majority of the body of our 82 06:51.650 --> 06:52.410 web site. 83 06:52.700 --> 06:59.030 So now we've got our two families selected, load time is still relatively fast, so we can just copy that 84 06:59.030 --> 07:07.550 link and head back over to our index.html and add it into our header section. 85 07:07.790 --> 07:13.230 So now let's hit save and we're going to use some of those font families. 86 07:13.250 --> 07:17.720 So the thing that I want to change the most is the style of the h1, because it's going to determine 87 07:17.720 --> 07:20.260 the size of it and that will affect our layout, 88 07:20.270 --> 07:22.470 so I want to do that as early as possible. 89 07:22.670 --> 07:33.120 So, I want you to change the font of this heading to a Montserrat-Black. 90 07:33.500 --> 07:36.760 And I want the font size to be a 3rem 91 07:36.790 --> 07:43.670 and the line height to be 1.5 so that we get a little bit of space between it and anything else 92 07:43.670 --> 07:44.440 around it. 93 07:44.690 --> 07:48.130 So pause the video and try to complete this challenge. 94 07:50.630 --> 07:50.960 All right. 95 07:50.970 --> 07:57.090 So the first thing we need to do in order to change this text is figure out what is the element that 96 07:57.090 --> 07:58.280 we need to target. 97 07:58.440 --> 08:04.290 So the easiest thing here, is we've already got an h1, and we only have one h1 on the whole page. 98 08:04.320 --> 08:07.560 So maybe we can just target the h1. 99 08:07.590 --> 08:16.060 So let's go ahead and target the h1, and then we're going to change its font-family to Montserrat-Black. 100 08:16.200 --> 08:24.780 So, if you want to see what these fonts look like, you can always click on the font and scroll down to 101 08:24.780 --> 08:30.170 the different styles, and you can see what those different styles may look like. 102 08:30.180 --> 08:40.590 So if you wrote Montserrat-Thin, for example, then our text is going to look exactly like the style 103 08:40.590 --> 08:41.840 specified here. 104 08:42.150 --> 08:49.500 But in our case we want Montserrat-Black, which is the heaviest weight that this typeface has. 105 08:49.830 --> 08:52.810 And the other thing we wanted to change was the font size. 106 08:52.830 --> 08:55.850 We wanted it to be 3rem, so massive. 107 08:55.950 --> 09:00.120 And then we wanted to change the line height to 1.5. Remember line height 108 09:00.120 --> 09:06.390 you don't usually specify a unit, because it's two times or one times and you don't actually need to 109 09:06.390 --> 09:08.900 add pixels or rems or anything like that. 110 09:09.240 --> 09:17.340 So now let's hit save and let's look at our updated style of our title, and that's looking pretty nice. 111 09:17.460 --> 09:24.720 So, in this lesson, we've learned about grids and how to use it to make our web site responsive, so that 112 09:24.720 --> 09:29.580 it uses the available screen real estate to the max. 113 09:29.580 --> 09:35.620 Now, in the next lesson, we're going to learn about another Bootstrap layout element called the container. 114 09:35.850 --> 09:38.690 So for all of that and more, I'll see you on the next lesson.