<!doctype html>
<html class="no-js" lang="en-gb">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Place favicon.ico in the root directory -->
</head>

<body>
    <!--[if lt IE 8]>
            <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade your browser</a> to improve your experience.</p>
        <![endif]-->

    <!-- Add your site or application content here -->

    <div class="demo-layout-transparent mdl-layout mdl-js-layout">
        <header class="mdl-layout__header mdl-layout__header--transparent">
            <div class="mdl-layout__header-row">
                <!-- Title -->
                <span class="mdl-layout-title">DREA</span>
                <!-- Add spacer, to align navigation to the right -->
                <div class="mdl-layout-spacer"></div>
                <!-- Navigation -->
                <nav class="mdl-navigation">
                    <a class="mdl-navigation__link" href="">Explore</a>
                    <a class="mdl-navigation__link" href="">Search</a>
                    <a class="mdl-navigation__link" href="">Analyze</a>
                </nav>
                <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable
                  mdl-textfield--floating-label mdl-textfield--align-right">
                    <label class="mdl-button mdl-js-button mdl-button--icon" for="fixed-header-drawer-exp">
          <i class="material-icons">search</i>
        </label>
                    <div class="mdl-textfield__expandable-holder">
                        <input class="mdl-textfield__input" type="text" name="sample" id="fixed-header-drawer-exp">
                    </div>
            </div>
    </div>
    </header>
    <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">DREA</span>
        <nav class="mdl-navigation">
            <a class="mdl-navigation__link" href="">Explore</a>
            <a class="mdl-navigation__link" href="">Search</a>
            <a class="mdl-navigation__link" href="">Analyze</a>
        </nav>
    </div>
    <main class="mdl-layout__content">
    </main>
    </div>

    <!-- css -->
    <link rel="stylesheet" href="../includes/core/normalize/normalize.css" />
    <link rel="stylesheet" href="../includes/core/fontawesome/css/font-awesome.min.css" />
    <link rel="stylesheet" href="../includes/core/mdl/material.min.css" />
    <link rel="stylesheet" href="../includes/core/material-icons/material-icons.css" />
    <link rel="stylesheet" href="css/main.min.css" />

    <!-- js -->
    <script src="../includes/core/modernizr/modernizr-2.8.3.min.js"></script>
    <script src="../includes/core/jquery/jquery-3.1.1.min.js"></script>
    <script src="../includes/core/mdl/material.min.js"></script>
    <script src="../includes/core/d3/d3.min.js"></script>
    <script src="js/main.min.js"></script>
</body>

</html>
