1 00:00:00,000 --> 00:00:00,833 Instructor: All right, 2 00:00:00,833 --> 00:00:02,730 so now that you've learned all about Bootstrap, 3 00:00:02,730 --> 00:00:06,960 it's time to apply what we've learned and build a project. 4 00:00:06,960 --> 00:00:10,170 I want you to imagine that a startup has approached you 5 00:00:10,170 --> 00:00:12,870 to build their landing page. 6 00:00:12,870 --> 00:00:14,700 So, the company is called TinDog, 7 00:00:14,700 --> 00:00:18,210 and they make basically Tinder for dogs, 8 00:00:18,210 --> 00:00:22,860 helping dogs meet new and interesting dogs nearby. 9 00:00:22,860 --> 00:00:27,000 Obviously, this is a fake startup that I've created. 10 00:00:27,000 --> 00:00:29,040 Now, if you want to go ahead and steal this idea, 11 00:00:29,040 --> 00:00:30,870 then I fully support you, 12 00:00:30,870 --> 00:00:33,660 but essentially, the idea is very simple, you have a dog, 13 00:00:33,660 --> 00:00:37,440 you want your dog to have friends, so let's use TinDog. 14 00:00:37,440 --> 00:00:40,530 Now, our website is pretty fully fledged, and, 15 00:00:40,530 --> 00:00:42,810 if you want to look at what the finished product looks like, 16 00:00:42,810 --> 00:00:47,160 head over to appbrewery.github.io/tindog, 17 00:00:47,160 --> 00:00:48,600 and this is what you'll see, 18 00:00:48,600 --> 00:00:51,780 it's a really simple startup website 19 00:00:51,780 --> 00:00:54,840 with a animated gradient background 20 00:00:54,840 --> 00:00:57,540 with buttons to download the app 21 00:00:57,540 --> 00:01:02,540 as well as features, testimonials, pricing, and a footer. 22 00:01:03,840 --> 00:01:06,465 We're going to be creating this beautiful website, 23 00:01:06,465 --> 00:01:08,880 and the way we're going to do it, 24 00:01:08,880 --> 00:01:12,300 is through the use of the different snippets 25 00:01:12,300 --> 00:01:14,580 that are provided by Bootstrap 26 00:01:14,580 --> 00:01:17,100 as well as the different components, 27 00:01:17,100 --> 00:01:21,300 and using Bootstrap layout to get it responsive 28 00:01:21,300 --> 00:01:24,450 and looking beautiful on desktop and mobile. 29 00:01:24,450 --> 00:01:26,640 Straight out of the box. 30 00:01:26,640 --> 00:01:30,210 To get started, first, download the TinDog project, 31 00:01:30,210 --> 00:01:34,830 unzip the file, and open it inside VS code. 32 00:01:34,830 --> 00:01:37,890 Now here, I want you to open up the index.html 33 00:01:37,890 --> 00:01:41,940 and you can see I've provided some comments 34 00:01:41,940 --> 00:01:45,120 and some section HTML elements. 35 00:01:45,120 --> 00:01:47,700 These section elements are mostly used 36 00:01:47,700 --> 00:01:51,510 to separate different sections of a website, 37 00:01:51,510 --> 00:01:55,920 so, it's just a group or area of the website, 38 00:01:55,920 --> 00:01:57,660 and in modern websites, 39 00:01:57,660 --> 00:01:59,790 you'll see very often these sections. 40 00:01:59,790 --> 00:02:01,530 So this one is a section, 41 00:02:01,530 --> 00:02:03,810 this is a section, this is a section, 42 00:02:03,810 --> 00:02:06,960 and it keeps the code nice and organized. 43 00:02:06,960 --> 00:02:08,280 And you are going to be writing your code 44 00:02:08,280 --> 00:02:10,320 in between these section elements 45 00:02:10,320 --> 00:02:13,230 in order to create each of these areas. 46 00:02:13,230 --> 00:02:15,120 Now, what are you aiming for? 47 00:02:15,120 --> 00:02:18,390 Well, you can always refer to the live website 48 00:02:18,390 --> 00:02:21,270 appbrewery.github.io/tindog 49 00:02:21,270 --> 00:02:24,060 to see what everything should look like, 50 00:02:24,060 --> 00:02:26,280 but I've also provided goal images 51 00:02:26,280 --> 00:02:28,050 for each individual section 52 00:02:28,050 --> 00:02:31,530 that's marked up to point you to certain areas 53 00:02:31,530 --> 00:02:33,180 that need more attention, 54 00:02:33,180 --> 00:02:35,430 for example, what's the name of the image 55 00:02:35,430 --> 00:02:36,870 that's going to be displayed here? 56 00:02:36,870 --> 00:02:38,730 Well, it's iPhone.png, 57 00:02:38,730 --> 00:02:41,700 and you can find it inside the images folder. 58 00:02:41,700 --> 00:02:42,810 But also things like, 59 00:02:42,810 --> 00:02:46,440 this little Apple icon is actually an SVG, 60 00:02:46,440 --> 00:02:49,020 and you can find those inside the README. 61 00:02:49,020 --> 00:02:52,350 So, I've included all the SVG code in here, 62 00:02:52,350 --> 00:02:55,410 and I want you to be copy and pasting these SVGs 63 00:02:55,410 --> 00:02:57,300 because some of them have different heights, 64 00:02:57,300 --> 00:02:59,430 they have different sizes, 65 00:02:59,430 --> 00:03:01,779 and instead of getting it from the Bootstrap website, 66 00:03:01,779 --> 00:03:05,220 which this is from, I want you to use this version. 67 00:03:05,220 --> 00:03:08,310 So, just copy and paste it into your code. 68 00:03:08,310 --> 00:03:11,310 Also, if you scroll down, there's the text copy 69 00:03:11,310 --> 00:03:13,530 that you'll need on your website. 70 00:03:13,530 --> 00:03:16,650 And so, you can either copy it straight 71 00:03:16,650 --> 00:03:18,990 from the final finished website 72 00:03:18,990 --> 00:03:22,170 or you can use the text from the README 73 00:03:22,170 --> 00:03:24,030 and just copy it from here. 74 00:03:24,030 --> 00:03:25,500 If you're working as a web developer, 75 00:03:25,500 --> 00:03:27,480 this is a very common workflow. 76 00:03:27,480 --> 00:03:30,390 You'll want your client to create the text copy 77 00:03:30,390 --> 00:03:31,620 because they know the most 78 00:03:31,620 --> 00:03:33,502 about what they want on their website, 79 00:03:33,502 --> 00:03:37,500 and all you have to do is just to place it and style it 80 00:03:37,500 --> 00:03:39,180 in the right ways. 81 00:03:39,180 --> 00:03:40,860 Now, the final thing I want to mention 82 00:03:40,860 --> 00:03:44,190 is if you look inside the style.css, 83 00:03:44,190 --> 00:03:48,030 this is going to be your css style sheet for the website, 84 00:03:48,030 --> 00:03:49,740 you can see that already in there, 85 00:03:49,740 --> 00:03:52,323 I've got a class called gradient-background, 86 00:03:53,340 --> 00:03:57,570 and this code comes from a code pen by Manuel Pinto 87 00:03:57,570 --> 00:04:01,620 where he created a pure CSS gradient background, 88 00:04:01,620 --> 00:04:04,290 and we're simply just using this code, 89 00:04:04,290 --> 00:04:07,650 but defining some unique colors of our own. 90 00:04:07,650 --> 00:04:11,670 And you can see in here we are having our animated gradient 91 00:04:11,670 --> 00:04:14,220 hovers between these three colors, 92 00:04:14,220 --> 00:04:17,370 a blue, a red, and a sort of peachy color, 93 00:04:17,370 --> 00:04:20,100 and that's how we're going to get this gradient background. 94 00:04:20,100 --> 00:04:22,620 Similar to other things you've been doing with Bootstrap, 95 00:04:22,620 --> 00:04:24,660 in order to get this gradient to show, 96 00:04:24,660 --> 00:04:28,770 all you have to do is to add this class to your HTML element 97 00:04:28,770 --> 00:04:31,260 and then it will automatically animate 98 00:04:31,260 --> 00:04:33,780 with this beautiful color scheme. 99 00:04:33,780 --> 00:04:35,850 This project is going to require 100 00:04:35,850 --> 00:04:37,380 a little bit of exploration, 101 00:04:37,380 --> 00:04:40,770 a little bit of looking around the bootstrap example 102 00:04:40,770 --> 00:04:45,360 seeing which ones might work and comparing them, 103 00:04:45,360 --> 00:04:46,350 for example, 104 00:04:46,350 --> 00:04:49,216 which of the heroes might be the one that we could use 105 00:04:49,216 --> 00:04:52,440 or which of the features might match 106 00:04:52,440 --> 00:04:54,180 the one that we've got here, 107 00:04:54,180 --> 00:04:58,770 and customizing it and checking its css 108 00:04:58,770 --> 00:05:02,430 and making sure that things look pretty much the same 109 00:05:02,430 --> 00:05:04,650 as the final outcome. 110 00:05:04,650 --> 00:05:06,840 Now, it's time for you to pause the video 111 00:05:06,840 --> 00:05:09,300 and give this challenge a good go. 112 00:05:09,300 --> 00:05:12,240 You might have to spend half an hour, an hour on it, 113 00:05:12,240 --> 00:05:14,670 just give yourself lots of time to make mistakes, 114 00:05:14,670 --> 00:05:15,660 try things out, 115 00:05:15,660 --> 00:05:17,250 don't be too harsh on yourself. 116 00:05:17,250 --> 00:05:19,860 This is a big project, but I believe in you, 117 00:05:19,860 --> 00:05:21,090 I think you can do it. 118 00:05:21,090 --> 00:05:23,240 Pause the video now and see how you get on. 119 00:05:28,860 --> 00:05:32,160 All right, hopefully, you've completed this challenge 120 00:05:32,160 --> 00:05:35,070 and you're just here to see how I'm doing it. 121 00:05:35,070 --> 00:05:36,461 If you haven't given this a go, 122 00:05:36,461 --> 00:05:40,410 I really recommend you to stop, pause the video, 123 00:05:40,410 --> 00:05:41,880 and actually try it first 124 00:05:41,880 --> 00:05:44,070 because you can listen to me all day long, 125 00:05:44,070 --> 00:05:45,510 but you're not going to learn 126 00:05:45,510 --> 00:05:47,534 until you actually take the first step 127 00:05:47,534 --> 00:05:49,432 and write the code yourself. 128 00:05:49,432 --> 00:05:51,900 I know it can be really, really tempting, 129 00:05:51,900 --> 00:05:54,660 but I promise you this is the only way 130 00:05:54,660 --> 00:05:56,490 you're going to be able to move on to harder things 131 00:05:56,490 --> 00:05:57,540 in the future 132 00:05:57,540 --> 00:06:00,780 by struggling through each and every single step. 133 00:06:00,780 --> 00:06:02,640 Because once we start moving on, 134 00:06:02,640 --> 00:06:04,830 I'm going to assume that all of these things 135 00:06:04,830 --> 00:06:06,900 are in your tool belt. 136 00:06:06,900 --> 00:06:09,660 So, make sure you practice, practice, practice, 137 00:06:09,660 --> 00:06:12,120 and this is a perfect opportunity. 138 00:06:12,120 --> 00:06:13,380 All right, pep talk over. 139 00:06:13,380 --> 00:06:16,650 Let's go ahead and build out this website. 140 00:06:16,650 --> 00:06:17,790 Now, the first thing I'm going to do 141 00:06:17,790 --> 00:06:19,680 is build out this title section. 142 00:06:19,680 --> 00:06:21,660 So, if we take a look at the title goal, 143 00:06:21,660 --> 00:06:25,530 we can see it's pretty much what we call a hero section. 144 00:06:25,530 --> 00:06:29,640 If we take a look inside the bootstrap examples 145 00:06:29,640 --> 00:06:32,070 and we look inside the heroes area, 146 00:06:32,070 --> 00:06:35,130 you can see it looks incredibly similar to the layout here. 147 00:06:35,130 --> 00:06:37,470 It's got some big texts, some buttons, 148 00:06:37,470 --> 00:06:38,760 and an image to the right, 149 00:06:38,760 --> 00:06:40,740 which is pretty much what we have. 150 00:06:40,740 --> 00:06:44,040 So, let's go ahead and right click inspect 151 00:06:44,040 --> 00:06:47,190 and scroll up to the top level 152 00:06:47,190 --> 00:06:51,060 that contains everything just after the divider 153 00:06:51,060 --> 00:06:53,640 and let's copy the entire element. 154 00:06:53,640 --> 00:06:57,575 I'm going to paste that element into this section area 155 00:06:57,575 --> 00:07:01,680 and let's hit save, and see what it looks like. 156 00:07:01,680 --> 00:07:05,520 So, I'm going to show preview just to get this URL 157 00:07:05,520 --> 00:07:07,770 and I'm going to open it inside Chrome 158 00:07:07,770 --> 00:07:09,990 so I can see it in full screen. 159 00:07:09,990 --> 00:07:13,020 Now, you can see this doesn't look like bootstrap at all. 160 00:07:13,020 --> 00:07:16,770 The text is not the right font, the buttons are not styled, 161 00:07:16,770 --> 00:07:18,720 this is just pure HTML. 162 00:07:18,720 --> 00:07:22,560 This should give you a big hint as to what is wrong, 163 00:07:22,560 --> 00:07:26,040 and that is because we have not yet added a link 164 00:07:26,040 --> 00:07:28,050 to the bootstrap css. 165 00:07:28,050 --> 00:07:29,940 So, let's go ahead and do that now. 166 00:07:29,940 --> 00:07:33,990 So, if we go back to the main bootstrap docs 167 00:07:33,990 --> 00:07:36,450 and go to the homepage, 168 00:07:36,450 --> 00:07:39,270 we should be able to grab hold of the link 169 00:07:39,270 --> 00:07:42,480 and we can paste it into our project. 170 00:07:42,480 --> 00:07:46,080 So now, let's hit save and go back to our TinDog. 171 00:07:46,080 --> 00:07:51,011 We should see that we have what is closer to the example 172 00:07:51,011 --> 00:07:53,280 that we saw right here. 173 00:07:53,280 --> 00:07:55,860 There's a couple of things that we will need to fix. 174 00:07:55,860 --> 00:07:58,590 First, let's go ahead and get rid of this broken image 175 00:07:58,590 --> 00:08:00,870 and put in the image that we want. 176 00:08:00,870 --> 00:08:02,720 Here is the image. 177 00:08:02,720 --> 00:08:06,720 So, let's go ahead and change the source to our image, 178 00:08:06,720 --> 00:08:09,660 which is inside the images folder 179 00:08:09,660 --> 00:08:12,300 and it's called iPhone.png. 180 00:08:12,300 --> 00:08:15,420 And let's change the alt to "app demo," 181 00:08:15,420 --> 00:08:17,427 let's hit save, and go back 182 00:08:17,427 --> 00:08:20,820 and we can see this is absolutely massive. 183 00:08:20,820 --> 00:08:23,490 So now, we are going to have to adjust the size. 184 00:08:23,490 --> 00:08:27,810 So here, it's set to width 700, height 500. 185 00:08:27,810 --> 00:08:29,550 I'm going to keep the aspect ratio, 186 00:08:29,550 --> 00:08:31,890 so, I'm going to delete just the width 187 00:08:31,890 --> 00:08:34,950 and hopefully it will adjust proportionally. 188 00:08:34,950 --> 00:08:38,070 And I'm going to change the height to 200 pixels. 189 00:08:38,070 --> 00:08:40,980 And this looks more or less the right size. 190 00:08:40,980 --> 00:08:42,630 Now, yours might be a little bit bigger, 191 00:08:42,630 --> 00:08:44,520 a little bit smaller, it doesn't really matter 192 00:08:44,520 --> 00:08:47,250 as long as it looks good to your eye. 193 00:08:47,250 --> 00:08:48,420 Now, the next thing we're going to do 194 00:08:48,420 --> 00:08:50,760 is let's change all of this text 195 00:08:50,760 --> 00:08:54,450 so that it reads the same as the final copy. 196 00:08:54,450 --> 00:08:58,200 And to do that, I'm going to find the text inside my README, 197 00:08:58,200 --> 00:09:02,670 go ahead and copy and paste it into the right areas. 198 00:09:02,670 --> 00:09:04,110 So, we've got an H1 199 00:09:04,110 --> 00:09:05,910 and that's where we're going to replace 200 00:09:05,910 --> 00:09:07,507 with our big heading, 201 00:09:07,507 --> 00:09:10,560 "Meet new and interesting dogs nearby." 202 00:09:10,560 --> 00:09:13,380 And then I'm going to delete this paragraph element 203 00:09:13,380 --> 00:09:16,680 because we don't actually have it in our final design. 204 00:09:16,680 --> 00:09:18,420 And I'm going to change the two buttons 205 00:09:18,420 --> 00:09:20,670 to both say download. 206 00:09:20,670 --> 00:09:22,920 In addition to the download, 207 00:09:22,920 --> 00:09:25,920 there's obviously two SVGs as well, 208 00:09:25,920 --> 00:09:28,950 and these are the icons from Bootstrap. 209 00:09:28,950 --> 00:09:29,783 But remember, 210 00:09:29,783 --> 00:09:32,010 I mentioned that you can get hold of these SVGs 211 00:09:32,010 --> 00:09:33,540 in the README file. 212 00:09:33,540 --> 00:09:37,830 So, I'm going to wholesale just copy this Apple SVG, 213 00:09:37,830 --> 00:09:39,832 and paste it into here, 214 00:09:39,832 --> 00:09:43,320 add a space between the SVG and download. 215 00:09:43,320 --> 00:09:48,300 And now, hopefully, we have a good looking Apple symbol 216 00:09:48,300 --> 00:09:50,430 in the download button. 217 00:09:50,430 --> 00:09:53,553 And I'm going to do the same with the Google Play logo, 218 00:09:56,100 --> 00:09:58,560 hit save, and that's it, there it is. 219 00:09:58,560 --> 00:10:00,900 We're going to change the color scheme here a little bit. 220 00:10:00,900 --> 00:10:02,730 We've got a button-light 221 00:10:02,730 --> 00:10:04,860 and we've got a button-outline-light, 222 00:10:04,860 --> 00:10:08,130 so that it would look the same as the final design. 223 00:10:08,130 --> 00:10:12,330 Now, right now this button is a button primary, 224 00:10:12,330 --> 00:10:16,320 so, we're going to have to change that to light. 225 00:10:16,320 --> 00:10:19,536 And this one, instead of button-outline-secondary, 226 00:10:19,536 --> 00:10:23,580 we're going to change that to button-outline-light. 227 00:10:23,580 --> 00:10:26,430 Let's hit save and see what we have. 228 00:10:26,430 --> 00:10:27,630 Now, you'll notice that 229 00:10:27,630 --> 00:10:30,270 this button's almost completely disappeared, 230 00:10:30,270 --> 00:10:33,030 if not for this rollover effect. 231 00:10:33,030 --> 00:10:36,750 And the reason is because it's more or less a white outline 232 00:10:36,750 --> 00:10:39,510 in order for this to show we need a background. 233 00:10:39,510 --> 00:10:41,670 So, let's go ahead and set it up 234 00:10:41,670 --> 00:10:44,670 with this css gradient background. 235 00:10:44,670 --> 00:10:45,840 Remember, I mentioned that 236 00:10:45,840 --> 00:10:48,549 if you look inside the style.css file, 237 00:10:48,549 --> 00:10:52,140 there is already a class called gradient-background, 238 00:10:52,140 --> 00:10:56,610 which we can add into our HTML for it to show up. 239 00:10:56,610 --> 00:10:58,323 Now, where do we add it? 240 00:10:59,280 --> 00:11:02,536 Before we can add it, we need to import our css, 241 00:11:02,536 --> 00:11:07,530 and as always, we put our custom css after the bootstrap, 242 00:11:07,530 --> 00:11:09,420 so, in case there are any collisions 243 00:11:09,420 --> 00:11:12,510 in terms of targeting the same selectors, 244 00:11:12,510 --> 00:11:17,510 the final one wins out, which hopefully is our css. 245 00:11:17,580 --> 00:11:19,943 So, I'm going to link to the style.css 246 00:11:19,943 --> 00:11:23,460 and then I'm going to put that class gradient-background 247 00:11:23,460 --> 00:11:26,010 into my title section. 248 00:11:26,010 --> 00:11:27,330 So, where do I put it? 249 00:11:27,330 --> 00:11:29,910 Now, if I put it inside the container, 250 00:11:29,910 --> 00:11:32,670 you'll see that it's only inside the container 251 00:11:32,670 --> 00:11:34,290 and the container's got these big margins 252 00:11:34,290 --> 00:11:35,250 on the left and right. 253 00:11:35,250 --> 00:11:37,795 So, this is not the look that we want. 254 00:11:37,795 --> 00:11:42,795 Instead, we are going to put this inside the section. 255 00:11:42,960 --> 00:11:46,102 We can't put it into the ID because it's not an ID, 256 00:11:46,102 --> 00:11:47,790 it's actually a class. 257 00:11:47,790 --> 00:11:52,290 So, make sure you've got it set inside the class property. 258 00:11:52,290 --> 00:11:55,800 Now, let's take a look and this looks pretty good. 259 00:11:55,800 --> 00:11:57,750 Now, the only difference between what we have 260 00:11:57,750 --> 00:12:02,250 and what we're aiming for is a lot of padding. 261 00:12:02,250 --> 00:12:05,070 Now, the reason I can tell is padding and not margin 262 00:12:05,070 --> 00:12:08,700 is because padding extends the background. 263 00:12:08,700 --> 00:12:10,473 So, if this was an extra margin, 264 00:12:10,473 --> 00:12:12,600 then this area would be white, 265 00:12:12,600 --> 00:12:16,800 but instead it's actually the same as the background color. 266 00:12:16,800 --> 00:12:19,020 So, where does this margin come from? 267 00:12:19,020 --> 00:12:21,540 Let's go ahead and hit inspect 268 00:12:21,540 --> 00:12:24,510 and make this just a little bit smaller 269 00:12:24,510 --> 00:12:26,670 so we can see this padding. 270 00:12:26,670 --> 00:12:30,300 And if we scroll up until we see the padding show up, 271 00:12:30,300 --> 00:12:33,960 you can see that orange down there when I hover over it, 272 00:12:33,960 --> 00:12:36,540 well that is what we need to get rid of. 273 00:12:36,540 --> 00:12:39,737 So, you can see we've got padding top and padding bottom, 274 00:12:39,737 --> 00:12:43,110 and if we get rid of the top and bottom, 275 00:12:43,110 --> 00:12:45,510 it will look a little bit too much. 276 00:12:45,510 --> 00:12:48,420 So, if we just target the bottom, 277 00:12:48,420 --> 00:12:51,810 then we've got more or less the right layout. 278 00:12:51,810 --> 00:12:55,530 So, let's go in here and find that py-5 for the container, 279 00:12:55,530 --> 00:12:57,000 which is right here. 280 00:12:57,000 --> 00:12:59,400 And remember, the p stands for padding, 281 00:12:59,400 --> 00:13:01,980 the y stands for the y-axis. 282 00:13:01,980 --> 00:13:05,430 So, it means it's adding padding to the top and the bottom. 283 00:13:05,430 --> 00:13:08,576 So, if we want to change this to only have it on the top, 284 00:13:08,576 --> 00:13:12,330 then we change this to pt, padding top. 285 00:13:12,330 --> 00:13:15,450 And then we've got another div that has the padding 286 00:13:15,450 --> 00:13:18,420 on top and bottom as well, so let's change it there. 287 00:13:18,420 --> 00:13:19,710 And then when we go back, 288 00:13:19,710 --> 00:13:24,000 we should see that we have pretty much the same layout. 289 00:13:24,000 --> 00:13:27,600 And now, if we compare our layout to the final outcome, 290 00:13:27,600 --> 00:13:30,720 it looks pretty much exactly the same. 291 00:13:30,720 --> 00:13:33,150 So, we can now move on to our next section 292 00:13:33,150 --> 00:13:35,013 which is the features section. 293 00:13:35,940 --> 00:13:38,340 If we open up our features goal, 294 00:13:38,340 --> 00:13:41,940 you can see that we've got three different areas 295 00:13:41,940 --> 00:13:45,470 with all of the features that we want to show off. 296 00:13:45,470 --> 00:13:48,660 And we've got this sort of rough layout. 297 00:13:48,660 --> 00:13:51,930 If we go back to the bootstrap examples, 298 00:13:51,930 --> 00:13:54,870 and if we look inside the snippets at the features, 299 00:13:54,870 --> 00:13:57,146 you can see this is pretty much the same layout 300 00:13:57,146 --> 00:13:59,340 as what we're aiming for. 301 00:13:59,340 --> 00:14:03,330 So, let's go ahead and inspect and find 302 00:14:03,330 --> 00:14:05,850 that row that we need to get hold of. 303 00:14:05,850 --> 00:14:10,590 Let's copy the element and put it inside our index.html. 304 00:14:12,450 --> 00:14:16,890 Now, once we paste it in, let's hit save and see it. 305 00:14:16,890 --> 00:14:18,540 You can see this is occupying 306 00:14:18,540 --> 00:14:20,940 pretty much the entire full width, 307 00:14:20,940 --> 00:14:23,130 which is not quite what we want. 308 00:14:23,130 --> 00:14:25,110 We actually want it all to be 309 00:14:25,110 --> 00:14:28,440 roughly along the same vertical line. 310 00:14:28,440 --> 00:14:29,760 So, why is this? 311 00:14:29,760 --> 00:14:34,760 Well, it's because the top level here is a Bootstrap row. 312 00:14:35,430 --> 00:14:37,470 If we want it to be contained, 313 00:14:37,470 --> 00:14:40,230 then we need to add a container. 314 00:14:40,230 --> 00:14:42,720 So, let's add that container class 315 00:14:42,720 --> 00:14:45,330 and then let's move this closing tag 316 00:14:45,330 --> 00:14:49,050 to wrap it around all of this, hit save. 317 00:14:49,050 --> 00:14:52,893 And now, you can see we've got that perfect alignment. 318 00:14:53,730 --> 00:14:55,260 The next thing we need to do 319 00:14:55,260 --> 00:14:58,950 is we need to get rid of all of these buttons, 320 00:14:58,950 --> 00:15:03,060 and that is pretty easy, they're just these anchor tags. 321 00:15:03,060 --> 00:15:05,670 So, there's one there, there's one here, 322 00:15:05,670 --> 00:15:07,083 and there's one up here. 323 00:15:08,430 --> 00:15:11,730 So now, we're pretty much on the design we're looking for, 324 00:15:11,730 --> 00:15:14,400 all we need to do is replace the text. 325 00:15:14,400 --> 00:15:15,900 This is probably a little bit boring, 326 00:15:15,900 --> 00:15:18,240 so, I'm going to use video editing 327 00:15:18,240 --> 00:15:20,043 to speed things up a bit for you. 328 00:15:21,600 --> 00:15:26,100 All right, so now that we've got all of our custom copy in, 329 00:15:26,100 --> 00:15:29,100 the final thing we need to fix are these SVGs. 330 00:15:29,100 --> 00:15:31,830 So, let's go ahead and replace the SVGs 331 00:15:31,830 --> 00:15:35,580 that are in the example with the ones that we want. 332 00:15:35,580 --> 00:15:39,000 So, the first one is going to be the check mark SVG, 333 00:15:39,000 --> 00:15:41,310 let's copy and paste it in. 334 00:15:41,310 --> 00:15:44,673 The second one is the graduation hat, 335 00:15:47,460 --> 00:15:51,453 and the final one is the heart with an arrow through it. 336 00:15:52,650 --> 00:15:55,080 So now that we've replaced all of our SVGs, 337 00:15:55,080 --> 00:15:57,240 you can see them show up, 338 00:15:57,240 --> 00:16:01,530 but the background doesn't look quite the same. 339 00:16:01,530 --> 00:16:03,450 It should have these rounded corners, 340 00:16:03,450 --> 00:16:04,936 it should be a little bit larger, 341 00:16:04,936 --> 00:16:07,440 and we will look on the bootstrap example 342 00:16:07,440 --> 00:16:10,740 where we copied our code from, they look perfect, 343 00:16:10,740 --> 00:16:12,990 but why is it that when it's in our website, 344 00:16:12,990 --> 00:16:15,330 it doesn't quite look the same? 345 00:16:15,330 --> 00:16:17,730 Now, this might be something that you got stuck on, 346 00:16:17,730 --> 00:16:19,710 but in order to figure this out, 347 00:16:19,710 --> 00:16:23,460 the easiest way is to inspect on it in Chrome. 348 00:16:23,460 --> 00:16:26,910 You can see right now I'm highlighting the SVG, 349 00:16:26,910 --> 00:16:31,140 but if I go one level above and hover on that div, 350 00:16:31,140 --> 00:16:34,710 that is the one with all of that fancy styling. 351 00:16:34,710 --> 00:16:36,330 And if we look inside the styles, 352 00:16:36,330 --> 00:16:40,620 you can see there's actually some custom css in here 353 00:16:40,620 --> 00:16:43,470 because it's not in the utilities 354 00:16:43,470 --> 00:16:45,480 which comes from bootstrap, 355 00:16:45,480 --> 00:16:50,130 this is actually custom css just for this feature section. 356 00:16:50,130 --> 00:16:53,595 So, what we need to do is we need to copy all of the css 357 00:16:53,595 --> 00:16:57,960 and put it inside our style.css. 358 00:16:57,960 --> 00:17:02,960 So now, this icon square, which is the class for this div, 359 00:17:04,140 --> 00:17:05,790 can be activated. 360 00:17:05,790 --> 00:17:07,560 And when we look at it now, 361 00:17:07,560 --> 00:17:11,220 you can see that they all have the right styling 362 00:17:11,220 --> 00:17:12,990 that we expected. 363 00:17:12,990 --> 00:17:14,403 So, the final thing we need to sort out 364 00:17:14,403 --> 00:17:17,190 is just to add a little bit more margin 365 00:17:17,190 --> 00:17:20,940 in this features section, and then we're pretty much done. 366 00:17:20,940 --> 00:17:24,060 So, if we look at the features goal, 367 00:17:24,060 --> 00:17:25,589 you can see I've given you a hint 368 00:17:25,589 --> 00:17:29,400 that it's actually margin top five. 369 00:17:29,400 --> 00:17:33,630 If we want to add some margin to this entire container, 370 00:17:33,630 --> 00:17:35,910 then we can go up to the div class 371 00:17:35,910 --> 00:17:37,530 where we have the container, 372 00:17:37,530 --> 00:17:41,460 and then we add margin top five, mt-5. 373 00:17:41,460 --> 00:17:43,620 And now, we should have enough space 374 00:17:43,620 --> 00:17:47,400 between that top title section and our feature section. 375 00:17:47,400 --> 00:17:51,750 So, we're now ready to move on to the testimonial section. 376 00:17:51,750 --> 00:17:55,410 Again, let's take a look at the goal that we're looking for. 377 00:17:55,410 --> 00:17:58,860 So, the first section is an H2 with an image 378 00:17:58,860 --> 00:18:01,320 and some paragraph text. 379 00:18:01,320 --> 00:18:06,060 This area comes from this Jumbotron section. 380 00:18:06,060 --> 00:18:07,350 And if we scroll down, 381 00:18:07,350 --> 00:18:11,010 we can see this full-width jumbotron right here. 382 00:18:11,010 --> 00:18:13,740 So, let's go ahead and inspect on it. 383 00:18:13,740 --> 00:18:18,740 And let's take the entire section just after the divider. 384 00:18:18,990 --> 00:18:20,910 So, let's copy the element 385 00:18:20,910 --> 00:18:25,503 and paste it into our testimonial section. 386 00:18:26,400 --> 00:18:28,470 Let's take a look at what that looks like, 387 00:18:28,470 --> 00:18:29,850 it looks pretty good, 388 00:18:29,850 --> 00:18:33,090 but we need to modify it for our purposes. 389 00:18:33,090 --> 00:18:35,880 So, let's change the text inside. 390 00:18:35,880 --> 00:18:38,250 If we go over to our README, 391 00:18:38,250 --> 00:18:41,430 we should see our quote here from Pebbles, 392 00:18:41,430 --> 00:18:45,630 and we can replace the text inside the H1. 393 00:18:45,630 --> 00:18:47,970 Remember, from our HTML classes, 394 00:18:47,970 --> 00:18:51,810 we should only have one H1 per website. 395 00:18:51,810 --> 00:18:54,840 And remember at the beginning in our title section, 396 00:18:54,840 --> 00:18:56,580 we've already got our big heading. 397 00:18:56,580 --> 00:19:00,270 So, here it should really not be an H1. 398 00:19:00,270 --> 00:19:04,473 Let's turn it into a subheading by changing that to an H2. 399 00:19:06,930 --> 00:19:09,780 Now, this paragraph element, I could delete it, 400 00:19:09,780 --> 00:19:11,880 but I'm actually going to keep it 401 00:19:11,880 --> 00:19:16,880 and use it for showing the name where the quote comes from, 402 00:19:17,520 --> 00:19:20,130 which is Pebbles from New York. 403 00:19:20,130 --> 00:19:24,540 And all I have to do now is add an image in between, 404 00:19:24,540 --> 00:19:28,860 and the image is going to be our dog image. 405 00:19:28,860 --> 00:19:31,473 And I'm going to add the alt text as well. 406 00:19:32,790 --> 00:19:35,820 Let's take a look at what that looks like, it looks great 407 00:19:35,820 --> 00:19:38,880 other than the fact that this should be rounded 408 00:19:38,880 --> 00:19:41,520 and it should be a little bit smaller. 409 00:19:41,520 --> 00:19:42,630 If we look at the goal, 410 00:19:42,630 --> 00:19:45,000 we can see it should be 100 pixels high 411 00:19:45,000 --> 00:19:46,860 and it should be circular. 412 00:19:46,860 --> 00:19:49,860 So, how do we make it custom? 413 00:19:49,860 --> 00:19:53,280 Well, we're going to need to create some styling, right? 414 00:19:53,280 --> 00:19:58,280 So, let's create a class called profile-image 415 00:19:58,470 --> 00:20:03,450 and let's set it to have a height of 100 pixels. 416 00:20:03,450 --> 00:20:05,220 And, in order to make it circular, 417 00:20:05,220 --> 00:20:09,209 remember we need to set the border radius to 50%. 418 00:20:09,209 --> 00:20:14,209 Now, if we apply that class to our image profile-image, 419 00:20:17,175 --> 00:20:19,050 and we look at our website 420 00:20:19,050 --> 00:20:22,320 and you can see that looks pretty much perfect 421 00:20:22,320 --> 00:20:24,990 and similar to what we've got here. 422 00:20:24,990 --> 00:20:26,400 Now, the only thing we need to add 423 00:20:26,400 --> 00:20:28,713 is just a little bit more margin. 424 00:20:29,760 --> 00:20:33,030 We should have a margin of five between these two sections 425 00:20:33,030 --> 00:20:36,210 and a margin of two between these two sections. 426 00:20:36,210 --> 00:20:39,510 So, I'm just going to add some margin top to the image, 427 00:20:39,510 --> 00:20:43,770 so, a size five margin to the image, 428 00:20:43,770 --> 00:20:46,140 so I can hit space on the class 429 00:20:46,140 --> 00:20:49,980 and then do margin top-5. 430 00:20:49,980 --> 00:20:51,960 And then for the text, 431 00:20:51,960 --> 00:20:56,960 I'm going to do a class of margin top-2. 432 00:20:57,000 --> 00:21:01,110 And now, we should have enough space in between everything, 433 00:21:01,110 --> 00:21:04,920 and it looks pretty much the same as the example. 434 00:21:04,920 --> 00:21:07,830 Now, we need to add in all of these outlets 435 00:21:07,830 --> 00:21:10,590 that have featured our startup. 436 00:21:10,590 --> 00:21:13,590 And you can see from the goal image here 437 00:21:13,590 --> 00:21:18,590 that we've got a 12 column grid here from Bootstrap, 438 00:21:19,110 --> 00:21:23,010 and they're each occupying a fourth of the space, 439 00:21:23,010 --> 00:21:24,990 but notice here where I've said 440 00:21:24,990 --> 00:21:27,630 it should take up three columns on desktop, 441 00:21:27,630 --> 00:21:30,630 but a full width 12 columns on mobile. 442 00:21:30,630 --> 00:21:32,940 So, it should be responsive, 443 00:21:32,940 --> 00:21:36,810 and we can find all these images in the images folder. 444 00:21:36,810 --> 00:21:40,653 Let's go ahead and add that below this container. 445 00:21:41,820 --> 00:21:46,260 In order to create the Bootstrap 12 column layout system, 446 00:21:46,260 --> 00:21:49,650 the first thing we always need is a container. 447 00:21:49,650 --> 00:21:54,030 So, let's create a div of class container. 448 00:21:54,030 --> 00:21:56,970 And inside here is where we need our div 449 00:21:56,970 --> 00:22:00,060 that has a class of row. 450 00:22:00,060 --> 00:22:03,000 So now, we're ready to create our columns. 451 00:22:03,000 --> 00:22:07,440 Each of the columns are going to be three columns 452 00:22:07,440 --> 00:22:12,440 in the desktop format, so that's col-large or lg, 453 00:22:14,400 --> 00:22:18,330 and it's going to be -3, but on mobile, 454 00:22:18,330 --> 00:22:23,330 so col-sm, small is going to be full width, so 12. 455 00:22:24,000 --> 00:22:27,000 And inside here we can place our image, 456 00:22:27,000 --> 00:22:29,040 which is from the images folder, 457 00:22:29,040 --> 00:22:31,377 and we're going to start off with TechCrunch, 458 00:22:31,377 --> 00:22:35,340 and I'm going to add the alt text as that. 459 00:22:35,340 --> 00:22:39,903 Now, I'm going to copy this and paste it three times. 460 00:22:40,770 --> 00:22:43,740 And now, I'm just going to replace each of these images 461 00:22:43,740 --> 00:22:45,450 with the ones that we have here. 462 00:22:45,450 --> 00:22:49,023 So Mashable, Business Insider, and TNW. 463 00:22:50,100 --> 00:22:53,730 All right, so now, we should have all of our images, 464 00:22:53,730 --> 00:22:56,133 but they are a little bit large. 465 00:22:57,150 --> 00:23:00,330 One thing we can do is we can limit their height 466 00:23:00,330 --> 00:23:02,910 so that they are all equal in height 467 00:23:02,910 --> 00:23:06,870 instead of having this uneven start and end line. 468 00:23:06,870 --> 00:23:09,510 So, I'm going to set the height to 30, 469 00:23:09,510 --> 00:23:13,710 and that should be enough height to be visible, 470 00:23:13,710 --> 00:23:18,660 but not so much height that it takes up too much space. 471 00:23:18,660 --> 00:23:21,420 And that looks pretty good. 472 00:23:21,420 --> 00:23:24,600 So now, we're done with our testimonial section 473 00:23:24,600 --> 00:23:27,120 and we are on our penultimate section, 474 00:23:27,120 --> 00:23:29,250 which is the pricing plan. 475 00:23:29,250 --> 00:23:31,020 And as you'll remember, 476 00:23:31,020 --> 00:23:35,823 Bootstrap has the pricing plan section right here. 477 00:23:36,840 --> 00:23:38,370 And these three cards 478 00:23:38,370 --> 00:23:40,830 are the ones that we want to get hold of. 479 00:23:40,830 --> 00:23:44,790 So, let's inspect on that and find the area that we need, 480 00:23:44,790 --> 00:23:47,220 which is probably this div row. 481 00:23:47,220 --> 00:23:51,180 So, let's copy it and put it inside the pricing section, 482 00:23:51,180 --> 00:23:53,070 but as you remember, 483 00:23:53,070 --> 00:23:56,940 a div row needs to go inside a container. 484 00:23:56,940 --> 00:23:58,920 So, let's go ahead and do that. 485 00:23:58,920 --> 00:24:01,316 And if we look at our pricing table, 486 00:24:01,316 --> 00:24:04,440 then it's already in and looks pretty good. 487 00:24:04,440 --> 00:24:08,100 The other section we need is a title for the pricing table, 488 00:24:08,100 --> 00:24:10,950 which is this area right here, 489 00:24:10,950 --> 00:24:15,450 and this is the div that contains all of that content. 490 00:24:15,450 --> 00:24:19,050 So, let's just copy it and put it at the beginning 491 00:24:19,050 --> 00:24:22,590 of our container right here. 492 00:24:22,590 --> 00:24:26,640 So now, we've pretty much got the pricing table down. 493 00:24:26,640 --> 00:24:29,700 We just need to update all of the text here 494 00:24:29,700 --> 00:24:33,360 to the ones that we have in our copy. 495 00:24:33,360 --> 00:24:34,530 So, I'm going to do this, 496 00:24:34,530 --> 00:24:37,080 again quickly I'm going to fast forward 497 00:24:37,080 --> 00:24:38,703 and replace all the text. 498 00:24:47,160 --> 00:24:50,280 All right, so now, all the text has been replaced, 499 00:24:50,280 --> 00:24:51,540 and you should see 500 00:24:51,540 --> 00:24:54,540 all of that text inside the pricing section. 501 00:24:54,540 --> 00:24:56,940 So now, we need to update the design a little bit, 502 00:24:56,940 --> 00:25:01,940 and the main difference is the color scheme here 503 00:25:01,980 --> 00:25:04,320 is all using the bootstrap primary color, 504 00:25:04,320 --> 00:25:05,910 which is this blue, 505 00:25:05,910 --> 00:25:10,140 but we need to change it all to the dark kind of color, 506 00:25:10,140 --> 00:25:12,284 which is this kind of black color. 507 00:25:12,284 --> 00:25:14,880 And if you look inside the pricing goal, 508 00:25:14,880 --> 00:25:18,243 you can see the parts that we need to change. 509 00:25:19,230 --> 00:25:21,000 This needs to become outline dark, 510 00:25:21,000 --> 00:25:23,040 this needs to be button dark, button dark, 511 00:25:23,040 --> 00:25:24,930 and this also needs to be dark. 512 00:25:24,930 --> 00:25:28,776 A shortcut here is to simply use the Ctrl + F on Windows 513 00:25:28,776 --> 00:25:33,776 or Command + F on Mac in order to bring up our search bar. 514 00:25:34,080 --> 00:25:36,610 And if we search for the word primary 515 00:25:37,470 --> 00:25:39,780 and we replace it with dark, 516 00:25:39,780 --> 00:25:43,020 then we can actually go through each of these examples 517 00:25:43,020 --> 00:25:45,930 and see if we want to replace it. 518 00:25:45,930 --> 00:25:50,930 What I recommend doing is to actually do this one by one 519 00:25:51,120 --> 00:25:53,220 instead of doing replace all 520 00:25:53,220 --> 00:25:56,117 because that way you can see which parts you're replacing. 521 00:25:56,117 --> 00:26:00,090 And many times I've done replace all only to find out 522 00:26:00,090 --> 00:26:03,030 that I've messed up the entire project in some big way. 523 00:26:03,030 --> 00:26:06,480 So, just a word of advice, go through it one by one, 524 00:26:06,480 --> 00:26:07,860 make sure that it makes sense, 525 00:26:07,860 --> 00:26:10,320 and it's the right area that you're changing. 526 00:26:10,320 --> 00:26:12,210 But hopefully, when we go back to our website, 527 00:26:12,210 --> 00:26:15,600 we can see we've now updated all of the right places 528 00:26:15,600 --> 00:26:18,330 to this dark color scheme. 529 00:26:18,330 --> 00:26:21,510 Coming back to our pricing goal, 530 00:26:21,510 --> 00:26:25,260 we can see that this title needs to be an H2, 531 00:26:25,260 --> 00:26:28,140 and this subtitle needs to be a paragraph element. 532 00:26:28,140 --> 00:26:30,720 So, let's go into our section 533 00:26:30,720 --> 00:26:33,150 and make sure that is the case 534 00:26:33,150 --> 00:26:37,500 because when we copied it over, it actually gave us an H1. 535 00:26:37,500 --> 00:26:39,180 Now, the styling is not going to change 536 00:26:39,180 --> 00:26:42,960 because it actually comes from the display four class, 537 00:26:42,960 --> 00:26:45,060 so, you won't see the size change that much 538 00:26:45,060 --> 00:26:46,980 or the color scheme 539 00:26:46,980 --> 00:26:51,810 because it is actually not dependent on the HTML element, 540 00:26:51,810 --> 00:26:54,570 and this happens very frequently with Bootstrap. 541 00:26:54,570 --> 00:26:57,780 So, we're able to adjust that pretty easily. 542 00:26:57,780 --> 00:27:00,360 And now, we're ready for our final section, 543 00:27:00,360 --> 00:27:01,980 which is the footer. 544 00:27:01,980 --> 00:27:05,370 So, let's find ourselves the footer snippets, 545 00:27:05,370 --> 00:27:08,940 and let's find the one that looks like one that we want 546 00:27:08,940 --> 00:27:12,660 or one that is similar to the one in the example, 547 00:27:12,660 --> 00:27:14,700 which is this one right here. 548 00:27:14,700 --> 00:27:16,890 And let's find the container 549 00:27:16,890 --> 00:27:21,123 that we can copy and put in into our footer section. 550 00:27:22,230 --> 00:27:26,040 So now, straight up, we can see our footer section show up, 551 00:27:26,040 --> 00:27:30,810 and all we need to do is to adapt it to our design. 552 00:27:30,810 --> 00:27:33,180 Firstly, you'll notice there's this area 553 00:27:33,180 --> 00:27:35,520 that you can't really see, but when you hover it, 554 00:27:35,520 --> 00:27:37,470 it seems to be clickable. 555 00:27:37,470 --> 00:27:39,810 And if we refer to our code, 556 00:27:39,810 --> 00:27:41,880 you can see this is actually a link 557 00:27:41,880 --> 00:27:44,310 that links to the Bootstrap logo. 558 00:27:44,310 --> 00:27:47,010 So, let's go ahead and delete that, 559 00:27:47,010 --> 00:27:51,210 but let's change this paragraph class to copyright, 560 00:27:51,210 --> 00:27:54,630 and then the name of our company, TinDog. 561 00:27:54,630 --> 00:27:57,990 And I'm going to leave these links alone 562 00:27:57,990 --> 00:27:59,250 because I don't know, 563 00:27:59,250 --> 00:28:01,703 maybe in the future you'll want to use this website 564 00:28:01,703 --> 00:28:05,550 and put in some different links to different sections, 565 00:28:05,550 --> 00:28:07,980 but for now, it just kind of looks more or less 566 00:28:07,980 --> 00:28:09,090 the right kind of style 567 00:28:09,090 --> 00:28:12,090 that we would want on a startup website. 568 00:28:12,090 --> 00:28:13,290 So, let's leave that alone, 569 00:28:13,290 --> 00:28:16,440 but let's get rid of this border line here. 570 00:28:16,440 --> 00:28:18,270 And this borderer came from the footer, 571 00:28:18,270 --> 00:28:20,700 so, there should be a hint in here. 572 00:28:20,700 --> 00:28:22,650 If we look at the footer element, 573 00:28:22,650 --> 00:28:25,140 you can see there's the border top class, 574 00:28:25,140 --> 00:28:27,480 which again comes from Bootstrap, 575 00:28:27,480 --> 00:28:29,970 but it's a really simple way of adding some borders 576 00:28:29,970 --> 00:28:31,860 to the top left or right, 577 00:28:31,860 --> 00:28:34,860 but once we delete it, then that's completely gone. 578 00:28:34,860 --> 00:28:36,540 So, the final thing we need to do, 579 00:28:36,540 --> 00:28:40,530 is just to add that gradient background to the footer area, 580 00:28:40,530 --> 00:28:42,450 and then we are pretty much done. 581 00:28:42,450 --> 00:28:45,060 So, let's take that section footer 582 00:28:45,060 --> 00:28:47,703 and add the class gradient-background. 583 00:28:49,800 --> 00:28:51,450 And now, hit save. 584 00:28:51,450 --> 00:28:56,070 And we should see that we have almost the same website 585 00:28:56,070 --> 00:28:58,650 as the final result. 586 00:28:58,650 --> 00:29:00,810 The only thing that we need to do now 587 00:29:00,810 --> 00:29:04,320 is to get rid of this little bit of space at the bottom. 588 00:29:04,320 --> 00:29:05,670 And the fact that it's white 589 00:29:05,670 --> 00:29:07,923 should give you a hint as to what it is. 590 00:29:09,150 --> 00:29:14,150 If we select our footer section and we go into the section, 591 00:29:14,730 --> 00:29:16,650 look inside the container, 592 00:29:16,650 --> 00:29:19,350 at some point our hover is going to show us 593 00:29:19,350 --> 00:29:21,176 where that margin comes from. 594 00:29:21,176 --> 00:29:23,662 And right here you can see that orange box 595 00:29:23,662 --> 00:29:26,141 showing that margin at the bottom. 596 00:29:26,141 --> 00:29:27,750 So, if we select it, 597 00:29:27,750 --> 00:29:31,080 we should see there are some margin classes applied. 598 00:29:31,080 --> 00:29:32,490 So, there's a margin top, 599 00:29:32,490 --> 00:29:34,230 which I think we should probably keep 600 00:29:34,230 --> 00:29:36,660 'cause it adds a good amount of spacing 601 00:29:36,660 --> 00:29:38,370 between the different sections, 602 00:29:38,370 --> 00:29:41,070 but the margin bottom we could probably get rid of 603 00:29:41,070 --> 00:29:44,430 so that we don't have that white space down there. 604 00:29:44,430 --> 00:29:49,430 So, let's find this my-5 class in our footer element, 605 00:29:49,890 --> 00:29:51,300 and it's right here, 606 00:29:51,300 --> 00:29:56,300 and let's change it instead of y to just having it on top. 607 00:29:56,670 --> 00:29:59,460 And now, let's hit save and refresh. 608 00:29:59,460 --> 00:30:03,330 And you can see we have now completed our design 609 00:30:03,330 --> 00:30:05,100 for our website. 610 00:30:05,100 --> 00:30:06,720 In less than half an hour, 611 00:30:06,720 --> 00:30:10,980 we've managed to build a incredibly complex 612 00:30:10,980 --> 00:30:15,000 and beautiful website for our TinDog startup. 613 00:30:15,000 --> 00:30:16,530 I hope our clients will be pleased 614 00:30:16,530 --> 00:30:18,900 because we've created this amazing, 615 00:30:18,900 --> 00:30:22,140 incredibly modern looking website for them. 616 00:30:22,140 --> 00:30:23,220 And we should be pleased 617 00:30:23,220 --> 00:30:26,520 'cause it only took us so little time to do 618 00:30:26,520 --> 00:30:30,000 by leveraging the power of the bootstrap components 619 00:30:30,000 --> 00:30:33,720 and using the different helper classes, utilities, 620 00:30:33,720 --> 00:30:36,600 as well as snippets that they provide. 621 00:30:36,600 --> 00:30:38,100 Hopefully, this gives you an insight 622 00:30:38,100 --> 00:30:39,624 into how we can use Bootstrap 623 00:30:39,624 --> 00:30:43,710 to create beautiful, complex websites quickly. 624 00:30:43,710 --> 00:30:47,700 And also, you see the difference between what css Grid, 625 00:30:47,700 --> 00:30:50,850 Flexbox, and Bootstrap are all good for, 626 00:30:50,850 --> 00:30:54,750 they all have different strengths and weaknesses, 627 00:30:54,750 --> 00:30:57,067 and I think Bootstrap is really good 628 00:30:57,067 --> 00:30:59,130 for throwing some components down 629 00:30:59,130 --> 00:31:01,800 and creating something that looks incredibly modern 630 00:31:01,800 --> 00:31:03,330 very, very quickly. 631 00:31:03,330 --> 00:31:06,540 Whereas Flexbox and Grid are great when you want to get into 632 00:31:06,540 --> 00:31:10,800 the nitty-gritty of creating a very, very custom layout 633 00:31:10,800 --> 00:31:12,900 for your website. 634 00:31:12,900 --> 00:31:15,240 So, well done on completing this section. 635 00:31:15,240 --> 00:31:17,070 And in the next section, 636 00:31:17,070 --> 00:31:20,220 we've got the capstone project for css. 637 00:31:20,220 --> 00:31:22,820 So once you're ready, head over to the next section.