O'Reilly logo

Mastering Sass by Luke Watts

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

Image banner

Next, we'll add a full width image banner. I'm not a fan of sliders or carousels. I think they're bad for performance, pointless on mobile devices, and generally a bad user experience. I much prefer one image that is carefully chosen along with a short catchy call to action.

For this website we'll simply use placeholder images throughout, so we'll do the same here. However, the text should be catchy. It should set the tone of the website for the visitor.

First let's add the following markup just before the <main> element in index.html:

<!-- BEGIN .image-banner --> <div class="image-banner" style="background-image: url('http://placehold.it/1280x400');"> <div class="image-banner-overlay"> <div class="image-banner-caption"> <h2 class="image-banner-caption-title"> ...

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