I'm going to show you the solutions to all the different case questions you saw. Again, if you haven't gone in and at least given these a try or pause the video and give them a shot. All right. Looking at the sample code, can you trace the CSS entries back to the HTML? I would just make sure you can do that for at least a few of those and you understand how the biggies work like element, Id, and class, Then how do we round the corners on the divs? Well, this is so much easier than it was in one, we can just go and we do a search for Catalog part and if I'm not mistaken, I think I remember that this is border-radius, let's say we make it 25 pixels. Again no huge bonus points for remembering that. If you don't remember how to declare a border-radius, go and just do a Google search for it and that's fine with me. I didn't the first few times. Okay, that's nice, that works. What about all this other stuff we did? These are just a few things I added that you can take a look at, and we'll dive into in the subsequent weeks, and you can find this is prototype number three for [inaudible] which you can find in the course resources. Now, how did I do this overlay thing? This is a little bit trickier. So basically I did a few things. I had to create this thing that appears in the middle of the div, and the way that I did that is that I went to the individual Divs, like Catalog part, and you can see now that inside of the div there is another div called overlay. So inside of that, there's a paragraph which in turn has various styling.So that's where all this text is coming from and that gives me an anchor point to apply the additional styling. Now, we only want this to show on hover. So if you google you can find out about this but there's actually a hover attributes. So what's going on here is that, let's unpack this entry a bit. So we have the class Catalog part. Colon hover means when an item of class Catalog part isn't the hover state meaning that the mouse is over it like this, then what does this mean when we have a space and another element? What that means is that we're we're saying that, for all the overlay classes inside of Catalog part, when it's hovered over, change the opacity to 0.75, and what that does, it makes it more opaque. This is opacity 0.75 when I roll off, this is opacity zero meaning clear. Now how did I make that happen? Well, what I did was I created this overlay class and what you can see is there are these various positioning things that I fiddled with and then we have opacity zero. So by default, this thing is completely not visible. It has full opacity or I'm sorry, no opacity meaning it's completely clear. So that's basically how that works. Again, go ahead and fiddle around with this if you will then look for protocell number three in the case solutions, and you can see all this stuff and more getting implemented, and this is a good chance to practice your CSS skills and start thinking about how you might apply them to future projects and other fiddles. One other pro tip, if you feel overwhelmed with all the stuff in here, my recommendation is just go through and create a blank JS Fiddle, and then put one single div and start pairing out with CSS. If you feel like you're just overwhelmed with all the stuff, just take the items that you're interested in, put them in a blank JSFiddle and work with them there. I do it all the time, and that is a perfectly okay thing to do. In fact it's a really good prelude to one of the debugging approaches that we'll look at in the subsequent week. All right. Have fun with the case, good luck. Those are a few ideas on a solution to the case but think about your own solution, post to the forums, I would love to see your work.
