From the course: Creating a Responsive Web Design

Unlock this course with a free trial

Join today to access over 22,400 courses taught by industry experts.

Styling the footer

Styling the footer

- So now we're going to style the footer area, and there's one extra element we're going to add to the footer, and that's going to be a QR code. So, using a pseudo-element, just like we've been throughout this whole chapter, we're going to inject a QR code, align it to the left hand side of the footer, and then add our website's URL so that users will be able to find their way back to the website. So back in our CSS file, we're going to target the main footer element. Put in our brackets. And just like the how-to and atmosphere sections, I want to add a border here, just to separate this from the other sections. So we'll type border-top We're going to set this to one pixel solid style #ccc for a medium gray. Then a space. Next we're going to set position relative. This way we can position the QR code inside of this element. Essence to QR code has a specific height. We're going to come in here and add a minimum height. We're going to set this to 200 pixels. That way if there's not…

Contents