material-design-kit
Version:
Interactive web components inspired from Material Design, using vanilla CSS, JavaScript and HTML.
36 lines (32 loc) • 774 B
HTML
---
title: Blend image header
---
{% extends "layouts/default.html" %}
{% block page %}
<style>
.mdk-header {
height: 500px;
}
.mdk-header__bg-front {
background-image: url('assets/images/photo-1463580009491-9111ca5c3f84.jpg');
}
</style>
<div class="mdk-header js-mdk-header bg-primary"
data-effects="waterfall blend-background"
data-condenses>
<div class="mdk-header__content">
<div>
<button class="navbar-toggler" type="button">
<span class="material-icons">menu</span>
</button>
</div>
</div>
</div>
<div class="container">
<div class="content">
{% include '_header.html' %}
<hr>
{% include '_sample-content.html' %}
</div>
</div>
{% endblock %}