Album Cover Styles

[00:00:01]
>> Okay, so if you guys will go to 4D part 5, final styling of the elements, open up that code pen and fork it to your account. We're ready for the last part of this which is adding an album cover. Remember that album cover is going to show up above.

[00:00:23]
Above the audio player, there we go. Kind of like that. The track list is not in the right place on this, but the cover will be on the top and the audio player will be underneath, okay? So let's go through how we're gonna go about adding that. If you've forked your code pen here, you'll see that we have the URL here at the top of the 4D audio player, part E, style, everything else.

[00:00:55]
And we can just copy that URL here. And we are going to add that before our audio player container. So we can put in, let's say, a section with a class of cover. And we can end that section, right after our audio player container here. And then for our image, we can just post that on in here, copy and paste in our album cover, and we can say for our alt text, album cover.

[00:01:46]
It was all a dream by Magenta Lime, okay? And then we have a little bit of styling to do here I'm gonna just add this style here inside of audio and what I'm going to do, because now I have this section with a class of cover that goes around that image and my audio player container.

[00:02:20]
If I can just take this audio player container and just change it to cover, a class of cover, and that'll group everything nicely. There's our album cover and there's our audio player right underneath. Sweet, so what I'd like for you to take away from this section is the following.

[00:02:40]
We went online we found an article that explained how to make an audio player without, hey look the audio player has a mute button, it has a play button, it has the little track for volume and for playing the track, right? And all those things look terrible, didn't look anything like we wanted it to look, but yet we were able to go in and apply our styling to that.

[00:03:03]
And the reason I'm bringing this to your attention is that you are going to do the same thing, but with the hamburger button