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"> 
                Mastering Sass Swag 
            </h2> 
            <p class="image-banner-caption-body"> 
...