Small Elements Exercise

[00:00:00]
>> We are ready to start working on our difficult design. And I have here some screenshots for how that will look. We'll start here, this is the desktop dimension for what we're building. So you can see we've reused a lot of things that we've already built. So we've got some buttons here we've already built.

[00:00:20]
We've got a couple of boxes we've already built, but we have some crazy new things that are going on here. You'll notice that our tracklist has moved. So we have a tracklist that goes to the side of our album. When we click the button there, it's gonna fly out.

[00:00:36]
Wow, that's a whole thing. Obviously these diamond pictures, that's a whole thing to think about. Here's how it's going to look on tablet, all right? Kinda the same thing all stacked up. And then on mobile, notice our tracklist does something completely different. Instead of flying out to the side next to our album it's gonna be down here and open downwards pushing content here down the page, make sense?

[00:01:06]
Now a lot of crazy things that are going on here. But a lot of things we can reuse. So we can reuse our audio player, for example, that's gonna stay. We've pulled the images out of our reviews and we've replaced a couple of them with lightning bolts, okay?

[00:01:22]
So, there's a couple of little things in there like that. So that is where we're headed here in these designs, and of course you can refer to these screenshots at any point in time. So where we're gonna start with this is the so-called small elements. And because this difficult design has two major areas of focus, which is gonna be that album cover and the tracklist, and the diamond images.

[00:01:46]
So we're gonna spend a lot of time on those two things. But the rest of this, there's a lot of stuff that's being reused. So what I would like for you to do is I've given you links to a bunch of stuff here. What we're gonna do is we're gonna build these pages here.

[00:02:04]
So, here's the mobile version of this, we've got some reviews up here on the top. On the tablet version, we have some lightning bolts that are appearing. We have a box that's gonna have the guise here in the background. But it looks like kinda the same sort of box that we have down here already, it's just this one has a background, okay?

[00:02:27]
We have a big button that goes all the way across, we have these lightning bolts and the footer is the same as what we had before, okay? So this is what I'm calling the quote small elements. I've just put them all together in a code pen and we need to work with the styling that we already have from our medium design, and then we're gonna modify it a bit here for our more advanced design.

[00:02:53]
And then when you get to, I guess this is desktop, it's gonna look ridiculous, but don't worry about that. [LAUGH] Don't let that bother you, this is not permanent. So, that is what we're going to do here. What I've given you to start with is your beginning code pen.

[00:03:11]
You'll see that things look a little bit odd here. This is some of that lingering styling from the reviews from our medium design, right? I've also given you an image for the new tour box. So you can copy that URL, that'll be the image that we wanna use on the tour box.

[00:03:31]
And we also have a link to the SVG code here for the lightning bolt, makes sense? Okay, so where are we gonna start is we are going to start here on this page and I'm actually gonna ask you guys to do a little bit of this as well.

[00:03:51]
So first of all, what I'd like for you to do is see what you can do about styling these buttons, photos from the road and the magenta line official store. And the way those buttons should look is basically they are as wide as the box above them, okay?

[00:04:10]
And that button might look familiar to you. Maybe we have the button kinda like that already, yeah? It's a link photos from the road and the magenta line official store. So let's give you like five minutes. See what you can do about styling those two buttons right here inside of this code pen.

[00:04:33]
So go ahead and go.