From the course: Creating a Responsive Web Design
Unlock this course with a free trial
Join today to access over 22,700 courses taught by industry experts.
Styling the footer - CSS Tutorial
From the course: Creating a Responsive Web Design
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
-
-
-
(Locked)
Strategy for printing3m 58s
-
(Locked)
Linking a CSS file for print2m 33s
-
(Locked)
Setting up the base styles4m 36s
-
(Locked)
Setting up the header4m 34s
-
(Locked)
Displaying URLS when printing6m 5s
-
(Locked)
Main section4m 41s
-
(Locked)
Atmosphere section2m 34s
-
(Locked)
Switching our img tags with CSS5m 5s
-
(Locked)
Styling the footer4m 24s
-
(Locked)
Setting page breaks with CSS2m 30s
-
(Locked)
-