WEBVTT 00:00.260 --> 00:01.450 All right welcome back. 00:01.500 --> 00:04.140 So we're going to start a new project here using bootstrap. 00:04.140 --> 00:07.190 I wanted to make something that didn't look very bootstrapped. 00:07.470 --> 00:11.820 And the whole idea of this Web site it's called Museum of candy. 00:12.000 --> 00:15.270 It's for a fictional Instagram museum. 00:15.270 --> 00:20.050 I'm doing air quotes but you probably can't see me say see me do that when I say museum. 00:20.190 --> 00:21.300 There are these things. 00:21.290 --> 00:25.860 At least in the big cities in the U.S. that have been popping up where you pay money and you wait in 00:25.860 --> 00:31.870 line and you walk through a couple of rooms that are decorated in lots of colors and different props. 00:31.890 --> 00:39.090 And you take pictures usually for Instagram and I'm not a huge fan personally because I'm kind of disappointed 00:39.090 --> 00:44.970 by them because they have names like Museum of candy that sort of that's a fictional one. 00:45.180 --> 00:49.110 But then it's not really a museum of candy and I want to go to a museum of candy. 00:49.110 --> 00:52.610 I love candy or whatever the other things are. 00:53.130 --> 00:55.370 So I'm kind of disappointed in that it's not. 00:55.380 --> 00:59.730 I'd love to go to a real museum of candy and try a bunch of them on the history. 00:59.730 --> 01:01.350 But no it's just a bunch of photos. 01:01.560 --> 01:02.180 But to be clear. 01:02.180 --> 01:04.210 Museum of candy is not a real company. 01:04.200 --> 01:04.880 It's fictional. 01:04.890 --> 01:12.170 Here's the web site I went for sort of a trendy look minimal light pastel colors some nice photos. 01:12.180 --> 01:14.580 They found that we can actually use for free. 01:14.580 --> 01:20.400 So the site doesn't really say much as far as the content of the copy is very basic. 01:20.400 --> 01:22.150 It's just Lorem Ipsum actually. 01:22.290 --> 01:25.550 Aside from this a block of head to head is here. 01:25.650 --> 01:27.110 But it is very responsive. 01:27.120 --> 01:32.220 You'll notice there's a naff bar appear changes colors a hover but it's transparent at the moment. 01:32.220 --> 01:35.580 And as soon as I scroll it fills in. 01:35.580 --> 01:36.660 So that's a nice little trick. 01:36.660 --> 01:38.320 It also is fixed to the top. 01:38.340 --> 01:40.170 It's not terribly difficult to do. 01:40.230 --> 01:48.250 Then we have this heading section just at the title of our museum of candy fancy little trendy slashes. 01:48.330 --> 01:50.330 We've got this photo on the right. 01:50.460 --> 01:56.420 Then the main layout of the page is these the large square photos that we forced to be square. 01:56.670 --> 02:03.100 And then on the right we have text and an icon and two more text centered vertically as well. 02:03.300 --> 02:04.970 And that's pretty much it. 02:05.010 --> 02:14.260 But then you'll see that it's nice and responsive and at some point this text completely goes away and 02:14.260 --> 02:16.530 we end up with this taking up 100 percent. 02:16.540 --> 02:18.890 It looks nice and keep going further. 02:18.910 --> 02:24.130 So you can see that our content scales relatively nicely and then we hit this break point here where 02:24.130 --> 02:25.160 things stack. 02:25.180 --> 02:30.940 So our text goes above the images text goes above the images and that actually requires a little bit 02:30.940 --> 02:35.970 of work because you probably notice here for example the image is on the left. 02:35.970 --> 02:38.260 It comes first and then we have the text. 02:38.410 --> 02:41.300 Then this text comes first before this image. 02:41.320 --> 02:43.000 So there is sort of alternating. 02:43.120 --> 02:49.230 But then when we collapse it you'll see that the text always goes on top of the corresponding image. 02:49.280 --> 02:50.850 So that involves a little bit of work. 02:50.870 --> 02:52.420 Bootstrapped makes it easy to do that. 02:52.430 --> 02:56.520 But we have to add some classes to change the order once things collapse. 02:56.750 --> 03:03.230 And in addition the nav bar does shrink down and collapse into this we could add a background if you 03:03.230 --> 03:03.940 prefer. 03:04.040 --> 03:07.790 I thought it looked kind of nice because we have this dead empty negative space here. 03:08.210 --> 03:09.670 And that's honestly it. 03:10.070 --> 03:14.940 So it's not terribly difficult but it's not that obvious that it's made with bootstrap. 03:14.930 --> 03:21.200 There's none of the default components none of the fonts the colors none of the buttons. 03:21.200 --> 03:27.840 The only thing I guess is that the icon right here to toggle it but otherwise everything is pretty customized. 03:27.860 --> 03:33.080 And even if it's simple I think it looks pretty nice and trendy these days these photos by the way are 03:33.080 --> 03:35.000 from a Web site called Splash. 03:35.000 --> 03:36.290 I've mentioned it before. 03:36.290 --> 03:43.180 Great resource free and open to be used for whatever purposes commercial or noncommercial. 03:43.220 --> 03:48.080 I put some of my own photos up there and yeah I just highly recommend checking it out. 03:48.080 --> 03:52.940 So that's our goal here to create this layout where if we think about the grid involved here it's not 03:52.940 --> 03:55.700 that challenging or doesn't seem challenging. 03:55.760 --> 04:00.730 This is 50 percent 50 percent 50 percent 50 percent. 04:00.740 --> 04:04.750 One thing I didn't hit on yet this icon does disappear. 04:05.500 --> 04:08.500 Right there it goes away it takes up too much space. 04:08.500 --> 04:12.490 I just got rid of it and we get to use that display utility to take care of it. 04:12.520 --> 04:16.510 Anyway we're going to start in the next video with the nav bar and the background color. 04:16.810 --> 04:19.900 Let me just quickly run through the starter code. 04:19.900 --> 04:21.840 So here's what you have in this folder. 04:21.850 --> 04:22.970 Museum of candy. 04:23.080 --> 04:24.880 Is the final and the starter. 04:24.880 --> 04:29.110 So we're working with the starter and it contains index that HDMI. 04:29.290 --> 04:30.730 I already gave you bootstrap. 04:30.760 --> 04:35.040 But I also included the fonk we use it's called nito. 04:35.120 --> 04:38.410 New new neato new Nito however you pronounce it. 04:38.410 --> 04:41.900 I included the font and bootstrap is in here. 04:42.010 --> 04:45.100 And there's a custom stylesheet that is currently empty. 04:45.130 --> 04:46.180 I just added it in. 04:46.180 --> 04:47.840 So we have a place to work. 04:48.070 --> 04:56.330 And other than that it's just plain template to start on there is an images folder that contains images. 04:56.460 --> 05:00.560 I don't think they're going to load in here but there's this first image will go over them. 05:00.640 --> 05:04.900 And there's also an image for the icon right here. 05:04.900 --> 05:08.070 So in the next video we'll start the project but I just want to introduce it here. 05:08.170 --> 05:13.040 We're going to begin with the nav bar and getting it to become transparent change the font. 05:13.060 --> 05:15.430 There's a bunch of things we have to do to make it look nice. 05:15.430 --> 05:15.680 All right. 05:15.700 --> 05:16.290 That's coming up.