1 00:00:01,230 --> 00:00:08,160 Now, the next step is applying what we learned here to our TinDog web site. 2 00:00:08,350 --> 00:00:13,940 And we need to make this section a six unit column, so that it takes up half of the screen, 3 00:00:14,160 --> 00:00:20,580 and this image to be another six unit column, so it takes up the right side 50 percent of the screen. 4 00:00:20,640 --> 00: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, 5 00:00:27,150 --> 00:00:31,670 so that we can see the image and the text and the buttons more easily. 6 00:00:31,770 --> 00:00:34,050 So let's go ahead and do that now. 7 00:00:34,050 --> 00: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 8 00:00:40,680 --> 00: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 9 00:00:46,530 --> 00:00:48,560 exactly what we're working on. 10 00:00:48,570 --> 00:00:53,540 So, in order to do that, you can see that we've got a number of these sections inside our body, 11 00:00:53,550 --> 00:00:54,200 right? 12 00:00:54,270 --> 00:01:00,720 And the first section includes the navigation bar as well as the title section, and this section has 13 00:01:00,720 --> 00:01:02,970 an id called title. 14 00:01:02,970 --> 00:01:09,980 So let's go ahead into our styles.css and target that title section. 15 00:01:10,080 --> 00:01:16,800 I want you to see if you remember what the selector was in order to change the background color of that 16 00:01:16,800 --> 00:01:23,070 title section. And the background color is going to be the hash tag or the pound sign and then followed 17 00:01:23,070 --> 00:01:26,200 by ff4c68. 18 00:01:26,200 --> 00:01:35,030 So, see if you can change the background color of this title section by using the right selector. 19 00:01:35,040 --> 00:01:36,930 So, pause the video and give that a go. 20 00:01:40,720 --> 00:01:48,310 What you should remember from our CSS section is that in order to target the actual elements, we simply 21 00:01:48,310 --> 00:01:50,650 add in the name of the element, 22 00:01:50,650 --> 00:01:52,600 so for example body. 23 00:01:52,600 --> 00:01:58,740 Now, in order to target classes, we simply add a dot in front of the class name. 24 00:01:58,990 --> 00: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. 25 00:02:06,880 --> 00:02:15,700 So we have to say #title, which is the name of that id, and then we can start specifying our background 26 00:02:15,700 --> 00:02:24,760 color property, and we're going to change it to #ff4c68, and let's check to make sure if 27 00:02:24,760 --> 00:02:26,050 that works. 28 00:02:26,200 --> 00:02:26,710 Brilliant. 29 00:02:26,710 --> 00:02:33,520 So that first section now has this kind of reddish color, which means that it's working exactly as we 30 00:02:33,520 --> 00:02:34,290 want it to. 31 00:02:34,540 --> 00:02:39,560 Now I want this navigation bar to not have its own color. 32 00:02:39,730 --> 00:02:44,400 I want it to just be a light colored navigation bar. 33 00:02:44,650 --> 00:02:51,040 So we can go ahead and remove the Bootstrap class that gives this background a dark color, which is of 34 00:02:51,040 --> 00:02:54,400 course the bg-dark class. 35 00:02:54,400 --> 00:02:57,390 So now let's hit save and refresh. 36 00:02:57,490 --> 00:02:59,880 And you can see that our nav bar 37 00:03:00,070 --> 00:03:04,570 now looks like it's a part of that first header title section. 38 00:03:04,570 --> 00:03:06,320 Now here comes a challenge. 39 00:03:06,430 --> 00:03:13,330 I want you to use what you learned just now about the Bootstrap grid system to make the title and the 40 00:03:13,330 --> 00: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 41 00:03:19,960 --> 00:03:22,090 of the width on the right. 42 00:03:22,240 --> 00:03:24,550 And this is on the large desk top size. 43 00:03:24,580 --> 00:03:30,940 When we get to the tablet sized, then they should each take up 100 percent of the width of the screen, 44 00:03:31,120 --> 00:03:33,730 and the same for the mobile sized. 45 00:03:34,060 --> 00:03:37,570 So pause the video, and see if you can complete this challenge. 46 00:03:40,760 --> 00:03:41,110 All right. 47 00:03:41,120 --> 00:03:43,240 So how did that go? 48 00:03:43,610 --> 00:03:50,240 Well, the first thing that we need in order to use the Bootstrap grid system is to have that div that 49 00:03:50,240 --> 00:03:54,500 encloses the entire row that we're going to use the grid system on. 50 00:03:54,530 --> 00:04:02,870 So, we've got this div here already which includes the heading, the buttons, as well as the images, so we 51 00:04:02,870 --> 00:04:06,820 can simply give that one a class of row. 52 00:04:07,160 --> 00:04:13,460 Now the next thing that we need is to separate the other parts of the content into two separate divs. 53 00:04:13,640 --> 00:04:20,810 So that means that our h1 and buttons will have a div and the image will have a div. 54 00:04:20,990 --> 00:04:26,960 So let's create a div here and put our heading and button inside. 55 00:04:27,380 --> 00:04:36,590 And now we should have two divs that are going to help us separate out the content using the grids. 56 00:04:36,910 --> 00:04:45,640 So the first one we're going to give a class of col-lg-6, which means that on any size 57 00:04:45,640 --> 00:04:50,200 that's the large size, which means the laptop size or bigger, 58 00:04:50,200 --> 00:04:52,750 so a laptop or desktop, 59 00:04:52,750 --> 00:04:59,860 then we're going have a six unit column that's going to contain this content, but any size smaller than 60 00:04:59,860 --> 00:05:04,450 that will take up 100 percent of the width of the screen, 61 00:05:04,450 --> 00:05:07,050 so that's tablet and mobile. 62 00:05:07,060 --> 00:05:13,090 So we're going to do the same thing over here to the div that contains the image. 63 00:05:13,210 --> 00:05:19,800 So it's also going to take up 50 percent on the large sizes and 100 percent on the smaller sizes. 64 00:05:19,840 --> 00:05:21,150 So let's hit save. 65 00:05:21,190 --> 00:05:26,070 And once you refresh your page you should have something that looks like this. 66 00:05:26,070 --> 00:05:35,170 Now, remember, from our previous code, that you don't have to specify the medium 12 unit or the small 12 67 00:05:35,170 --> 00:05:43,360 unit, because it's by default 100 percent, and you should read this code as on any screen size that's 68 00:05:43,420 --> 00:05:46,370 on the large size or bigger, 69 00:05:46,480 --> 00:05:54,340 so laptop or bigger, it should be a six unit column, and anything smaller than that will take up the full 70 00:05:54,340 --> 00:05:55,330 width of the row. 71 00:05:55,420 --> 00:06:05,170 And now we have this responsive title section, where we're using the screen real estate with the maximum 72 00:06:05,230 --> 00:06:06,060 efficiency. 73 00:06:06,100 --> 00: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, 74 00:06:12,280 --> 00:06:15,150 namely to change our fonts here. 75 00:06:15,280 --> 00:06:24,280 So, I want you to go over to the Google fonts and to embed the Ubuntu and the Montserrat typefaces into 76 00:06:24,280 --> 00:06:25,300 our web site. 77 00:06:25,600 --> 00:06:28,140 So pause the video and do that now. 78 00:06:29,870 --> 00:06:33,010 All right. So, you've done this before, so it shouldn't be too difficult. 79 00:06:33,050 --> 00:06:38,480 So we're just going to go to fonts.google.com, and we're going to search for those two fonts 80 00:06:38,500 --> 00:06:39,280 I mentioned. 81 00:06:39,410 --> 00:06:45,320 So one is the Ubuntu font which we're going to use for our logo, 82 00:06:45,620 --> 00: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 83 00:06:51,650 --> 00:06:52,410 web site. 84 00:06:52,700 --> 00:06:59,030 So now we've got our two families selected, load time is still relatively fast, so we can just copy that 85 00:06:59,030 --> 00:07:07,550 link and head back over to our index.html and add it into our header section. 86 00:07:07,790 --> 00:07:13,230 So now let's hit save and we're going to use some of those font families. 87 00:07:13,250 --> 00: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 88 00:07:17,720 --> 00:07:20,260 the size of it and that will affect our layout, 89 00:07:20,270 --> 00:07:22,470 so I want to do that as early as possible. 90 00:07:22,670 --> 00:07:33,120 So, I want you to change the font of this heading to a Montserrat-Black. 91 00:07:33,500 --> 00:07:36,760 And I want the font size to be a 3rem 92 00:07:36,790 --> 00: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 93 00:07:43,670 --> 00:07:44,440 around it. 94 00:07:44,690 --> 00:07:48,130 So pause the video and try to complete this challenge. 95 00:07:50,630 --> 00:07:50,960 All right. 96 00:07:50,970 --> 00: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 97 00:07:57,090 --> 00:07:58,280 we need to target. 98 00:07:58,440 --> 00: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. 99 00:08:04,320 --> 00:08:07,560 So maybe we can just target the h1. 100 00:08:07,590 --> 00: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. 101 00:08:16,200 --> 00: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 102 00:08:24,780 --> 00:08:30,170 the different styles, and you can see what those different styles may look like. 103 00:08:30,180 --> 00:08:40,590 So if you wrote Montserrat-Thin, for example, then our text is going to look exactly like the style 104 00:08:40,590 --> 00:08:41,840 specified here. 105 00:08:42,150 --> 00:08:49,500 But in our case we want Montserrat-Black, which is the heaviest weight that this typeface has. 106 00:08:49,830 --> 00:08:52,810 And the other thing we wanted to change was the font size. 107 00:08:52,830 --> 00:08:55,850 We wanted it to be 3rem, so massive. 108 00:08:55,950 --> 00:09:00,120 And then we wanted to change the line height to 1.5. Remember line height 109 00:09:00,120 --> 00: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 110 00:09:06,390 --> 00:09:08,900 add pixels or rems or anything like that. 111 00:09:09,240 --> 00: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. 112 00:09:17,460 --> 00: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 113 00:09:24,720 --> 00:09:29,580 it uses the available screen real estate to the max. 114 00:09:29,580 --> 00:09:35,620 Now, in the next lesson, we're going to learn about another Bootstrap layout element called the container. 115 00:09:35,850 --> 00:09:38,690 So for all of that and more, I'll see you on the next lesson.