All right welcome back.
So we're going to start a new project here using bootstrap.
I wanted to make something that didn't look very bootstrapped.
And the whole idea of this Web site it's called Museum of candy.
It's for a fictional Instagram museum.
I'm doing air quotes but you probably can't see me say see me do that when I say museum.
There are these things.
At least in the big cities in the U.S. that have been popping up where you pay money and you wait in
line and you walk through a couple of rooms that are decorated in lots of colors and different props.
And you take pictures usually for Instagram and I'm not a huge fan personally because I'm kind of disappointed
by them because they have names like Museum of candy that sort of that's a fictional one.
But then it's not really a museum of candy and I want to go to a museum of candy.
I love candy or whatever the other things are.
So I'm kind of disappointed in that it's not.
I'd love to go to a real museum of candy and try a bunch of them on the history.
But no it's just a bunch of photos.
But to be clear.
Museum of candy is not a real company.
It's fictional.
Here's the web site I went for sort of a trendy look minimal light pastel colors some nice photos.
They found that we can actually use for free.
So the site doesn't really say much as far as the content of the copy is very basic.
It's just Lorem Ipsum actually.
Aside from this a block of head to head is here.
But it is very responsive.
You'll notice there's a naff bar appear changes colors a hover but it's transparent at the moment.
And as soon as I scroll it fills in.
So that's a nice little trick.
It also is fixed to the top.
It's not terribly difficult to do.
Then we have this heading section just at the title of our museum of candy fancy little trendy slashes.
We've got this photo on the right.
Then the main layout of the page is these the large square photos that we forced to be square.
And then on the right we have text and an icon and two more text centered vertically as well.
And that's pretty much it.
But then you'll see that it's nice and responsive and at some point this text completely goes away and
we end up with this taking up 100 percent.
It looks nice and keep going further.
So you can see that our content scales relatively nicely and then we hit this break point here where
things stack.
So our text goes above the images text goes above the images and that actually requires a little bit
of work because you probably notice here for example the image is on the left.
It comes first and then we have the text.
Then this text comes first before this image.
So there is sort of alternating.
But then when we collapse it you'll see that the text always goes on top of the corresponding image.
So that involves a little bit of work.
Bootstrapped makes it easy to do that.
But we have to add some classes to change the order once things collapse.
And in addition the nav bar does shrink down and collapse into this we could add a background if you
prefer.
I thought it looked kind of nice because we have this dead empty negative space here.
And that's honestly it.
So it's not terribly difficult but it's not that obvious that it's made with bootstrap.
There's none of the default components none of the fonts the colors none of the buttons.
The only thing I guess is that the icon right here to toggle it but otherwise everything is pretty customized.
And even if it's simple I think it looks pretty nice and trendy these days these photos by the way are
from a Web site called Splash.
I've mentioned it before.
Great resource free and open to be used for whatever purposes commercial or noncommercial.
I put some of my own photos up there and yeah I just highly recommend checking it out.
So that's our goal here to create this layout where if we think about the grid involved here it's not
that challenging or doesn't seem challenging.
This is 50 percent 50 percent 50 percent 50 percent.
One thing I didn't hit on yet this icon does disappear.
Right there it goes away it takes up too much space.
I just got rid of it and we get to use that display utility to take care of it.
Anyway we're going to start in the next video with the nav bar and the background color.
Let me just quickly run through the starter code.
So here's what you have in this folder.
Museum of candy.
Is the final and the starter.
So we're working with the starter and it contains index that HDMI.
I already gave you bootstrap.
But I also included the fonk we use it's called nito.
New new neato new Nito however you pronounce it.
I included the font and bootstrap is in here.
And there's a custom stylesheet that is currently empty.
I just added it in.
So we have a place to work.
And other than that it's just plain template to start on there is an images folder that contains images.
I don't think they're going to load in here but there's this first image will go over them.
And there's also an image for the icon right here.
So in the next video we'll start the project but I just want to introduce it here.
We're going to begin with the nav bar and getting it to become transparent change the font.
There's a bunch of things we have to do to make it look nice.
All right.
That's coming up.