Ryoko headers
Ryoko headers

Ryoko headers

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia...

Material design lite

Just a basic example, added a card in the header.

Code

<div class="ryoko ryoko-50" style="background-image: url(https://images.unsplash.com/photo-1467044705596-744699fa8931?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1200&h=800&fit=crop&s=116c38dd55a30ae98c3c653a0434b5b8)">
    <div class="ryoko-body">
        <div class="mdl-card mdl-shadow--2dp" style="margin: 50px;">
            <div class="mdl-card__title">
                <h2 class="mdl-card__title-text">Ryoko headers</h2>
            </div>
            <div class="mdl-card__supporting-text">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
                Mauris sagittis pellentesque lacus eleifend lacinia...
            </div>
            <div class="mdl-card__actions mdl-card--border">
                <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="#content">
                    Get Started
                </a>
            </div>
        </div>
    </div>
</div>

Check out other frameworks