Album Boxes Exercise & Solution

[00:00:00]
>> Not so bad, right? You've been learning some stuff, how to apply it, right? Okay, so the last thing that we need style here on this page now is these album boxes. So we have this album box down here, the new album It Was All a Dream, Order Now.

[00:00:18]
That one is correct. It's just fine the way it is. We don't need to change anything on it. But this one here shows announced new tour get tickets, that one changes. So we need to have a background image on that box. Notice that the height of that box changes a little bit as we go from one break point to another, yeah.

[00:00:43]
So, we got a little bit more height to that box, whereas the album box is not changing, okay? And these should stretch all the way across the screen, so they match our ridiculous buttons. [LAUGH] Okay? Makes sense? And while you're there, drop some bolts here. In where they're called for so you're gonna do two things then one I'd like you to style up the show's announced new tour box.

[00:01:15]
Okay? So that it reflects these and you're gonna drop in these lightning bolts here they go around the it was all a dream box All right, well we are almost done with the small things that we need for our difficult design and I hope this all went well for you.

[00:01:35]
The last part now is putting in these lightning bolts. And styling up this box that says New Tour on it, as opposed to the one that says It Was All a Dream, which should stay the way it has been. So what I did for my answers for this, we first of all we put in these lightning bolts that are here on the page.

[00:01:57]
And I just dropped those in where the comment was there was a comment that said put a lightning bolt here. So I dropped in those lightning bolts just as the SVG version of this we don't need a hover state so it's fine to use the image. If you put it in as an SVG directly, that's okay too.

[00:02:13]
And I gave it a class of bolt hyphen LG for this is the big bolt as opposed to the ones we had earlier which were a little bolts. And then I wrote a CSS class for that. And I decided that 155 pixels was the right size. I gave it some margin around it and centered it on the page.

[00:02:33]
Pretty straightforward, right? Okay, so there's our two bolts. Now how about these boxes the box for the new tour and It Was All a Dream. How did you guys approach those? Did you write a whole bunch of new styles for the new tour box?
>> Added a class.

[00:02:51]
>> We added a class, right? So, we did that same idea. So what I did was for, It Was All a Dream that new album, it just still has the class of album, but this other one here. We've got it all set up. It is now has a class of album and mag line because, of course, those are the magenta line guys, right?

[00:03:16]
And so, then we just need to style that up. So I've styled that as putting it in as a background image. So there's the background image and I said no repeat. Okay, so it doesn't repeat itself. And then we said the background size was cover. So in other words, we wanted to be sure to stretch to cover the entire width of the thing.

[00:03:36]
Make sense? Okay. When we get things that are bigger. Like this. I think we added some styles down here. Yeah, I changed the height of it to 300 pixels. All right. And I don't think I have anything down here for desktop. I don't. Okay. So we just set that up there.

[00:04:03]
You, of course, can put that media query inside of the album layer if you wish. Make sense? So we're all done we, now have all that stuff styled it's like half the webpage. Boom, boom, boom, we're done.