index.html

<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>A Basic HTML5 Template</title>
        <meta name="WAMD" content="A simple web app layout environment using Material Design.">
        <meta name="Adam Spelman" content="aswebdev">
        <link rel="icon" href="/favicon.ico">
        <link rel="icon" href="/favicon.svg" type="image/svg+xml">

        <link rel="stylesheet" href="mdl/material.min.css">
        <link rel="stylesheet" href="style.css">
        <script src="mdl/material.min.js"></script>
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"> 
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
    </head>

<body>

    <!-- Always shows a header, even in smaller screens. -->
<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
    <header class="mdl-layout__header">
      <div class="mdl-layout__header-row">
        <!-- Title -->
        <span class="mdl-layout-title">App name</span>
        <!-- Add spacer, to align options button to the right -->
        <div class="mdl-layout-spacer"></div>

        <!-- Options Button-->
        <button id="optionsbtn"
        class="mdl-button mdl-js-button mdl-button--icon">
        <i class="material-icons">more_vert</i>
        </button>

        <!-- Options Menu-->
        <ul class="mdl-menu mdl-menu--bottom-right mdl-js-menu mdl-js-ripple-effect"
         for="optionsbtn">
        <li class="mdl-menu__item">Option 1</li>
        <li class="mdl-menu__item">Option 2</li>
        <li disabled class="mdl-menu__item">Disabled Option 3</li>
        <li class="mdl-menu__item">Option 4</li>
        </ul>
    </header>

    <!-- Main menu/slide-in-menu -->
    <div class="mdl-layout__drawer">
      <span class="mdl-layout-title"><b>Menu</b></span>
      <nav class="mdl-navigation">
        <a class="mdl-navigation__link" href="">Link 1</a>
        <a class="mdl-navigation__link" href="">Link 2</a>
        <a class="mdl-navigation__link" href="">Link 3</a>
        <a class="mdl-navigation__link" href="">Link 4</a>
      </nav>
    </div>


<div class="mainstuff">
    <main class="mdl-layout__content">
    <div class="page-content">
        <h3>Hello World</h3>
        <h4>Test login page</h4>
        <img src="https://cdn-icons-png.flaticon.com/512/147/147142.png" width="200" height="200">

        <!-- Simple Textfield -->
        <form action="#">
            <div class="mdl-textfield mdl-js-textfield ltf">
            <input class="mdl-textfield__input" type="text" id="sample1">
            <label class="mdl-textfield__label" for="sample1">Username</label>
            </div>
        </form>
    
         <!-- Simple Textfield -->
         <form action="#">
            <div class="mdl-textfield mdl-js-textfield ltf">
            <input class="mdl-textfield__input" type="password" id="sample2">
            <label class="mdl-textfield__label" for="sample2">Password</label>
            </div>
        </form>

    </div>


</main>
</div>


</div>


</body>
</html>