O'Reilly logo

Web Design Blueprints by Benjamin LaGrone

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Styling the ground objects

Now that you have added the fa-* objects, let's work on the ground and earth elements. These are cool, and you are in for a surprise when you see it come together. First, start with the earth element.

This involves a few steps: float it to the left, give it a font size of 1000vw (viewport width), a width of 100%, a height of 100%, and a fixed position 0px from the bottom. Next, we will assign some style attributes to the actual fa-globe element itself, make its position relative, floated to the left, 423px from the bottom, and 350% from the right.

Finally, one more step for the earth elements, we will add some style to a pseudo element after fa-globe with the land class. Set it to have an absolute position, a blank space ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required