1 00:00:00,330 --> 00:00:05,740 Welcome back in this lesson we're going to use bootstrap to create a landing page for a fictitious startup 2 00:00:05,740 --> 00:00:05,940 . 3 00:00:06,070 --> 00:00:08,760 Our startup is called Perfect match. 4 00:00:08,760 --> 00:00:09,210 Very funny. 5 00:00:09,210 --> 00:00:15,300 I know it's a human feline dating app and I'll leave it up to you to interpret what human feline dating 6 00:00:15,300 --> 00:00:21,750 is it might be relatively innocuous it could just be matching Sheldrick cats with lonely humans could 7 00:00:21,750 --> 00:00:22,430 be something else. 8 00:00:22,440 --> 00:00:23,260 I don't know. 9 00:00:23,550 --> 00:00:27,690 Let's get started by doing a quick tour of the site and write to her. 10 00:00:27,690 --> 00:00:29,920 I really just mean pointing out a few features. 11 00:00:29,970 --> 00:00:31,250 There's not much here. 12 00:00:31,290 --> 00:00:33,780 We don't actually have this hooked up it doesn't do anything yet. 13 00:00:33,840 --> 00:00:37,770 So it's really just HD mounseers s but that's all that we've covered so far. 14 00:00:38,100 --> 00:00:42,510 So we have enough our perfect match home about incontact lengths. 15 00:00:42,510 --> 00:00:50,100 They don't actually go anywhere sign up and log in on the right side two little icons there we get her 16 00:00:50,100 --> 00:00:51,030 hamburger. 17 00:00:51,180 --> 00:00:52,320 I can click on it. 18 00:00:52,380 --> 00:00:55,980 All of those links are now inside that hamburger. 19 00:00:55,980 --> 00:01:01,650 Then we have a big background image that stays centered and it covers the entire background. 20 00:01:01,740 --> 00:01:07,590 So in the middle we have the name of our start up perfect match with to ours and then we have our caption 21 00:01:07,650 --> 00:01:09,750 The only human feed on dating app. 22 00:01:09,750 --> 00:01:15,420 And then we have a little H R here horizontal rule and then a button to get started with an icon. 23 00:01:15,810 --> 00:01:21,990 And as I shrink this it all stays in the middle and it also moves up a little bit so that we don't have 24 00:01:21,990 --> 00:01:26,960 some sort of awkward layout on your mobile device where the text starts halfway down the page. 25 00:01:27,060 --> 00:01:29,690 So we move it up a bit and it stays centered. 26 00:01:29,700 --> 00:01:33,900 This layouts really easy to do and bootstrap but it's relatively effective for landing page. 27 00:01:33,900 --> 00:01:38,180 All that we have is a single column that takes up the entire width. 28 00:01:38,220 --> 00:01:40,850 So this column goes 12 units across. 29 00:01:40,860 --> 00:01:46,890 We're not dividing it up into any sections just to one column 12 units across and then we center everything 30 00:01:46,890 --> 00:01:48,510 inside of that column. 31 00:01:48,540 --> 00:01:49,860 So let's get started. 32 00:01:49,860 --> 00:01:52,350 First thing we need to do is make a file. 33 00:01:52,440 --> 00:01:54,640 I have one called index at DML. 34 00:01:54,720 --> 00:01:58,890 I'll add this in my regular boilerplate perfect match 35 00:02:01,700 --> 00:02:04,950 and then start by adding in Bootstrap and I'll use a CDN 36 00:02:08,580 --> 00:02:10,410 Bitstrips CDN. 37 00:02:11,490 --> 00:02:14,350 Let's do the SS and Javascript out here. 38 00:02:14,400 --> 00:02:16,860 We will need that javascript for the taskbar. 39 00:02:17,220 --> 00:02:19,130 So we need to link tag. 40 00:02:19,710 --> 00:02:22,770 Then we get the javascript. 41 00:02:22,770 --> 00:02:24,030 Copy that. 42 00:02:24,090 --> 00:02:32,030 Put this down at the bottom which is a script tag and then we set source equal to that you are. 43 00:02:32,520 --> 00:02:41,040 Now if we open this up OK open up the console we have a small problem which is that we need Jay query 44 00:02:41,040 --> 00:02:43,390 as well in order for the bootstrap javascript. 45 00:02:43,450 --> 00:02:46,290 Remember back from the nav bar lesson we need to require J. 46 00:02:46,290 --> 00:02:46,750 Querrey. 47 00:02:46,860 --> 00:02:52,500 So we'll get a CDN for that. 48 00:02:53,730 --> 00:02:55,290 We'll do the modified version. 49 00:02:55,290 --> 00:02:57,500 Copy that URL. 50 00:02:57,600 --> 00:03:04,110 And finally we go back here and we have to do it before the linked to bootstrap to the javascript. 51 00:03:04,440 --> 00:03:09,360 Otherwise it will still not know about your query so it needs to load the query first. 52 00:03:09,360 --> 00:03:10,650 Now let's try again. 53 00:03:10,870 --> 00:03:11,960 Fire refresh. 54 00:03:12,520 --> 00:03:17,490 OK we don't see anything that's a good sign because we don't see any errors. 55 00:03:18,570 --> 00:03:20,850 Let's begin with the text in the middle. 56 00:03:20,850 --> 00:03:22,480 All this content here. 57 00:03:22,620 --> 00:03:29,570 So we need to create a container and then inside the container we need a row to div class ECOs container 58 00:03:30,870 --> 00:03:35,870 and then inside of there we have another div we always need that row. 59 00:03:35,930 --> 00:03:45,780 Anytime we're using the grid system and then our div that's going to be class equal to column dash large 60 00:03:46,230 --> 00:03:47,220 12. 61 00:03:48,240 --> 00:03:50,750 And that will span all the way across that container. 62 00:03:51,210 --> 00:03:59,330 And then inside if they're going to have an H1 that will just say perfect match and save. 63 00:03:59,520 --> 00:04:02,280 And let's leave it at that refresh. 64 00:04:02,580 --> 00:04:06,660 And it's not really what we want yet and that's because there's a few things we need to do. 65 00:04:06,660 --> 00:04:09,010 The first is that we need to center everything in that column. 66 00:04:09,300 --> 00:04:16,700 So if we inspect what we're dealing with here you could see that the H1 goes all the way across and 67 00:04:16,710 --> 00:04:19,190 we just need to center it inside of that. 68 00:04:19,410 --> 00:04:21,680 And the second is that we need to push it down a bit. 69 00:04:21,720 --> 00:04:26,250 We need to add some padding or margin so that doesn't go right to the top of our page. 70 00:04:26,250 --> 00:04:28,480 Let's start by adding in the rest of the content. 71 00:04:28,830 --> 00:04:36,180 So we also have the only human feline dating app and that will just be an H 3 and we could really play 72 00:04:36,180 --> 00:04:46,110 with that could be any element that we want but I'll make it an H-3 the only human dash feline dating 73 00:04:46,590 --> 00:04:47,730 app. 74 00:04:48,090 --> 00:04:54,060 And then we can add in that horizontal rule which won't look like much but we'll style it after the 75 00:04:54,060 --> 00:04:59,180 fact and then we'll also add in a button in the class on that button. 76 00:04:59,240 --> 00:05:01,680 We take a look. 77 00:05:02,100 --> 00:05:06,010 This is a bootstrap button default and it's a button large. 78 00:05:06,330 --> 00:05:07,830 Let's go back. 79 00:05:07,830 --> 00:05:18,120 So we need PTEN and then the color default and then the size between LG for large and in here we'll 80 00:05:18,120 --> 00:05:20,520 just add the text which is get started 81 00:05:24,290 --> 00:05:29,320 and save let's see what we end up with. 82 00:05:29,340 --> 00:05:30,330 All right. 83 00:05:30,330 --> 00:05:34,270 So we have our content now next but Center inside of the grid. 84 00:05:34,470 --> 00:05:36,920 And then we'll focus on the padding and moving it down. 85 00:05:36,930 --> 00:05:41,430 But to start with the center inside this grid and to make that easier I'm going to group it all inside 86 00:05:41,430 --> 00:05:44,720 of a div so that we don't have to center each thing individually. 87 00:05:44,760 --> 00:05:49,680 We have to center the H-1 and then the three and then the button rather we can group in a div and just 88 00:05:49,680 --> 00:05:51,430 Center that div with one line. 89 00:05:51,750 --> 00:06:01,490 Let's make a div and I'll give it an ID of Cantet and then we'll put everything inside of there. 90 00:06:01,560 --> 00:06:08,340 So the H-1 the age 3 the H.R. and the button will properly indent and save. 91 00:06:08,580 --> 00:06:13,420 So nothing should look different if I refresh the page before we do that let's add in our style sheet 92 00:06:13,420 --> 00:06:14,270 . 93 00:06:14,340 --> 00:06:18,840 So I added a link tag and I'll call my style sheet app. 94 00:06:18,920 --> 00:06:20,920 SS It doesn't exist yet. 95 00:06:21,120 --> 00:06:24,220 So I need to make it save it. 96 00:06:24,230 --> 00:06:27,060 I see SS in the same directory. 97 00:06:27,420 --> 00:06:31,550 And let's start with something simple like all h ones are purple. 98 00:06:31,680 --> 00:06:35,030 Just to make sure it works OK. 99 00:06:35,400 --> 00:06:37,060 Let's go back refresh. 100 00:06:37,390 --> 00:06:39,100 Andrew get a purple H-1. 101 00:06:39,180 --> 00:06:39,670 Great. 102 00:06:39,870 --> 00:06:44,970 So now let's select that Dave we added with idea of content and center it. 103 00:06:45,030 --> 00:06:53,620 So get rid of that and we need an ID content and omitting to do is text align Center. 104 00:06:54,210 --> 00:06:56,430 Let's go back. 105 00:06:56,430 --> 00:06:57,110 There we go. 106 00:06:57,120 --> 00:06:59,490 So things are Center aligned to now. 107 00:06:59,490 --> 00:07:06,720 Next we'll push this down a bit 25 percent down the page to be exact with padding equal to 25 percent 108 00:07:06,720 --> 00:07:07,440 . 109 00:07:07,470 --> 00:07:15,270 So in here we'll do padding top 25 percent. 110 00:07:16,270 --> 00:07:21,720 And rather than giving it a hard number of pixels if we keep it as a percentage it's a little bit more 111 00:07:21,720 --> 00:07:22,870 responsive. 112 00:07:22,890 --> 00:07:24,790 So that's right in the center. 113 00:07:25,230 --> 00:07:29,940 And then 25 percent changes as we resize the screen. 114 00:07:29,940 --> 00:07:30,540 Great. 115 00:07:30,540 --> 00:07:32,480 Now let's add in the background image. 116 00:07:32,670 --> 00:07:38,460 So the image that I'm using is adorable cat and human interaction going on here is from this on Splash 117 00:07:38,460 --> 00:07:43,280 Web site which I introduced in the last video where we created the bootstrap image grid. 118 00:07:43,680 --> 00:07:48,300 And they have all sorts of really great high quality images that you can use without any issue. 119 00:07:48,480 --> 00:07:54,110 And the one that I use is right here I search for cat links in that description as well. 120 00:07:54,450 --> 00:08:00,230 Here's the you Aro of this image just right click copy the image you are l. 121 00:08:00,360 --> 00:08:06,310 Now let's go back and I'm going to add it to the body as a background image. 122 00:08:06,800 --> 00:08:13,830 So background and then give it a URL which is that giant You are right there. 123 00:08:13,830 --> 00:08:22,530 And if we leave it at that it's form at this level or refresh we get a gigantic background image and 124 00:08:22,530 --> 00:08:26,010 all we can tell is that this is some sort of startup for fingernails. 125 00:08:26,010 --> 00:08:36,060 So we need to resize it and to do that we use background size and change that to be covered afresh. 126 00:08:36,060 --> 00:08:39,230 Again we're getting closer. 127 00:08:39,270 --> 00:08:44,430 This will make the image as small as possible while still covering the entire width and height of the 128 00:08:44,430 --> 00:08:44,950 screen. 129 00:08:45,240 --> 00:08:50,820 So it won't change the aspect ratio it won't skew the image in any way but it will stretch in both directions 130 00:08:50,850 --> 00:08:52,240 as much as it needs to. 131 00:08:52,350 --> 00:08:57,060 But the minimum amount that it needs to to fit on our screen and it's still not perfect. 132 00:08:57,210 --> 00:09:01,900 And what we want to do is not change the size of it but change the position. 133 00:09:02,190 --> 00:09:10,280 We're going to center it background position center but save that we're closer. 134 00:09:10,290 --> 00:09:13,320 But it's still not a perfect match as far as the image goes. 135 00:09:13,800 --> 00:09:15,510 And those changes will come later. 136 00:09:15,510 --> 00:09:21,540 For now I want to focus on adding in the nav bar and to do that when you go to the Boucek docs and go 137 00:09:21,540 --> 00:09:24,650 to components and I've mentioned this before. 138 00:09:25,080 --> 00:09:27,690 I always do this if I'm adding in a bootstrap nav bar. 139 00:09:27,810 --> 00:09:29,850 It's just too much stuff to remember otherwise. 140 00:09:30,230 --> 00:09:32,070 And I just copy this right here. 141 00:09:32,370 --> 00:09:39,630 Will take the entire nav to start go back to our app here and just put it right at the top. 142 00:09:39,630 --> 00:09:46,110 This is definitely not the NAF that we want but it contains the pieces that we want to refresh. 143 00:09:46,380 --> 00:09:47,380 It's close enough. 144 00:09:47,610 --> 00:09:49,360 So there's a few changes we want to make. 145 00:09:49,470 --> 00:09:55,890 The first and easiest one is that our content on the solution is in a container so it doesn't go all 146 00:09:55,890 --> 00:09:58,570 the way to the edges like it does here. 147 00:09:59,100 --> 00:10:05,670 So we can go back and inset or are we just change this to be div class container and if we go back now 148 00:10:07,290 --> 00:10:13,020 you can see that because we added in that container we now have some spacing just like we do over here 149 00:10:13,260 --> 00:10:14,250 on the solution. 150 00:10:14,250 --> 00:10:16,920 Now let's get to work on the actual content of the Nev.. 151 00:10:17,070 --> 00:10:26,520 So the easiest thing is to change the brand which right now just says Brand back in here this line class 152 00:10:26,550 --> 00:10:33,950 equals neth bar brand and we'll change it to per fixed match and save. 153 00:10:33,940 --> 00:10:34,990 Try it out. 154 00:10:35,490 --> 00:10:37,500 OK good. 155 00:10:37,500 --> 00:10:39,050 Now let's get rid of this form. 156 00:10:39,060 --> 00:10:41,150 We don't need this at all. 157 00:10:41,310 --> 00:10:45,030 So our form all starts right here. 158 00:10:45,030 --> 00:10:50,490 Get rid of that entire thing refresh. 159 00:10:50,860 --> 00:10:52,560 Let's also get rid of the dropdown. 160 00:10:52,560 --> 00:10:54,570 You don't need that. 161 00:10:54,570 --> 00:10:56,680 So that starts right here. 162 00:10:56,680 --> 00:10:58,680 This lie that ends there 163 00:11:01,770 --> 00:11:02,810 are fresh again. 164 00:11:03,120 --> 00:11:04,540 Now we have a single link. 165 00:11:04,710 --> 00:11:10,910 So we'll start with these two links which are supposed to be sign up and log it. 166 00:11:11,360 --> 00:11:18,110 That's this link right here so we can change that one to be sign up and then duplicate it. 167 00:11:18,390 --> 00:11:21,450 Just an ally with an anchor tag inside of it. 168 00:11:21,450 --> 00:11:23,840 And this one will be logged in. 169 00:11:24,750 --> 00:11:26,640 Let's check it out. 170 00:11:26,700 --> 00:11:27,260 Great. 171 00:11:27,270 --> 00:11:29,100 So the icons will come at the end. 172 00:11:29,100 --> 00:11:30,380 We have the two links. 173 00:11:30,450 --> 00:11:32,320 Now we need three links here. 174 00:11:32,340 --> 00:11:35,500 We already have two of them and we'll get rid of that dropdown. 175 00:11:35,610 --> 00:11:38,560 So we need home about in contact. 176 00:11:38,600 --> 00:11:41,490 So a locate that dropdown which is right here. 177 00:11:41,490 --> 00:11:43,100 Class equals dropdown. 178 00:11:43,140 --> 00:11:49,070 Let's get rid of it and are now Akbar's simplified a lot. 179 00:11:49,080 --> 00:11:50,370 Now we have two different lengths. 180 00:11:50,390 --> 00:11:53,760 We'll actually get rid of both of them and do it from scratch. 181 00:11:53,760 --> 00:12:00,120 So we'll add in one ally with an anchor tag and then we'll do that three times. 182 00:12:00,120 --> 00:12:02,260 This first one should say home. 183 00:12:02,550 --> 00:12:04,100 The next one is about. 184 00:12:04,320 --> 00:12:06,530 And the last one is contact. 185 00:12:07,020 --> 00:12:08,760 Let's check it out. 186 00:12:08,760 --> 00:12:11,050 There we go are three lengths. 187 00:12:11,070 --> 00:12:11,970 One minor thing. 188 00:12:11,970 --> 00:12:16,830 Home is supposed to be active and a bootstrap that's really easy. 189 00:12:16,980 --> 00:12:24,860 All that we have to do is add class equals active to the ally not the anchor tag but the parent ally 190 00:12:26,220 --> 00:12:29,390 and now we end up with home being the active link. 191 00:12:29,400 --> 00:12:29,960 Great. 192 00:12:30,200 --> 00:12:36,900 OK so that's our nav bar and if we resize you'll see that we already have this hamburger working just 193 00:12:36,900 --> 00:12:37,940 fine. 194 00:12:38,520 --> 00:12:42,420 We do have a problem which is that our background image is messed up. 195 00:12:42,420 --> 00:12:45,750 We'll cover that in just a little bit but we have the hamberger working fine. 196 00:12:45,750 --> 00:12:47,400 Everything looks good. 197 00:12:47,430 --> 00:12:53,360 Now let's address the font so the font that I used over here is Ledo L.A.. 198 00:12:53,430 --> 00:12:57,900 It's from Google fonts so I'll go to Google fonts and look for Ledo. 199 00:12:58,010 --> 00:13:02,720 LA T-O every go to collection. 200 00:13:03,180 --> 00:13:06,820 Let's use it if it will get normal and bold. 201 00:13:06,840 --> 00:13:10,050 Also we want our H-1 to be bold. 202 00:13:10,590 --> 00:13:11,040 Okay. 203 00:13:11,070 --> 00:13:16,290 And then we'll add this link right into her application. 204 00:13:16,290 --> 00:13:24,090 Up top here save now enter apps The assess we're going to apply that font to everything. 205 00:13:24,270 --> 00:13:33,720 So I'm going to select inside the body font family is Ledo and let's make sure that it's loading correctly 206 00:13:33,720 --> 00:13:33,970 . 207 00:13:34,050 --> 00:13:36,780 See what we have refresh. 208 00:13:37,520 --> 00:13:43,000 And our front changes it's hard to see because the text is dark but changed you can also see it on the 209 00:13:43,000 --> 00:13:43,990 NFR here. 210 00:13:44,160 --> 00:13:44,790 It's changed. 211 00:13:44,790 --> 00:13:47,510 It matches what we have in this solution.